거의 모든 웹사이트나 앱에서 사용자의 편의를 위해 검색어 자동완성 기능이 구현되어 있다고 생각한다. 부트캠프 과제에서 모두 검색어 자동완성 기능은 구현을 했었기 때문에 기록을 해두려한다. 최근 진행했던 토이프로젝트 검색어 자동완성 Code 가독성을 위해 css 코드나 불필요한 코드들은 정리한 코드. 1. Input에 입력되는 데이터를 searchValue 상태값에 업데이트 2. showDropDown 함수를 searchValue(검색어)가 바뀔때마다 실행하기 위해 useEffect() 처리 3. 상품데이터에서 filter() 를 통해 상품명에 검색어가 포함된 데이터들만 필터링해주고 dropDownList 상태값에 업데이트 4. 필터링된 데이터인 dropDownList를 map 함수를 이용해 렌더링 exp..
최근 토이프로젝트로 쇼핑몰을 만들면서 페이지 이동 시에 항상 최상단에 스크롤이 위치하게끔 구현하였다. 1. Window.scrollTo() 는? 스크롤을 이동시키는 방법에는 두 가지가 있다. 첫번째로는 x축, y축의 좌표만을 설정해서 변경하는 방법으로 아래와 같이 쓰인다. window.scrollTo(x축, y축) // 문서의 왼쪽 상단을 기준으로 x축은 가로축, y축은 세로축 두번째로는 option 값에 좌표 및 효과를 설정해서 변경하는 방법으로 아래와 같이 쓰인다. window.scrollTo(option) // option 값 - top: 세로위치, left: 가로위치, behavior: 스크롤 효과(smooth, instant, auto) 2. 페이지 이동 시 최상단에 위치시키기 아래 코드처럼 s..
이전에 부트캠프 과정으로 React 프레임워크 활용 과제를 진행했었다. 과제를 통해서 부족한 부분이 있었지만 제출 기한때문에 보완하지 못했던 것이 있었고, 3월 13일 ~ 4월 2일 약 3주간 이러한 부분들을 새로운 토이프로젝트를 통해 공부하면서 배포까지 진행보았다. ※ 기술스택: Typescript, React, Emotion, Firebase Auth, Firestore Database, Context api 1. 개요 및 기능 자주 이용하는 쇼핑몰 중 무신사스토어, 솔드아웃이 있는데 비슷한 컨셉을 목표로 웹사이트로 프로젝트를 진행했다. 상품 데이터는 하드코딩으로 JSON 데이터를 만든 후 JSON Server로 사용하다가 Glitch로 배포해 사용했다. 로그인/회원가입부터 쇼핑몰의 기본적인 기능에 ..
HTML/CSS 과제, Javascript 과제, React 과제를 매달 진행해왔지만 만들어진 가이드라인이 있었다. 처음으로 기획부터 개발까지 진행할 수 있는 과제였고, 설레는 마음으로 1월 23일 ~ 2월 17일간 프로젝트를 진행했다. ※ 기술스택: Typescript, React, Tailwind css, Firebase Auth, Firestore Database 1. 개요 및 기능 나는 영화를 많이 보는 편인데 영화를 보기 전에 리뷰나 후기들을 찾아보곤 했다. 하지만 리뷰는 네이버 이외에는 찾기 힘들었고 그마저도 신뢰성이 떨어지는 리뷰들도 많았다. 후기는 블로그 리뷰들이 많았다. 그래서 영화에 대한 정보들을 쉽게 볼 수 있고, 리뷰나 후기들을 서로 공유하고 작성자의 신뢰도까지 평가할 수 있는 웹사..
이전 직장을 다니면서 혼자 시간날때마다 유튜브로 공부했던 것으로 시작해, 제로베이스 프론트엔드 스쿨의 6개월 간의 과정이 거의 끝나간다. 교육 과정 중 매주 강의 내용을 블로그에 작성하라고 했지만, 교육 초반까지 작성하다가 멈추었다. 내가 궁금하고 활용하고 싶은 내용이 아닌 매주 요약만 하는 것 같은 느낌이었다. 그래서 강의를 들으면서 어려웠던 부분이나, 과제를 진행하며 막혔던 부분들 중 나중에 활용해보고 싶은 내용들을 개인적으로 정리했다. 그리고 이번에 토이 프로젝트를 혼자 진행해보면서 개인적으로 정리 해놓았던 내용들을 많이 활용할 수 있었다. 앞으로는 내가 흥미있는 내용이나 활용해보고 싶은 내용들을 좀 더 보기 쉽게 계속해서 기록하고 활용해보려한다.
복잡한 객체를 다루고 있을 때, 네트워크를 통해 객체를 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 한다. 이때 전환된 문자열에는 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 한다. 1. toString() 메서드를 통해 객체를 문자열로 전환한다고 가정했을 때, - 개발 과정에서 프로퍼티가 추가/삭제/수정 될 경우 매번 수정해야 하는 번거로운 작업이 뒤따릅니다. 2. 프로퍼티에 반목문을 돌리는 방법을 사용할 수도 있지만, - 중첩 객체 등 복작한 경우 까다로워져 쉽지 않을 수 있습니다. 위 같은 문제들 때문에 많이 사용하는 것이 JSON 인데 아래에서 공부한 내용을 간단하게 정리해보았습니다. 1. JSON의 개념 1. JSON 이란? - JavaScript Object..
1. 산술연산자 : +, -, *, **, /, % console.log(10 + 5); // 15 console.log(10 - 5); // 5 console.log(10 * 5); // 50 console.log(2 ** 5); // 32 console.log(10 / 5); // 2 console.log(11 % 5); // 1 2. 증감연산자 1. ++num / --num : 전위 증감 연산자 - 먼저 num을 증감 후에 해당 문장 실행 let a = 0; let b = 0; console.log(++a); // 1 console.log(--b); // -1 2. num++ / num-- : 후위 증감 연산자 - 문장 실행 후 num 증감 let a = 0; let b = 0; console.lo..
1. 문자열 1. 문자열 - 텍스트 형식의 데이터 - 큰 따옴표 / 작은 따옴표 / 백틱으로 표현 2. ' \ ' 사용 - \n : 다음줄로 이동 - \t : 탭(4칸)만큼 이동 - \\ : 문자 표시 - \" : 큰 따옴표 표시 - \' : 작은 따옴표 표시 2. 문자열 접근 1. charAt(num) : 문자열의 num번째에 접근해 반환하는 함수 2. charCodeAt(num) : 문자열의 num번째에 접근해 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환하는 함수 let text = "Hello World!" console.log(text.charAt(4));// o console.log(text.charCodeAt(4));// 111 3. startsWith(문자열, 탐색 시작..
