next.js 14 app router next.js 14에서는 기존 pages라는 폴더 기반의 라우팅에서 app router로 변경되었다. next.js 서버에서 custom api를 작성하는 방법에도 약간의 변화가 있기 때문에 이에 대해서 공유한다. export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} app/api/route.ts 위 예시를 보면 page.js나 layout.js처럼 파일 기반 route를 제공한다. app 폴더 내부에 동일한 방식으로 route.ts 파일을 작성하면된다. 동일하게 app폴더 내에서 파일 기반으로 동작하기 때문에 중첩을 피하기 위해서..
웹개발자로서 실무에서 도커, 컨테이너라는 용어를 자주 접하게 된다. 생소한 도커에 대해서 당장 써먹을 수 있도록 쉽게 핵심만 알아보도록 하자. 도커란? "도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다. 여기에는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 서버에 설치되는 무엇이든 아우른다. 이는 실행 중인 환경에 관계 없이 언제나 동일하게" ~블라 블라~ 들어도 모르겠다. 도커의 이미지와 컨테이너 개념을 이해하기 쉽게 비유하자면, "도커 이미지는 레시피나 설계도"에, "도커 컨테이너는 그 레시피로 만들어진 음식이나 설계도대로 지어진 집"에 비유할 수 있다. 그렇다면 도커 파일은 건축주의 발주서 정도! 도커 이미지 : 설계도 설계도..
도커(Docker)에서 이미지를 빌드 한 후 컨테이너를 실행할때 포트 설정을 통해 컨테이너와 호스트 간의 네트워크 연결을 구성하는 것은 중요한 과정입니다. 이 포스팅에서는 Docker에서 포트 설정을 하고 실행하는 방법에 대해 자세히 설명하겠습니다. 도커 포트 설정 기본 도커 컨테이너는 격리된 환경에서 실행되기 때문에, 외부와 통신하기 위해서는 포트를 명시적으로 개방해야 합니다. 이를 위해 docker run 명령어를 사용할 때 -p 또는 --publish 옵션을 사용합니다. 명령어 형식 docker run -p [호스트포트]:[컨테이너포트] [이미지 이름] 호스트포트: 외부에서 접근할 때 사용할 호스트의 포트입니다. 컨테이너포트: 컨테이너 내부에서 사용되는 포트입니다. 이미지 이름: 실행할 도커 이미지..
Windows에서 개발 환경 세팅 하기 WSL 설치 및 사용법 Windows Subsystem for Linux (WSL)은 Windows 환경에서 리눅스 서브시스템을 사용할 수 있게 해주는 기술로, 개발 환경을 구성하는 데 매우 유용합니다. 다음은 WSL을 Windows 10 이상 버전에서 설정하는 방법에 대한 간단한 가이드입니다. 참고: WSL 2는 Windows 10, 버전 1903 이상 및 Windows Server, 버전 1903 이상에서 사용할 수 있습니다. 먼저 Windows를 최신 버전으로 업데이트해야 합니다. 필수 조건 아래 명령을 사용하려면 Windows 10 버전 2004 이상(빌드 19041 이상) 또는 Windows 11을 실행해야 합니다. 이전 버전을 사용 중인 경우 수동 설치 ..
쉐도우 돔 (Shadow DOM) 이란? 쉐도우 돔 (Shadow DOM)은 웹 컴포넌트 (Web Components)의 핵심 기술 중 하나로, 주요 브라우저에 기본적으로 탑재되어 있는 웹 API입니다. 쉐도우 돔을 이해하려면 먼저 웹 컴포넌트의 목적과 역할을 알아야 합니다. 웹 컴포넌트는 재사용 가능한 사용자 지정 요소를 생성하기 위한 기술 세트로, 이를 통해 개발자는 더욱 모듈화되고 재사용 가능한 웹 애플리케이션을 구축할 수 있습니다. 쉐도우 돔의 핵심 기능 및 장점 캡슐화 (Encapsulation): 쉐도우 돔을 사용하면 외부 돔과는 별도의 돔 구조를 갖게 되어, 스타일 및 코드의 충돌 없이 독립성을 유지할 수 있습니다. 이는 CSS 스타일이나 JavaScript 로직이 쉐도우 돔 외부의 요소에 ..
React에 관련된 설명을 보다보면 종종 React는 virtual-dom이라서 빠르다라는 식의 이야기를 듣고 한다. 이는 반만 맞는 이야기이다. export function updateWrapper(element: Element, props: Object) { const node = ((element: any): TextAreaWithWrapperState); const value = getToStringValue(props.value); const defaultValue = getToStringValue(props.defaultValue); if (value != null) { // Cast `value` to a string to ensure the value is set correctly. Whi..
막연하게 반대로 생각하고 있었던 부분에 대해서 공식 문서를 기준으로 기록. https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect – React The library for web and native user interfaces react.dev Adjusting some state when a prop changes props가 변경될때 state를 수정하는 경우 function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setS..
타입스크립트의 Object.keys 타입 추론 타입스크립트를 사용하다가 이해할수 없는 에러와 마주쳤다. const obj = { key1:"", key2:"" }; Object.keys(obj).forEach((section) => { delete obj[section]; } 위와 같은 코드가 있을때 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ key1: string; key2: string; }'. No index signature with a parameter of type 'string' was found on type '{ key1: string; key2:..
