Headwing

1월에는 소스마켓 프로젝트의 완성도를 높이는 데 초점을 맞췄다. 새롭게 합류한 프론트엔드 개발자님과 eslint 통일 및 타입스크립트 도입 등의 사항들에 대해서도 논의를 했던 주였다. 또 저작권 침해 페이지를 대신 맡아주셔서 여유가 생겨 이력서도 쓰고 지원도 해보며 시간을 보냈다. 소스마켓에 대해서는 커스텀 훅을 사용하여 각종 목록들의 get 요청을 통한 렌더링이 효율적으로 작동하도록 수정하였다. 커스텀 훅에 대해서는 아직 많이 익숙하지는 않은데, 생존 코스를 통해 배운 것들을 참고해서 좀 더 효율적으로 바꾸고 싶은 생각이 있다. 아직은 다소 중복되는 부분들이 있는 것 같다. 또한 sass 기능들을 좀 더 탐구해보며 mixin 기능을 활용하여 각종 테이블들의 css를 간소화했다. 중복되는 부분들은 아주 ..

3~4주차에는 사이드 프로젝트인 소스마켓의 많은 부분을 구현하였고, 생존코스의 쇼핑몰 프로젝트를 따라 구현해보면서 많은 것들을 배웠다. 소스마켓의 경우에는 Next.js로 처음 구현해본 프로젝트다 보니 생각보다 간단한 부분에서 시간이 걸리는 부분들이 있었다. 특히 컨텐츠마다 모달을 띄워서 post 요청을 해야하는 부분에서 좀 어려움이 있었다. 리액트에서는 portal만 잘 쓰면 되는 문제였는데, 라우팅 방식이 리액트와 다른 넥스트의 경우 Parallel Routes와 Intercepting Route를 활용하여 구현하는 부분을 시도했고, 어려운 부분이 있었으나 빼먹은 defalt.jsx나 page.jsx을 제대로 설정하니 잘 동작하였다. 추가적으로 모달 뒷부분의 스크롤에 대한 문제와 pagination ..

이번주 진행한 사항들 저번주 주말부터 몸이 안좋아져 며칠을 쉬게 되어 12월의 회고를 이제서야 작성하게 되었다. 그래도 이번주 목요일부터는 괜찮아져서 미뤄뒀던 공부들을 마무리하려고 노력했다. 스토어에 대한 부분과 리액트 라우터에 대해 배웠는데, 스토어에 대한 부분이 특히나 어려웠고, 강의 분량도 역대급이라 마무리하기가 어려웠다. 결론적으로는 리덕스를 사용하지 않고 TSyringe와 같은 라이브러리를 이용하여 리덕스의 기능을 직접 만들어보는 내용이었는데, 막상 최종 결과물의 코드는 매우 간단했지만, 그 결과를 향한 과정이 너무 험난했다. 강의를 들을 때는 "아~"하고 이해되고 신기했지만, 막대한 분량 때문에 코드를 전부 세세히 따라해볼 수는 없었다. 또한 잘 모르는 타입스크립트 개념들을 이용하는 부분들이 ..

저번주는 참 많은 것들을 배운 한 주 였다. 생존코스는 6주차에 접어들었지만 미약했던 3~4주차를 복습하고 체화하는데 많은 시간을 보냈다. 주로 리액트의 기본인 컴포넌트와 상태(state)에 대해 배웠는데, 아샬님이 짜는 코드 스타일을 보다 보니 기존의 나의 방식이 굉장히 비효율적인 방식이라는 생각이 들었다. 컴포넌트로 분리해야 하는데, 분리하지 않고 짜서 비효율을 초래해왔던 것 같다. 이번의 기회로 컴포넌트 분리 방식을 어느 정도 알게 되었다. 한편으로는 아샬님의 방식대로 컴포넌트를 분리하여 상태를 계속해서 props로 넘겨줘야 하는 문제가 발생하곤 했는데, 아직 진도를 나가진 않았지만, store를 사용하여 이런 부분들을 간편화할 수 있지 않을까 생각했다. 소스마켓 프로젝트의 경우에는 몇 개의 모달을..

벌써 한 주가 또 흘러갔다. 그래도 이번 주는 꽤나 뿌듯한 한 주였다. 가시적으로 한 것들에 집착하지 않고 나에게 맞는 속도를 찾아 천천히 배우고 깨달아가는 것이 뿌듯했다. 데브로드에서는 5주차에 접어들었고, 테스트에 대한 기본적인 것들을 배웠다. 아직은 낯설고 어려워서 과제 코드들을 꼼꼼히 살펴보며 익혀나가야겠다. 백엔드 api가 구현되지 않은 상황에서도 사용할 수 있는 테스트 라이브러리들이 있었는데, 나의 상황에서 어떤 것이 가장 적합할지 고민해봐야겠다. 또한 제대로 짚고 넘어가지 않았던 2주차 내용들을 복습해보는데, 리액트에서 JSX를 왜 사용하는지, VDOM은 무엇이고 어떻게 동작하는지를 공식 문서를 보며 복습하여 리액트의 본질을 조금씩 알게 되어 좋았다. 어떤 지식이든 전체를 관통하는 본질에 접..

퇴사를 하고 시간이 2주가 흘렀다. 처음 일주일간은 휴식을 핑계 삼아 쉬었고 두번째 주인 이번주엔 최대한 집중하고자 노력했다. 이번주에는 Express로 서버를 간단히 만들어보며 CORS와 fetch에 대해 깊이 있게 알아보게 되었다. fetch로 발생하는 Promise객체와 이와 관련된 콜백 지옥 문제도 제대로 이해하며 공부해보았다. 또한 리액트의 훅에 대해서도 깊이있게 공부해보았는데, useEffect와 useRef에 관해서는 평소에 사용을 하면서도 제대로 생각하지 못했던 부분들을 배우게 되었다. useEffect의 경우 return을 통해 컴포넌트가 사라질 때 사용할 수 있는 것들에 대해 타이머를 만들어보며 생각해보았고, useRef에 대해서는 DOM에 접근할 때만 사용하는 것이라 생각했는데 inp..

1주차 리뷰 이번주는 프론트엔드 생존코스의 첫번째 주차였다. 개발환경을 배우는 것이 주된 내용이었다. 리액트던 넥스트던 항상 기본 세팅에서 시작을 했던 나는 이렇게 밑바닥부터 개발환경을 세팅하는 것이 신기하고 재밌었다. 프론트 개발자로서 본질적인 개발을 하는 느낌이었다. 또한 PR의 경우도 익숙치 않은 부분이 많았는데, 과제를 하면서 터미널로 깃을 쓰는 것에 보다 익숙해질 수 있었다. 다만 강의 내용에서 다루는 모든 내용을 전부 이해할 수는 없었는데, 차차 세부적인 부분들을 깊이있게 공부해봐야겠다. 배운 것 Typescript + React + Testing Library + Parcel + ESLint 환경 설정 Typescript 기본 개념 React 동작원리 Jest 패턴

이번주차는 캘린더 페이지의 기술적인 부분을 완료하고, 지금껏 미뤄온 css작업을 완성하는데 심혈을 기울였다. 그 과정에서 input창이나 모달창 그리고 커뮤니티 디자인이 대폭 수정되었다. 메인페이지는 위와 같이 수정되었다. 사실상 거의 90% 이상 완성되었다고 해도 무방하다. 메인의 상단에 있는 월급날 D-day는 근무지가 두 개 이상인 경우 슬라이더로 넘겨서 볼 수 있도록 하였다. 근무지 추가를 통해 근무지 카드를 만들고 근무지 카드의 오른쪽 상단의 점3개 버튼을 눌러 수정 및 삭제 드롭다운이 나타나면 수정을 할 수 있는 수정페이지로 넘어가거나 근무지를 삭제할 수 있도록 하였다. 수정 부분에서 근무지 이름이나 월급일처럼 현재 카드의 색상 역시 어떤 색상인지 알 수 있도록 하는 부분을 추가하면 좋을 것 ..