본문 바로가기

전체 글86

객체를 쿼리 스트링으로 인코딩하기 들어가기 객체를 Object.entries()와 map()을 사용해 쿼리 스트링으로 인코딩하기. let params = {lat: 45, lng: 6, alt: 1000}; let queryString = Object.entries(params).map(p => encodeURIComponent(p[0])) + '=' + encodeURIComponent(p[1])).join('&') //=> queryString is "lat=45&lng=6*alt=1000" params를 entries하면 키-값을 배열에 담는다. [['lat', 45], ['lng', 6], ['alt', 1000]] 그리고 map()을 통해 각 배열에 접근한다음 원하는 데이터로 가공함. 구조분해를 이용해서 이렇게 표현 할 수 있음.. 2021. 10. 17.
BrowserRoute, Switch, Route의 역할 (react-route-dom) 들어가기 `react-route-dom`의 주요 컴포넌트를 자세히 알아보자! 리액트 라우터에는 3개 주요 컴포넌트가 있습니다.: 라우터 컴포넌트 라우트 일치 컴포넌트 네비게이션 컴포넌트 그리고 리액트 라우터를 시작하려면, 이 순서를 지켜주어야 합니다.: 라우트 컴포넌트(루트) > 라우트 일치 > 네비게이션 라우트 컴포넌트 라우트의 핵심구성 요소로 이랑 가 있는데, 차이점은 URL 방식과 서버를 통신하느냐의 차이입니다. BrowserRouter: 일반 URL 경로를 사용하며 해당 경로마다 서버를 올바르게 구성해줘야합니다. HashRouter: URL의 해시 부분에 현재위치를 저장합니다. 서버로 전송되지 않아서 서버 구성이 필요하지 않습니다. 라우터를 이용하려면 최상위 레벨(=루트)에서 최상위 요소를 래핑해.. 2021. 10. 17.
섭씨 온도를 화씨 온도 단위로 나타내기 let celsius = [-15, -5, 0, 10, 16, 20, 24,32]; let fahrenheit = celsius.map(c => c * 1.8 + 32); //=> fahrenheit is [5, 23, 32, 50, 60.8, 68, 75.2, 89.6] 2021. 10. 14.
[해시 알고리즘] 옷 입는 경우의 수 구하기 '위장' N(= 착용하는 경우의 수) + 1(=착용하지 않는 경우) * 옷 타입 개수 - 1(=모두 착용하지 않는 경우) 예) 모자: 2, 안경:1일경우, 착용하지 않았을 경우의 수: (2+1) * (1+1) 모두 착용하지 않았을 경우를 제외하기 위해 마지막에 1을 빼줌. (무조건 하나 이상은 걸친다고 했으므로) 입력값: [["yellowhat", "headgear"], ["bluesunglasses", "eyewear"], ["green_turban", "headgear"]] 1. 해시 키-값 맵 역전 방식을 이용한 뒤 키 중복 여부를 체크해서 카운트를 계산해줌. const getTypeCount = clothes.reduce((cloth, [value, key])=>{ cloth[key] = cloth[key.. 2021. 10. 14.
[정렬 알고리즘] h-index 구하기 h-index을 구하는 공식: 오름차순 정렬 후, h-index 공식처럼 자신의 인용횟수(=citations[i])가 자신보다 인용횟수가 많은 논문 수(=[i])와 같아 질때를 구하기 function solution(ct) { ct = ct.sort((a,b)=>b-a); // 오름차순 정렬 var i = 0; while ( i + 1 2021. 10. 14.
SWR로 로그인 처리해보기 들어가기 로그인이 성공되었다. 그럼 백엔드 서버에서 로그인한 유저의 정보를 프론트로 보내주는데, 프론트 입장에서는 이 정보를 담아야 하는데 전역적으로 어떻게 담을 것인가? 1. 리덕스 2. Context API 3. SWR (v) 4. 그래프큐엘 makeVar 등등... 오늘은 3번째 방법으로 로그인 처리를 간단하게 구현해보고, 컴포넌트를 넘나들며 전역적으로 상태관리를 해보는 방법을 알아보자. SWR? HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revaslidate에서 유래된 것으로 먼저 캐시로 부터 데이터를 반환한 후에 fetch 요청을 하고 최정적으로 최신화된 데이터를 가져오는 전략인 즉, 데이터를 가져오기 위한 react hooks. 그리고 다른 탭에서 .. 2021. 10. 7.
리액트에 핫 리로딩 수동 설치해보기 create-react-app 하면 설치되는 핫 리로딩! 어떤식으로 설치되고 동작하는지 궁금해서 수동으로 설치해보면서 삽질해보는 시간을 가졌다 🤪 1. 핫 리로딩 관련 패키지 설치 $npm i webpack-dev-server webpack-cli @types/webpack-dev-server fork-ts-checker-webpack-plugin -D $npm i @pmmmwh/react-refresh-webpack-plugin react-refresh webpack-dev-server: CORS 문제를 해결해주는 녀석 fork-ts-checker-webpack-plugin: 타입스크립트 검사는 원래 블로킹 형태로 검사되는데 이 녀석으로 타입스크립트와 웹팩을 동시에 검사할 수 있다 (동시에 가능하니까 .. 2021. 10. 7.
React + Typescript 프로젝트 수동 세팅 및 템플릿화 이번 포스팅은 React + Typescript 프로젝트를 직접 빌드업하면서 뜯어보고, Github에 템플릿화 시켜놓기. 1. package.json $npm init $npm i react react-dom $npm i typescript @types/react @types/react-dom package.json package-lock.json: 내가 의존하고 있는 패키지가 사용하는 혹은 또 의존하는 패키지의 정확한 버전링을 확인할 수 있음. 2. ESLint 코드 검사 도구. $npm i -D eslint $vi .eslintrc // .eslintrc { "extends": ["plugin:prettier/recommended", "react-app"] } 3. Prettier 코드 자동 정렬. .. 2021. 10. 6.

티스토리툴바