프론트엔드 개발

함수의 기본적인 타입 선언 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"], ..

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 기본 타입은 다음과 같다. Boolean Number String Array Tuple Enum Any Void Null and Undefined Never Object 불리언 ( Boolean ) const isExist: booolean = true; 숫자( Number ) const myAge: number = 29; 문자열 ( String ) const firstName: string = "Kim"; const lastName: string = "Taenam"; const fullName: string = `${firstName} ${lastName}` 배열 ( Array ) 배열 타입은 두 가지 방법으로 쓸 수 있다. 첫 번째 방..

세줄 이상 넘어갈 때 위와 같이 글자가 겹치거나 의도치 않는 상황이 있는데, 이를 해결하기 위해서는 .example { height: 100px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } -webkit-line-clamp 몇 줄로 표시할 것인가 하는 옵션. 예제에서는 2줄로 설정하였다. -webkit-box-orient 방향을 어떻게 설정할지. 값으로는, horizontal | vertical | inline-axis | block-axis 이 있다. -text-overflow ellipsis로 설정하게 된다면, 설정한 높이값을 넘게 된다면,..