혜르미온느

프론트엔드를 접해보신 분들은 누구나 다음과 같은 고민을 해보신 적 있을겁니다. 상태관리 여기서 관리 대상인 상태란 무엇일까요? 개인적으로 고민했을 때에는 언제든지 변경될 수 있는 데이터를 '상태'라고 일컫는 것 같아요. 변경의 여지가 있으니 관리를 해 주어야 하는 데이터가 되니까요. 그럼 여기서 프론트엔드적 측면에서 관리해야하는 데이터는 크게 두가지가 있습니다. 서버 데이터와 클라이언트 데이터. 서버에서 받는 데이터의 특징 클라이언트와 다른 공간에서 관리되어짐 get/update 과정에서 비동기 API가 필요함 불특정 다수와 공유되는 데이터로 사용자가 의도하지 않은 변경들이 일어날 수 있음 클라이언트에서 받는 데이터의 특징 클라이언트 소유의 공간에서 관리되어짐 비동기적 API가 필요하지 않음 다른 사람과..

나같은 경우에는 가끔 간단한 테스트를 하고 싶은데, VS 혹은 인텔리J를 열어 실행시키기가 귀찮을 때가 있다. (귀차니즘 ㅜㅜ) 그러할 때 사용하기 좋은 리액트 온라인 코드 편집기를 소개한다! 이는 리액트 기반으로 세팅되어있는 URL이며, 별도의 설치 및 실행 등의 과정이 없이도 리액트가 돌아가는 환경을 제공해준다. CodePen https://ko.reactjs.org/redirect-to-codepen/hello-world https://ko.reactjs.org/redirect-to-codepen/hello-world Redirecting to Codepen... ko.reactjs.org CodeSandBox https://codesandbox.io/s/new React - CodeSandbox ..

[!이시중] 2021년 11월 20일 12:43에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/62 에서 확인할 수 있음. react CRA는... 정말 모든 게 다 있다. 코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다. 보통은 명령어를 통하여 많이 설치하곤 한다. npm i eslint https://www.npmjs.com/package/eslint eslint An AST-based pattern checker for JavaScript.. Latest version: 8.18.0, la..

어느 날 들어온 요건 하나. 'nextTick 시점에서 실행해주세요.' vue를 익숙하게 써왔던 나는 vue 프로젝트에서 nextTick을 정말 요긴하게 잘 사용했었는데, 현재 react에서 진행하고 있는 프로젝트에 nextTick을 넣으려니 가만있어보자... 어떻게 표현하는 거였더라? 막히게 되었다. 그래서 정리해본 useEffect와 useLayoutEffect. 사실 실무에서는 useEffect를 압도적이게 많이 사용하긴 했는데, 둘이 어떻게 다른지 한 번 살펴보자- 먼저 nextTick이란 화면이 랜더링 될 때, js의 비동기성 특징으로 접근하고자 하는 DOM을 찾지 못하는 현상을 해결해주는 callBack 함수이다. updateMessage: function () { this.message = ..

[!이시중] 2021년 10월 26일 21:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/41 에서 확인할 수 있음. 지난번 프론트에서 에러를 로깅하는 방법 중 하나인 sentry 관련 포스팅을 진행하며, 프론트엔드에서 에러 처리하는 방법에 대하여 정리해 봐야겠다는 생각이 들었다. 막상 정리하고 보니 너무나 기본 문법들이었는데, 안일한 마음에 나도 많이 놓치고 있었던 부분들이었다. 다만, 프론트엔드 내부에서의 일시적인 에러 처리이며, 에러 관련 데이터 수집 등에는 다소 비효율적이라는 한계가 있다. https://hyermione.tistory.com/5 프론트엔드에서 에러 처리하기 - SENTRY [!이시중] 2021년 10월 23일 23:24에 최초 작성된 글로써 원..

(이 포스팅까지 흘러 들어왔다면 자바스크립트에 대하여 아주 얕게라도 안다는 기준 하에-) 스크립트를 짜다보면 컴포넌트를 만들어 사용성을 높이는 코드를 굉장히 많이 고민하게 된다. 컴포넌트를 호출하게 되면 하위(자식) 컴포넌트들도 함께 호출하게 되는데, 문제는 여기에서 시작된다. 내가 컴포넌트 내에세 하나의 상태 값을 변경하였을 때, 함께 온 자식 컴포넌트들까지 모두 랜더링 되는 상황이 발생하기 때문이다. 이렇게 되면 불필요한 랜더링의 반복으로 의도하지 않은 메모리 과사용 등 여러 문제가 발생하게 된다. 이렇게 의도하지 않은 상황을 막고자 처리하는 방법이 바로 useMemo와 useCallback Hook의 사용이다. 이 둘은 비슷하면서 다르기 때문에 많이 비교된다. useMemo const memoize..

[!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다. hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -! https://yuniel.tistory.com/42 [뷰쟁이의 리액트 시작하기] 리액트 hook 이란? React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이 yuniel.tistory.com 아무튼 개인적으로 그..

[!이시중] 2021년 10월 28일 21:55에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/43 에서 확인할 수 있음. 뷰쟁이가 react를 처음 맞이하고 가장 적응이 안 되었던 부분은 바로 변수의 선언이다. 우선 react hook에서는 useState를 통하여 변수를 선언하고, 초기화시키고, 변형시킬 수 있다. 물론 흔히 아는 방식처럼 const test = ‘테스트입니다’; 라는 식으로도 선언과 초기화를 시킬 수 있지만, 이는 변형시킬 수 없다는 문제가 있다. 뒤의 글을 읽으면 자연스레 이해하게 되리라. 먼저 useState를 쓰는 형식이 있다. const [ 변수명, 변수정의함수 ] = useState(기본값); const [ count, setCount ] = ..

본 포스팅의 예시 코드는 이전 포스팅에서 사용한 코드와 연결되는 부분이 있다. 이전 포스팅을 읽고 오지 않아도 이해하는 데에는 무리가 없지만 내용의 흐름상 읽어보는 것을 추천한다. [react router 설정하기] 포스팅 바로가기 여러 웹사이트나 애플리케이션을 사용한 경험자들은 자연스레 익숙한 것이 있다. 바로 Header 혹은 GNB의 개념인데, 가령 네이버 뉴스의 경우 언론사별/뉴스/정치 등 어느 메뉴를 눌러도 주소는 변하지만 헤더는 변하지 않는 것을 알 수 있다. 또한 똑같이 유지되는 게 으레 자연스러운 흐름이라고 인지한다. 모든 페이지마다 같은 헤더를 넣기 위하여는 여러 방법이 있을 것이다. 예를들어 페이지를 구성하는 컴포넌트들마다 헤더 컴포넌트를 import 하여 불러오는 방법, 라우터를 통하..

vue로 프로젝트를 진행할 당시에는 프로젝트를 처음부터 설계한 적이 많아 라우터 뼈대도 직접 잡았는데, 문득 react에서는 한 번도 경험한 적이 없다는 생각이 들었다. 물론 이론적으로는 알고 있지만 직접 해보는 게 더 바르게 또 빠르게 이해할 수 있을 거라는 생각에 마침 클론 프로젝트로 진행할 겸 라우터 테스트를 해보았다. 리액트는 뷰와는 다르게 라우터를 사용하기 위해서는 따로 라이브러리 설치가 필요하다. npm i react-router-dom https://www.npmjs.com/package/react-router-dom react-router-dom Declarative routing for React web applications. Latest version: 6.2.2, last publi..