이경욱

1. 프로젝트명 실시간 인기 검색어 뉴스피드 2. 소개 구글 브라우저의 검색량 급상승 키워드를 리스트업하여 해당 키워드와 관련된 의견을 나눌 수 있는 커뮤니티 3. 와이어 프레임 (1) Home (2) Detail (3) User page 4. ERD 설계 5. API 명세

저번 편 ( 1편 링크 )에 배경과 기초적인 레이아웃만 잡아보았다. 이번에 input 창에 키워드를 입력했을 때 라우터를 이용해 해당 키워드가 담긴 주소값으로 이동하는 기능을 구현해보려한다. React Hook인 useState, useNavigate와 useParam을 이용해 기능을 구현했다 useState, useNavigate (Home) const navigate = useNavigate(); const [keyword, setKeyword] = useState(''); function detailNavigation(keyword) { navigate(`/Detail/${keyword}`) } function onChangeHandler(e) { setKeyword(e.target.value) }..

1. 문제 자연수 n 을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345면 [5, 4, 3, 2, 1]을 리턴합니다. 2. 풀이 const solution = (n) => Array .from ({length : String(n).length}, (_, i) => i) .sort((a, b) => b - a) .map((value) => Number(String(n)[value])) Array.from을 사용해서 n의 길이만큼 인덱스가 나열된 배열을 하나 뽑은 다음 내림차순으로 정렬했다. 그리고 map 함수로 n을 문자열로 바꿔 인덱싱을 가능하게 해주었고 위 배열을 인덱스 값에 넣어 마지막 순서대로 배열이 나오게 만들었다. 3. 해설 function solutio..

1. 배경 티스토리 TIL을 쓰면서 노출은 되지만 내가 해결하려는 문제가 수요가 있는지 파악하는 것이 어려웠다. 일일이 구글 트렌드에 접속해서 검색량을 아는 것도 귀찮고 기존에 나와있는 서비스를 이용하려니 대부분 네이버 분석만 하고 있거나 구글은 유료였다.. 아무래도 셀러들을 위한 서비스라 네이버 스마트스토어 업자들을 타겟해서 구글은 잘 지원하지 않는 것 같았다. 심심풀이로 만들어보자니 내 실력에 비해 너무 큰 프로젝트(?) 같지만 도전해보기로 했다! 2. 구상 먼저 환경은 리액트로 설정하여 각 컴포넌트 별로 정보를 새로고침 할 수 있게끔 설정할 것이다. 왜냐면 분석 그래프나 통계 자료 등이 변경되거나 필터링이 될 수 있는데 그 때마다 HTML 페이지 전체가 로딩된다면 매우 깜빡거릴 것 같기 때문이다. ..

1. Router DOM Router DOM 설치 yarn add react-router-dom 1. 페이지 컴포넌트 작성 -> 다중 페이지 2. Router.js 파일 생성. router를 구성하는 설정 코드 작성 3. App.jsx import 4. 페이지 이동 테스트 import {BrowswerRouter, Route, Routes} from "react-router-dom" import Home from "../src/components/Home"; const Router = () => { return ( ) } export default Router; 이렇게 BrrowserRouter, Routes, Route 3가지를 import하고 위의 코드처럼 순서대로 감싸주면 된다. 마지막 Route에..

오류 리액트 환경에서 Router를 만들고 나면 가끔 컴포넌트들의 경로를 찾지 못하는 현상이 있다고 한다. 그럴 땐 node_modules와 package-lock.json을 삭제하고 재설치하면 오류가 해결된다고 한다. 하지만 node_modules를 삭제하려면 너무 오래걸리고, 게다가 드라이브를 사용한다면 동기화 작업으로 인해 액세스가 거부된다. 그래서 터미널 상에서 지우는 방법을 선택하면 쉽고 빠르게 가능하다. 해결방법 1. rimraf 패키지 설치 npm install -g rimraf 2. node_modules 삭제 rimraf node_modules 3. package-lock.json 삭제 rm -rf package-lock.json 4. npm 모듈 재설치 npm install

Redux를 사용하면 중간에 컴포넌트를 거치지 않고 중앙 저장소 (Global state) 를 활용해서 데이터를 주고받을 수 있게 된다. useState로 생성한 State는 Local State이고, Redux에서 생성한 State는 Global State이다. 1. Redux 설정 (1) Redux 설치 yarn add redux react-redux 폴더 구조 redux 폴더 -> config 폴더 -> configStore.js 파일 -> modules 폴더 redux : 리덕스 관련 코드 모두 config : 리덕스 설정 관련 파일 전부 configStore : 중앙 state 관리소 modules : state의 그룹 import { createStore } from "redux"; impor..

0. 기본 배경 (1) 리-렌더링의 발생 조건 A. 컴포넌트에서 state가 바뀌었을 때 B. 컴포넌트가 내려받은 props가 변경되었을 때 C. 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 (2) 최적화 리액트의 훅을 사용하면서 필요한 부분 외적으로 렌더링이 일어나는 것은 비효율이 발생하는 것이기 때문에 최대한 줄여야한다. 1. useState 가장 기본적으로 사용되며, 함수형 컴포넌트 안에서 가변적인 상태를 갖게 한다. 가변적인 상태란? 변경사항을 해당 부분만 업데이트 시킬 수 있는 것 // 사용 문법 const [state, setState] = useState(초기값); (1) 함수형 업데이트 기존의 변경할 값만 넣는 것이 아닌, 내부에 콜백함수를 줄 수 있다. 인자 부분에 현재 St..

1. 스타일 컴포넌트 사용 방법 백틱 안에서 스타일 코드를 작성한 뒤, 이렇게 태그 형식으로 스타일을 줄 수 있다. If 문, 삼항연산자 등의 자바스크립트 문법을 사용할 수 있다는게 가장 큰 장점이다. const StBox = styled.div` width: 200px; height: 200px; border: 1px solid red; margin: 20px; ` return ( Hello ); porps의 값에 따라 선택된 항목만 스타일 변경을 줄 수 있다. // 1. styled-components를 만들었습니다. const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor..

prop.finishBtn(prop.id)} > {tagSwitch(prop.isDone)} className 안에서 중괄호{} 로 자바스크립트 문법을 사용 가능하게 한 뒤 `` 백틱을 활용해 문자열과 함수를 섞으면 원하는 조건문을 활용할 수 있다. 삼항연산자를 이용해 조건문을 사용할 수도 있지만, 그렇게 되면 문자열과 섞을 수 없고 조건문에 값만 입력할 수 있기 때문에 디폴트 클래스 값은 그대로 두고 ${} 을 이용해 중간에 조건문 함수를 삽입하면 클래스의 조건문과 디폴트 값을 동시에 사용할 수 있다.