react8 [DX] ESLint, Prettier 무엇인지 알고 설정해보기 들어가면서ESLint와 Prettier는 React의 기능이 아니지만, React 프로젝트에서 자주 사용하는 도구이기 때문에 해당 카테고리에 기술한다. Prettier와 Lint를 사용하지 않으면 다음과 같은 문제가 발생할 수 있다. - 의도하지 않은 구현 실수 때문에 에러가 발생하는 경우(예를 들어, 일관되지 않게 function과 arrow function를 혼용하여 this 바인딩이 의도한대로 발생하지 않는 문제) - 협업하는 인원이 많아질수록 개개인별 코드짜는 스타일이 달라 가독성이 떨어지는 경우(예를 들어, 줄바꿈이 4줄코드와 2줄인 코드의 연속적인 충돌 혹은 사용하지 않는 인자들의 잔재) 이러한 문제들은 작지만 신경 쓰이는 부분들로, 개발 생산성을 저하시킬 수 있다. (사실 필자가 겪은 .. 2024. 6. 3. [tailwind CSS] backgroundImage 설정 방법 - (config/style/custom) tailwind CSS - backgroundImage 설정 방법 - (config/style/custom)tailwind css로 backgroundImage를 설정하는 방법은 기록하고자 한다. tailwind 왕왕초보의 무작정 적용기! 목차0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?1. backgroundImage를 tailwind.config.js 파일에서 설정해보기2. style 속성에 backgroundImage를 설정해보기3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기 0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?public 폴더public.. 2024. 6. 2. [React] useEffect에서의 의존성(dependency)과 실행 흐름 useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. useEffect 란? useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 근데 useEffect는 왜 Effect라는 이름을 가질까? Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ") 이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 더보기 React의 클래스 컴포넌트에서는 componentDidMount, componentD.. 2024. 1. 29. [React] useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택) 목차 1. 브라우저에서 Javascript의 존재 이유는 DOM 조작이다. 2. Javascript로 특정 DOM을 선택하는 방법은? 3. React에서는 특정 DOM을 어떻게 조작하는가? 4. React의 가상 DOM과 상호 작용하며 실제 DOM 조작하기 4-1. useRef 예제: useRef와 useState 함께 활용 5. useState와 useRef의 실질적인 차이점은? useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택하기) (* 이해의 흐름을 바탕으로 작성한 글이기에 지식을 뽑기보다 천천히 정독함을 권장해드립니다. ) 필자는 useRef가 useState와 useEffect처럼 한 번에 이해되지 않았다. 드디어 이해했기에 글을 작성해본다. TODO: "특정.. 2023. 7. 18. [React] React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 상태가 바뀌는가? Q. React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받을 때, 상태가 바뀌는가? 면접에서 이런 질문을 받는다고 생각해보자. 이 질문의 답변부터 얘기하자면, 💡 React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 일반적으로 상태는 자동으로 변경되지 않는다. (하지만, 참조 형식의 객체를 다룰 때는 참조의 동등성을 비교할 수 있다.) Why? 왜 상태가 변경되지 않는가? React에서 상태의 변경 여부는 참조가 아닌 값의 동등성(equality)을 기준으로 판단된다. 상태를 업데이트할 때, setState 또는 useState를 사용하는 경우 React는 이전 상태와 새로운 상태의 값을 비교한다. 이를 통해 React는 변경된 상태만 업데이트하고, 변경되지 않은 상태는 무.. 2023. 6. 21. [React] React Fragment 사용이유 및 사용법 (Adjacent JSX elements must be wrapped in an enclosing tag 해결) 목차 1. React.Fragment, Fragment의 차이점은? 2. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야하는가? 1. React.Fragment, Fragment의 차이점은? 와 는 동일한 기능을 수행하는 React의 기능이다. 는 JSX에서 단축 구문으로 사용되며, 는 완전한 형태의 React 요소이다. React에서는 컴포넌트에서 여러 요소를 반환하거나, 부모 요소로 감싸지 않고 여러 요소를 렌더링해야 할 때가 있다. 아래 두 예시는 동일한 결과를 생성한다. 와 는 컴포넌트가 렌더링될 때 실제 DOM에는 나타나지 않고, 여러 요소를 그룹화하는 역할을 수행한다. JSX에서 는 축약된 표현으로 사용되며, 는 명시적인 형태로 사용된다. 하지만 기능적으로는 완전히 동일하다. //.. 2023. 6. 5. [React] vite로 react 프로젝트 설치 vite로 react 프로젝트 설치(Upate 2024.10.27) [Vite] Vite는 어떤 역할을 하고 있는가[Vite] Vite는 어떤 역할을 하고 있는가Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.bo5mi.tistory.com 1. vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다. https://vitejs-kr.github.io/(기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/) ViteVite, 차세대 프런트엔드 개발.. 2023. 4. 5. [React] 리액트 파일 확장자를 jsx로 하는 이유 결론적으론 .js와 .jsx의 확장자로서의 차이는 없다. 리액트 파일은 통상적으로 .js 대신 .jsx 확장자를 사용한다. 이런 컨벤션은 JSX가 표준 Javascript가 아니기 때문에 발생했다고 한다. 즉, 파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절하다. 반면에 jsx나 Typescript처럼 파일 내부에 표준 Javascript 이외에 다른 코드가 있다면 해당 파일의 확장자는 .js가 아닌 다른 확장자로 지정한다고 한다. 예를 들어 jsx가 사용된 파일 확장자는 jsx로, typescript가 작성된 파일 확장자는 .ts로 지정한다. Reference https://stackoverflow.com/questions/46169472/reactjs-js-vs-j.. 2023. 1. 11. 이전 1 다음
