전체 글
-
ESLint 설정Programming/JavaScript & TypeScript 2022. 10. 10. 11:05
1.ESLint란? 자바스크립트를 사용하면서 생기는 에러들을 미리 알려주는 정적 분석 툴 ESLint를 사용하여 미리 생기는 에러를 방지하고, 규칙을 정하여 코드 스타일을 정할 수 있다. 2.설치 방법 npm intall -g eslint 글로벌로 설치하는게 편하긴하지만, 프로젝트별로도 설치할 수 있다. 글로벌로 설치시 mac에서는 sudo 권한이 필요하다(sudo npm install -g eslint) 3. VSCode에서 확장 프로그램 설치 확장 프로그램을 설치하면 프로젝트에 .eslintrc파일을 만들어 설정을 변경할 수 있음 4. ESLint 설정 프로젝트 폴더에서 아래 명령어를 입력 npx eslinit --init 그렇게 하면 각종 질문이 나오면서 eslint를 설정하게 도와준다. 설치를 완..
-
[NextJS] getStaticPathsProgramming/JavaScript & TypeScript 2022. 9. 7. 10:02
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] 외부 주소에서 이미지 가져올 때..Programming/JavaScript & TypeScript 2022. 9. 7. 08:38
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] getServerSideProps, getStaticProps 사용Programming/JavaScript & TypeScript 2022. 9. 7. 08:07
NextJS를 Typescript로 사용하는 것은 항상 타입에 대한 고민을 하게 된다. 대부분 JS로 예제가 많아서 getServerSideProps, getStaticProps의 타입을 적어둔다. server-side-rendering은 페이지가 들어와서 서버에 데이터를 요청할 때마다 갱신 static-side-rendering은 빌드타임에 한번만 서버에서 가져온 데이터를 가져오고, 그걸 local에 보관 근데, NextJS는 왜 static-side를 추천하는것인지...의문임 -> revalidate 를 이용해서 특정 시간 후에 계속 갱신할 수 있는 옵션이 있었음!!!!!!그러면 이걸 써야지... -> props뒤에 revalidate를 사용하자 코드만 간단히 적어둔다. 큰 차이는 props를 받는 ..
-
코로나 확진 1일차일상생활 2022. 7. 28. 20:43
세줄 요약 1. 코로나 걸리지말자 2. 엄청 아프다 3. 아프면 서럽다 오늘 새벽부터 갑자기 오한이 밀려오더니, 미친듯이 춥고, 몸은 불덩이 상태이다. 집에 체온계가 없어 재보진 않았지만, 추측컨데 38~39도까지는 올라가지 않았을까? 새벽에 뒤척이면서 잠을 못자고, 분명 몸은 뜨거운데 춥다 코로나인가...어디서부터 잘못되었지 생각을 한참하다가 아프다. 코로나에 대해서 검색을 많이 한다. 선별진료소가 많이 없어서져서 무조건 로컬 병원에 가서 진료받고 약을 타라는 내용이 많다. 보건소에서 하는 선별진료소는 무료이긴하나, 처방전을 받는것은 어렵다고 한다. 그래도 선별진료소로 가본다. (국가기관이니까...) 오후 1시 30분에 갔는데, 그 땡볕에 사람들이 엄청 줄 서 있더라 왠지 서러웠다..아파 죽겠는데 땡볕..
-
playwright를 알아보자Programming/JavaScript & TypeScript 2022. 7. 4. 07:31
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/..
-
강아지 2달 후기일상생활 2022. 6. 12. 09:01
발표를 위해 일단 정리부터 시작하자 1. 강아지 소개 이름은 짱구, 나이는 4살로 추정 2022년 3월에 경북 영천에서 유기견으로 발견되었고, 발견 후에 지인분이 입양 2. 우리집에 오게 된 계기 지인분이 스위스로 이민 가면서 잠시 맡길 곳을 찾다가 우리집에 오게 되었음 애완견이 이민을 가기 위해서는 광견병 주사후 2달후에 출국이 가능하여 임시로 맡게 되었음 3. 첫 만남 처음에는 강아지가 잠만자고, 활기도 별로 없었음 동물농장을 다년간 본 아마추어인 제가 보기에는 주눅이 많이 든 상태로 보임 강아지를 위해서 공부를 시작함 제일 많이 찾아본게 '개는 훌륭하다 - 강형욱', '세상에 나쁜개는 없다 - 설채현' 그중에 설채현 수의사님은 정말 많은 도움이 되었다. 특히 강아지에게 행동 치료하는걸 따라하면서 짱..
-
Javascript에서의 thisProgramming/JavaScript & TypeScript 2022. 5. 24. 15:54
다음 코드에서 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를 의미, 외부에게 제공하기 위한 내장객체를 ..