Salangdung_i의 기록

이전 스터디 https://salangdung.tistory.com/351 제어/비제어 컴포넌트(1) SSOT원칙요약키오스크 프로젝트의 CS 인입이 발생했다. 현상 : 키보드 컴포넌트에서 이전에 입력한 값이 input에 왕창 찍히는 현상이 발생확인 : 키보드에서 입력받은 text를 setState로 관리하고, 이 state가salangdung.tistory.com이전 스터디에서는 SSOT, 제어/비제어 컴포넌트의 정의 및 비제어컴포넌트가 SSOT 원칙에 왜 위배되는 것인지에 대해 포스팅을 했다. 동료들과 스터디 내용을 공유하면서 더 깔끔하게 이해된 부분이 있어서 오늘은 이 부분에 대해 포스팅해보려고 한다.  제어/비제어 컴포넌트 사용 시점제어 컴포넌트를 사용해야 하는 경우는 크게 4가지이다.1. 상태 관..

요약키오스크 프로젝트의 CS 인입이 발생했다. 현상 : 키보드 컴포넌트에서 이전에 입력한 값이 input에 왕창 찍히는 현상이 발생확인 : 키보드에서 입력받은 text를 setState로 관리하고, 이 state가 변경될 때마다 useRef로 값을 넣어주고 그 값을 input value로 넘겨줬다. useRef 특성상 값의 변화에 따라 화면을 랜더링 하지 못하고, 이 때문에 useRef의 값이 화면에 그려지는 시점에서  이전에 입력했던 text가 input value에 들어가면서 발생한 현상이다. const [text, setText] = useState('');const input = useRef('');useEffect(() => { input.current.value = text;}, [text..

처음 기술면접을 준비하면서 webpack에 대해 공부할 때 webpack은 모듈을 번들시켜주는 역할을 하는 것이라고 알게 되었다. 모듈의 의미는 알겠는데 번들? 시켜준다. 이렇게 정의만 알고 있었는데 면접에서 이 질문을 받게 되었다. 이 김에 제대로 정리해보자. webpack이 무엇인지 설명해주세요. webpack을 커스터마이징한 경험이 있나요? 결론 Webpack이란 여러개의 파일을 하나의 파일로 묶어주는 모듈 번들러(Module bundler)입니다. 설명 webpack의 개념을 이해하기 위해선 먼저 모듈(Module)에 대해 이해해야 합니다. 자바스크립트로 개발하다보면 코드의 재사용이나 유지보수 측면에서 파일을 여러 개로 분리해서 개발하곤 합니다. 이렇게 분리된 파일을 모듈이라고 합니다. 이러한 모..

Web Storage는 무엇인가요? sessionStorage와 localStorage는 무엇이 다른가요? 쿠키, 세션, 웹 스토리지의 차이에 대해 설명해주세요. 결론 브라우저 저장소는 클라이언트 웹 브라우저에 저장할 수 있는 기능입니다. 첫 등장은 쿠키로 시작했습니다. 쿠키의 적은 저장공간과 보안적인 문제, 성능 저하 문제를 해소하기 위해 HTML5에서 Web Stroage를 도입하였습니다. 웹 스토리지는 저장용량을 5MB으로 개선했고 저장 범위, 삭제 시기에 따라 로컬 스토리지와 세션 스토리지로 나뉩니다. 설명 브라우저 저장소의 등장 쿠키는 웹사이트가 웹 브라우저를 통해 방문자의 컴퓨터에 남기는 최대 4KB의 작은 크키의 문자열입니다. netscape사에서 방문자의 웹사이트 방문 여부를 확인하기 위해..

LifeCycleMethod이 무엇인지 설명해주세요. React에 있는 라이프사이클들을 설명해주세요. 결론 리액트 컴포넌트의 라이프사이클에 따라 어떤 처리를 해줘야할때 유용하게 쓰이는 Method이다. 설명 모든 리액트의 컴포넌트들은 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지가 랜더링되기 전인 준비단계에서 시작되어 페이지에서 사라질 때 끝납니다. 리액트를 사용해서 프로젝트를 진행하다보면 컴포넌트를 처음으로 랜더링해야할때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도있고, 또한 불필요한 업데이트를 방지해야 할 수도 있습니다. 이때 컴포넌트 라이프사이클 메서드를 사용하면 됩니다. 클래스형 라이프사이클의 경우 mount, update, unmount 3가지 과정..

useMemo와 useCallback에 대해 설명해주세요. 결론 둘 다 React Hook에서 불필요한 랜더링과 연산을 제어하는 용도로 성능 최적화에 목적이 있는 Hook입니다. 설명 uesMemo와 useCallback을 이해하기 위해선 메모이제이션을 먼저 알 필요가 있습니다. 메모이제이션이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 놓고 동일한 입력이 들어왔을 때 이전의 값을 재사용하는 프로그래밍 기법입니다. 메모이제이션을 적절히 사용하면 연산의 중복을 방지함으로써 메모리를 좀 더 쓰더라도 애플리케이션 성능을 향상할 수 있습니다. React에서 useMemo와 useCallback은 메모이제이션 기법을 사용하여 불필요한 랜더링 또는 연산을 제어하는 용도로 성능을 최적화한다는 점이 같습니다. us..

Virtual DOM이 무엇인지 설명해주세요. Virtual DOM의 작동원리에 대해 설명해주세요. 결론 DOM과 동일한 구조를 가지지만, 메모리상에 존재하는 자바스크립트 객체입니다. 설명 Virtual DOM이란 리액트의 UI를 구성하는 HTML 엘리먼트들을 메모리 내에 구현한 것입니다. 실제 DOM에 접근하여 조작하는 대신, 추상화된 자바스크립트로 객체를 구성하여 사용합니다. 리액트에서 데이터가 변하여 실제 DOM에 반영되기까지는 3가지의 과정을 거칩니다. 먼저 데이터를 업데이트하면 컴포넌트 UI전체를 Virtual DOM에 랜더링 합니다. 다음으로 이전의 Virtual DOM의 내용과 현재의 내용을 비교합니다. 바뀐 내용만 실제 DOM에 적용합니다. DOM 전체를 다시 랜더링할 필요 없이 실제 DO..

👉 문제는 여기 오픈채팅방 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. "[닉네임]님이 들어왔습니다." 채팅방에서 누군가 나가면 다음 메시지가 출력된다. "[닉네임]님이 나갔습니다." 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다. 예..

프로젝트를 구현하면서 헷갈리는 CSS이 있었다. 이번 포스팅은 내가 헷갈려하는 CSS들의 정리한 것이다. CSS와 박스 모델 CSS 박스 모델이란, 박스 형태의 모델이다. 이 박스 모델들이 모여 웹문서를 이룬다. 또한 그 안에는 margin과 padding, border 등 여러 겹의 박스가 들어있다. 블록 레벨 요소 VS 인라인 레벨 요소 박스 모델은 블록 레벡 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. width, margin, padding 등을 이용해 크기나 위치를 ..