[Internship]

 

 

 

Wecode bootcamp의 마지막 과정인 인턴쉽을 2021.11.15 ~ 2021.12.09 4주간 진행하였다.

 

 

프로젝트 담당업무

:  웹페이지의 로그인, 회원가입 페이지를 React, scss를 사용하여 새로 구축하였다.

 

 

Signup page

   기존 : tabler react 라이브러리를 사용하여 기본적인 UI만 존재. (기능x)

              (backend는 Strapi + AWS EC 서버)

   개선

• 수정이 힘든 library로 기존 form이 구성되어있어서 향후에도 쉽게 수정할 수 있도록,  react scss로  새로운 UI 구축.
• 기존 login page에서 formik를 사용하여서,  signup page에서도 동일한 formik library를 활용하여  form을 구성.
• yup을 사용하여 유효성검사.
• 기존 회원이면 form reset (+'already exist' alert)
• 신규 회원은 strapi에 user정보가 등록되고 가입한 이메일주소로 회원인증 메일발송. (+loginpage로 이동)

   

login page

   기존 : tabler react 라이브러리를 사용하여 UI 구성

   개선 : scss로 UI 새롭게 디자인 

 

 

 

Code

https://github.com/manonkim/FormikYup

GitHub - manonkim/FormikYup: Signup page(formik/yup)

 

 

[구현 영상]

 

 

 

Study

 

https://manon-kim.tistory.com/101

[React] Formik

https://manon-kim.tistory.com/99

Strapi

 

 

---

 

 

 

 

 기업협업 첫날 대표님과 미팅후에 솔직히 '앗..잘못왔구나.....'  생각이 들었다.

나는 건설회사만 경험 해 보아서 '말로만듣던 개발회사의 자유로운 분위기와 개발자의 문화를 드디어 느껴보는건가!'라는 생각과 기대가 살짝 있었는데, 이곳은 현재 대표님께서 혼자 운영하시는 1인 기업이었다. 

 

 더군다나 나는 위코드 동료 1명과 나, 2명만 이 곳에 오게되었는데 다른 동료는 a-frame으로 3d 작업을 하게되었고,

나 혼자서 프론트를 맡게되었고 대표님은 백엔드개발자이셔서 프론트는 정말! 오롯이! 혼자서! 진행하게 되었다.

 

 처음 일주일은 코드분석 하는데에만 통으로 할애하였다. 다른사람이 써놓은 코드를 분석하는 일은 여간 쉬운일이 아니었고, 코드의 절반이 주석처리 되어있고, 여러인턴들이 다녀가면서 써놓은건지 아주.....몹시......말끔하지 못하였다........어디부터 손봐야할지 각이 안나오는 코드들을 보자니, 코드한줄당 열정1g씩 깎여가는 기분이 매일 들었다.

 

 

 하지만 내가 개발자로써 처음 오롯이 맡게된 일을 대충하고싶지는 않았다.

대표님이 첫 주 코드분석 기간 후 주신일은 간단한 포스팅 버튼 생성? 정도였는데, 기존의 코드를 분석해보니 로그인, 회원가입이 우선적으로 완성되야할 것 같아서 이것먼저 해보겠다고 제안을 드렸고, 기쁘게 해보라고 응원해주셔서 열심히 해보았다.

 

  부트캠프 1,2차 프로젝트 기간동안 로그인, 회원가입 부분은 맡은적이 없어서, 처음해보는거라 재밌게 공부하고 만들 수 있었다.

기존의 login page에 formik라는 library로 form이 구성되어있어서, 이것부터 차근차근 구글링해서 공부하고, 서칭해다보니 yup이라는 유효성검사를 깔끔하게 코드작성할 수있는 라이브러리도 있어서 같이 스터디해서 활용해보았다. 

 

 기존에 tabler react라는 라이브러리로 기본틀이 구성되어있었는데, 정말 어떻게해도 수정이 안되서 구글링도 해보고 여쭤보기도 했지만, 결국 다시 코드를 짜는게 빠른길이라고 판단되어서 회원가입 페이지 UI를 새로 만들었고, 그 form을 활용하여 login page도 다시 새로 만들게되었다.

 (styled-component로 작성해보려고 했는데, react버전이 너무 낮아서 불가능했고, 심지어 scss도 install안되는 몹시 낮은버전이었다..언제 작성된지 모르겠는 code들...결국 말씀드리고 버전을 조금 높혀서 scss로 코드를 짰다.)

 회원가입과 로그인 페이지를 완성 후, 신규 유저 회원가입 시 email 인증까지 해보겠냐고 제안하셔서, user인증까지 무사히 마무리 할 수 있었다.

 

 

 

 

 

 

성장 포인트

 처음엔 혼자서 오롯이 해나가야한다는 생각에 막막했지만, 혼자 코드분석하고 구글링해서 스터디하고,

계획했던 것들을 완성해나가면서 10g정도의 자신감이 생긴 것 같다.

 

 또, 어떤 질문이든 친절하고 상세하게 알려주시는 대표님 덕분에 편하게 질문하다보니, 혼자서 끙끙댈 줄 알았던 인턴기간동안 소통하는 법도 정말많이 배우고 늘었다.

012345

대표님과의 수많은 채팅의 흔적..

 

 매일아침 teams로 '좋은아침입니다~'로 시작해서 하루의 계획을 아침에 서로 나누고, 중간중간 대표님과의 중간상황 체크로 원활하게 프로젝트를 마무리하게 되면서 소통의 중요성을 다시한번 몸소 깨닫게되는 좋은 경험이었다.