megaptera

메가테라/FE 생존코스 1기

[메가테라] 프론트엔드 생존코스 1기 돌아보기

안녕하세요, 유승완입니다. 현재는 스타트업에서 프론트엔드 개발자로 일을 하고 있어요. 메가테라에서의 교육을 듣게되었던 이야기를 간략하게 정리해봤습니다. 메가테라가 뭔가요? 먼저 제가 메가테라를 선택하게된 계기에 대해 얘기해보려고 해요. 저는 2022년 7월에 프론트엔드 개발자로 처음 일을 시작했어요. 지금도 똑같지만 당시에도 개발자에게 가장 중요한 역량은 엔지니어링이라고 생각했는데요. 좋은 코드를 작성하기 위한 목적도 있었지만 현실적으로는 기업들의 상황이 점점 나빠짐에 따라 인원을 감축하고 채용을 하지 않는 상황이 되었고 채용을 하더라도 경력자를 위주로 채용하더라구요. 이 와중에도 계속해서 개발자를 양성하는 프로그램들은 많아지기 때문에 살아남기 위해서는 정말 달라야된다고 생각했어요. 그래서 매일 공부 해..

메가테라/FE 생존코스 1기

[메가테라] 프론트엔드 생존코스 7주차 주간회고

사실 (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 등을 추가로 학습했다. 느낌 ..

메가테라/FE 생존코스 1기

[메가테라] 프론트엔드 생존코스 6주차 주간회고

사실 (Fact) 6주차 강의는 관심사 분리에 대해 학습했다. React에서 Business Logic과 UI를 분리하는 방식인 External Store에 대해서 학습했다. Redux를 직접 만들어 보았다. 컴포넌트에서 비즈니스 로직을 커스텀 훅이 아닌, 외부의 store를 이용하여 도메인별로 분리하게 되었다. usestore-ts를 이용하여 store를 더욱 편리하게 작성했다. 과제를 일찍 잘 제출했다. 느낌 (Feeling) External Store라는 개념에 대해서 학습하며 이렇게 Business Logic을 분리할 수 있다는 관점이 정말 좋았다. 리액트에서 관심사 분리에 대해 더욱 명확하게 개념을 잡을 수 있어서 좋았다. 교훈 (Finding) 관심사 분리, 레이어를 두는 것을 의식하자. In..

메가테라/FE 생존코스 1기

[메가테라] 프론트엔드 생존코스 5주차 주간회고

사실 (Fact) 강의를 듣는 것과 데브노트를 정리하는 것 둘 다 매우 뒤쳐졌다. 과제는 제출했지만, github actions에서 e2e 테스트를 통과하지 못했다. jest와 rtl을 이용한 유닛 테스트, playwright를 이용한 e2e 테스트를 배웠다. 테스트 코드를 작성하면서 인터페이스를 점검하는 내용에 대해 배울 수 있었다. 리액트 컴포넌트에서 정확히 무엇을 테스트 해야하는지에 대해 인터랙션을 검증한다는 것을 배웠다. 느낌 (Feeling) 개인적인 일이 있어 제대로 학습을 하지 못했는데 사실 변명이라고 생각한다. 무슨 일이 있어도 꼭 지키는게 습관이라고 생각한다. 컴포넌트에서 로직을 커스텀 훅으로 분리하고, 커스텀 훅에대한 테스트 코드를 짜는 방식도 좋을 것 같다. 교훈 (Finding) 아..

메가테라/FE 생존코스 1기

[메가테라] 프론트엔드 생존코스 4주차 주간회고

사실 (Fact) 강의가 공개된 당일날 강의를 모두 들었다. 몸이 게을러져서 데브노트는 목요일 새벽에 작성하게 되었다. 데브노트 작성과 4주차 과제를 함께 마무리했다. 데브 노트를 깊게 정리한다기엔 부족한 부분이 많아서 노아님께서 알려주신 방식으로 정리하려고 한다. 4주차 강의는 function component의 핵심인 React Hooks에 대한 내용이었다. 먼저 간단히 Express를 이용하여 서버를 세팅했고 2개의 api를 작성하고 cors 설정을 진행했다. Fetch API를 이용하여 서버로부터 필요한 데이터를 받아오고, 주문을 할 수 있었다.(실제 기능은 없지만) React로 앱을 작성하면서 항상 사용하게 될 Hook들을 어떻게 사용하는지 알 수 있었다. 또한 Custom Hook을 작성하여 ..

메가테라/FE 생존코스 1기

[메가테라] 프론트엔드 생존코스 1주차 주간회고

사실 (Fact) 디스코드 커뮤니티, Github에 초대되고 본격적으로 프론트엔드 생존코스를 시작했다. 1주 차 교재 및 강의를 전달받았고 학습하였다. Gitbook으로 강의 내용을 정리하였다. 1주 차 과제를 전달받았고 해결 후에 제출하였다. 계속 써먹는 환경 설정을 만들었다. 느낌 (Feeling) 사실 메가테라는 다르다는 것을 느꼈기 때문에, 상담도 전에 생존코스를 신청했었다. 그리고 1주차를 보내면서 내 생각이 맞았다는 것을 확인할 수 있었다. 생각, 가치관, 방향성들이 모두 내가 바라고 있는 방향이었다. 입에 발린말이 아닌 현실적이고 냉철한 말이 더욱 자극이 되었다. 그래서 앞으로의 시간들이 더욱 기대가 된다. 교훈 (Finding) 패러프레이징, 지식을 나의 어휘와 문장으로 표현하는 게 핵심이..

유승완
'megaptera' 태그의 글 목록