도커(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을 실행해야 합니다. 이전 버전을 사용 중인 경우 수동 설치 ..
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:..
목록 가상화 또는 "윈도잉" 무한 스크롤처럼 동적으로 node가 늘어나는 UI를 사용할때 node가 100개 1000개 늘어나면 어떻게 될까요 많은 행이 포함된 큰 테이블이나 리스트를 표시해야 하는 경우가 있습니다. 이러한 리스트의 모든 단일 항목을 로드하면 성능에 상당한 영향을 미칠 수 있습니다. 목록 가상화 또는 "윈도잉"은 사용자에게 보이는 것만 렌더링하는 개념입니다. 먼저 렌더링되는 요소의 수는 전체 목록의 아주 작은 부분 집합이며 사용자가 스크롤을 계속하는 경우 보이는 콘텐츠의 "window"이 움직입니다. 이렇게 하면 리스트의 렌더링 및 스크롤 성능이 모두 향상됩니다. react-window react-window는 애플리케이션에서 가상화된 목록을 쉽게 생성할 수 있게 해주는 작은 서드 파티 ..
CSS-in-JS는 모던 프론트엔드 개발, 특히 React 커뮤니티에서 점점 더 일반적으로 사용되고 있습니다. styled-components는 Tagged templates의해 구동되어 스타일만 정의하면 일반적인 react 컴포넌트를 생성할 수 있기 때문에 다른 CSS-in-JS 목록에서 눈에 띕니다. 이는 CSS 모듈성과 같은 중요한 문제를 해결하고, 중첩과 같은 non-CSS 기능을 제공하며, 이 모든 기능은 별도의 설정 없이 사용할 수 있습니다. 개발자는 CSS 클래스의 고유 이름에 대해 생각할 필요도 없으며, 클래스에 대해 전혀 생각할 필요도 없습니다. 그럼 styled-components는 어떻게 이를 해결할까요? styled-components에 익숙하지 않다면 우선 공식문서를 읽어보세요. ..
"styled-components"는 자바스크립트에서 CSS 스타일링을 위한 매우 인기있는 라이브러리입니다. 이 라이브러리의 핵심 기능 중 하나는 Tagged Template Literals라는 ES6의 템플릿 리터럴 기능을 활용하는 것입니다. styled-components와 Tagged Template Literals 먼저 Tagged Template Literals에 대해 간단하게 설명하자면, 템플릿 리터럴은 자바스크립트 문자열을 생성할 때 백틱(```)을 사용하는 방법입니다. Tagged Template Literal은 템플릿 리터럴 앞에 함수를 위치시켜 해당 문자열을 처리하는 방식입니다. 예시: function tag(strings, ...values) { return strings.reduce..
