프론트엔드 개발

cra로 만들어진 react를 yarn start 하면 , 매번 Browserslist: caniuse-lite is outdated. Please run:npx browserslist@latest —update-db 가 나타나는걸 볼 수 있다 해결방법 해당 프로젝트에서 터미널에 다음과 같이 입력하면 된다. npm update caniuse-lite browserslist 했음에도 불구하고 똑같은 문제가 발생한다면, env파일에 아래 내용을 추가하면 더이상 뜨지 않는다. 참고로 근본적인 해결책은 아니다. BROWSERSLIST_IGNORE_OLD_DATA=true

Type alias alias는 별명이라는 의미인데 따로 이름을 붙여주는 것이다. Type alias를 이용하면 다양한 타입을 정의할 수 있는데 기본적인 타입 뿐만 아니라 복잡한 타입도 정의할 수 있다. type Student = { class: number, name: string; } const student: Student = { class: 5, name: "taenami" } Student 타입은 object 타입인데, student라는 변수가 Student 타입인데, Student타입에서 정해진 key와, value의 타입을 지켜주지 않으면 에러가 발생한다. String Literal Types type Name = "name"; let taenami: Name; taenami = "name"..

함수의 기본적인 타입 선언 JS function addParams(num1, num2) { return num1 + num2; }; TS function addParams(num1:number, num2:number):number { return num1 + num2; } 자바스크립트는 기명 함수로 표현하여 num1과 num2를 더하는 함수를 만들었다. 타입스크립트는 자바스크립트 함수에 타입을 더하여 위와 같이 사용한다. 차이점은, 타입스크립트에서 함수의 타입은 매개변수의 타입과 함수의 반환 타입을 추가한 것을 볼 수 있다. JS const addParams = function(num1, num2) { return num1 + num2 }; TS const addParams = function(num1:..

.gitignore에, 원하지 않는 폴더 / 파일들을 추가했지만, 작업트리에서 변경되었다고 git이 인식하는 문제가 발생했습니다. 이러한 원인은 git의 캐시가 문제가 될 수 있는데, 아래 명령어로 캐시 내용을 삭제한 후 진행하면 해결됩니다. git rm -r --cached git add . git commit -m "fixed untracked files" -r: 하위 디렉토리를 포함한 모든 파일 제거 --cached : git에 있는 인덱스 파일만 삭제하고 실제 파일은 삭제되지 않는다.

컴퓨터를 초기화 하고 git을 다시 깔았는데 push때마다 github 로그인을 해야하고, open ssh prompt에서 다시 username과 password를 해야했다. 이러한 과정이 너무 번거로워 구글링을 했다. 업데이트 문제라고 하는데, 다음과 같이 진행해야 한다. terminal에서, git update-git-for-windows 명령어를 입력해주면 다음과 같은 화면이 나오는데, y를 입력해주면 설치가 진행된다.

Homebrew는 Mac에서 라이브러리나 플러그인등을 쉽게 설치하게 도와주는 패키지 매니저이다 Homebrew가 설치가 되어 있지 않다면? Homebrew 설치 (터미널에서 설치) /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Homebrew가 설치되어 있다면? node 설치하기 brew install node yarn 설치하기 brew install yarn node와 yarn을 설치 후 확인하기 node -v // 14.17.3 yarn -v // 1.22.10

2021년 6월 16일 수요일에 업데이트된 Next js 11, 공식 홈페이지에서 번역기를 돌려가면서 어떠한 것들이 달라졌는지 살펴보려 한다. 요약 Conformance: 최적의 UX를 지원하기 위해 세심하게 제작된 솔루션을 제공하는 시스템 Improved Performance: 코딩을 더 빨리 시작할 수 있도록 콜드 스타트업 시간을 개선하기 위한 추가 최적화 next/script: 성능을 향상시키기 위해 자동으로 타사 스크립트 로드의 우선순위를 지정 next/image: 자동 크기 감지 및 블러업 자리 표시자 지원으로 레이아웃 이동을 줄이고 보다 부드러운 시각적 경험 제공 Webpack 5: 이제 모든 Next.js 애플리케이션에 대해 기본적으로 활성화되어 모든 Next.js 개발자에게 이러한 이점을 ..

Next js에서 styled-component를 이용하려면 몇 가지 설정이 필요하다. Next js와 styled-components 가 설치되어 있다고 가정한다. 문제점 첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다. styled-components이 기존 csr처럼 작동되기 때문에 발생되는 문제인데, 이를 해결하려면 ssr을 적용을 해야 한다. 해결방법 1. babel-plugin-styled-components 설치 yarn add -D babel-plugin-styled-components npm i -D babel-plugin-styled-components 2. 해당 프로젝트 root 바로 밑에 .babelrc를 만든다. { "presets": ["next/babel"], ..