그동안 잘해왔어! 이제 기업 인턴쉽이다!!
2차 프로젝트를 끝내고 기업 인턴쉽을 나가게됐다.
기업 인턴쉽을 선택해야하는 상황이 왔을때, 엄청난 고민에 시달리게 된다.
과연..내가 이 실력으로 인턴쉽을 나가서 잘 해낼수있을까?
멘토님들께 몇번이고 물어본지 모른다.
고민이 정말 많았고, 부족한 부분을 어떻게 채울수있을까? 어떤방법이 나에게 맞을까?
경험 해 보는것이 맞는가? 라는 수많은 의문을 던졌다. 결국에 내 선택은
'그래 해보자!' 였고 바로 실행에 옮겼다
내가 인턴쉽을 시작한곳은 구로디지털단지에 있는 newbizstart 라는 외주 개발사였다.
간단한 통성명과 어떠한 기술을 배우고 인터쉽에서 어떤 프로젝트를 하게 되는지
회의를 하고 인턴생활이 시작되었다.
정말 실전이다!! 😀
프로젝트라고해서 내부 프로젝트나 기존의 서비스된 프로젝트를 개선시키는 방향일줄 알았다
하지만
실제 고객이 사용하게될 프로젝트를 진행하게됐다.
"다행인가..? 불행인가..? 지금 생각하면 너~~무 축복받은 일이었다.
어디가서 이런 경험을 할수있단 말인가..? "
정말 시작부터 너무 설렜다.
설렘과 동시 책임감도 커졌고 새로운 기술스택을 빠르게 배워 이 프로젝트에 최대한
기여하고 싶었다.
간단히 프로젝트를 소개하자면
💡프로젝트 소개
- 추천리뷰 작성 및 공유에 따른 보상을 제공하는 SNS 형태의 플랫폼 서비스 개발
- React + Typescript 적용
- ATOMIC DESIGN PATTERN 을 적용하여 재활용
- Container 와 Presenter 컴포넌트를 나누어 , 기능과 컴포넌트 분리 및 관리
- Context API 적용하여 , state 관리
- Apollo GraphQL 을 활용하여 서버의 데이터 호출 및 전송
- Next.js 동적 라우팅
- Docker를 통해 가상 서버 활용
- DBeaver tool 활용하여 mock 데이터 생성 및 백엔드 API 테스트
- StoryBook 을 통해 컴포넌트 디자인 공유
보다시피 모든게 새로운 기술스택이었다
Apollo / graphQL , typeScript , contextAPI , Atomic패턴
처음 들어본 내용들이었고 GraphQL은 들어만봤지 정말 사용하게 될줄은..
흥분됐고 너무 즐겁게 다가왔다.
추석연휴 기간이 때문에 인턴쉽은 5주정도 진행되었고, 그렇게
우리팀은 프로젝트를 시작하게된다
1주차!!😅
1주차 목표 : 아토믹 디자인 패턴을 이해하고 컴포넌트 분리와 재사용성을 고민하고
전체적인 프로젝트의 플로우를 파악하자
시작부터 atomic nextJS,graphQL,docker 학습해야 할 내용이 너무 많았다.
Atomic 은 말그대로 원자 단위로 쪼개에서 사용하는 디자인 패턴인데
재사용성을 높이기 위한 패턴 방법중 하나이다.
코드에서 옮겨보면
이렇게 형태가 나누어진것을 볼수있는데
확장성과,재활용성을 높이기위한 방법이다.
Atoms > Molecules > Organisms > Templates > Pages
이렇게 원자가 보여 분자가 되고 분자가모여 하나의 오거니즘에 모여지게되고 템플릿에서 불러오게되는 형태로
컴포넌트를 쪼개어 만들게 되었다.
storybook 을 통해 현재 만들어진 스타일들을 볼수있다.
코드에서는
이런식으로 index.stories.tsx에 코드를 작성해주어야 한다.
2주차 😄
2주차부터는 1주차에 배운내용 + 타입스크립트를 적용하면서 레이아웃을 만들기 시작했는데
코드가 점점 엄격해지기 시작한다.
타입이 맞지 않다면 오류가 발생하기 때문이다.
보내는 쪽에서도 받는 쪽에서도 일치해야한다.
쓰는 방법은 파일확장자명을 jsx 파일을 모두 tsx 확장자명으로 바꾸고만 사용 하면 된다.
그외적으로 page 폴더안에서 아토믹패턴들을 관리하게 되는데
크게 container 와 presenter 를 나눌수 있다
각 컴포넌트가 하는일은
container에서는 함수와 기능 관련된 코드를 작성하고
presenter에서는 오직 뷰에 관련된 코드를 작성한다
(Atoms > Molecules > Organisms > presenter) 이런식으로 말이다.
왜 이렇게 하나요? 여쭤봤더니 유지보수에 용이한 방법이라고 한다.
(개발자 지인한테 물어봤더니 요즘 대부분 이런 방식으로 많이 개발한다고 한다)
오류가 났을때 특정한 컴포넌트 파일로 접근하면 쉽게 오류를 파악할수있고
유지보수에 강력해진다 실제로 해보니 파일을 너무 쪼개놔서 힘들줄 알았는데
처음에 익숙해지는게 힘들지 나중에는 정말 유지보수가 편해진다고 했다.
그리고 이제부터 오류를 줄여 주기위한 타입스크립트를 적용시키기 시작했는데
타입을 정해주는것만으로도 20%의 오류를 줄여줄수있다고 들은것같다.
자바스크립트 언어는 유연해서 다른 언어와는 달리 왠만하면 실행 되는 경우가 많긴하다.
장점이지만 단점인 유연함, 타입스크립트로 엄격해져보자!
이렇게 Store 컴포넌트에서 타입을 지정해주고
받는 컴포넌트에서 타입까지도 바로 적용시킬수있는 편리함까지 얻게된다.
이렇게 말이다.
비로소 리액트와 + 타입스크립트의 조합이 왜 많은 개발자들이 선호하는지 알게 되는 순간이었다.
그리고 리덕스가아닌 contextAPI로 state를 전역관리 하게 되었는데
contextAPI로 props로 보내줄 값을 일일히 원하는 자식 컴포넌트 위치까지
내려주지 않아도 되는 리덕스와?비슷한 개념의 방법이었다.
그렇다면 사수 개발자분에게 나는 물었다.
왜 리덕스를 안쓰고 컨텍스트API를 쓰는건가요??
사수분이 규모가 크지않는 상황에서는 컨텍스트API가 효율적이라는 얘기를 하셨다.
이하 내용은 이렇다.
Redux를 사용하려면 알아야 할 개념들이 있고, 설치해야 할 라이브러리들이 많은데 그러면 자연스럽게 폴더 구조도 복잡해지기 반면, Context API는 React 내장 라이브러리라서 따로 설치할게없고, 알아야할 개념도 없고 Context API의 사용법만 알면 된다는거다!
그리고 작은 프로젝트에서는 리덕스까지 사용하지 않아도 되고 오히려 context API가
효율적이다 라는 말을 하셨다.
사용방법은 똑같이 provider를 통해 정보를 보내주면되는데
이렇게 타입도 같이 보내주게 되면 원하는 컴포넌트에서는 사용하기만 하면된다
useContext를 불러와서 사용하면 된다.
3주차4주차5주차😄
이 모든 부분을 적용하고 페이지를 만드는데 열중했다.
실제 개발중인 프로젝트라서 보여주긴 어렵지만.
작업했던 코드를 대신 첨부한다!
여기서 배운점은 styleComponent가 많아지면 한눈에 알아보기 힘들기때문에
Style 을 붙여 어떤역할을하는지 구별하는 방법으로 개발을 했다.
그리고 회사의 컨벤션(에어비앤비)스타일을 따라
린트를 적용하고 개발을 진행했다.
인터쉽을 마무리하면서..
첫째로 기업 인터쉽을 참가한게 너무 잘한일이라 생각들었다.
나도 두려웠지만 팀원들이있었기 때문에 함께 헤쳐나갈수있었고
어려움도 함께 했기에 성공적으로 마무리할수있었다고 생각이든다.
그리고 뉴비즈 개발자 한분한분 인턴이지만 신경을 많이써주셨고
프로젝트 진행함에있어 많은 도움을 주셔서 정말 감사하게 생각한다.
새로운 기술스택에 처음엔 두려웠지만, 해보니 그랬듯, 익숙해졌고 또 적용해봄으로써
왜필요한지, 왜 이렇게 해야하는지등 이유를 알게되면서 개발에 대한 전체적인 흐름과
개발 툴들은 왜 필요한지등 정말 많은 부분을 깨닫게 되는 순간이었다.
현업에서는 정말 안정성,성능,보안, 확장성에 대해 고민해야하고
내가 짠 코드 한줄에 대한 무게감을 가져아한다.
만약에 1억줄이라면?? 이고잉님의 말이 생각났다.
논리적인 사고는 한순간 떠오르지않는다, 많은 시행착오와 경험을통해 지식이 지혜로 바뀌는게
아닐까 생각한다.답은 정해져있지만 어떻게 도달 한것인가에 대한 끝없는 문제는
앞으로도 계속 풀어나가야할 문제일것이다.
이 직업의 매력은 끈임없이 더 좋은 방법이 계속 나온다는점에 있는 것 같다.
정말 끝없이 말이다.
나는 프로그래머가 되길 결정했다.
하얀 퍼즐 천개를 맞춰 나갈수있는 끈기와 노력이 있는가 하는 ?
맹기완님의 말처럼 할 수 있다는 의지와 열정에 가슴이 벅차오른다.
짧았지만 많은 감정이 오갔던 한달,
잊지못할 위코드 부트캠프의 3개월의 추억, 개발자로 성장하는 앞날이 너무 기대된다.!!!
자 지금부터 시작이다!! 👍
시현님과 함께해서 너무 즐거웠습니다!!
언제나 노력하시고 성장하시고 많이 배웠습니다
함께하고 싶은 개발자 마!시!현!!