전체 글

문제 상황Storybook 8.0.9 버전 + Next.js 14.2.1 버전 + tailwindcss 3.4.1 버전에서 Storybook에 tailwind가 적용되지 않는 문제가 있었습니다.애초에 Storybook 8버전이 2024년 3월에 나왔기에, tailwindcss 관련 에러가 있어 해결되지 않았다고 생각했습니다.해당 버튼 컴포넌트의 class에 tailwind className들이 모두 들어있었지만, 정상적으로 Style이 적용되지 않은 모습을 확인할 수 있었습니다.이후 Storybook 버전 다운을 고려하였고, 그래도 분명 해결방법이 있을거라 생각하고, Storybook Repo로 돌진하였습니다.너무 운좋게도 저와 비슷한 Issue를 겪는 사람이 있었고, 해결방법을 찾을 수 있었습니다.ht..

DNS DNS란 Domain Name System으로, TCP/IP 네트워크 상에서 Domain Name을 IP로 바꾸는 시스템을 의미하거나, 이러한 역할을 하는 Domain Name Server를 의미하기도 한다. Domain Name 도메인 네임은 사람들이 원하는 사이트에 방문하기 위해 브라우저에 입력하는 주소를 말한다. 외우기 어려운 IP주소가 아닌, 사람이 기억하기 쉽게끔 사용하는 Name이다. 또한, DNS는 거대한 분산 시스템으로, DNS가 저장하고 관리하는 계층적 구조를 도메인 네임스페이스라고 한다. 도메인 네임 스페이스는 계층적 구조로 이루어져 있어, 분산 데이터베이스 시스템을 관리한다. TLD(Top-Level Domain) 도메인 확장자라고 불리는데, 이는 최상위 도메인이다. .com,..

표준구조 : 7계층 모델 / Open Systems Interconnection (OSI) Architecture OSI 7계층은 네트워크 통신이 일어나는 과정을 7개의 계층으로 구분한 모델이다. 가장 상위 계층인 응용 계층부터 표현, 세션, 전송, 네트워크, 데이터 링크 그리고 가장 하위 계층인 물리 계층으로 이루어져 있다. 각 계층이 본연의 역할을 하는 프로토콜을 두고 통신함으로서 네트워크 과정에 문제가 생겼을 때 빠르고 정확하게 해결할 수 있다는 장점이 있다. OSI 7계층 구조도 7계층: 응용(Application) — Message 사용자가 네트워크 자원에 접근하는 방법을 제공하고, 사용자가 실행하는 응용 프로그램들이다. 이 계층에는 HTTP, DNS (도메인 변환), SMTP (이메일) 등이 ..

아래 글은 React 공식문서를 기반으로 작성된 글입니다. Context를 사용해 데이터를 깊게 전달하기 – React The library for web and native user interfaces ko.react.dev 일반적으로 props로 부모에서 자식으로 전달한다. 하지만 props drilling이 너무 깊게 일어나면, 관리하기에 너무 어려워지거나, 코드를 작성하면서 그 props를 사용하지도 않지만 prop으로 전달받아야하는 일이 발생한다. 이때 props로 명시적으로 전달하지 않고, 바로 전달할 수 있는 방법이 Context API이다. state를 여러 컴포넌트를 통해 전달하는 경우 기본적으로 어떤 한 state를 여러 컴포넌트에서 쓰고 싶을땐 props를 활용하여 다른 컴포넌트에 데..

아래 글은 React 공식문서를 기반으로 작성된 글입니다. state 로직을 reducer로 작성하기 – React The library for web and native user interfaces ko.react.dev 여러개의 state 업데이트가 여러 이벤트 핸들러에 분산되어 있는 컴포넌트는 과부하가 걸릴 수 있다. 이때 reducer를 사용해서 모든 state 업데이트 로직을 통합할 수 있다. useReducer() : 더 강력한 state관리가 필요한 경우 사용되는 HOOK useState대신 쓸 수 있는 Hook이다. useReducer는 state관리를 도와주는 훅으로, 복잡한 state관리를 할때 유용하게 쓰인다. 예를들어, 여러 state들이 함께 속해있는 경우라던지 여러 state들이..

Key Warning [ key warning 메세지는 왜 발생할까? ] 리액트는 데이터의 목록을 렌더링하는데 있어서 특별한 개념을 갖는데, 리액트에서 발생할 수 있는 성능 손실이나, 버그없이 효과적으로 목록들(li)를 업데이트하고 렌더링할 수 있도록 보장하기 위해 key 라는 개념이 존재한다. key props를 쓰지 않았을때의 문제점 리액트는 새로운 아이템을 추가했을때 마지막 아이템으로 렌더링하고 모든 아이템을 업데이트해서 컨텐츠를 교체한다. key props없이 배열을 추가해서 렌더링하면 생기는 일. 추가로 div를 넣어 렌더링해서 끝부분에 넣음. 이후 모든 아이템들을 지나면서 배열에 있는 컨텐츠와 다시 일치시키기 위해 안에 있는 컨텐츠를 업데이트. → 성능 측면에서 최악 + 버그까지 발생 가능!!..

아래 글은 React 공식문서를 기반으로 작성된 글입니다. State를 보존하고 초기화하기 – React The library for web and native user interfaces ko.react.dev React는 UI 트리에서 어떤 컴포넌트가 어떤 state에 속하는지 추적한다. 또한 state를 언제 보존하고 언제 초기화할지 제어한다. React UI Tree 브라우저에서는 UI를 렌더링하기 위해 많은 Tree를 사용한다. DOM 트리는 HTML, CSSOM 트리는 CSS, 접근성 트리까지 사용한다. React 또한, 트리구조를 사용해서 UI를 관리하고 모델링한다. React는 JSX로부터 UI 트리를 생성한다. 이후 React DOM은 해당 UI 트리와 일치하도록 브라우저 DOM 엘리먼트..

아래 글은 React 공식문서를 기반으로 작성된 글입니다. 컴포넌트 간 State 공유하기 – React The library for web and native user interfaces ko.react.dev state 끌어올리기 - Lifting State Up 두 컴포넌트의 state가 항상 함께 변경되는 것을 구현하려면 두 컴포넌트에서 state를 따로 관리하면 안되고, 부모 컴포넌트에서 state를 만든뒤, props를 통해 state를 각각 전달한다. 이 방법을 우리는 Lifting State Up, state 끌어올리기라고 한다. function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); ret..