검색 페이지 요구사항 1. 검색 페이지에 맨 처음 진입 시 사용자들이 제일 많이 검색한 위스키 리스트 Top 10을 출력한다. 2. 사용자가 입력한 값이 있을 경우 해당 입력값을 기반으로 입력값이 포함된 위스키 리스트를 출력한다. 3. 사용자가 값을 입력하고 검색 버튼을 클릭했을 경우 바로 해당 키워드가 포함된 위스키 리스트를 출력한다. 4. input에 입력된 값이 아무것도 없을 경우 다시 위스키 리스트 Top 10을 출력한다. 5. 리스트에 출력된 위스키들은 각각 클릭 시 해당 위스키 상세 페이지로 이동한다. 인기 검색어 구현하기 인기 검색어 추적은 사용자가 검색어를 입력하거나 또는 검색 페이지에서 상세 페이지로 넘어갈 때마다 해당 값을 count하는 로직을 백엔드에서 구현한다. 해당 API 호출 시..
기존의 전역 스타일링 적용 방식 웹 브라우저의 기본 스타일값을 제거하고 통일성있는 CSS 스타일 적용을 위해 reset.css 파일을 생성하고 index.js에 해당 css를 import 하는 방식으로 사용했다. 하지만 Styled Components라는 CSS-in-JS를 사용하고 있으니 사용 중인 라이브러리를 최대한 활용해서 쓰는 것이 더 효율적일 것이라는 생각이 들었다. 따라서 별도의 css 파일이 아닌 Styled Components에서 제공하는 GlobalStyleds라는 전역 스타일링 방법을 사용했다. Global Style 적용하기 프로젝트를 아우르거나 공통적으로 들어가야 할 스타일을 적용할 때 전역적(Globally)으로 스타일을 지정할 수 있는데, 이때 쓰는 방법이 전역 스타일링이다. G..
1. Extension 설치 VS Code에서 ESLint, Prettier Extension을 설치한다. 2. yarn config 설치 airbnb 스타일 가이드의 코드 규칙을 적용할 수 있는 yarn config를 설치한다. 이때, 패키지가 의존하고 있는 다른 패키지들도 함께 설치해야 하므로 다음의 명령어를 사용해 의존성 패키지들을 확인한다. yarn info eslint-config-airbnb peerDependencies 3. eslint 설치 위의 의존성 패키지들과 함께 eslint-config-airbnb를 설치한다. yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin..
Textarea 📌 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다. cf. 는 간단한 한 단락의 글만 가능하다. 속성 autocomplete 컨트롤 값이 브라우저에 자동으로 완성될 수 있는지의 여부를 나타낸다. (on/off) autofocus 페이지가 로드됐을 때, 포커스를 오버라이드(ex. 사용자가 다른 컨트롤 폼에 타이핑)하지 않는다면, 폼 컨트롤이 입력 포커싱될지 지정한다. 이때, 문서에서 오직 하나의 폼 관련 요소만 이 속성이 지정될 수 있다. cols / rows textarea의 너비/높이를 지정한다. (CSS에서 height, width로 더 손쉽게 지정 가능) disabled 사용자가 컨트롤과 상호작용할 수 없도록 한다. maxlength / minlength 사용자가 입력할 수 있는 문자..
Radio 📌 임의의 그룹 내에서는 여러 값 중 단 하나만 선택할 수 있다. 👉 name : name의 값이 같은 것 중 하나를 선택한다. 👉 value : 선택했을 때 전달될 값을 나타낸다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. radio 버튼은 체크박스 버튼과 달리 선택을 해제할 수 없다. Checkbox 📌 사용자가 여러 선택 사항 중에서 하나 이상의 값을 선택할 수 있게 한다. 👉 name : 전달할 값의 이름을 나타낸다. 👉 value : 전달할 값을 나타낸다. value 속성이 생략된 경우 기본 값은 on이다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. Select 📌 특성 multiple : 다수의 항목을 동시에 선택할 수 있도록 한다. (윈도우는 ctrl ..
기본 구조 📌 사용자로부터 인풋(Input)을 받기 위한 태그 form 요소 스타일링 시 모든 elements의 유효성을 나타내는 CSS의 :valid와 :invalid 의사 클래스를 사용할 수 있다. 1) action (필수) 📌 action="API 주소" 해당 form을 처리할 로직이 있는 API의 서버 쪽에 접근 가능한 URL을 명시한다. , , 요소의 formaction 특성으로 재정의할 수 있다. [참고] formaction 이 제출 버튼인 경우, 제출한 정보를 처리할 URL을 명시한다. URL을 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선한다. 양식 소유자가 존재하지 않으면 영향을 주지 않는다. 2) method (필수) 📌 method="GET | POST" 양식을 ..
blockquote 📌 인용 내용 어떤 문단이나 내용 전체가 하나의 인용문일 경우 사용한다. q보다 더 많이 사용하는 편이다. 주로 들여쓰기를 한 것으로 그려진다. 인용문의 출처 URL은 cite 특성으로 나타낸다. q 📌 문장 내에 작게 들어가는 인용문이 있을 경우 (별도 블록을 쓰지 않아도 될 짧은 인용문) 사용한다. 대부분의 브라우저에서 앞과 뒤에 따옴표를 붙여 표현된다. 인용문의 출처 문서나 메시지, URL은 cite 특성으로 나타낸다. [참고] cite 📌 저작물의 출처를 표기할 때 사용한다. 보통 브라우저에서 기울임꼴로 그려진다. 인용 및 출처 표기 예시 전체가 하나의 인용문으로 로 감싸준다. 태그를 이용해 문단 별로 나눠준다. 문서 내 짧은 인용문은 태그를 통해 나타낸다. 👉🏼 큰 따옴표를 ..
정의 목록을 사용하는 경우 1. 용어를 정의할 때 2. key-value로 정보를 제공할 때 Coffee Black hot drink Milk White cold drink 정의 목록을 사용하는 이유 단순히 용어 정의 시 사용할 수도 있지만 key-value 형태의 정보를 전달 할 때 , 보다 훨씬 더 풍부한 의미를 전달할 수 있기도 하다. 보통 손으로 필기할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 사용하곤 한다. 하지만 HTML 문서를 작성할 때는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 아래의 태그를 사용하여 용어에 대한 정의를 하고 있음을 나타내는 것이다. dl == desc..
ol 📌 Finishing places of contestants not in the winners’ circle: Speedwalk Stu Saunterin’ Sam Slowpoke Rodriguez == ordered list 순서가 중요한 목록 (ex. 요리법, 실시간 목록 등...) 보통 숫자 목록으로 표현된다. 특성 reserved : 내부에 지정한 항목이 역순으로 배열된 것인지 나타낸다. start : 항목을 셀 때 몇 번째 항목부터 시작할 것인지 나타낸다. type : 항목을 셀 때 사용할 카운터 유형을 나타낸다. 👉🏼 a, A, i, l, 1 (기본값) ul 📌 first item second item second item first subitem second item second subi..
