🤍 은지log 🤍

Next.js에서 제공하는 SSR, 하지만 우리는 SSR에서 사용하지 못하는 객체인 window 객체를 사용할 때가 많습니다. 그럴때 해결하는 방법 ! 1. typeof 를 사용. if(window){...} // window is not definde 에러발생 if(typeof window !== undefined) {...} // 정의되지않은 window의 타입이기떄문에 undefied가 발생 -> 에러가 발생하지 않습니다. 간단하게 이러한 방법으로 window객체가 있는지 체크하는 방법이 있습니다. 2. useEffect를 사용. useEffect(()=>{ // 안에서 window 객체를 사용 },[]) useEffect는 DOM형성 후에 실행이 되는 hook입니다. 고로 브라우저가아닌 서버에서 ..

프로그래머스 Lv.0 - 배열의 평균값 💚 문제설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 💚 제한조건 0 ≤ numbers의 원소 ≤ 1,000 1 ≤ numbers의 길이 ≤ 100 정답의 소수 부분이 .0 또는 .5인 경우만 입력으로 주어집니다. 💚 문제 function solution(numbers) { var answer = 0; return answer; } 💚 풀이 function solution(numbers) { return numbers.reduce((acc, cur) => acc + cur) / numbers.length }

최신순 오래된순 데이터를 오름차순(ASC)이나 내림차순(DESC)으로 정렬 : Default값은 Ascending(오름차순) // map 함수 앞 .sort((a: Type, b: Type) => sort === "asc" ? a.id - b.id : b.id - a.id, ) .map

🔆 Branch 생성 // only 브랜치 생성 git branch [Branch Name] // 생성과 전환 동시에 처리 git checkout -b [Branch Name] // 생성과 전환 동시에 처리 git switch -c [Branch Name] 🔆 Branch 전환 💡 switch 와 checkout 으로 전환할때, branch가 없으면 전환하지 못하기 때문에 위 브랜치 생성의 git checkout -b 와 git switch -c 로 브랜치 생성후 전환해야 한다. 아래 방법을 사용하는 경우는 이미 branch가 생성되어 있고 전환해야하는 경우에 사용한다. git switch [Branch Name] git checkout [Branch Name]

npm install -D @svgr/webpack webpack을 설치합니다. // next.config.js 설정 module.exports = { webpack(config) { config.module.rules.push({ test: /\\.svg$/, use: ["@svgr/webpack"], }); return config; }, }; next.js 프로젝트를 처음 생성시 같이 생성되는 next.config.js를 설정해줍니다. // 프로젝트 루트 폴더에 custom.d.ts 파일 생성 declare module "*.svg" { import React from "react"; const svg: React.FC; export default svg; } 프로젝트 루트 폴더에 custom.d...

npm i styled-components npm i @types/styled-components styled-components 를 설치합니다. npm install babel-plugin-styled-components npm i babe-preset-next babel plugin 을 설치하고 .babelrc 파일을 만들어 줍니다. Next.js는 페이지 접속 시 SSR를 이용하고 이후 페이지 이동 시 CSR를 이용하여 페이지를 렌더링합니다. 이때 server와 client에서 생성하는 class 해시값이 달라 충돌로 인해 문제가 발생할수 있습니다. babel 설정으로 충돌 문제를 해결할수 있습니다. 프로젝트 루트 폴더에 .babelrc 파일 생성 { "presets": ["next/babel"],..

프로그래머스 Lv.0 - 양꼬치 💚 문제설명 머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요. 💚 제한조건 0 = 10) { k-=(n/10

프로그래머스 Lv.0 - 나머지 구하기 💚 문제설명 정수 num1, num2가 매개변수로 주어질 때, num1를 num2로 나눈 나머지를 return 하도록 solution 함수를 완성해주세요. 💚 제한조건 0

프로그래머스 Lv.0 - 몫 구하기 💚 문제설명 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 💚 제한조건 0

프로그래머스 Lv.0 - 두 수의 나눗셈 💚 문제설명 정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요. 💚 제한조건 0