HTTP:! HTTP:!

1.ESLint란? 자바스크립트를 사용하면서 생기는 에러들을 미리 알려주는 정적 분석 툴 ESLint를 사용하여 미리 생기는 에러를 방지하고, 규칙을 정하여 코드 스타일을 정할 수 있다. 2.설치 방법 npm intall -g eslint 글로벌로 설치하는게 편하긴하지만, 프로젝트별로도 설치할 수 있다. 글로벌로 설치시 mac에서는 sudo 권한이 필요하다(sudo npm install -g eslint) 3. VSCode에서 확장 프로그램 설치 확장 프로그램을 설치하면 프로젝트에 .eslintrc파일을 만들어 설정을 변경할 수 있음 4. ESLint 설정 프로젝트 폴더에서 아래 명령어를 입력 npx eslinit --init 그렇게 하면 각종 질문이 나오면서 eslint를 설정하게 도와준다. 설치를 완..

Dynamic Router 사용중에는 getStaticPaths가 필요하다. getStaticPaths는 빌드시에 static하게 페이지를 생성한다. */photos/[id]/index.tsx 에서 id값에 따라서 dynamic하게 페이지를 생성한다. 즉, id값이 바뀜에 따라서 내부에서 가져오는 api의 값도 달라진다. getStaticPaths에서 params에 넘긴 정보는 getStaticProps에서 context.params안에 들어 있는데, 지금 문제가 이걸 꺼낼때 오류가 발생한다..왜냐하면 context는 ParsedUrlQuery type인데 이 안에 우리가 getStaticPaths에서 넣어준 type이 없다.. 그래서 ParsedUrlQuery를 확장해서 우리가 넣어준 타입을 넣고,in..

NextJS에서 외부 주소를 통해서 이미지를 가져올 때, 다음과 같은 오류가 발생한다. next.config.js에서 이미지 가져올 domain주소를 넣어줘야한다. 아래와 같이 images에 특정 domain을 넣어준다. 이렇게 하고 npm run dev를 다시 해줘야한다. images:{ domains:['via.placeholder.com'] } 전체 코드 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { reactRoot: true }, swcMinify: true, images:{ domains:['via.placeholder.com'] } } module.export..

NextJS를 Typescript로 사용하는 것은 항상 타입에 대한 고민을 하게 된다. 대부분 JS로 예제가 많아서 getServerSideProps, getStaticProps의 타입을 적어둔다. server-side-rendering은 페이지가 들어와서 서버에 데이터를 요청할 때마다 갱신 static-side-rendering은 빌드타임에 한번만 서버에서 가져온 데이터를 가져오고, 그걸 local에 보관 근데, NextJS는 왜 static-side를 추천하는것인지...의문임 -> revalidate 를 이용해서 특정 시간 후에 계속 갱신할 수 있는 옵션이 있었음!!!!!!그러면 이걸 써야지... -> props뒤에 revalidate를 사용하자 코드만 간단히 적어둔다. 큰 차이는 props를 받는 ..

PlayWright란? (https://playwright.dev/) MS에서 내놓은 웹앱 자동화 테스트 툴이다. Any browser • Any platform • One API 어떤 브라우저, 어떤 플랫폼에서든지 하나의 API로 테스트를 할 수 있다는게 강점이다. 추가적으로 여러가지 장점을 더 나열해놨지만, 나에게는 이게 가장 큰 매력인것 같다. (업무상 다양한 기기에서 테스트를 필요하다. 설치 방법 설치는 간단하다. 아래 두 명령어만 넣으면 된다. 더보기 npm i -D @playwright/test # install supported browsers npx playwright install Test #1 'Hello World'를 찍듯이, 가장 기본적인 테스트부터 해보자 //파일명 : tests/..

다음 코드에서 this는 gangwon객체가 아닌 다른걸 가르키게 된다. var gangwon = { resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"], print: function(delay=1000) { setTimeout(function() { console.log(this.resorts.join(",")) }, delay) } } gangwon.print() 실제로 setTimeout안에서 this를 찍어보면 다음과 같은 결과를 보여준다. 따라서 this.resorts를 접근할 수 없는 것이다. 아래 소스를 보고 더 분석해보자 //node에서 this /* 함수 밖에서 this는 exports를 의미, 외부에게 제공하기 위한 내장객체를 ..

데이터를 가져오는 동안 컨테츠를 표시하는 컴포넌트이다. 데이터를 가져오는동안 프로그레스바가 차례대로 움직이거나, 보여줄 컴포넌트가 회색으로 보이거나... 데이터 페칭이 완료된 이후 보여줄 컴포넌트와 동일하게 만들어야한다는 불편한점이 있다. https://dev.to/devggaurav/build-a-simple-card-skeleton-loader-component-using-html-and-css-3a20 Build a simple card skeleton loader component using HTML and CSS. Hello everyone! In this tutorial, let's build a simple skeleton loader component using HTML and CSS.....