프론트 엔드 과제
요구 사항
디자인
- 디자인 요구사항
- 하단의 디자인 파일을 Figma 를 통해 열어서 동일하게 구현하는것을 목표로 합니다.
프레임워크
- 프레임 워크 요구사항
- 사용할 프레임 워크는 React 입니다.
- 가능한 최신 버전을 이용해 주십시오.
npm run start혹은yarn run start를 통해 바로 실행이 가능하도록 설정해야 합니다.- Javascript 혹은 Typescript 는 상관없습니다.
- 코드를 확인 할 수 있도록 src 내의 파일들은 가능한 주석을 사용해 기술해 주시기 바랍니다.
- 작업이 끝난뒤 압축하여 이메일로 보내주시면 됩니다. ( 암호가 걸려있으면 안됩니다. )
- 발송할 이메일 주소는 --- 입니다.
- 사용할 프레임 워크는 React 입니다.
API 동작
- API 동작 요구사항
- Ajax 를 통해 서버에서 데이터를 불러옵니다.
- API 문서는 다음 링크 : --- 를 접속하여 확인할 수 있습니다.
- API 는 형식상 존재하며 실제로 데이터가 저장.수정 반영되지 않습니다.
- 랜덤으로 10% 확율로
500혹은400에러가 발생할 수 있습니다.- 예외 처리 필요합니다.
- 예외 처리는
alert팝업으로 처리합니다.
- 실제 API 호출할 링크는 다음과 같습니다.
- ㅡㅡㅡ
- GET Method 는 페이지가 시작할때 불러와서 화면에 표시할 데이터이고,
- POST Method 는 페이지에서 저장 버튼을 눌렀을때 서버로 전송할 API 입니다.
기능
- 기능 요구사항
대메뉴를 누르면 접히고 펼쳐지게 됩니다.소메뉴는 각각의 페이지를 선택합니다.- 선택시 색상 변경이 있습니다. 디자인 파일을 참조해주세요.
정보5에서는 라디오 버튼에서선택3을 눌렀을때만 하단의 텍스트가 표기되고, 나머지선택1,선택2는 텍스트가 사라집니다.날짜에서는 누르면 디자인 파일에 있는것처럼 캘린더가 표기 됩니다.저장버튼을 누르면 API 에서 POST 를 통해 서버로 전달됩니다.- 이때 위에서 언급한대로 랜덤하게 400 , 500 이 뜨도록 되어 있습니다.
제출시 주의사항
라이브러리사용 가능합니다.- 파일을 압축하여 제출시
node_modules는 제외해 주세요.- 퍼미션 혹은 OS 문제로 보통은 삭제후 새로 설치하여 테스트를 하게 됩니다.
- 내부 보안 정책상 zip 파일의 전송이 제한됩니다.
- 따라서 다음 주의사항을 숙지해주세요.
- 파일 첨부시 주의사항
- 구글
- 기본적으로 구글 드라이브를 활용하여 파일을 전달해주세요.
- 구글 드라이브로 제출시
권한확인해주세요.
- 네이버
- 대용량 파일 첨부를 이용해 주세요.
- 10MB가 안되어 대용량 파일 첨부가 아닌 일반 파일 첨부가 되면 차단이 될 수 있으니, node_modules 의 일부나 압축파일을 추가하여 적당히 10MB를 살짝 넘게 해주세요.
- Github
- 공개로 하여 업로드하여도 되나, 채용 전형이 종료된뒤 삭제 혹은 비공개로 전환해 주세요.
- 구글
npm run start를 하였을때 에러 없이 정상 동작하는가 한번 더 확인해주세요.
평가 기준
- 디자인
- 실제 서비스에서는 디자인 파일을 그대로 구현해야 합니다.
- 기능
- 기능 요구사항을 충실히 지켜주세요.
- API
- API 를 통해 데이터를 불러옵니다. Ajax로 데이터를 불러와주세요.
- 시간
- Deadline 이전에 보내주세요.
디자인
- 디자인 파일 (ㅡㅡㅡ) , PDF는 참고만 하세요. Figma를 추천합니다. ) ㅡㅡㅡ ㅡㅡㅡ
참고 사항
- 참고 문서 Local 에서 SSL 사용하기
FAQ
Q. Axios 는 사용해도 되나요?
A. 됩니다. Fetch를 사용해도 되며, 둘중에 편하신걸 사용하면 됩니다.
다만, jQuery 는 React 와 충돌할 수 있기에 안됩니다.
Q. node_moduels 없이 실행이 되나요?
A. package.json 만 정상적으로 존재한다면 npm install 을 한뒤 실행합니다.
간혹 src 만 보내오는 응시자들이 있으나 실행이 매우 어렵습니다.
심심할때쓰는 기록장