[토이프로젝트]프론트엔드 취업을 위한 토이프로젝트를 시작하기 전 준비할 이야기들

나는 이제 프론트엔드 재취업을 위한 토이프로젝트를 시작하려고 한다. 

내가 기존에 토이프로젝트를 할때는 다양한 아이디어에 맞춘 토이프로젝트를 진행하곤했다. 

단지. 즐거움을 위해. 그런데 지금은 취업을 위해 진행해야한다는 점이다. 

그러기 위해선 어떤 다른 전략을 가져야 할까? 

 

1. 내가 신입인가 경력인가? 

사실 난 2년을 채 못채운 경력을 가지고, 1년정도의 공백이 있다. 

괴로울 수밖에 없다. 중고신입으로도, 경력으로도 준비해야하는 상황이기 때문이다. 

기술면접은 신입으로서도 준비해야하고, 개인 포트폴리오와 회사 프로젝트 진행경험이 있는 경력으로서도 준비해야한다.

그리고 토이프로젝트는 개성적인 프로젝트보다, 회사에서 원하는 기술스택을 깊이있게 이해하는 채로 활용하고

최적화를 잘 해내야한다. 

 

2. 어떤 기술스택을 써야하는가

요즘 회사에서는 그냥 React로의 기술스택보다는 SSR, SEO의 특성을 가져갈 수 있는 Next.js를 사용할 수 아는지

그리고 직접 배포하고 운영할 수 있는지. 등 devops측면의 경험도 원하고 ,  테스트까지 원한다. 

그리고 회사마다의 특이한 라이브러리 경험도 원한다. 예를들어 Chart.js, D3.js, Three.js등.. 데이터 시각화와 3D까지 요구하기도 한다. 

심지어 Node.js, FastAPI 등 백엔드 지식을 요구하는 등 풀스택을 원한다. 

과연 1년의 공백이 있는 내가 그것까지 해낼 수 있을까? 

 

당연히 아니다. 

우선 최소한의, 기술스택을 써서 react, Typescript를 활용하여 최적화를 잘 사용한 코드를 포트폴리오로서 내야한다. 

1)React는 리렌더링을 잘 막을 수  있게 잘 짤 수 있어야 하고, 2)초기렌더링 속도를 개선시킬 수 있는, 3)그리고 초기 렌더링 모습에 신경써야한다. 

참고로 useMemo, useCallback이 필요없게 하는 리액트 컴파일러는 현재 실험단계라고 하니 지금은 직접 적용해줘야하는것으로 본다.

 

초기렌더링 속도는, 스타일 관련해서는  css in js를 사용할 시에는 attrs을 잘 활용해서 스타일이 중복생성되지 않도록 하는것, 
초기 렌더시 최소한의 렌더링만 진행. 코드스플리팅 기법을 활용한다.(레이지 로딩. 동적로딩)

 

초기 렌더링모습은, 
스타일의 경우 초기 스타일값을 넣어주거나, .defaultProps 등으로 기본값을 미리 할당해준다. 동적인 컴포넌트는  styled로 관리해서 유지보수가 편하게 하자.   emotion 과 tailwindcss를 모두쓸 수 있는, 즉 babel macro로 컴파일단계에서의 스타일적용, 그리고 런타임에 동적인 스타일을 적용하는 twin.macro를 사용해볼거다. 

그리고 초기 레이아웃에 영향을 주는 코드는 useLayoutEffect를 사용한다. 

 

 

그리고 상태관리는 zustand , tanstack-query가 대세이니, 이것을 하고

이런 상태관리 툴은 아주 적절히 써야한다. zustand를 무조건 쓰는 것이 아니라 정말 클라이언트상태를 복잡하게 관리할 필요가 있을때 

사용하는게 좋다. tanstack-query는 서버상태관리에 아주 유용하니,필요한 부분만 패치하여 UX를 개선하는데에 잘 활용해보자. 

상태관련 코드관리도 필수이다.  유지보수가 편하도록 잘 관리할것

이런식으로 살을 좀 붙여나간다. 

 

그리고 폼을 관리할 때는 React-hook-form, zod를 활용.(여기서도 Typescript가 꽤 빡셀것이다. )

 

여기까지는 정말 기본적인 기술스택이 될것이다. 

이후에 vitest, react-testing-library, jest, cypress 등 테스팅을 들어가야할것이고 

vite 등 번들링 속도 최적화 
Nextjs활용.(SEO, SSR, 기타 사이트이펙트 제거 기술)

Devops(docker, aws, kubernetes,)

데이터시각화, (D3,Chartjs, 실시간 데이터일경우 websockt, webRTC까지)

디자인시스템구축(초기 렌더링 시 FOUC가 발생하지 않고, 스타일 생성 속도를 최적화해야함, npm publish, rollup, sementic version관리 등)

서버리스 기능 혹은 작은 백엔드 구축(Graphql, nodejs, fastapi, next auth, aws amplify)

웹성능 최적화(light house 메모리누수, 렌더링, 번들사이드 최적화..등등), 웹 접근성, 웹 표준, 웹 호환성

i18n

기타 디자인패턴을 활용한 비즈니스 로직, ui 상태변경 로직 관리

등등.. 와우 정말 ㅠ 신경쓸게 많다 

하지만 이런것들은 취준과정에서 조금씩 덧붙이면서 글도 정리하면서 차근차근 알아가면 된다. 겁먹지 말자

일단 현재 할수있는거로 빨리 취업하는게 베스트라고 생각한다. 다 써야만 취업한다는 그런 무리한 계획은 세우지 말자. 

내가 지금 활용한걸 잘 아는게 중요하다. 차근차근 잘 공부하면서 적용하자.

 

3. 그래서 어떤 프로젝트를 할까?

시원하게 공개한다. 
코인 모의투자다. 

이걸 한이유는, 생각보다 모니터링 기능을 활용한 SaaS 회사들이 많다. 공정제어, CRM , 등등
그래서 실시간 데이터 시각화 기능을 주로 하는 프로젝트를 생각하다보니, 실시간 데이터를 초당으로 가져올 수 있는것으로 제격인 코인으로 잡았다. 

이 프로젝트를 하는 이유는 새로운 프로덕트를 내기 위함이 아니다.

나의 기술적인 성숙도를 보여주기 위함이다. 

앞으로 잘 해보자! 화이팅!
우선 1주동안은 기본적 기술스택을 활용하여 구현하고 
추후에는 우대사항으로 들어가는 기술들을 활용해볼 예정이다. 

 

 

 

 

 

앞으로 진행하며 참고하면 좋을 블로그

 

https://velog.io/@shin6403/React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EB%8A%94-7%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-Hooks-%EA%B8%B0%EC%A4%80

https://velog.io/@jim9649/%EB%A9%B4%EC%A0%91%EC%97%90%EC%84%9C-%EC%9E%90%EC%A3%BC-%EB%AC%BB%EB%8A%94-React-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B8%B0%EB%B2%95-%EB%B6%84%EC%84%9D%EB%B9%84%EA%B5%90

https://ko.react.dev/learn/keeping-components-pure

https://velog.io/@kihyeon8949/React-PureComponent-memo-React-%EC%84%B1%EB%8A%A5%EA%B0%9C%EC%84%A0

https://velog.io/@jisubin12/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%EC%9B%B9-%ED%91%9C%EC%A4%80-%EC%9B%B9-%ED%98%B8%ED%99%98%EC%84%B1