안녕하세요, 유승완입니다. 현재는 스타트업에서 프론트엔드 개발자로 일을 하고 있어요. 메가테라에서의 교육을 듣게되었던 이야기를 간략하게 정리해봤습니다. 메가테라가 뭔가요? 먼저 제가 메가테라를 선택하게된 계기에 대해 얘기해보려고 해요. 저는 2022년 7월에 프론트엔드 개발자로 처음 일을 시작했어요. 지금도 똑같지만 당시에도 개발자에게 가장 중요한 역량은 엔지니어링이라고 생각했는데요. 좋은 코드를 작성하기 위한 목적도 있었지만 현실적으로는 기업들의 상황이 점점 나빠짐에 따라 인원을 감축하고 채용을 하지 않는 상황이 되었고 채용을 하더라도 경력자를 위주로 채용하더라구요. 이 와중에도 계속해서 개발자를 양성하는 프로그램들은 많아지기 때문에 살아남기 위해서는 정말 달라야된다고 생각했어요. 그래서 매일 공부 해..
쇼핑몰 프로젝트에서 어드민 페이지를 구현하고 있다. 어드민 페이지는 사실 서비스를 운영하기 위해서 대부분 갖춰야 하는 기능이라고 생각한다. 가장 중요한 것은 인증된 계정만 어드민 페이지에 접근할 수 있다는 것이다. 생각보다 보안적인 측면에서 신경을 많이 써야한다고 생각한다. swr을 사용하여 server state를 다루고, form을 편리하게 다루기 위해 react-hook-form을 사용하였다. form에서 input을 하나 만들 때 마다 state와 event handler 함수와 새롭게 추가되어야 할 것들이 너무 많은데 react-hook-form은 이와 관련된 것들을 추상화하여 제공해주기 때문에 form을 편리하게 관리할 수 있다. swr을 사용했지만, 나는 개인적으로 @tanstack/reac..
대략 9주차 부터 강의를 듣고 학습하는 면에서 어려움이 있었다. 어려움의 시작은 '몰아서 해야지!' 라는 생각에서 나왔다고 생각한다. 해결하기 위한 방법으로 매일 일정한 시간을 정해서 학습을 하려고 했고 11주차에는 지금까지 강의를 모두 듣고 학습할 수 있게 되었다. 쇼핑몰에서의 주문/결제 관련한 내용을 학습했다. External Store로 비즈니스 로직과 폼 핸들링을 담당했다. 우편번호를 입력하는 부분에서는 다음 API가 있다는 것을 처음 알게 되었다. 또한 포트원(구 아임포트)을 이용해서 결제를 붙여봤다. 일상속에서 항상 사용하던 서비스들이었지만 어떻게 구현할 수 있을까? 라고 생각해본적은 없었는데 실제로 해보니 재밌게 배울 수 있었다. Form UI/UX input의 type e2e테스트를 기능 ..
이번 주에는 쇼핑몰 추가 기능에 대해서 학습했다. 인증과 관련된 로그인/로그아웃, 회원가입을 학습하였고, 주문 목록 & 주문 상세에 대해서 학습하였다. 인증은 jwt 토큰을 localStorage에 저장하는 방식으로 구현했다. cookie 방식으로도 따로 구현하면서 공부하고, OAuth도 학습하면 좋을 것 같다. External Store를 활용하여 쇼핑몰 api 연동을 계속 구현함으로써 기본적인 웹 서비스의 CRUD 구조를 명확하게 배울 수 있었다. 추가적으로 도메인과 관련된 변수명에 대해 익힐 수 있어서 좋았다. 비동기 처리는 한상 3가지 상태에 대해 잡아줘야 한다. pending, fulfilled, rejected. 변수로는 data, loading, error로 처리한다. -> 추상화되어 있는 ..
회고 강의는 모두 들었지만 데브노트 정리는 아직 진행하지 못했다. 10주차는 그대로 이어나가면서 조금씩 9주차 내용을 병행해서 진행해야 할 것 같다. 회사가 판교로 가면서 적응도 하고 야근도 많이 하게 되어서 과제에 시간을 많이 쓰지 못했던 것 같다. 그리고 시간이 자나면서 스스로 많이 쳐지게 되었던 것도 원인이라는 생각이 든다. Future Action 무조건 매일 꾸준히 과제에 투자할 시간을 정해야 한다. 모아놓고 나중에 한다는 생각은 나중에 테스트 코드를 작성하고 리팩토링 하겠다는 생각과 같다는 것 같다.
사실 (Fact) 8주차는 CSS-in-JS에 대해 학습했다. 스타일링을 하는 여러가지 방식이 있고 CSS-in-JS는 현재 매우 많이 쓰이고 있는 방식중에 하나다. props를 활용하여 조건부 스타일링을 할 수 있다. Theme을 활용하여 어플리케이션의 스타일 값들을 먼저 구성하고, 전역에서 내려주어 편리하게 활용할 수 있다. 과제는 아직 제출하지 못했다. 느낌 (Feeling) 나만의 디자인 시스템을 꼭 만들어보고 싶다는 생각이 들었다. 만들게 되면 실제로 생산성에도 도움이 많이 되고 과정속에서 고민하며 배울 수 있는점이 많을 것이라고 느껴졌다. 회사 업무가 많아 이번 주차는 제대로 참여하기가 어려웠다. 다음 주차를 나가면서 틈틈이 학습하는 시간을 가져야 겠다. 교훈 (Finding) 한번 늦어지면 ..
사실 (Fact) 7주 차 강의는 React에서의 라우팅 처리에 대해 학습했다. window.location.pathname을 이용하여 직접 URL에 따라 다른 컴포넌트를 보여줄 수 있지만, 추상화가 이미 되어있는 react-router-dom을 사용했다. react-router-dom 버전 6.4부터는 라우터 객체를 지원하여 라우팅 정보만 별도의 파일로 관리할 수 있다. 테스트 코드에서는 memoryRouter, createMemoryRouter를 이용한다. 바닐라 자바스크립트로 SPA를 구현할 때는 URL만 변경시키기 위해 history.pushState를 활용하는데 이 동작은 Link 컴포넌트로 추상화가 되어있다. NavLink, useNavigate, Navigate 등을 추가로 학습했다. 느낌 ..
사실 (Fact) 6주차 강의는 관심사 분리에 대해 학습했다. React에서 Business Logic과 UI를 분리하는 방식인 External Store에 대해서 학습했다. Redux를 직접 만들어 보았다. 컴포넌트에서 비즈니스 로직을 커스텀 훅이 아닌, 외부의 store를 이용하여 도메인별로 분리하게 되었다. usestore-ts를 이용하여 store를 더욱 편리하게 작성했다. 과제를 일찍 잘 제출했다. 느낌 (Feeling) External Store라는 개념에 대해서 학습하며 이렇게 Business Logic을 분리할 수 있다는 관점이 정말 좋았다. 리액트에서 관심사 분리에 대해 더욱 명확하게 개념을 잡을 수 있어서 좋았다. 교훈 (Finding) 관심사 분리, 레이어를 두는 것을 의식하자. In..
