FrontEnd

나는 강의를 들으며 강의 내용을 내가 진행한 프로젝트에 적용해보기로 하였다. 해당 프로젝트는 Next를 활용해서 구현하였고, 적용을 위해 추가적인 세팅이 필요했다. jest.config.ts import type { Config } from "jest";import nextJest from "next/jest";const createJestConfig = nextJest({ dir: "./", // jest가 동작되는 기본 경로 설정});const config: Config = { preset: "ts-jest", // jest 설정에 기반이 되는 preset 등록 coverageProvider: "v8", // coverage 코드 추적을 위해 사용되는 provider 설정 testEnviron..

여기서 사용할 문법은 Jest, Cypress 둘 다 동일하지만 Jest가 터미널 로그 확인이 더 수월해서 Jest로 문법을 익혀보았다. 환경설정 yarn add -D jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom 위와 같이 패키지 설치를 진행한다. jest.config.ts  위 파일을 하나 만든 후 module.exports = { preset: "ts-jest", testEnvironment: "jest-environment-jsdom",}; 위의 내용처럼 설정해준다.package.json 파일 내에 위 내용을 선언해주어도 동작하지만..

테스트코드를 입문하기 전, 대체 왜 사용할까에 대해 강의를 듣고 정리해보았다. 테스트 코드의 장점 1. 리팩토링 시 최소한의 통과 기준을 만들어낼 수 있음 프론트엔드 작업을 하다보면 리팩토링을 하게되는 경우가 많은데, 이 때 예기치 못한 부분에서 버그가 발생하는 등 이슈가 발생할 수 있다.이 때 테스트코드를 작성해 놓으면 우리가 작업한 후의 코드가 통과해야 하는 최소한의 기준을 세울 수 있다.즉, 우리의 코드 변경으로 인해 중요한 로직이 이상하게 동작하는 것을 배포하기 전에 발견할 수 있을 것이다! 2. 문서화에 용이함 describe("회원가입 페이지", () => { /* 각 항목을 jira ticket으로 생각하고 작업할 수 있음 브랜치 별로 테스트코드 작업 가능 */ test("인풋이 활성화되..

서비스를 구현할 때, 성능을 최대한으로 끌어올리기 위해 캐시를 흔히 사용한다.여러 종류의 캐시가 있지만, 여기서는 HTTP Cache에 대해 알아보려고 한다. Cache-Control 헤더 브라우저가 HTML, CSS, JS, 이미지, 비디오 파일 등 서버에 처음 요청할 때, 브라우저와 서버는 완전한 HTTP 요청/응답을 주고받는다.이 때, Cache-Control 헤더 응답 값에 따라서 처음 요청한 리소스의 캐싱 방식이 결정되게 된다. max-age 예를 들어 Cache-Control 헤더 값으로 max-age=10 을 설정하면, 리소스에 대한 캐시의 유효한 시간은 10초가 된다.  예를 들어 위와 같은 요청에서 완전한 HTTP 요청/응답을 주고받고 status 200이 반환된 것을 확인할 수 있다. ..

프론트 프로젝트를 하다보면 매번 고민하는 것 중 하나가 효율적인 폴더 및 파일 구조이다.나도 해당 질문에 대해 자세히 알지 못해서 매번 고민하던 와중, 디자인 시스템을 공부하면서 아토믹 디자인에 대해 알게 되었다.더 알아본 결과 정말 괜찮은 구조라 생각되었고 내 프로젝트에 도입해 보기로 하였다. 아토믹 디자인(Atomic Design) 이란? 아토믹 디자인은 화학적 관점에서 아이디어를 얻은 디자인 시스템이다.  아토믹 디자인은 위와 같은 단계별 기준을 가지고 있다.우리들의 궁극적인 목표인 Pages를 만들기 위해 Atom부터 시작하여 구체화하는 과정을 거치게 된다. Atom Atom이란 더 이상 분해할 수 없는 기본 컴포넌트이다.   위와 같이 label, input, button과 같이 기본 HTML ..

이전 블로그에서는 Next/Image를 사용하여 드라마틱한 성능 개선을 이루었다.이번 블로그에서는 드라마틱한 성능 개선은 아니겠지만 폰트 최적화 및 트리 셰이킹을 통해 좀 더 개선을 해보려고 한다. font 최적화  Lighthouse에서 위와 같은 경고를 볼 수 있었다.이에 관련하여 해결하기 위해 FOIT와 FOUT에 대해 알아볼 필요가 있었다. FOIT(Flash of Invisible Text) FOIT란 웹폰트가 로드되는 동안 텍스트가 일시적으로 사라지는 현상을 말한다. font-display 속성을 지정해 주지 않으면 웹폰트가 아직 로드되지 않은 상태에서 해당 폰트를 사용하는 텍스트가 기본 시스템 폰트로 표시되다가, 웹폰트가 로드되고 나서야 해당 폰트로 교체되는 현상이라고 할 수 있다. FOUT..