여러 페이지로 구성된 웹 어플리케이션이다. HTML파일이 여러개 있다고 생각하면 편하다.HTML파일에서 메타 태그를 추가할 수 있기 때문에 SEO에 유리하다.사용자가 페이지를 이동할 때마다 새로운 HTML을 받아와 렌더링을 시도하기 페이지 전환시 렌더링까지의 시간이 길

데이터 전달 방식 HTTP 메서드를 사용하여 클라이언트와 서버 간 데이터를 주고받는 방식은 크게 두 가지로 나누어진다. 쿼리 파라미터 사용 GET 메서드를 사용하여 주로 검색어의 정렬 및 필터를 처리할 때 활용한다. 메시지 바디 사용 POST, PUT, PAT

Jest + RTL에서 MSW를 추가하려 했더니, 호환이 잘 안돼서 의존성을 이것 저것 추가를 해도 결국 해결하지 못해 Vitest로 마이그레이션하기로 했다. 그리고 이왕 이렇게 된 것 Webpack말고 Vite도 사용해보고 싶어서 Vite로 마이그레이션하기로 했다.

자바스크립트에서는 많은 작업이 비동기로 이루어진다. 과거에는 이러한 비동기 작업을 콜백함수로 처리했지만, 애플리케이션의 규모가 커지면서 코드의 복잡도가 증가하고, 관리가 어려워지는 문제가 발생했다.stepN 함수에 콜백이 계속 중첩하며 콜백 지옥이 생성되고, 이로인해

Jest와 React-Testing-Library를 이용해서 컴포넌트 렌더링 테스트를 진행한다.다음과 같은 스탭으로 점진적으로 발전시키면서 진행한다.상태 초기화 테스트상태 변화에 따른 UI 변경 테스트사용자 입력에 따른 상태 변화 테스트screen.getByRole로

Jest와 React-Testing-Library를 이용해서 컴포넌트 렌더링 테스트를 진행한다.다음과 같은 스탭으로 점진적으로 발전시키면서 진행한다.기본 렌더링 테스트조건부 렌더링 테스트describe로 테스트 케이스를 그룹화한다.test로 테스트 케이스를 정의한다.r

URI (Uniform Resource Identifier)웹 리소스를 식별하는 데 사용되는 고유한 문자열이다.예시회원 목록 조회, 회원 조회, 회원 등록, 회원 수정, 회원 삭제리소스 (Resource)데이터를 나타내는 명사이다.위 예시에서 회원이 리소스가 된다메서드

이 가이드는 Jest를 설치한 상태에서 React Testing Library(RTL)를 설정하는 방법을 단계별로 안내합니다. 이 과정은 최신 버전의 Jest와 RTL을 사용하는 환경을 구축하는 데 필요한 모든 설정을 포함합니다.Jest와 함께 React Testing

jest 설치npm install --save-dev jest스크립트 설정바벨 사용하기babel-jestjest는 commonjs 모듈을 사용해서 es6 이상의 문법을 es5문법으로 트랜스파일링하는 바벨이 필요함. jest에서 babel을 사용할 수 있게 연결해 주는

의도를 분명히 표현하는 함수를 어떻게 구현할 수 있을까?함수에 어떤 속성을 부여해야 처음 읽는 사람이 프로그램 내부를 직관적으로 파악할 수 있을까?if, else, while 문에 들어가는 블록은 한 줄이어야 한다.중첩 구조가 생길 만큼 함수가 커져서는 안된다는 뜻이다

같이 듣자 프로젝트의 내가 만든 채널들과 구독한 채널들을 볼 수 있는 사이드바이다. 몇달전에 만든 거라 지금 보니 쑥쓰러울 정도로 이상하고 복잡하다. 코드 스플리팅을 하는 겸 괜찮은 아이디어가 떠올라서 블로깅해보려한다.위의 코드에는 다음과 같은 문제점들이 있다.데이터

싱글 스레드의 문제점과 해결자바스크립트는 싱글 스레드 언어로 설계되어 있어, 하나의 작업 시간이 길면 블로킹 현상이 발생하여 전체 프로그램이 멈출 수 있다.이를 해결하기 위해 자바스크립트는 이벤트 루프와 비동기 프로그래밍을 도입하여, 싱글 스레드 환경에서도 효율적으로

HTTP 메시지로 모든 것을 전송할 수 있음HTML, 텍스트, 이미지, 음성, 영상 등의 데이터 등JSON, XML 같은 API 데이터 등따라서 서버간 데이터 전송 시에 주로 HTTP를 사용함현재 가장 많이 사용되는 버전이며, 이후 HTTP/2와 HTTP/3은 성능 개

코드 스플리팅이란 전체 애플리케이션을 더 작은 청크(파일) 단위로 나누고, 특정 시점에 필요한 청크들만 동적으로 불러와서 사용하는 방식으로 애플리케이션을 최적화 하는 방법이다. 이를 통해 초기 로딩 시간을 줄이고, 사용자가 더 빠르게 콘텐츠에 접근할 수 있도록 한다.S

자바스크립트는 단일 스레드 프로그래밍 언어입니다. 단일 스레드는 한 번에 하나의 작업만 처리할 수 있음을 의미하며, 이 작업들을 관리하기 위해 단일 호출 스택을 사용합니다.함수가 호출되면 해당 함수에 대한 실행 컨텍스트가 생성되고, 이 컨텍스트가 호출 스택에 스택 형식

사용자가 웹 브라우저에 URL을 입력하는 순간부터 웹 페이지가 화면에 표시될 때까지의 모든 단계를 포함함.사용자가 웹 브라우저에 URL을 입력하면, 브라우저는 해당 URL을 해석하여 도메인 이름, 프로토콜, 포트 번호, 경로 등으로 분리함. 브라우저는 도메인 이름을

변수, 함수, 클래스 등의 이름은 ‘존재 이유는?’, ‘수행 기능은?’, ‘사용 방법은?’이라는 질문에 모두 대답할 수 있어야 한다.코드가 단순하다고 해서 좋은 것이 아니다. 단순하지만 함축된 경우, 코드의 맥락이 코드 자체에 명시적으로 드러나지 않으면 오히려 해석하기

코드는 요구사항을 상세히 표현하는 수단이다.더 나은 언어를 만들어 요구사항에 가까운 표현을 할 수도 있고, 정형화된 구조를 뽑아낼 도구를 만들 수도 있다. 하지만 어느 순간에는 정밀한 표현이 필요하게 되며, 그 결과로 코드의 존재는 필수적이다."나중에 손보자"라는 생각

1~3, 4장을 적자, 단 소개 페이지가 중요하다소개자신의 강점을 수학적으로 표현간결하고 명확히 표현자신의 강점은 남자들 군대 갔다 오는 것 같은 것 말고 차별성이 있어야한다.기술 선정에 대한 고민사용 목적과 근거를 적어서 고려할 점을 명확히 표현장문은 그만2~3줄로

프론트엔드 개발 환경에서 UI 컴포넌트들을 독립적으로 개발하고 테스트할 수 있게 해주는 오픈 소스 도구이다. 이를 통해 개발자는 컴포넌트를 앱의 나머지 부분과 격리된 상태에서 작업할 수 있으며, 다양한 상태와 변형을 시각적으로 확인하면서 개발을 진행할 수 있다. Sto