Portfolio

[3. 어디서부터 어떻게 시작해야하는지]

[3-1. 문제 정의 및 쪼개기]

요구사항 천천히 똑바로 읽고 이해하기 > 체크리스트 만들기

⚠️ 절대 코드를 먼저 짜기 말고, 요구사항 정리하기
체크리스트 형식으로 정리해두고, 체크해나가면서 하기

[3-2. 컴포넌트 구조 생각해보기]

마크업 보며, 컴포넌트로 바꾸어보기

⭐️ 개발 우선순위 잘 정하기 (여기까지 최대 30분 정도)

input이 있어야 suggestion이 뜨고, SelectedLanguage로 등록할 수 있다.
모두 100%씩 만드는게 아니고, 중간중간 왔다갔다 하며 완성시킨다.

실전 문제 풀이

1. 체크리스트 정의 (33분)

문제 핵심 이해

인사 정보 페이지 SPA로 리뉴얼

마크업 구조, 클래스, id 변경 금지
style.css 선택자 변경 금지

모든 경로 앞 /web/ 절대경로 붙이기

필수

[ GNB - Header.js ] - 홈 메뉴와 사인업 메뉴 렌더링

홈 메뉴를 클릭 하면, URL 주소는 ‘/web’ 으로 되며, 인사정보 카드 페이지가 렌더링 된다.

사인업 메뉴를 클릭하면, URL 주소는 ‘/web/signup’ 이 되며, 인사 정보 등록 페이지가 렌더링 된다.

홈메뉴는 항상 좌측, 사인업 메뉴는 우측에 정렬되어야 한다.

justify-content: space-between

홈 메뉴는 좌측에서 15px, 사인업 메뉴는 우측에서 15px 떨어진 곳에 존재

Nav바의 padding 15px 적용

메뉴 이름 글자 위에 마우스 오버 시, 커서가 손모양으로 바뀐다.

cursor: pointer

1.2 페이지 제목 - ContentTitle.js

홈페이지와 등록페이지별 제목이 렌더링 되도록 함

홈메뉴, 사인업 메뉴 클릭 시, 각 요구사항에 맞는 페이지 제목이 렌더링 된다.

[1.3 인사 정보 데이터]

기존 (name, email, role) ⇒ nickname, mbti 추가

fetch API를 통해 JSON 데이터를 불러온다.

리뉴얼 후 데이터는, 로컬스토리지의 생성 시, 로컬스토리지에 저장된다.

key: personalInfo

value

: idx, name, email, nickname, role, mbti

idx는 몇 번째로 등록된 데이터인지를 나타내는 인덱스

[2. 인사정보페이지 - HomePage.js]

카드를 뒤집으면, 새로 추가된 MBTI 정보를 확인할 수 있다. (home.html 마크업 참고)

인사정 보페이지는 <페이지 제목 섹션> 과 <카드 인터페이스 섹션> 으로 구성된다.

ContentTitle.js에서 페이지의 제목이 ‘Great PeoPle’ 이 되도록 구현한다.

카드 앞면에는 ‘인사 정보의 닉네임'이, 카드 뒷면에는 해당 닉네임의 ‘MBTI 가 표시’ 된다.

(~1시간 남음)

카드를 클릭 시, 카드가 뒤집히도록 구현

‘is-flipped’ 클래스 명 활용

애니메이션은 style.css에 구현

브라우저 재 접속 시, 카드의 뒤집한 상태가 유지되도록 한다.

~23분

localStorage에 저장시, 뒤집힘 여부 저장

key: cardStatus
value:

idx: 몇 번째로 입력된 데이터 인지 나타내는 인덱스
status: 카드의 클래스 이름

뒤집힌 카드: ‘card is-flipped’
아닌 카드 : ‘card’

페이지 하단 도달 시, 그 다음 카드가 순차적으로 로드되는 ‘무한스크롤 기능’ 구현

[2.3 스타일]

카드의 레이아웃을 맞춘다.

display, flex-flow, justify-content, align-content

카드의 사이즈를 지정한다.

가로는 200px, 세로는 260px

카드 호버 시, cursor:pointer 적용

카드의 앞 뒤면은 공통 스타일을 적용한다.

글자는 카드의 수직 가운데 정렬

font-weight: 700

font-size: 40px

color: white

카드 앞면의 배경색은 #0D0D0D

카드 뒷면의 배경색은 #F2F2F2

글자 색상은 #3098F2

[3. 인사정보 등록 페이지- signup.html, SignupPage.js]

5가지 정보를 입력 및 등록할 수 있는 인사 정보 입력 폼을 구현

구성요소는

페이지 제목, 3개의 텍스트 필드, 2개의 셀렉트 필드, 등록버튼 으로 구성

등록버튼은 항상 활성화 되어 있음

페이지 제목은 ‘Sign Up, GreatPeoPle!’

텍스트 필드는 각각 ‘이름, 이메일, 닉네임' 을 레이블로 지정한다.

셀렉트 필드는 각각 ‘직군, MBTI’를 레이블로 지정한다.

이름, 이메일, 닉네임, 직군은 필수 입력 요소 이고, 레이블 우측에 ‘(필수*)' 글자가 표시되어야 한다.

<span class="mark">(필수*)</span>

유효성 검사

이름: 한글만 입력 가능하고, 문자열의 길이는 2~4이다. 숫자 및 특수문자 입력은 불가능하다.

이메일: 대소문사 구분 없이 영문만 입력 가능, 숫자 입력 가능, 특수문자 입력 불가능

메일 서버 도메인 주소: grepp.co 만 입력이 가능

닉네임: 대소문자 구분 없이 영문만 입력 가능, 문자열 길이는 3~10이다.

텍스트 필드에 잘못된 값 입력 시, 해당 필드에 대한 간단한 설명이 나타나도록 한다.

이름: "2~4 글자의 한글만 입력이 가능합니다."

이메일:

"이메일 ID는 영문(대소문자 구분 없음)과 숫자만 입력이 가능하며, @grepp.co 형식의 이메일만 입력이 가능합니다."

닉네임: "대소문자 구분 없이 3~10 글자의 영문만 입력이 가능합니다."

직군 셀렉트 필드는 4개의 옵션을 가진다.

직군을 선택해주세요, 프론트엔드, 백엔드, 풀스택

MBTI는 17개 옵션을 가진다.

MBTI를 선택해주세요, ENFJ, ENTJ, ENFP, ENTP, ESFJ, ESTJ, ESFP, ESTP, INFJ, INTJ, INFP, INTP, ISFJ, ISTJ, ISFP, ISTP

필수 입력 요소를 채운 후, 등록 버튼 클릭 시

로컬스토리지에 없다면 새 인사정보가 로컬스토리지에 추가 된다.

alert창: "성공적으로 등록되었습니다."

텍스트 및 셀렉트 필드의 값이 초기화되고, URL은 그대로 /web/signup 을 유지한다.

이메일, 닉네임과 중복되는 데이터가 로컬스토리지에 존재하는 경우, “이메일 혹은 닉네임이 이미 등록되어 있습니다.” 는 메세지와 함께 오류경고창을 표시한다.

파일: 주어진 style.css 파일 내에서만 코드를 작성 및 수정합니다.

레이블 영역의 스타일

padding 속성을 이용하여 레이블 영역 안쪽에 상하 3px, 좌우 5px 크기만큼의 여백을 줍니다.
레이블의 글자 크기는 0.7em 이고, 글자 색상은 #5A5C66 입니다.
필수 요소임을 나타내는 글자는 레이블의 우측에 위치하며 글자의 색상은 빨간색입니다.

텍스트 필드와 셀렉트 필드 스타일

3개의 텍스트 필드의 글자 크기는 1.0em, 글자 색상은 #5A5C66 입니다.
2개의 셀렉트 필드의 글자 크기는 1.0em, 글자 색상은 #5A5C66 입니다.

“등록" 버튼 스타일

버튼의 글자 크기는 1.0em 입니다.
버튼의 배경색은 #29323C 이고, 글자 색상은 흰색입니다.
버튼 위에 마우스 오버를 하면 커서가 손 모양으로 바뀝니다.
버튼 위에 마우스 오버를 하면 버튼의 색상이 #637488로 바뀝니다.

옵셔널

[]

2. 개발 우선 순위 정하기

2.1 컴포넌트 구조 그리기

<App>

</App>

2.2 API 더미 데이터 확인

1. [Get,]

code

2.3 어플리케이션 흐름 확인

개발 순서

GNB ⇒ ContentTitle ⇒ HomePage ⇒ SignupPage

Feat. GNB