Happy coding

이번 주 진행한 것은 무엇인가? 전체적인 복습 진행(3주차부터 기본적인 개념들) 교육 쇼핑몰 프로젝트(온라인 쇼핑몰 주문, 결제 기능 개발) 개인 쇼핑몰 프로젝트(전체적인 스타일링 세팅, Header, 로그인, 회원가입 UI작업) React Native(전체적인 기능 마무리) CSS Media Query 이번 주 잘한 것은 무엇인가? 처음으로 RN 프로젝트 일정을 진행하였는데 큰 프로젝트는 아니었던 만큼 예상했던 일정대로 잘 진행되어 다행이었다. 바로 코드를 짜기보다는 시나리오를 그려보고 어떤 테스트 코드가 필요한지 확인 후 작업을 했었는데 테스트 코드를 작성하다 보니 테스트 코드를 배우기 전에는 항상 전체적인 기능들 화면들을 체크하며 최종 확인을 했었는데 이런 시간들이 많이 줄어들었다. 교육 쇼핑몰 ..

이번 주 배운 것은 무엇인가? 전체적인 복습 진행(2주차부터 기본적인 개념들 정독 시작) 교육 쇼핑몰 프로젝트(Jest 테스트 중요도 및 설계, Axios 통신) 개인 쇼핑몰 프로젝트(프로젝트 초기 구성 - Next.js기반, Atomic Design을 사용해볼 예정) React Native(Axios 403 Forbidden 에러 처리, Axios 초기 세팅, AsyncStorage) Next.js, SWR 기본적인 개념 이번 주 잘한 것은 무엇인가? React Native API 진행 전 Postman으로 테스트를 다 거친 후 Axios에서 정상적으로 작동해야하는 코드인데 계속 403 Forbidden 에러가 떠서 API 문서도 보고 요청한대로 잘 처리 했는데 계속 에러가 떠서 3일간 고생했었다. 백..

이번 주 배운 것은 무엇인가? 전체적인 복습 진행(1주차부터 기본적인 개념들 정독 시작) 쇼핑몰 프로젝트(Jest 테스트 중요도 및 설계, Axios 통신) HTML 속성 Jest 전역 설정하는 방법 React Native(QR 코드 인식 기능 및 RN 관련 Jest 새로운 문법) Recoil(Atoms, Selectors) 이번 주 잘한 것은 무엇인가? Jest 테스트 코드 관련하여 반복되는 mock을 할 때 반복하여 beforeEach를 써서 초기화 시켰던 코드들을 전역 설정을 통해 반복되는 코드들을 줄였으며 문서화 하였다. 아샬님의 코드에 끊임없는 "왜 이렇게 하셨을까"를 생각하며, 코딩 습관들을 익히려고 노력하며 머리속으로 정리 후 코드를 짜려고 노력했다. 강의를 들으면서 내가 만든 테스트 코드와..

이번 주 배운 것은 무엇인가? Design System Styled-components(props, attrs, global style, theme) React Native(React와 RN의 차이점, Splash 이미지 적용 방법, 프로젝트 세팅(Jest, styled-components, React Navigation TypeScript 등) Fetch와 Axios의 차이점(개인적으로는 둘의 큰 차이점은 문법적 표현 차이였던 것 같고 속도면으로는 Fetch가 Axios보다 더 빠르지만, Axios가 조금 더 에러 처리에 용이하다하는 결론이 나왔다) 이번 주 잘한 것은 무엇인가? 스타일링 관련하여 CSS-in-JS 패턴이 익숙하지 않아 시간이 너무 오래 걸렸었는데, 고통 속에서는 얻을 수 있는 것이 많..

이번 주 배운 것들 - HTML DOM API(Location, pathname) - Router, Routes, Route - React Router(Browser Router, Route, Memory Router, RouterProvider, NavLink, Link, Navigate, useNavigate) - Web APIs - History 개인 공부 - 알고리즘 풀이(프로그래머스 알고리즘 5문제) - React Router 전체 문서보고 tutorial 실제 따라해보기 - React 내부 까보기 개인 프로젝트 - React Element, Package 종류 이번 주는 너무 힘든 주였던 것 같다. 감기 몸살을 시작으로 예비군에 여러 가지 복잡한 일들이 겹친 주였다. 최대한 집중하며, 이번 ..

이번 주 배운 것들 - 관심사의 분리 - Layered Architecture - Flux Architecture - TSyringe - 의존성 주입(Dependency Injection) - singleton - Redux - Reflect - usestore-ts - useReducer - useCallback - useSyncExternalStore 개인 공부 - 알고리즘 풀이(스택/큐 5문제) - Redux(스터디) - todo 앱을 만들어보며, 전체적인 흐름에 대해서 파악하였다. Flux Architecture 에서 Redux에서는 어떤 식으로 Flux Architecture를 개선했는지에 대해서 깨닫게 되었고, 왜 Redux Toolkit을 사용하는지에 대해 알게되었다. 이번 주는 Extern..

이번 주 배운 것들 - 테스트 작성 훈련 - TDD의 BDD 개념 정리 - Given-When-Then - Unit Test - Jest, DOM Testing Library, React Testing Library - Mocking Fixture - MSW - Playweight 개인 공부 - 알고리즘 풀이(해쉬 key-value 5문제) - React 18 버전 업데이트 내역 정리(현재 리엑트가 어떤 방향성을 가지고 가고 있는지에 대해 알기 위해 공부) -> 리엑트는 18버전에서 "동시성"에 포커싱하여 많은 기능들을 추가하였다. => 알게된 개념: Suspense, 자동 일괄 처리(Automatic Batching), Transitions, React Server Component 🚨 위 기능들을 사..

이번 주 배운 것은 무엇인가? Express Fetch API ReableStream Unicode CORS React Hook useState useEffect useContext useLayoutEffect useRef usehook-ts useBoolean useEffectOnce useFetch useInterval useEventListener useLocalStorage useDarkMode SWR React-query React Study(React 스터디) useCotext useReducer useRef Jest(개인 스터디) TDD, BDD에 대한 정확한 개념 및 차이점 Jest, Jest API(describe, test, expect, matcher) Redux(개인 스터디) 이번..