본문 바로가기

전체보기

 (62)
prop drilling (프로퍼티 내리꽂기) The Pure React Way -> state를 관리할 때 장점: 명시적으로 작성하면 코드를 실행하지 않고도 정적으로 따라가는 것으로 어디서 사용하는지 쉽게 파악할 수 있고 수정도 간단하게 할 수 있다. 단점: 누구든 데이터가 어디서 초기화되고 갱신되며 사용되는지 판단하기 쉽지 않은 상황에 마주한다. 일부 데이터의 자료형을 바꾸게 되는 경우 (예: {user: {name: 'Joe West'}}-> {user: {firstName: 'Joe', lastName: 'West'}}) 필요보다 많은 프로퍼티를 전달하다가 컴포넌트를 분리하는 과정에서 필요 없는 프로퍼티가 계속 남는 경우 필요보다 적은 프로퍼티를 전달하면서 동시에 defaultProps를 과용한 결과로 필요한 프로퍼티가 전달되지 않은 상황을 ..
ref로 HTML Element 접근/제어 React로 웹 애플리케이션을 개발하다 보면 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. prop인 ref을 이용할 수 있습니다. current 속성을 갖는 특정 형태의 객체만을 할당할 수 있는데 클래스 기반 컴포넌트에서는 React.createRef() 함수를, 함수형 기반 컴포넌트에서는 useRef() 훅 함수를 사용하여 이 객체를 생성할 수 있습니다. 아래 코드는 useRef를 이용한 예입니다. import React, { useRef } from "react"; function Field() { const inputRef = useRef(null); function handleFocus() { inputRef.current.d..
Invalid Hook Call Warning Hooks can only be called inside the body of a function component. 개발자 툴에서 확인된 오류 메시지였는데 아래와 같은 이유로 발생한다고 React 공식 홈페이지에서 확인했다. 1. React와 ReactDOM의 버전이 일치하지 않는다. 2. Hooks 규칙을 위반했다. 3. 같은 앱에 React가 한 개 이상있을 수 있다. React와 ReactDOM의 버전 불일치인가? packag.json에서 확인했는데 react와 react-dom 버전은 동일 했다. 또 다른 확인 방법은 npm ls react 또는 npm ls react-dom 명령어로 확인 할 수 있다. 해당 이미지는 명령어 입력 후 얻은 결과물 중 하나인데 현재 리액트 버전때문에 react-r..
Visual Studio Cod Extension - Better Comments 코딩을 하면 주석을 달게 될 일이 많은데 좀 더 직관적으로 달고 싶은 아쉬움이 있었다. 그래서 알게된 Better Comments!! 주석의 내용을 카테고라이징 할 수 있다. * 내용 설명 ! 주의 사항 ? 궁금한 사항 TODO 해야 할 일 여러 사람과 같이 코드를 작성한다면 색상별 의미에 대해서 먼저 정의하고 가도 괜찮을 것 같다. (커스텀이 가능하다고 한다.) 1. 확장탭을 선택한다. 2. better-comments 항목을 선택한다. 3. Tags > setting.json을 클릭한다. 참고: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments&ssr=false#overview
ReactDOM.render & ReactDOM.createRoot // Legacy root API ReactDOM.render(, document.getElementById("root")) // New root API const root = ReactDOM.createRoot(document.getElementById("root")) root.render() 차이가 뭘까? state나 props 변화가 있을 때, Legacy API는 변수 container가 변경되지 않더라도 계속 렌더링할 때 container를 전달해야 한다. import * as ReactDOM from 'react-dom'; import App from 'App'; const container = document.getElementById('app'); // Initial render. Reac..
Web Server와 WAS(Web Application Server) 및 Apache Http Server 설치 Apache HTTP Server를 이용해서 같은 서브넷의 다른 기기로 내 컴퓨터 웹 서버에 접속 할 수 있도록 찾아보던 중 Web Server와 WAS의 개념이 모호해서 정리가 필요했다. Web Server는 HTTP 요청을 받아 정적인 컨텐츠(.html .jpeg .css etc)를 제공하는 컴퓨터 프로그램 ⇒ 클라이언트(웹 브라우저, 웹 크롤러)의 요청을 서비스하는 기능 예) 클라이언트에 이미지 파일을 보내는 과정 클라이언트는 HTML 문서를 먼저 받고 그에 맞게 필요한 이미지 파일들을 다시 서버로 요청하면 그때서야 이미지 파일을 받아온다. Web Server를 통해 정적인 파일들을 Application Server까지 가지 않고 앞단에서 빠르게 보내줄 수 있다. 그래서 웹 서버가 필요한 이유는?!..
Webpack option - Devtool 이 옵션은 소스 맵이 생성되는지 여부와 생성 방법을 제어한다. 소스 맵이 뭐지? 소스 맵은 원본 소스와 난독화된 소스를 맵핑해주는 방법 중 하나이다. *.map 파일을 통해 제공되고, json 형태로 되어있다. 난독화된 파일을 통해서는 어떤 부분에서 오류가 났는지 알기 힘들다. 소스 맵을 통하면 원본 파일의 어떠한 부분에서 오류가 났는지 볼 수 있다. 디버깅 또한 가능하다. 배포용은 수정하면서 작업하는게 아니기 때문에 빌드 시간, 로그, 디버깅보다 용량이 중요하다. 개발용은 수정이 빈번하고 디버깅을 해야하기 때문에 용량보다는 빌드 시간, 로그, 디버깅이 중요하다. 상황에 맞춰서 devtool을 선택하면 될 것같다. https://webpack.js.org/configuration/devtool/#devt..
Webpack Caching 전략 캐싱은 빌드 시간을 단축하는 웹팩의 유용한 기능이다. 웹팩으로 빌드한 결과물이 변경되지 않았으면 계속 캐싱 상태로 남겨서, 별도의 HTTP 요청이 발생하지 않도록 하는 기법이다. Cache configuration type으로 filesystem 유형은 파일 시스템 캐시를 활성화 활성화 함으로써 이전 빌드한 내용과 비교해서 필요없는 단계를 스킵할 수 있다. 빌드는 기본적으로 node_modules/.cache/webpack에 캐시된다. module.exports = { //.... //webpack5 - persistent file system caching cache: { type: 'filesystem', }, //... } 참고: https://javascript.plainenglish.io/how..

티스토리툴바