양씨

npm과 npx의 차이점에 대해 자세히 알아보자! npmnpm(Node Package Manager)는 Node.js 패키지 매니저이다. npm을 사용하면 다양한 패키지(모듈)을 쉽게 설치하고 관리하는 것이 중점이다. npm은 아래와 같이 사용하는데 패키지 설치: npm install 명령어를 사용하여 패키지를 설치모든 의존성 패키지는 package.json에서 npm install로 설치하여 원하는 패키지를 로컬(node_modules)에 설치글로벌 설치: -g 옵션을 사용하여 패키지를 전역(global)으로 설치스크립트 실행: package.json 파일에 정의된 스크립트를 실행예를 들어, npm run build는 build 스크립트를 실행패키지 관리: 의존성 버전 관리, 업데이트 등을 쉽게 가능..

얼마전 다른사람의 포트폴리오를 구경하던중 "useLayoutEffect 로 렌더링 속도 향상" 이라는 문구를 보고 이것은 뭘까.. 생각이 들어서관련해서 무엇인지 알아보기로 했다 관련하여 살펴보니 브라우저 렌더링 과정과 어느정도 관련이 있었다https://yangwonjoon.tistory.com/69 [Web] 랜더링이란 무엇인가?개발자라면 한번정도 들어봤을 단어이자 면접 단골질문인 CSR과 SSR에 대해 자세히 알아보려한다.CSR(클라이언트 사이드 랜더링)과 SSR(서버 사이드 랜더링)을 알아보기 앞서 랜더링에 대해 자세히yangwonjoon.tistory.com이 포스팅에서는 브라우저 랜더링 과정을 아래와 같이 구분 지었다DOM 트리, CSSOM 트리 생성랜더링 트리 생성레이아웃페인팅이 과정중 3번..

인간도 탄생, 성장, 죽음의 단계가 있듯이, 컴포넌트도 생성, 업데이트, 소멸되는 과정이 있다. 이를 컴포넌트의 라이프 사이클이라고 한다.리액트에서 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉜다 Mount: 컴포넌트가 생성된 순간Update: 컴포넌트가 업데이트되어 재렌더링 되는 순간Unmount: 컴포넌트가 소멸되는 순간 이러한 단계마다 특정 작업을 수행하는 것을 라이프 사이클 제어(생명주기 메서드)라고 한다.원래 이는 클래스형 컴포넌트에서만 사용 가능했지만, 훅의 등장으로 useEffect를 통해 함수형 컴포넌트에서도 쉽게 사용할 수 있게 되었다 더보기클래스형 컴포넌트에서 사용되는 생명주기 메서드를 간단히 살펴보자면(지금은 거의 안쓰이니)원래 총 9가지의 단계가 있는데 주요한 단계는 다음과 같다 ..

useRef는 함수형 컴포넌트에서 변수를 생성하고 이를 DOM 요소나 다른 값에 참조할 때 사용한다.상태가 변경되더라도 리렌더링이 되지 않으며 특정 DOM 요소에 접근이 가능하다 아래와 같이 사용하며 useRef에 초기값을 넣으면 {current: 초기값} 이라는 객체를 반환하고current 키 값을 이용해서 값을 변경한다const refObject = useRef(초기값)console.log(refObject.current) //초기값 이렇게 생성한 useRef 객체는 아래와 같은 특징이 있다DOM 요소에 직접 접근 가능컴포넌트가 랜더링이 계속 되어도 언마운트 되기 전까지 값이 그대로 유지객체 값을 변경해도 리렌더링 되지 않는다위 특징들 때문에 변경시 렌더링이 발생하지 않게 하기 위함Dom 을 조작하기..

리액트에서 이미지를 넣고 싶어 이미지 파일을 첨부할 경우에는 크게public에 넣어 사용하는 방식src에 넣어서 사용하는 방식(보통의 경우 src/assets)이 있다  나의 경우 src/assets에 넣어 주로 사용하였는데 두 방식이 차이점이 정확하게 무엇인지 모른다는 생각이 들어 알아보기로 했다  srcimport할 경우 참조할 수 있는 경로(path) 문자열을 출력한다.파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다(장점)content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을 캐싱하고 있는 경우를 고려하지 않아도 된다. -> 파일이 변경되었을 때만 hash값이 변경된다 (장점)서버 요청 횟수를 줄이기 위해 10,000 bytes 이하의 이미..

이번에 새로운 프로젝트를 하다 문득 지금까지 리액트의 장점을 못살리고 이용한 것이 아닌가? 라는 생각이 들었다 더욱더 컴포넌트화 하며 분리하여 코드를 나누고 폴더구조를 잘짜야겠다고 생각하면서 리액트 폴더구조에 대해 알아봐야겠다고 생각했다 리액트를 이용한 프로젝트를 처음 시작한 시점에도 올바른 폴더구조가 무엇이고 파일을 어떻게 묶어야되는지, 어디까지 나누어야되는지 확신이 들지 않아서 여러번 찾아본 경험이 있다 그때의 결론은 답은 없다..?였다 리액트 공식문서에서도 폴더구조에 대해 너무 큰 고민을 하지말라고 말하기도 하고 궁금해서 사람들마다 방식이 다 달라서 어려웠다 정답이 없다는게 제일 어려운거 같다. 일단 기본 리액트 폴더들부터 알아보자면 아래와 같다 app ├── node_modules ├── publ..

보일러 플레이트(boilerplate code), 보일러 플레이트 코드라고 불리는 보일러 플레이트는 내용은 알지만 단어를 들었을 때 바로 떠오르지 않아 글로 남기려 한다 리액트에서만 아니라 프로그래밍적 의미에서 보일러 플레이트는 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다 이는 시간을 절약하고 프로젝트의 여러 부분이나 여러 프로젝트 간에 일관성을 보장하기 위해 새로운 애플리케이션이나 기능의 기반으로 자주 사용된다. 보일러 플레이트에는 기본 코드 프레임워크, 템플릿, 구성부터 일반적인 작업을 처리하는 광범위한 라이브러리 및 모듈에 이르기까지 모든 것이 포함될 수 있다 대표적으로 리액트에서는 create-react-app을 예시가 있다 cra를 사용하면 바벨이나 웹..

사실 내용적으로는 아는 내용인데 props drilling이란 단어를 들을 때마다 이게 뭐였지란 생각이 계속 들어 정리해보려한다 Props Drilling props drilling이란 react 컴포넌트 트리에서 props를 통해 데이터를 전달할 때 중간 컴포넌트는 그 데이터가 필요하지 않음에도 하위 컴포넌트에게 데이터를 전달하기 위해 props를 전달해야하는 과정이다 장점 장점이라고 말하긴 애매하지만 데이터를 가장 쉽고 빠르게 전달할 수 있다 정적으로 따라가기만 해도 어떤 데이터가 어디서 사용되는지 쉽게 파악 가능하다 단점 규모가 커지고, 컴포넌트가 많아지면 너무 복잡해진다 props 의 이름이 중간에 변경된 것을 추적하기 쉽지않다 많은 props를 전달하다가 필요없는 props가 계속 남거나 전달될..

항상 똑같은 실수를 여러번 하는 것 같다 리액트에서 버튼을 클릭하는 이벤트를 만들 때 onClick 안에 이벤트 핸들러 함수를 설정한다 하지만, 내가 생각하지 못한 무한 콜백오류가 뜨거나 작동이 안될 때가 있다 간단한 실수?이지만 간단한 문제를 자주 범해 글로 남겨 보려 한다 1. 잘못된 방법XXXXX import './App.css'; function App() { const test = () => { console.log('hi') } return ( 테스트 버튼 ); } export default App; 위 코드와 같이 onClick 이벤트 핸들러에 알림창을 띄우면 버튼을 누르지 않아도 랜더링 되는 순간 알림창이 뜬다 이는 리액트가 랜더링시 모든 함수를 실행시키기 때문이다. 버튼을 눌러서 작동되는..

지금까지 리액트를 이용하여 프로젝트 진행 경험이 여러번 있었다 다만, 나한태 왜 리액트를 이용해? 라고 물어본다면 2가지 정도의 답변을 할 것 같다 가장 많이 사용하니까,,? 이걸로 밥벌어 먹고 살아야하니까! -> 많은 기업에서 요구하는 스펙이다 솔직히 마음에 들지 않는 답변이다 따라서, 리액트란 무엇이고, 이걸 왜 사용하며, 특징 및 장점이 무엇인지 이번 글을 통해 다시 복기하려한다 먼저 리액트란 무엇인가? 리액트란 간단하게 자바스크립트 라이브러리 라고 간단하게 설명할 수 있다. 기본 html, css, js를 이용해서도 웹페이지를 개발할 수 있지만, 동적인 웹페이지를 보다 효율적으로 유지 보수하고 관리하기 위해 사용한다 리액트 외에도 vue, angular와 같은 자바스크립트 프레임워크가 있지만 이 ..