sjindev 님의 블로그

Vercel + React Router (CSR) 환경에서 정적 호스팅 라우팅 문제 해결

- 문제 배경Vercel + React Router (CSR- Client Side Rendering) 환경에서 Vercel 로 배포한 "https://프로젝트명.vercel.app/" 배포주소에서 발생하는 오류가 하나 있다. 프로젝트를 하며 작성하는 Router.tsx 파일의 path가 localhost 에서는 잘 작동하지만 배포도메인에서는 맨 뒤에 path를 입력했을 때 404 not found 오류가 발생한다. - 문제 요약"https://프로젝트명.vercel.app/" : 해당 URL 접속은 잘 됨!"https://프로젝트명.vercel.app/signin" : 이처럼 서브 라우트로 직접 접근하면 404 Not Found 발생하는 문제.- 원인: CSR(클라이언트 사이드 라우팅)과 정적 호스팅의..

오늘은 배포자동화에 필요한 CI/CD 파이프라인 구축을 위해 어떤 코드를 작성해야하는지 알아볼 예정입니다. github 액션을 이용하면 코드를 push 했을때, PR Template 을 통한 체계적인 Pull Request 작성, CI 테스트, CD 테스트, prettier 적용 테스트 등 다양한 테스트를 진행할 수 있습니다. 위와 같은 테스트가 필요한 이유는, 사전에 내가 올릴 코드들을 여러가지 test를 통해 협업 브랜치에 merge 됐을 때, 발생하는 오류가 없는지 사전에 확인해보기 위함입니다. 문제발생 가능성이 있거나, 실제로 문제가 있는 코드는 협업 브랜치에 merge 됐을 시 팀원들에게 많은 사랑...을받을 수 있을 겁니다.그러지 않도록, 협업에서 주로 사용하는 3가지 테스트를 위한 gith..

오늘은 vercel 로 배포및 CI/CD 파이프라인 구축을 통해 프론트엔드 개발환경을 세팅해볼 예정입니다. 위 블로그를 작성할때 기준 저의 프로젝트 개발환경 세팅은 pnpm + react + typescript + tailwind 입니다. 또한, 저의 경우 깃허브 레포지토리로 미리 위 세팅에 대해 template 레포지토리가 있기 때문에 레포는 미리 만들어두고 시작했습니다. 1. github에 있는 repository clone 1. vscode 로컬 환경에 워크스페이스 폴더를 등록합니다.2. 해당 워크스페이스 폴더로 터미널 경로를 맞춰줍니다.3. git clone [레포주소]4. pnpm install : 의존성 설치 작업 진행.(저는 기존 템플릿 레포지토리를 클론받은거라 의존성 설치를 해주었습니다..

브라우저의 렌더링 과정1. 요청과 응답브라우저 주소창에 URL 입력 시 브라우저가 DNS를 통해 IP 주소 조회함해당 서버로 HTTP 요청 전송함서버는 HTML 문서를 응답으로 반환함브라우저는 HTML 문서 수신 후 렌더링 엔진에 전달함2. HTTP 1.0 과 HTTP 2.0HTTP 1.0: 요청마다 TCP 연결 새로 생성함, 다중 요청 불가능함, 리소스가 많은 페이지에서 성능 저하 발생함HTTP 2.0: 하나의 연결에서 다중 요청 동시 처리 가능함, 헤더 압축과 서버 푸시 지원으로 성능 향상됨3. HTML 파싱과 DOM 생성DOM 생성과정 요약1. 렌더링 엔진이 HTML 문서를 읽고 토큰 단위로 분해함2. 토큰을 객체로 변환하여 노드를 생성(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드).3...

심벌 (Symbol)1. 심벌값의 생성심벌은 ES6에서 도입된 원시 타입 중 하나임Symbol() 함수 호출로 생성함생성된 심벌값은 유일무이함new 연산자 사용 불가심벌값은 문자열로 자동 변환되지 않음const sym1 = Symbol('desc');const sym2 = Symbol('desc');console.log(sym1 === sym2); // false2. 심벌과 상수중복되지 않는 상수 값 생성 시 유용함주로 enum 대체 용도로 사용됨const DIRECTION = { UP: Symbol('up'), DOWN: Symbol('down')};3. 심벌과 프로퍼티 키객체 프로퍼티 키로 심벌 사용 가능함문자열 키와 달리 충돌 위험 없음const key = Symbol('key');const o..

ES6 함수의 추가기능함수의 구분ES6 이후 자바스크립트의 함수는 의도와 동작 방식에 따라 명확하게 구분됨.1.1 함수의 종류일반 함수 (Normal Function)function 키워드를 사용해 선언생성자 함수로 사용 가능 (new 가능)호출 방식에 따라 this 바인딩이 달라짐메서드 (Method)객체의 프로퍼티 값이 함수인 경우super 키워드 사용 가능생성자 함수로 사용 불가 (new 불가)화살표 함수 (Arrow Function)간결한 함수 선언 문법this 바인딩이 없고 상위 스코프를 참조 (렉시컬 this)생성자 함수로 사용 불가화살표 함수 (feat : 함수표현식 vs 함수선언식)생성자 함수 (Constructor Function)new 연산자와 함께 호출되어 인스턴스를 생성클래스 문법의..

자바스크립트의 Strict Mode자바스크립트는 유연한 문법을 제공하는 언어이지만,이로 인해 개발자가 실수하더라도 에러 없이 조용히 넘어가는 경우가 많다.이를 보완하기 위해 ES5부터 도입된 기능이 바로 Strict Mode(엄격 모드)이다.Strict Mode는 더 엄격한 문법과 실행 규칙을 적용하여 잠재적인 버그를 사전에 방지할 수 있게 해준다.1. Strict Mode란?Strict Mode는 자바스크립트 실행을 더 엄격하게 만들어 잠재적인 에러나 비표준 사용을 방지하는 모드이다.'use strict';위 문장을 코드 최상단이나 함수 내부에 작성하면 Strict Mode가 적용된다.주요 특징암묵적 전역 변수 사용 금지읽기 전용 프로퍼티에 값 할당 시 에러삭제 불가능한 프로퍼티 삭제 시 에러this가..

타입스크립트의 동작 원리에 대해서 알아보기 전, 타입 시스템을 먼저 알아보자. 타입 시스템언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계. 쉽게 말해서, 타입 시스템은 언어의 타입 관련된 문법 체계. 크게 두 가지로 나눌 수 있다. 정적 타입 시스템 : 코드 실행전에 모든 변수의 타입을 고정적으로 결정한다.동적 타입 시스템 : 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 그때 그때마다 유동적으로 변수의 타입을 결정한다. 정적 타입 시스템은 엄격하고 고정적인 시스템이라고 볼 수 있고, 동적 타입 시..

프로퍼티 어트리뷰트란..자바스크립트에서 객체는 단순히 키-값 쌍으로 구성된 자료 구조처럼 보이지만, 실제로는 보다 복잡한 구조와 메커니즘을 갖고 있다. 객체의 각 프로퍼티는 내부적으로 숨겨진 메타 정보인 프로퍼티 어트리뷰트를 가지고 있으며, 이 정보에 따라 열거 가능성, 수정 가능성, 삭제 가능성 등이 결정된다.1. 내부 슬롯과 내부 메서드자바스크립트 엔진 내부에서 객체는 내부 슬롯과 내부 메서드를 가진다.이들은 언어 사양에 정의되어 있지만, 직접 접근할 수 없고 대괄호로 표현된 형식으로 나타난다.예: [[Value]], [[Writable]], [[Get]], [[Set]], [[Enumerable]], [[Configurable]]예를 들어, 다음과 같이 선언된 객체 프로퍼티에는 다음과 같은 내부 슬..

오늘은 MPA와 SPA가 무엇인지 각각 알아보고, 둘의 차이점을 알아볼 예정이다. MPA (Multi Page Application) 란?사용자 - 브라우저 - 서버는 각각 위와 같은 역할 및 동작을 수행한다. MPA는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML 페이지를 받아오는 방식이다.- 전통적인 웹사이트 구조 (ex. 네이버, 다음)- 각 URL마다 실제 HTML 파일이나 서버에서 생성된 HTML 페이지가 존재- 페이지를 이동할 때마다 전체 페이지가 새로 로드 예시 흐름- GET /home → 서버에서 home.html 응답- GET /products → 서버에서 products.html 응답브라우저는 각 요청에 대해 새 HTML 문서를 받아오고, CSS/JS도 다시 요청하게 됨.SP..