혜르미온느

[!이시중] 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..

일반 과목들을 공부할 때, 개념서를 먼저 훑는 편이다. 한 번 훑는 것에 그치지 않고 몇 회독씩 반복하며 공부하는 타입이라 대학 다니면서 전공과목 시험공부도 실습보다는 전공서적을 몇 번씩 읽으며 준비하곤 하였다. 그런 방법으로 꽤 좋은 성적을 받으며 다녔다. 막상 사회에 나와보니 무조건 개념서 회독이 답이 아님을 하루하루 느낀다. 개념이 중요하지 않다는 말은 절대 아니고, 개념만 이해했을 때 분명 한계가 있다는 뜻인데, 이게 개발에서는 더욱 많이 적용되는 것 같다. 기능의 비즈니스 로직을 구현하는 알고리즘에는 단순 개념의 100 회독보다는 10번의 노하우가 더 유용할 때가 많기 때문이다. 그런 면에서 '백문이 불여일견'이라는 말을 공부법에 적용시키는게 좋다고 생각했는데, 직접 부딪히며 코딩해보는 방법이다..

[!이시중] 2021년 10월 27일 20:44에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/42 에서 확인할 수 있음. React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이었습니다. 그러나 클래스형 컴포넌트의 치명적인 단점은 컴포넌트 사이에서 상태 로직을 재 사용하기 어려우며, 이에따라 코드가 길고 복잡해짐을 야기합니다. 이를 보완하기 위하여 나온 것이 바로 hook입니다. (스우파 HOOK 아님 주의. 아이키 언니 멋있어요>

[!이시중] 2021년 5월 21일 22:33에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/33 에서 확인할 수 있음. 글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을 시원하게 한 번 내려주시길..!) 인생을 흘러 흘러 살아오다가 문득 눈을 떠서 바라본 지금의 나는 VUE를 사용하는 프론트엔드 개발자가 되었다. 세상에 여러 직업이 많고, 하고 싶은 것도 참 많은 나였지만 그 중에 프론트엔드 개발자는 없었고, 생각도 해 본 적이 없었다... 아무튼 프론트엔드의 세계에 발을 들이게 되었는데, 기왕 할거면 전문가가 되어야 하지 않겠는가..! VUE에만 국한 될 수 없어 React를 하자고 마음먹은지 엄~청 오랜 시간이 지났지만 도무지 하..

denyUrls는 말 그대로 sentry 프로젝트로 수집하지 않을 경로에서 생성된 오류를 막을 때 사용하는 옵션이다. https://docs.sentry.io/platforms/react-native/configuration/options/#deny-urls Basic Options for React Native Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the init function as an object. docs.sentry.io 간혹 검색하다보면 ignoreUrls이라는 옵션이 검색되기도 하는데, 이는 옛 버전으로 더이상 동작하지 않으니 반드시..

먼저 나는 CRA(create-react-app)를 통하여 react 기반의 프로젝트를 세팅해두었다. 하단의 코드를 이용하여 스토리 북을 설치해준다. npx sb init 잘 설치되었는지 확인하려면 package.json에 storybook이 들어왔나 확인하거나 폴더 구조에서 storybook 폴더의 생성을 확인하는 것도 간단한 방법이다. .storybook 폴더 하위에는 main.js와 preview.js라는 두 파일이 생성되어있는데, main.js는 스토리북 config 설정들을 하는 스트립트 파일이며, preview.js는 모든 스토리들에 공통적으로 적용할 포맷 등을 세팅하는 곳이라고 생각하면 된다. 이는 조금 더 공부한 후에 따로 포스팅을 할 예정이다. 각설하고, 스토리북 설치 확인의 가장 좋은 ..