패스트캠퍼스 프론트엔드 7

야놀자X패스트캠퍼스 파이널 프로젝트 복습 및 후기

1. 프로젝트 정의 1) 주제 : 취소 수수료 없는 숙소 양도 거래 서비스 2) 개발 기간 : 2023.12.06 ~ 2024.1.30 3) 개발 Repo https://github.com/Yanol-Market/frontend GitHub - Yanol-Market/frontend Contribute to Yanol-Market/frontend development by creating an account on GitHub. github.com 2. 사용 스택 3. 맡은 기능 1) 로그인 이메일 혹은 비밀번호를 잘못 입력 했을 시 에러를 띄어주는 유효성 검증을 진행 했습니다. 비밀번호를 잊어버렸을 때 가입한 이메일로 임시 비밀번호를 보내주는 기능을 구현 했습니다. 서비스에서 상품 등록 시 필요한 야놀자..

야놀자X패스트캠퍼스 미니프로젝트 복습

0. 느낀 점 이번 미니프로젝트를 11/20 ~ 12/01일까지 진행 후 1주일의 리팩토링 기간을 가졌는데 정말 많은 것을 배웠고 또 느꼈던 계기가 되었다. 특히 백엔드와 협업하면서 정말 많은 것을 깨달았고 소통의 중요성도 배웠다. 원래는 마지막에 느낀 점을 쓰려고 했는데 생각보다 길어져서 앞에서 작성하고자 한다. 다른 팀보다 한 명이 부족한 상황에서 초반에 사람이 부족해서 못한 기능을 후순위로 뒀는데(장바구니,예약,예약확인) 원래 맡았던 부분들이 지체 됐다 보니 조급한 마음으로 급하게 후순위를 가져갔고 그래서 내 생각보다 완성도 있게 짜진 못했던 것 같다. 나중에 다같이 도와주더라도 초반 역할 분담은 확실하게 해야 함을 느꼈다. 그리고 백엔드와는 많은 일이 있었지만 결론적으로는 많은 소통을 해가면서 데..

야놀자X패스트캠퍼스 토이프로젝트2 복습

이번에 두 번째 토이프로젝트를 11/6~11/16일까지 진행했는데 짧지만 많은 걸 배웠던 시간 같았다. 바로 내일부터 백엔드와 같이 프로젝트를 하기 때문에 오늘 틈틈이 복습 할 것을 적어두려고 한다. 복습 내용은 남들이 보기엔 사소할수도 있지만 내가 이번에 프로젝트 하면서 어려움을 느꼈던 부분 위주로 적으려고 한다. 주제는 채팅 서비스였기 때문에 우리 조는 카카오톡을 비슷하게 따라하고자 했다. 1. 동적 라우팅(Dynamic Routing) 이번 프로젝트에서 NextJs를 사용했는데 사실 아쉬운 점 중 하나였다. SSR과 SSG , CSR의 차이점을 충분히 이해하지 못해 이를 활용하지 못했던 점이 아쉬웠다. 스택 선정이 매우 중요함을 느꼈고 나중에 NextJs 관련해선 길게 포스팅 해볼 예정이다. 일단 ..

야놀자X패스트캠퍼스 토이프로젝트 1 복습

9월에 진행했던 첫 번째 토이프로젝트로 직원들을 위한 위키 사이트를 만들었는데 두 번째 토이프로젝트를 하기 앞서 이 때 부족했던 점을 살펴보고 복습하고자 한다. 내가 맡은 부분 : 로그인 / 회원가입 / 유저 정보 입력 페이지 1. 구현사항 1) 회원 가입 / 로그인 페이지 - 구글 아이디 및 이메일로 회원 가입 구현 2) 유저 정보 입력 페이지 - firebase와 연동해서 정보 입력하기 , 로그인 후 내 정보 수정을 눌렀을 때 로컬 스토리지에 데이터가 있으면 그 데이터 유지해주고 거기서 갱신시키도록 함 2. 막혔던 부분 - firebase의 DB 컬렉션을 구성할 때 user 컬렉션과 팀 컬렉션을 직접 짰는데 초반에 어떻게 해야 하는 지 감이 안와서 많이 헤맸던 것같다. - firebase의 유저 정보..

[Web]프로젝트 셋팅 : ESLint & Prettier

이번 토이프로젝트를 진행하면서 eslint와 prettier를 규칙을 정해서 협업을 했는데 내 개인프로젝트에 적용시켜보려고 천천히 정리해보고자 한다. 1. ESLint & Prettier 보통 하나만 사용하지 않고 두 개를 합쳐서 사용한다고 한다. 이 둘에 대해 그냥 코드를 이쁘게 해주는구나 생각하고 깔아놨는데 생각해보니 정확한 역할을 생각해보진 않았던 것 같다. 그래서 토이프로젝트를 마치고 복기하면서 프로젝트 셋팅 과정에 대해 차근차근 살펴보려고 한다. 이 둘의 역할은 다음과 같이 정리할 수 있다. ESLint : 코드 구현 방식을 일정하게 유지 시켜주는 것 Prettier : 에디터에서 코드를 작성할 때 스타일 등을 일정하게 유지 시켜주는 것 출처 : https://helloinyong.tistory..

패스트캠퍼스X야놀자 부트캠프 과제 리팩토링(2)

https://fastcampus.co.kr/b2g_MegabyteSchool_frontend 패스트캠퍼스 X 야놀자 : 프론트엔드 개발 부트캠프 | 패스트캠퍼스 프론트엔드 개발자로 취업까지 함께 가는 패스트캠퍼스 X 야놀자 부트캠프를 만나보세요! fastcampus.co.kr 패스트캠퍼스X야놀자 프론트엔드 부트캠프 두 번째 과제로 JS를 활용해 직원 관리 서비스를 구현하는 과제를 받았다. 2023.08.08 ~ 2023.08.18 약 10일간 진행 됐고 나는 맨유 선수단에 선수를 추가하고 수정, 삭제 하는 기능을 구현 했다. 1. 과제 내용 1) 과제 설명 : 주어진 기간 동안 필수 요구사항 및 선택 요구사항을 고려해서 직원 관리 서비스를 구현하는 내용이다. 2) 과제 요구 사항 (구현 한 것들) ☆필..

패스트캠퍼스X야놀자 프론트엔드 부트캠프 과제 리팩토링(1)

https://fastcampus.co.kr/b2g_MegabyteSchool_frontend 패스트캠퍼스 X 야놀자 : 프론트엔드 개발 부트캠프 | 패스트캠퍼스 프론트엔드 개발자로 취업까지 함께 가는 패스트캠퍼스 X 야놀자 부트캠프를 만나보세요! fastcampus.co.kr 패스트캠퍼스 X 야놀자 프론트엔드 첫 번째 과제로 HTML과 CSS를 활용한 클론코딩을 수행했다. 23.07.24~23.07.28 까지 JS를 제외한 HTML과 CSS 위주로 내가 고른 웹 사이트를 똑같이 구현해보는 시간을 가졌다 1. 과제 내용 1) 과제 설명 : 주어진 기간 동안 원하는 사이트를 골라 똑같이 사이트를 구현하는 클론코딩 과제였는데 내가 구현하고자 했던 사이트는 인터파크 사이트이다. flex와 grid를 활용할 수..