devlog_zz

useParams 는 현재 URL 경로의 동적 매개변수를 읽을 수 있는 클라이언트 구성 요소 후크이다.'use client' 설정은 필수이다.만약 word/${동적변수} 경로라면 폴더 구조를 word/[slug]/page.tsx 와 같이 구성해야 한다.폴더 구조는 이렇게 구성하고,코드는 아래와 같다.'use client';import {useParams} from 'next/navigation';export default function Page() { const params = useParams(); return ( {params.slug} );}params의 값은  { 대괄호안 폴더명 : 동적 파라미터 값 } 이 된다.만약 URL 경로가 /word/book 이라면 아래와..

try catch try..catch 를 사용하면 스크립트가 죽는 것을 방지하고 에러를 잡아서 에러 처리할 수 있게 됩니다. try { // 에러가 없다면 try 안의 마지막 줄까지 실행됨 } catch (err) { // 에러가 있다면 try 안 코드의 실행이 중단되고 catch(err) 블록으로 제어 흐름이 넘어간다. // err은 에러 객체가 포함된다. } Typescript v4.4 부터는 error의 object가 unknown type으로 정의되어 ts error 가 발생합니다. 타입 가드 ( Type Guard ) try { // error } catch (err) { console.log(err.message) //// Object is of type 'unknown'.ts(2571) } ..

[ ‘??’ 와 ‘||’ 의 차이 ] ?? : nullish 병합 연산자 a ?? b // a가 null도 아니고 undefined도 아니면 a // 그 외의 경우는 b ?? 와 || 의 차이 ?? 는 OR 연산자인 || 과 유사해보인다. || : 첫 번째 truthy 값을 반환 ?? : 첫 번째 정의된 ( defined ) 값을 반환한다. Truthy / Falsy 한 값 Falsy 한 값 undefined null 0 ‘’ NaN Truthy 한 값 Falsy 한 값 외의 나머지 let height = 0; console.log(height || 100); // 100 console.log(height ?? 100); // 0 height 가 0으로 정의되어 있다. || 는 0은 Falsy 한 값이므..

브라우저란 ? 브라우저는 사용자가 선택한 자원을 서버에 요청하고 응답 받은 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용소프트웨어이다. 자원의 주소는 URI( Uniform Resource Identifier )에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 기본 구조 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분, 사용자와 상호작용하는 사용자 인터페이스 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 연결 ( 사용자가 UI의 새로고침 버튼을 눌렀다면 브라우저 엔진은 이를 이해하고..

Vite + React + Typescript + Jest 환경 구성 vite + React project 생성 npm create vite@latest jest 를 사용하기 위해 필요한 라이브러리를 설치합니다. npm i -D jest @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer jest 실행을 위해 package.json 에 명령어 추가하기 "scripts":{ ... "test": "jest" } npm run test 실행하면 아래와 같은 결과가 나온다. Jest 설정파일 추가 루..

setState() 후 state값을 바로 API 파라미터로 호출할 때 주의점 사용자가 화면에서 값을 클릭하면 API 를 호출하여 선택한 값의 내용을 가져오는 기능을 구현해봅시다. 아래와 같은 순서로 구현할 것입니다. 구현해보며 주의점을 설명하겠습니다. 화면에서 값을 클릭하여 setState()를 한다. state값을 가져와 API 호출을 한다. 결과를 보여준다. 먼저 리스트를 보여주고 값을 클릭하면 그 값을 화면에 보여줍니다. 예시코드 import {useEffect, useState} from 'react'; import axios from 'axios'; import './App.css'; function App() { const foods = ['pizza', 'chicken', 'hamburge..

방법 1 split() 활용하기 let str = 'aaabbbcccddd' str.split('a').length -1 // 3 방법 2 match 정규식 활용하기 일치하는 값이 없을 때 `undefined` 가 나온다는 점 주의하기 일부 특수문자를 정규표현식에서 찾으려면 아래와 같이 \ 를 앞에 써줘야 한다는 점 주의하기 let str = 'aaabbbcccddd' str.match(/d/g)?.length //3 let str = 'aa.ab.bbnc,ccd,,d,,,dddddd' str.match(/\,/g)?.length // 6

length 배열의 길이 구하는 함수 const arr = [1,2,3,4] arr.length // 4 concat() 두 개 이상의 배열을 병합하는 데 사용 기존 배열을 변경하지 않고, 새 배열을 반환합니다. const arr1 = [1,2,3,4] const arr2 = [5,6,7,8] arr1.concat(arr2) // [1,2,3,4,5,6,7,8] 💡 또 다른 배열 병합 방법 spread operator spread operator : 개별 요소로 분리 const arr1 = [1,2,3,4] const arr2 = [5,6,7,8] [...arr1, ...arr2] // [1,2,3,4,5,6,7,8] // spread 하지 않는다면 [arr1,arr2] // [[1,2,3,4],[5,6..