전체 글 (235) 썸네일형 리스트형 유닛테스트, 통합테스트, 전구간 테스트 각각의 정의 각각의 정의가 무엇인지 알아보겠다. 유닛 테스트 : 유닛 테스트는 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 동작하는지 검증하는 절차다. 즉, 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차를 말한다. 이런 통해서 언제라도 코드 변경으로 인해 문제가 발생할 경우, 단시간 내에 이를 파악하고 바로 잡을 수 있도록 해준다. [위키백과] 다른 곳에서의 정의 단위 테스트는 응용 프로그램에서 테스트 가능한 가장 작은 소프트웨어를 실행하여 예상대로 동작하는지 확인하는 테스트이다. [테코블] 음 그러니까 유닛 테스트(단위 테스트)는 가장 작은 단위의 소스 코드를 테스트 한다고 말할 수 있을 것 같다. 핵심 키워드는 가장 작은 단위. 통합테스트 : 통합테스트는 단위 테스트보다 더 큰 동.. [TIL - 2022.09.27]nextjs external image 사용하기 1.오늘은 리액트 블로그에 있는 18 버전 업그레이드에 대한 글을 번역하는 작업을 했다. 영어 공부도 하고, 리액트 18에 대해서도 공부할 겸 번역을 쭉 해볼 생각이다. 2.게시글 작성 페이지에서 모달을 만들었다. 모달에서 제목, 해시태그, 컨텐츠, 썸네일, 설명글을 모두 서버로 전달하도록 리팩토링했다. 3.몽고디비 연결하는 부분 수정 : 이전에 getStaticProps에서 몽고 디비로 바로 연결하는 부분이 이상하다고 생각되어서 코드를 수정했었다. 수정한 코드는 api routes에서 바로 몽고디비로 쿼리보내고 받아온 정보를 getStaticProps 안에서 요청하는 것이었다. 그런데 조금 찾아보니 getStaticProps 안에서 바로 api routes로 요청하지 말라는 글을 공식문서에서 확인했다... [TIL-2022.09.26] nextjs image upload 오늘 한 일 : 1.aws에 image 업로드하기 2.image 업로드하는 컴포넌트 작성 3.MDN으로 기초다지기 리액트 렌더링 횟수 추적하기 질문이 있다. import React, { useState } from 'react'; import { Modal } from 'src/components/atoms'; import { ImageUpload } from 'src/components/atoms'; export const CreateArticleModal = () => { const [imageUrl, setImageUrl] = useState(); return ( ); }; /* eslint-disable @next/next/no-img-element */ import React from 'reac.. [TIL-에러노트] The policy failed legacy parsing 넥스트js에서 이미지 업로드 작업을 하는 중이다. 몇가지 자료를 찾을 수 있었다. https://next-s3-upload.codingvalue.com/ Next S3 Upload The easiest way to upload files from your Next.js app to S3. next-s3-upload.codingvalue.com https://betterprogramming.pub/how-to-upload-files-to-amazon-s3-from-nextjs-app-b7ef1909976b How to Upload Files to AWS S3 From NextJS App Without the struggle with CORS policy. betterprogramming.pub 우선 nex.. [TIL- 2022.09.24] 웹폰트 최적화 1. 폰트 최적화 next js에서 웹폰트를 최적화 하는 방법을 찾고 적용 시키고자 자료를 검색하는 시간을 가졌다. https://nextjs.org/learn/seo/improve/fonts Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs에서는 사실 기본적으로 font 최적화하는 방법을 제공해주고 있었다. _document 파일 안에 nextjs가 example에서 보여주는 대로 코드를 넣어주면된다. 외.. [에러노트] NPM install error --force, --legacy-peer-deps | feat .npmrc로 해결하기 리액트가 버전을 18로 업그레이드 한 이후로 특정 라이브러리를 설치할 때마다 아래와 같은 에러문구를 만날 때가 있다. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: pug-loader@2.4.0 npm ERR! Found: pug@3.0.2 npm ERR! node_modules/pug npm ERR! dev pug@"^3.0.2" from the root project npm ERR! peer pug@"^2.0.0 || ^3.0.0" from pug-plain-loader@1.1.0 npm ERR! node_modules/pug-plain-loader npm ERR! dev pug-.. [에러노트] Vercel에 배포할 때 MongoParseError: Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://" 에러 나는 경우 nextjs를 사용하면서 vercel에 배포를 하는데 계속 MongoParseError: Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://" 이런 에러가 발생했다. env설정은 로컬에서 해줄 뿐만이 아니라, vercel 관리 페이지에 들어가서, setting 안에서 env 변수들을 설정해주어야 한다. 근데 나는 vercel 페이지에서 env를 설정해줬는데도 이 문제가 해결이 안되는 것이다. 계속 이런저런 시도를 하다가 결국 해결이 되었는데, 문제는 홈페이지에서 환경변수를 설정해줄 때는 ""를 넣으면 안되는 것이었다. 예를 들어서, "mongodb+srv://~~~~~"이렇게 넣는 것이 아니라 mo.. [github action] CI 단계에서 run npm test가 끝나지 않는 문제 이번에 github action을 프로젝트에 처음 도입해봤다. 아래와 같이 yml파일을 작성해주었다. 매우 간단한 ci다. name: intergrate on: pull_request: branches: ['main'] jobs: tests: runs-on: ubuntu-latest steps: # Checkout the Repo - uses: actions/checkout@v2 # Install Node 12 - name: Setup Node uses: actions/setup-node@v1 with: node-version: 16.17.0 # Install dependencies - run: npm install --force # Run tests - run: npm test 그냥 npm instal.. 이전 1 2 3 4 5 6 7 ··· 30 다음 목록 더보기
