🥰소개
안녕하세요, 달리기를 완주한 3기 수료생입니다. 처음엔 학교 공지 단톡방에 올라오는 코드잇 스프린트의 광고를 보고 지원하게 되었어요. 본격적인 스프린트를 하기에 앞서 기본적인 학습을 하는데, 이전에 전공 선택으로 학습했던 웹 프로그래밍 강의가 떠올랐습니다. 그때는 정말 아무것도 모르고 시작을 했었죠..
간단한 테스트가 끝나고, 인터뷰를 하면서 제가 상당히 이른 시기에 부트캠프를 선택했다는걸 알게 되었고, 걱정 반 설렘 반으로 시작하게 되었습니다. 그땐 리액트가 뭔지도, Node.JS가 뭔지도 모르는 때였는데 말이죠 ㅎㅎ
😂도전과 극복
프론트엔드가 리액트를 모르면 쓰나, 'OpenMind'
처음엔 레벨업도 빠르고, 하나하나 배우는 것 마다 바로 적용이 되니까 재미를 붙일 수 있었습니다. 하지만 첫 번째 프로젝트와 함께 시작한 React는... 제가 상상한것보다 어려웠습니다. 팀원분들은 슥슥 해내시는 것 같은데, 잘 못하는 제 모습을 보고 자책도 많이 하고 자존감도 많이 떨어지는 시기였습니다. 그리고 완벽히 준비되지 않은 상황에서 마주친 프로젝트까지, 제 멘탈은 강도 9 대지진이 난 것 같았습니다. 팀원분들께 '어렵다. 도와달라' 라고 말하는데까지 정말 많은 마음의 준비를 했기도 했습니다. 하하.. 아무튼 그렇게 JavaScript로 끝낸 프로젝트 뒤 찾아온 TS는.. 절 해탈하게 만들어주었습니다. 덕분에 밤을 잘 새게 되었어요.
앞서 너무 안좋은 이야기만 한 것 같아 좀 웃기지만, 그만큼 리액트의 러닝커브는 제게 큰 성장을 안겨주었습니다. 학교 수업을 통해서도 느끼지만, '프로젝트가 실력을 올려준다'는 말은 불변인가봅니다. 그때 정말 많이 배웠었어요.
타입스크립트에 익숙해졌나?, 'Taskify'
두번째 프로젝트도 정말 많이 배웠습니다. 전 주로 로그인, 회원가입, 마이페이지같은 유저 정보를 관리하는 페이지를 맡았는데, TypeScript에 대해 많이 배우기도 했고, react-query와 react-hook-form같은 같이 쓰면 좋은 것들에 대해 조금씩 알아가기 시작했던 것 같습니다. 사실 아직 어렵긴 하지만 이때 처음 알게 되었고, 공부를 시작했다는거에 의미를 두고 싶습니다.
라이브러리를 학습하자, 'BLOB'
마지막 프로젝트는.. 배운걸 쏟아붓는 느낌이였습니다. 이쯤 와서 새로운 것에 대한 학습은, 다른 프로젝트보다 더 무겁게 느껴졌습니다. 4-5시간 공부한 결과가 코드로는 별로 나타나지 않아서 뒤쳐지는 느낌도 들었고, 팀원들에게 미안한 마음과 제대로 하고 있지 못하는 것 같다는 압박과 불안이 제일 저를 괴롭혔던 것 같아요. (남의 코드를 잘 읽지 못하면 오픈소스 라이브러리를 가져다 쓰는 건 어렵습니다..) 그래도 해야지! 라는 생각으로 직접 공부도 해 보고, 옵시디언에 필기도 하면서 학습을 했었습니다. 덕분에 react-hook-form 실력도 많이 늘고, 컴포넌트 분리도 잘 하게 된 것 같아요. 새로운 기술의 도입도 무서워지지 않았습니다.
그래서?
'여러 가지를 학습했다'라고 말할 수 있겠지만, 전 리액트 학습이 제일 중요하고 갚진 일이였다 생각합니다. taskify, blob을 진행하면서 기반에 깔린 기술이 리액트였으니까요.
🧐핵심 학습 내용
HTML, CSS, JS
사실 프로젝트를 진행하면서, 이제 내가 과연 바닐라 JS로 페이지를 만들 수 있을까..? 싶어졌습니다. 추후에 다시 훑는 학습을 하면서 게시글로 올려보려고 합니다ㅎㅎ..ㅠㅠ
React
React는 UI를 만들기 위한 JavaScript 라이브러리이다
React는 스스로 상태를 관리하는 캡슐화된 컴포넌트를 조합해 복잡한 UI를 만들 수 있도록 지원하며, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
React의 원리, 특징이 무엇인가?
React는 상태 변화에 따른 UI 변경점을 결정하기 위해 재조정(Reconciliation)이라는 알고리즘을 사용하며, 이를 구현하기 위해 Virtual DOM이라는 패턴을 사용하였습니다.
또한 React 16부터 React Fiber엔진을 사용하여, 리액트의 Reconciler를 정비하였습니다.
그래서?
사실 리액트도 더 배워야 할 게 많습니다.. 프로젝트와 6개월이라는 짧은 시간에 급급해서 학습한 부분이 많아서, 이제 자세한 부분을 조금씩 학습하려 합니다.
TS & Next.js
Typescript
마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어이며 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시켜야 한다.
특징
- 타입스크립트는 정적 타입의 컴파일 언어이며 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.
- 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.
- 타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.
따라서..
개발자가 의도한 변수나 함수 등의 목적들을 명확하게 전달할 수 있고 그렇게 전달된 정보를 토대로 풍부한 피드백을 받을 수 있게 되므로 자바스크립트를 실제로 사용하기 전에 타입 에러들을 미리잡는것이라고 할 수 있습니다.
Next.js
nextjs는 React로 만드는 서버사이드 렌더링 프레임워크입니다. SSR을 함으로 얻는 이득은 다음과 같습니다.
- 클라이언트 렌더링 : 모든 js 파일을 로드하고 사용자는 웹을 보게됩니다. 이때까지 사용자는 많은 시간을 대기해야 합니다.
- seo 문제 : 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보를 보이지 않습니다. 구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 됩니다.
이 두가지를 해결하는 것이 SSR입니다.
-
서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 되고,
-
검색엔진이 자바스크립트를 읽는 것이 아닌 서버 측에서 자바스크립트, html, css를 만들어 컨텐츠를 직접 업로드 함으로 검색엔진에 게시글이 걸리게 됩니다.
또한 meta 태그를 자유롭게 추가함으로 seo를 용이하게 할수 있습니다.
그래서?
음.. 넥스트를 잘 쓰지 않는다고 누구는 말하고, 누구는 쓰면 가산점이라고 하는데, 그 경지가 없어질 때까지 공부하는게 좋은 것 같습니다. 다만! 타입스크립트는 꼭 써야 합니다. 아직 타입에러가 많이 나는데, 많이 연습해서.. 익숙해져보도록 하겠습니다.
🖥️프로젝트 하이라이트
당연하게도 BLOB.
기획부터 제작, 배포, 리팩토링까지 신경쓸만한 가치가 있다고 느낀 프로젝트였습니다. 제가 개발자로 들어간 팀에서 나온 결과물중에 제일 자랑스럽게 여길 만한 프로젝트였어요. 기획 단계에선 걱정투성이 서비스였지만, 이제와서는 애지중지 아끼는 황금알을 낳는 거위가 되었네요. 하하
주 기술 (참여한것만)
기획 (+ 디자인, 백엔드)
기획은 주로 피그잼과 노션을 이용해 실시간 회의로 진행되었습니다. '여행 SNS'라는 큰 틀은 잡혔지만, 내부에서 서로 생각하는 방향성이 많이 달라서 조율하는 데 신경을 많이 썼습니다. 디자인은 피그마를 통해 진행되었고, 송이님이 정말 예쁘게 만들어주셨습니다. 감사해요🤗ㅎㅎ 피드백이 매우빨랐던 백엔드 채린님, 덕영님 감사합니다. 두분 다 너무 유능하셔서.. 본인이 원하는 회사 꼭 가시길 바라겠습니다🫡
프론트엔드
-
기술
Next.JS 14 App router 방식을 사용했고, scss module을 사용하여 스타일링을 진행했습니다. Zustand를 이용해 전역상태관리를 했습니다. Storybook을 본격적으로 사용해보았는데, 어느정도 볼륨이 있는 프로젝트라 꽤 괜찮았던 것 같았습니다. 배포는 Vercel로 진행하였습니다. -
사실 엄청나게 처음 써보는 기술은 그나마 스토리북정도라, 크게 다룰 말이 없네요.. 궁금하시면 깃허브 구경하시길.. ㅎㅎ
-
규칙
알잘딱깔센따윈 없습니다.
팀의 규칙을 처음부터 잘 쌓는 게 중요하다고 생각하여 꼼꼼하게 정하고 시작했습니다. 중요한걸 몇개 뽑아보자면.. 전원 PR 하기, 백로그 작성, (반말문화) 등등 있겠네요. 다같이 PR리뷰에 관심을 가지다 보니, 문제가 생겨서 멘션이 발생했을 때의 피드백이 빨랐고, Merge된 코드에 대해서 자기 코드가 아닌데도 잘 도와줄 수 있었습니다. 후에 바빠질 땐 서로가 서로의 코드를 보완해주며 프로젝트를 완성했습니다.
이게 맞나? 싶을 정도로 잘 짠 컨벤션은 프로젝트의 삐걱거리는 곳에 윤활제가 되어주었습니다👍
🎈배운 점과 앞으로의 목표
학습 여정을 통해 얻은 가장 중요한 교훈은 무엇인가요?
좋은 사람들을 알아주는 것, 그게 정말 중요한 것 같습니다. 스프린트 과정 중 어느 하나 쉬운 것은 없었습니다. 초반이 수월했던 이유는 제가 그냥 조금 더 일찍 배웠었기 때문이고, 후반에 지쳤던 이유는 끝없는 배움의 길이 있다는 걸 깨달았기 때문입니다. 하지만 스프린트가 끝난 지금, 어떤 걸 배워보고 싶은지, 그걸 배워서 어떻게 활용하고 싶은지 머릿속에 조금씩 떠오르는 것 같습니다. 멘토님들이 해 주셨던 좋은 말씀들, 팀원들과 합을 맞추면서 나눈 에너지와 열정들, 심적으로 힘들 때 좋은 조언을 해 주셨던 매니저님들 덕분에 열심히 달린 후 러너스 하이가 온 듯 개운해지고, 더 공부하고싶은 마음이 생겼습니다. 좋은 사람들이 주변에 있는 게 정말 중요한 것 같아요.
앞으로 어떤 개발자가 되고 싶으며, 달성하고자 하는 목표는 무엇인가요?
스타일을 못하는 개발자는 프론트엔드 개발자가 아니다.
ㅋㅋㅋㅋ 거의 꺼내지 않은 이야기인 스타일에 대해 여기서 말해보고 싶습니다. 스타일을 못 하는 개발자는 프론트엔드 개발자가 아니라고 생각합니다. 열심히 만들어주신 디자인 파일을 똑같이 구현해내고, 유저들에게 좋은 경험을 선사해주는게 저의 목표입니다. 제 팀이 만든 사이트를 이용할 때, '어떻게 해야 하지?' 라는 생각이 들기 전에 눈으로 먼저, 손으로 먼저 경험을 할 수 있는, 사용자들을 자연스럽게 이끄는 사이트를 만들고 싶습니다. 이러려면 스타일링을 잘 해야겠죠. 주종목으로 잡은 Styled-components로 기초공사를 잘 하고, 다른 스타일링도 익혀서 어떤 스타일 라이브러리를 들고와도 잘 적용할 수 있는 FE 개발자가 되고 싶습니다.
🥹오글거리지만 3기 수료생분들과 매니저님, 멘토님..
6개월의 짧은 시간동안 같이 달려준 분들께 정말 감사합니다. 이렇게 긍정적인 에너지를 한바가지 얻고 갑니다 ㅎㅎ 앞으로 더 멋진 모습으로 만납시다!🤗🫡
