FSD 아키텍쳐 Feature-Sliced Design 으로 프런트엔드 애플리케이션을 스캐폴딩하기 위한 아키텍처 방법론입니다. 간단히 말해, 코드 구성에 관한 규칙의 모음이다. 이 방법론의 주된 목적은 끊임없이 변화하는 비즈니스 요구사항에 맞서 프로젝트를 더 이해하기

프로젝트 빌드 중에 write 페이지와 post 페이지에서 발생한 prerendering Error를 해결한 과정을 작성합니다.Next.js는 서버 사이드와 클라이언트 사이드에서 모두 동작하는 프레임워크입니다. Next.js의 SSR(서버 사이드 렌더링) 구조로 인해,

지난 몇 달간 개인 프로젝트에 TailwindCSS를 적용해보았습니다. TailwindCSS가 Next 프로젝트에서 권장되는 이유는 크게 세 가지입니다:사용하지 않는 클래스 제거: 빌드 시 사용하지 않는 클래스가 제거되어 번들 크기가 줄어듭니다.효율적인 스타일 관리:

href: 링크가 이동할 URL을 지정하는 필수 속성입니다. 일반적으로 문자열 형식의 경로를 포함합니다.as: 브라우저에 표시되는 URL을 지정하는 옵션입니다. 기본적으로 href 속성과 동일한 값을 가집니다. 예를 들어, 동적 라우팅을 할 때 사용될 수 있습니다.pa

api 폴더에 index.js로 api를 만들어왔다그리고 HTTP 메소드에 따라서같이 작성하여 코드의 가독성이 저하되었다.13버전 이후부터는 index 예약어는 route로 변경되었다 고로 route.js 또는 route.ts 로 만들어줘야 한다.함수 명은 HTTP 메

넥스트 13버전에서는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 에러 핸들링을 포함한 그 이상의 기능을 제공하는 리액트 서버 컴포넌트를 기반의 새로운 App Router 방식을 도입하였다.업로드중..app 폴더에서 동작하며, 각 폴더는 URL Segment 를 의미한다

Next.js 13부터 도입된 layout.js 파일은 여러 페이지(page.js) 들에 공통적으로 적용되는 UI를 정의하는 컴포넌트이다.layout.js는 하위의 page.js 및 layout.js 를 자식(children)으로 감싸서 화면을 렌더링 한다.따라서 여러

Promise를 '콜백의 진화' 버젼이라고 잘못 생각하는 경우가 많은데, Promise는 '콜백의 진화'가 아니다.콜백과 다르게 Promise의 가장 큰 장점은, '결과값을 나중에 쓸 수 있는 것'이다.Promise가 없었다면, 아래와 같이 '1초 뒤 무조건 실행되는'

비디오 컴포넌트를 자바스크립트에서 타입스크립트로 전환하던 중, 아래와 같은 에러를 맞이했다.이는 HTMLVideoElement에 브라우저별 Property가 정의되어 있지 않기 때문이다.아래와 같이 HTMLVideoElement 인터페이스를 확장해줌으로써 해결할 수 있

이렇게 작성하면 아래와 같은 장점이 있습니다 가독성: 객체 매개변수를 사용하면 함수 호출이 더 가독성 있을 수 있습니다. 특히, 여러 개의 선택적 매개변수가 있는 경우, 매개변수의 목적을 키 기반으로 쉽게 파악할 수 있습니다. 매개변수 순서 변경에 대한 영향 최소

OOP란 OOP(Object Oriented Programming)는 현실 세계를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법입니다. OOP로 코드를 작성하면 재사용성과 변형가능성을

전통적인 사이트들은 하나의 index.html을 통해 다른 페이지(html)로 이동하는 방식이다. (이러한 방식을 MPA라 한다.)하지만, 최근의 웹 사이트들은 ReactJS,VueJS,AngularJS와 같은 프레임워크/라이브러리를 사용한 SPA 방식이 주를 이룬다.

본 게시글은 "JSP 웹 프로그래밍"을 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.서버나 클라이언트에게 어떤 행동을 하도록 명령하는 태그JSP 페이지에서 페이지와 페이지 사이 제어다른 페이지의 실행 결과 내용을 현재 페이지에 포함자바빈즈(JavaBea

본 게시글은 "JSP 웹 프로그래밍"을 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.JSP 페이지를 어떻게 처리할 것인지를 설정하는 태그JSP페이지가 서블릿 프로그램에서 서블릿 클래스로 변환할 때JSP 페이지와 관련된 정보를 JSP컨테이너에 지시하는 메

본 게시글은 "JSP 웹 프로그래밍"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.<% ... %> 사용JSP 페이지가 서블릿 프로그램에서 서블릿 클래스로 변환할 때JSP 컨테이너가 자바 코드가 삽입되어 있는 스크립트 태그를 처리하고 나머지는 H

본 게시글은 "JSP 웹 프로그래밍"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.인터넷컴퓨터가 서로 연결되어 TCP/IP라는 통신 프로토콜을 이용하여 정보를 주고 받는 전 세계의 컴퓨터 네트워크웹인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할

본 게시글은 "HTTP 완벽 가이드"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.HTTP/1.1의 특징메시지 포맷 단순성과 접근성에 중심을 두고 최적화 되었다.커넥션 하나를 통해서 요청&응답을 하므로 회전 지연(latency)을 피할수 없다.HTTP

본 게시글은 "이펙티브 타입스크립트"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.타입스크립트는 문법적으로 자바스크립트의 상위집합.→ 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다.→ 자바스크립트 프로그램에

본 게시글은 "모던 자바스크립트 Deep Dive"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.함수를 명시적으로 호출하면 함수가 즉시 실행된다.만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머

본 게시글은 "모던 자바스크립트 Deep Dive"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화. 구조 파괴)하여 1개 이상의 변수에 개