본문 바로가기
회고

6개월 간의 프론트엔드 현장실습 인턴 회고

by 진!!!!! 2024. 12. 17.

React도 제대로 쓸 줄 모르던 내가 사수가 없는 곳에서 6개월 간 인턴을 했다.

 

왜 인턴을 했는가?

여러가지 이유가 있다.

  1. 프론트엔드 실무 경험을 해보고 싶어서
  2. 좋아하는 일로 돈을 벌고 싶어서
  3. 내가 회사 생활에 적성이 맞는 사람인지 알고 싶어서

3학년 2학기까지 수료하고 다리 수술을 해서+조금 쉬면서 진로를 찾고 싶어서 휴학 신청을 했다. 퇴원하고 걷는게 좀 괜찮아졌을 때는 알고리즘이랑 리액트 공부도 하고, 다리를 절면서 학원에서 아르바이트를 했는데 알바를 하는게 너무 재미가 없어서… 내가 좋아하는 일로 돈을 벌고 싶었다. 그리고 리액트를 공부하다 보니 더 깊게 실무 경험을 하고 싶은 마음이 들었다.

 

그래서 그 때부터 자소서도 쓰고 리액트, 자바스크립트 공부도 더 열심히 하며 인턴을 준비하기 시작했다. 사실 리액트를 공부한지도 얼마 안됐고 경쟁력있는 팀 프로젝트도 없는 상태(있는 프로젝트라곤 해커톤, 바닐라 js로 만든 사이트, 유니티로 만든 게임이 전부..)라 포트폴리오랑 자소서 수준이 내가 봐도 암담했는데 운이 좋게도 학교 현장실습센터를 통해 6개월간 현장실습을 할 수 있게 되었다.

 

무슨 일을 했는지?

블로그와 비슷한 커뮤니티 플랫폼을 제작했다.

글쓰기 에디터, 게시글 검색, 게시글 상세 보기 기능, 댓글 달기, 채팅 등등을 개발했다.

프론트엔드는 Next.js, Typescript, tailwind css로 개발 중이고 상태관리 라이브러리로는 zustand, 에디터 라이브러리는 tiptap을 사용하고 있다.

백엔드는 자바 스프링을 사용한다.

 

인턴을 하며 얻은 것

  • 백엔드 api 연결 경험 (RESTful API의 이해)
  • Nextjs를 이용한 SSR 개발
  • 기획부터 디자인, 설계, 배포까지 모든 과정에 참여하는 경험
  • 백엔드, 프론트엔드와 협업 경험 (Notion, Jira, Figma 사용, git convention 도입)
  • 전임자의 코드를 보고 해석, 수정하는 능력 (기존은 리액트로 작성되어있었는데 Next로 마이그레이션 하면서 많이 고쳤다)
  • 스스로 고민하고, 할 일을 찾아서 하는 능력!
  • 리치 텍스트 에디터 개발. (TipTap)
  • 다른 사람이 만들었던거라면, 나도 할 수 있을거라는 용기.

 

좋았던 점

  • 백엔드와 협업
    • 백엔드와 협업하며 대화도 많이 하고, 프론트엔드에만 갇혀있던 시야를 넓힐 수 있었다. 백엔드가 데이터 구조를 설계할 때 어떤 생각을 하면서 설계하는지 등등…
  • 기획부터 배포까지 모든 단계에 참여했다.
    • 기획자, 디자이너, 인프라 담당이 없었기에 반강제로 참여할 수 밖에 없었던 상황이지만, 반대로 생각하면 이런 상황에 아니라면 모든 단계에 참여할 기회가 없었을 것 같다. 오히려 행운이다.
  • 배포 경험
    • 배포를 꼭 해보고 싶었는데, vercel도 이용해보고 AWS도 이용해서 배포해볼 수 있어서 좋았다. vercel을 이용할지 AWS를 이용할지 스스로 찾아보고 결정할 수 있어서 뿌듯했다. 우리 프로젝트에서는 결국 AWS를 썼다.
    • 블로그에서 자세히 보기-> https://11euntypn.tistory.com/58
  • 돈을 벌다
    • 인턴 월급은 적지만 식대도 챙겨주시고 학교에서 진행하는 취업 지원 프로그램 덕에 지원금도 나와서 생각보다 수입이 안정적이다. 덕분에 옷도 사고 맛있는 것도 먹고 취미생활도 즐기는 중. ㅎㅎ
    • 안정적인 수입과 수입에서 오는 효능감이 큰 것 같다. 사회에 쓸모가 있는 사람이 된 것 같아서 기뻤다.

 

아쉬웠던 점

  • 기획이 부실함
    • 기획이 디테일하지 않아서 기획을 받으면 개발자들끼리 회의하며 기획 구체화를 한 후 대표님과 다시 회의하고 개발을 진행했다. (아쉬운 점이기도 했지만, 개발자로써 기획에 참여하고 의견을 낼 수 있어서 좋았다. 또한 저번주의 기획이 이번주에 바뀌어도 혼란스러워하지 않고 중심을 잡고 개발할 수 있는 능력이 생겼다…)
  • 디자이너가 없음
    • 디자이너가 없으니 디자인이 통일성이 없고 반응형 개발도 제대로 되지 않았다. 프론트엔드 개발을 하긴 했지만 디자인도 좋아하는 편이고, figma도 사용할 줄 알아서 디자인 전반은 내가 맡아서 진행했다. 개발자로 참여했지만 디자인 공부도 많이 할 수 있어서 좋았던 것 같다. UI 라이브러리를 따로 사용하진 않았는데 샤크시엔 UI 디자인을 많이 참고하면서 만들었다.
    • 지금 생각해보니 디자인 라이브러리를 도입하는 것도 좋았을 것 같은데 팝업이나 모달창, 캐러셀 등을 직접 구현해보고 싶은 욕심에 라이브러리 안쓰고 직접 개발했었다.. ㅎㅎ
  • 사수 없음
    • 사수 없이 인턴들끼리 프로젝트를 진행했던지라, 사수님께 직접적으로 배울 수 있는 기회가 없었다. 그러나 다른 인턴분들이 다들 나보다 경험도 많고 잘하시는 분들이라 개발 프로세스 (git이나 notion, jira 사용)나 구현 방식 (전역 상태 관리, 사용자 인증, jwt 토큰 등…) 등을 많이 배울 수 있었다.
    • 사수가 없어서 아쉬웠던 점도 있지만, 오히려 사수가 없었기에 혼자 공부하고 혼자 성장하는 방법을 배운 것 같다.
  • 기록에 소홀했음
    • 이건 나 혼자 아쉬웠던 점이긴 한데, 6개월간 프로젝트 하면서 블로그 좀 열심히 할걸.. 이라는 후회가 든다.
    • 아래 사진철 기능 구현할 때 마다 노션에 나름의 기록? 개발 일지를 쓰긴 했는데, 아무래도 혼자 보고 마는 기록들이다 보니 대~충 쓰고 말아서 좀 아쉽다. 블로그를 썼으면 좀 더 잘 썼을텐데! 곧 퇴사하지만 퇴사한 이후에도 남들이 같이 봐서 좋을만한 내용은 조금씩 다듬어서 공유해보려고 한다.

 

어려웠던 점

Next.js 14와의 만남

인턴을 하면서 Next.js 14를 처음 써봤는데, 서버사이드 렌더링 특성에 따라 최대한 클라이언트에서 렌더링되는 부분을 줄이기 위해 useState나 useEffect와 같은 상태 관리 훅 사용을 줄이고 Next.js 14만의 기능을 최대한 활용하려고 했다.

 

그런데 Nextjs를 처음 써보는거다보니 많이 헤맸던 것 같다. 다만 같은 프론트엔드 인턴 분이 리액트, 넥스트 경험이 많으셔서 그분 성향을 최대한 따라갔다. 회원가입 form을 만들었을 때 useState 사용을 줄이고 formdata를 활용해서 상태 관리하는 부분을 줄인게 좋았다는 코드리뷰를 받았을 땐 기분이 참 좋았다..! ㅎㅎ

그 외에도 상수는 대문자로 쓴다던가 재사용성이 높은 hook을 만든다던가 옆에서 많이 배웠다.

 

기술이 아니라 프로젝트를 전체적으로 보기

나름 리액트 공부를 하긴 했다고 생각했는데, 실제 서비스를 개발할 때는 리액트에서 useState와 useEffect를 어떻게 쓸지가 아니라 토큰을 쿠키에 저장하는지 로컬스토리지에 저장하는지 통신 방식은 어떻게 할 것인지가 더 중요했다. (물론 useState를 어떻게 쓰는지도 중요하긴 한데… 프로젝트를 넓게 보는게 정말 중요하다.)

 

프론트엔드 하나만 보고 개발을 하니 시야가 많이 좁았다는 것을 알게 되었다.

백엔드와 협업하는 경험은 처음이라 정말 많이 헤메기도 했고, 모르는게 많아서 팀원들을 많이 괴롭혔다. 귀찮을법도 한데 jwt가 뭔지부터 설명해주시던 백엔드분께 정말 감사함을 느꼈다..!

 

이래서 다들 협업 경험을 해보라고 하는가 싶었다. 나는 너무 우물 안 개구리였던 것..

 

백엔드를 시작하다

협업을 해보니 프론트엔드도 백엔드를 한번은 꼭 해봐야하는 것 같아서 nodejs부터 공부하고 있다. 현업에서는 java를 많이 쓰니까 java를 공부하면 좋겠지만… 일단 익숙한 js로 공부를 좀 해보고, 백엔드 구조나 개발 방법에 대해 감이 잡히면 java도 공부해보려고 한다.

 

진짜 좋은 코드란 무엇일까?

남도 읽고 이해하기 쉽고 이 코드를 모르는 사람도 확장해서 개발하기 쉬운 코드인 것 같다

기능 구현에 급급하는게 아니라, 나중에 어떤 방식으로 더 확장할 수 있을지 고려해야한다.

일례로 나는 처음에 반응형 웹을 고려하지 않고 만들었는데, 반응형 웹을 구현하려니 고칠게 많았다.

 

오류 처리하기

그리고 프론트에서 기능을 변경하기 위해 백에서 데이터 구조를 변경해달라고 요청하면 그 api를 사용하는 모든 페이지에 영향을 주게 되기 때문에 이런걸 잘 생각해서 처리해야한다.

api에서 데이터를 요청하는데 에러가 나거나 데이터 자체가 없는 경우도 모두 고려해서 케이스 처리를 해놔야 배포할 때 안터진다.

 

 

글을 마치며…

항상 웹서비스를 활용하면서 로그인은 어떻게 구현하는지, 새로고침해도 로그인이 유지되는 건 어떻게 하는지. 배포는 어떻게 하는건지. 도메인 연결은 어떻게 하는지? 서브도메인은 어떻게 구현하는지? CI/CD가 뭔지? 전역 상태 관리는 어떻게 하는건지. 블로그 에디터는 어떻게 만드는지. 궁금한게 많았는데 인턴을 하며 이런 기능을 직접 개발하고, 궁금증이 많이 해결되었다.

구현하기 어렵고 힘들어보였는데, 직접 해보니 은근 별거 아니네? 라는 생각도 들었고.. 그래서 뭘 해도 구글링만 잘 하면 다 구현해볼 수 있겠다는 오만한 자신감(좋은 말로 용기라고 하자)도 생겼다 (ㅋㅋ)

 

앞으로의 계획

프로젝트

프로젝트를 조금 더 해보고 싶다. 인턴 3명이서 6개월동안 하다 보니 후반에 가서는 나 스스로도 정체됨을 느꼈던 것 같다. 새로운 사람들을 만나고 다른 기획으로 새로 프로젝트도 하며 리프레시를 하고싶은 마음.. 그래서 개발 동아리에 지원서를 넣고 있다. 동아리를 하든 다른 모임에 나가거나 학교에서 사람을 구하든 팀 프로젝트를 좀 더 해보고 싶다.

 

인턴

중소기업(사실 소기업임)에서 일을 해보니 대기업이나 아예 it서비스를 전문으로 하는 스타트업에서도 일을 해보고 싶다. 그래서 인턴을 한번정도 더 해보고 취업준비를 하고 싶은데… 일단 조금 쉬면서 다른 공부도 해보고, 프로젝트도 해보며 생각을 정리해보려 한다.

 

일하는게 좋다.

노동을 하고 돈을 버는게 좋다…

 

공부

백엔드 공부도 해보고 싶고, 인턴을 하면서 직접 배포를 해보니 AWS도 좀 깊게 배워보고 싶어서 1월에는 자격증 취득을 목표로 공부할 것 같다. 그리고 영어공부도 해야지..

오늘 인턴을 마무리 지으며 대표님과 면담을 했는데 내 토익 성적을 보시곤 영어공부를 하라는 말씀을 몇분동안이나 하셨다. 😥😥

 

 

 

 

 

내가 인턴을 한 이유

  1. 프론트엔드 실무 경험을 해보고 싶어서 -> 많이 성장한 것 같다.
  2. 좋아하는 일로 돈을 벌고 싶어서 -> 저축을 좀 해서 마음이 풍족하다
  3. 내가 회사 생활에 적성이 맞는 사람인지 알고 싶어서 -> 적성 맞는거 같음

세가지 모두에 답을 얻었다. 힘든 일도 많았지만 좋은 경험이었다.

 

앞으로도... 화이팅~

 

폭설이 내렸던 날... 회사 창밖 뷰
회사에 놓인 트리