yeonjinkimm/wanted-pre-onboarding-fe

원티드 프리온보딩 프론트엔드 코스 사전과제

About Me

안녕하세요 프론트엔드 개발자 김연진입니다 ! 프론트엔드 개발을 공부하고 싶어 코드스테이츠 소프트웨어 엔지니어링 부트캠프 33기를 수료하였고 원티드 프리온보딩 코스를 통해 실무에 좀 더 가까운 역량과 기술을 쌓고 싶습니다.

:: 원티드 프리온보딩 프론트엔드 코스 사전과제

Assignment 1 - Login

• useRef를 사용하여 렌더링 최적화 고려
• Local Storage에 로그인 정보 저장
• 로그인 완료 후 메인 페이지로 이동

Assignment2 - GNB

• position: sticky 속성으로 화면 상단에 고정
• justify-content: space-between; 속성으로 내부 요소 정렬
• media query로 반응형 구현 : 모바일 사이즈의 경우 가운데 Input 창이 사라짐

Assignment3 - Validation

• 이메일과 비밀번호 유효성 검사

  • 이메일 조건 : @ , . 포함
  • 비밀번호 조건 : 대문자, 숫자, 특수문자 포함 8자리 이상
  • 정규표현식을 사용하여 validation 함수 만들고 분리

• 유효성 조건을 통과하지 못하면 Input border가 빨강 색상으로 변경

• 유효성 조건을 모두 통과한 경우에 Button 색상이 진한 파랑으로 변경

Assignment4 - Routing

• location.href, location.reload()로 로그인, 로그아웃 시 라우팅 로직을 통해 페이지가 이동 되도록 구현

Assignment5 - Feeds

• 각 피드의 더미 데이터는 public/data/data.json
• FeedList 컴포넌트에서 fetch 함수를 사용해 데이터 요청
• Feed 컴포넌트에서 image.onload를 사용해 이미지가 로딩된 후 컴포넌트가 로딩 되도록 구현
• CommentsForm 컴포넌트에 댓글 기능 구현
  • Enter key & 클릭으로 게시 가능
  • 게시 후 Input 초기화

참고 이미지

참고 이미지 링크