사전 작업
미션 1
[미션1] 레이아웃, 기본 API 요청
필수 구현사항
기초 API 요청 확인 및 수정
src/api.js의 엔드포인트를 위 에서 실행시킨 backend서버의 주소로 수정합니다. ex) localhost:4001
브라우저에서 검색결과가 잘 나오는지 확인합니다.
(이 작업이 선행되어야 검색 결과를 가지고 아래 작업 진행이 가능합니다)
API Endpoint가 4001이어야 하는 이유는 backend의 app.js의 포트 번호가 4001이므로 해당 포트로 접근해야만 검색 가능해짐
반응형웹
유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.
992px 이하: 3개
768px 이하: 2개
576px 이하: 1개
디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다.
수정하려고 하는 대상(목록 컨테이터, 각 목록 아이템 등)이 어떤 셀렉터를 사용하는지, 현재는 어떤 css가 작성되어 있는지 확인합니다.
css 파일 하단에 mediaquery를 작성합니다. 분기 조건문을 max-width로 작성합니다.
조건에 맞춰 컬럼 갯수가 override되도록 합니다.
미디어 쿼리, 그리고 조건에 따른 CSS 변경에 대한 개념을 익힘으로써 해결 가능
다크모드
다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다.
CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다.
모든 글자 색상은 #FFFFFF , 배경 색상은 #000000 로 한정합니다
다크모드 토글
기본적으로는 OS의 다크모드의 활성화 여부를 기반으로 동작하게 하되, 유저가 테마를 토글링 할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 만듭니다.
방법1. input 이벤트 제어, DOM 제어, 로컬스토리지 사용법 등을 각각 학습하여 코드를 작성합니다.
방법2. 코드를 copy & paste하여 원하는 동작이 되는 정도만 작성합니다.
시맵틱 마크업(선택)
현재 HTML 코드가 전체적으로
<div>로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다.
section, $wrapper, ul/li 사용으로 좀 더 직관적인 구조 생성
