킹의 개발일지

항해 끝, 새로운 시작10주간의 여정이 끝이났다. 매일 퇴근 후 과제를 하면서, 10주만 버티자는 오기는 어느새 블랙 뱃지를 얻고자하는 의지로 변해 있었고, 모든 과정을 해결하기 위해 부단한 노력을 기울이는 나를 발견할 수 있었다.그런 내 모습이 자랑스럽고 좋았다. 퇴근 후 빈둥대던 모습은 없고 간단히 밥먹고 노트북을 키며 과제를 하는 습관이 생겼다. 빈둥대던 시간을 차지한 이 습관은 돈으로는 살 수 없는 귀중한 것이라 생각한다. 항해를 끝마치며, 지금까지 일들을 되짚어 가며 글을 작성한다. 항해 그 이전처음 개발을 시작하게된 계기는 단순히 게임을 만들어보고 싶어서다. '내가 좋아하는 게임'을 찾아다니며 이 게임 저 게임 갈아타다가 '다른 게임들이 나를 만족 못시키면 내가 만들면 되지 않을까' 하는 생각..

프론트엔드 테스트 코드 (feat: vitest, react testing library, TDD)이번 챕터의 주제는 '테스트'이다. 테스트 코드는 '테스트 짤 시간이 어딨어.. ㅜㅜㅜㅜ' 하며, 언젠가는 해야할 일 리스트에 항상 있던 녀석이다. 이전에 토이 프로젝트에서 맛이라도 보자 싶어 jest를 써봤던 기억이 있는데, 이번 과제 진행에 조금이라도 도움이 됐었다. 이번 과제에선 통합테스트, 단위 테스트에 집중 했다. 과제 프로젝트의 규모가 시각적 회귀, e2e를 시도하기엔 턱없이 작았다. 그래도 e2e는 맛보기로 써보긴했다. 통합테스트를 진행하면서 가장 힘들었던점은 component를 렌더링하고 테스트하고 싶은 요소를 select하는 과정이 아닌가 싶다. ...ByText, Role, LabelTex..

6 주차 CI/CD 현재 쉘 스크립트를 실행해서 서비스를 배포를 하고 있다. 빌드하고 버전 올리고 이미지 빌드하고... 이런 과정을 스크립트를 실행시켜 진행하고 있다. 솔직히 지금 사용하고 있는 플로우도 그렇게 불편하진 않았다. 해당 스크립트만 실행하면 되니까... 깃헙 액션을 사용해보기 전 까진..  이번 챕터는 항해 중 눈여겨 보았던 커리큘럼이기도 했고 배워서 꼭 회사에도 CI/CD를 적용시켜 보고 싶었다. 푸시 후 자동으로 실행되는 파이프라인이라니.. 꼭 필요한거 잖아?! 이번 챕터를 하면서 깃헙 액션으로 할 수 있다는게 많다는걸 알 수 있었다. 테스트 정도만 생각했지만, comment, reviewer 등록, 등등 굉장히 많은 것을 할 수 있다는 걸 알았다. CD 과정도 재미있었다. 실제 환경을 ..

챕터2 클린코드를 마무리하고4~5주차 주제는 클린코드, 항해 플러스 커리큘럼 중 관심있게 보았던 챕터이다.  클린코드.. 항상 머리로는 클린코드 하면서 손은 스파게티를 만들고 있는 현재를 반성하며, 팀원들이 읽기 편한 코드를 만들어보자하는 마음가짐으로 시작했다.  이번 챕터에서 함수형 프로그래밍을 다시 리마인드 할 수 있었던것이 가장 큰 수확이었다. 이전에도 함수형 프로그래밍 책을 읽고 리뷰를 만들었지만 벌써 반년이 넘어갔다. 함수적으로 생각하고 쓰는것이 희미해질 무렵 다시금 리마인드 시켜준 고마운 챕터다. 덕분에 주변 사람들에게 '함수형 코딩을 사용하자'라고 설명을 해줄 때 좋은점을 이야기하며, 같이 공부 할 수 있었다. 함수형 프로그래밍 좋으니 다른사람들도 꼭 해보았으면 한다. 시간 관리하루 일을 끝..

Clean Code오랜만에 vscode live share extension을 설치해 팀원들과 코딩해봤다. 예전에 학교에서 과제 할 때 써봤던 건데 재밌는 녀석이다.  4주차 과정은 '클린코드'이다. 클린코드란 남이 읽기 쉬운 코드라 생각하기에, live share extension을 사용해 다른 사람과 실시간으로 내가 만든 변수 이름의 피드백을 받았다. '코드를 짜고 다른 사람에게 어떠냐 물어보고 리팩토링하고'의 반복이었다. 의견 충돌시 오래동안 토의했다. 읽기 쉬운가, 읽자마자 어떤 녀석인지 감이 오는가, 함수가 너무 크지 않은가.. 등 이런 과정을 여러번 거치자 서로의 코드가 비슷해져 갔다. 다른사람이 쓴 코드를 물어보지 않아도 됐고 생산성이 증가했다. 클린코드에 대해 말이 많았던 적이있다. 면접에..

쉴 시간이 어딨어!난이도 우상향이번주차 과제 난이도는 1-2주차와 비교도 되지 않았다. 기본적인 훅 사용방법을 넘어서, 리액트의 렌더링 과정을 알아야 했다. 혼자의 힘으로는 너무 힘들었다. 그러다 팀원분들과 과제 리뷰를 하면서 많은 인사이트를 얻었다. 역시 하나의 관점으로 몰두하면 맹점이 생기기 마련, 전혀 새로운 시각을 제시해주자 '번쩍' 하며 과제가 이해 됐다. GPT, 공식 홈페이지, 블로그, 구글링.. 온 방법을 동원했다. 이번 과제는 문제 해결 뿐만 아니라 개발자의 둘 도 없는 친구 검색하는 방법을 많이 배울 수 있었다.  힘든 만큼 성장도 할 수 있었다. 회사에서 동료분이 값이 변경이 돼 도 렌더링이 안되는 문제를 여쭤보셨고, 배운 내용 토대로 적용하여 해결 했을 때, '배움이 절대 헛되진 않..

힘든 일주일수면 부족이번주는 회사에서 일이 많았기에 과제하기 상당히 피곤했다. 더군다나 과제 난이도는 전 주와 비교했을 때 더 어려웠기에, 매일 잠이 부족한 느낌... 때문에 퇴근후 운동을 안 가는 날이 잦아졌다. 피곤한데 어찌할꼬.. 하며 집에서 과제하고 조금이라도 눈 붙혀야지.. 하며 퇴근했다.이걸 해결할 방법을 우선 찾아야 한다!시간 관리법멘토링 시간에 팀원분이 시간관리법에 대해서 물어봤다. 나는 전형적인 MBTI, P.. 작업 단위를 러프하게 자르고, 우선순위가 급한것 부터 진행한다. 하다가 더이상 집중할 수 없다고 판단 될 때 다른 작업으로 옮긴다. 놀랐던 점은 멘토 '테오'님도 P 스타일 이라고 하신다. 그러면서 소개시켜준 테드 강의다.'왜 우리는 일을 미루는가'에 대해 설명한다.https:/..

과제1주차 과제는 '리액트 훅을 얼마나 잘쓰고 있었나' 묻는게 주가 됐다.useState, useMemo, useCallback, memo 등등 리액트에서 제공하는 훅을 사용해서 문제를 해결했다.  기억나는 과제과제중 기억에 남는건 memo와 useMemo, callback을 쓰지않고 리렌더링 횟수를 줄이는 문제다.. memo는 살면서 처음 들었기에, '아 이런게 있구나' 싶었다. 사용법도 간단한게 고차컴포넌트 만들듯, memo로 컴포넌트를 감싸주면된다. memohttps://ko.react.dev/reference/react/memo memo – ReactThe library for web and native user interfacesko.react.devmemo는 간단하게 설명하면 컴포넌트를 캐시하..

첫 여정몇달의 기다림이 끝나고 드디어 항해 플러스가 시작 됐다. 솔직히 기다리는동안, 회사를 다니고 기타를 치다보니 '벌써 시작이야?' 라는 생각이 들었다. 그렇게 방심한 마음으로 OT를 들으러 스파르타 본진을 찾아갔다. 신청하고 몇주가 지났을 때는 일상에 빠져 신청할 때 들었던 설레임이 살짝 줄어들어 있엇다. 하지만 OT를 들으면서 항해 플러스를 신청할 때 들었던 성장을 갈망하는 마음이 다시금 스멀스멀 기어나왔다. 여행을 가기전 설레임과 같을까, OT를 듣는동안 이 커리큘럼을 성공적으로 소화했을 때 성장해 있을 내 모습이 그려진다.아이스 브레이킹동안 같이 행해하는 사람들이 열정이 가득한 사람임을 느꼈다. 이런 사람들과 함께라면 힘들 떄 많은 도움을 받을 수 있을수 있을거란 생각이 든다.  과정은 힘들겠..

CORS 넌 뭔데 우릴 힘들게 하는거야... 웹 개발을 하다보면 필연적으로 만날 CORS에러.. 정성껏 API를 만들어 서버에 요청을 날리면 '안돼 돌아가' 하며 콘솔창에 빨간 에러 로그를 던져버린다. 하지만.. 이녀석이 고마운 녀석이라고?? 우선 CORS를 이해하기전에 먼저 몇가지만 알고가자! Origin(출처) 오리진, 한국어로 출처라 부르는 것은, 접근할 때 사용하는 URL의 스킴(프로토콜 ex. http, https), 호스트(도메인), 포트로 정의한다. 글로 보는것보단 실제 URL 구조를 보면 쉽게 이해할 수 있다. https부터 8080까지를 Origin이라고 부른다. 왜 Orgin에 대해 먼저 설명했냐면... 바로 CORS 중 O가 바로 Origin의 O이기 때문이다! CORS의 진짜 이름 ..