혜르미온느

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

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번의 노하우가 더 유용할 때가 많기 때문이다. 그런 면에서 '백문이 불여일견'이라는 말을 공부법에 적용시키는게 좋다고 생각했는데, 직접 부딪히며 코딩해보는 방법이다..

JavsScript에서 물음표를 사용하는 사례가 몇 가지 있는데, 예를 들어 삼항연산자 / null 병합 연산자 등, 그 중에 하나가 바로 optional chainig 이다. 나는 사실 옵셔널 체이닝이라는 단어를 잘 몰라서 물음표 연산자라고만 생각했었는데, 이게 잘 사용하면 코드가 간결해지는 효과가 탁월한 것 같다. 예를들어 깊이 중첩된 오브젝트 내의 한 데이터에 접근한다고 하자. 그럼 다음과 같이 표현하는게 일반적인데, let nestedProp = obj.first && obj.first.second; 이 뜻은 obj.first.second에 접근하기 전에 obj.first가 존재하는지 먼저 확인하라는 의미이다. 만약 다음과 같이 코드를 작성하게 된다면 obj.first가 없을 때, 에러를 발생시키..

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

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는 모든 스토리들에 공통적으로 적용할 포맷 등을 세팅하는 곳이라고 생각하면 된다. 이는 조금 더 공부한 후에 따로 포스팅을 할 예정이다. 각설하고, 스토리북 설치 확인의 가장 좋은 ..

먼저 XMLHttpRequest()를 설명하기 위해서 ajax를 설명하지 않을 수 없다. ajax란? Asynchronous Javascript And XML의 약자로 그 뜻을 해석하자면 비동기 자바스크립트 그리고 XML을 의미한다. 풀어서 이해해보자면 JS를 통하여 XML형식의 데이터를 비동기적으로 주고 받는 것이라고 할 수 있다. 여담으로 학부시절 XML 수업을 듣고, AJAX로 졸업작품을 하였는데, 현 기술을 보니 새삼 옛날 기술이라는 생각이 든다... 왜 XMLHttpRequest()의 설명에 앞서 ajax를 설명했냐면 XMLHttpRequest()는 Ajax 프로그래밍에 주로 사용되는 기술이었기 때문이다. XMLHttpRequest()란? 브라우저와 서버가 통신하기 위하여 사용되는 API로 객체..

옛날에 함께 일했던 사수는 신기술에 대한 관심이 엄청났는데, 어느정도냐면 사수를 통해 들은 기술 관련 이야기를 구글 등에 검색해보면 한국 블로그는 찾아 볼 수도 없을 뿐더러 외국에서도 이제 막 관심이 커지면서 커뮤니티가 생성되고 있을 정도로 빠른 정보력을 가지고 있었다. 덕분에 N년 전 Tailwind CSS에 대해서 들었었는데, 현재도 여전하지만 당시에도 부트스트랩만 있으면 스타일은 아무것도 두렵지 않아! 하던 시절이라 흘려 듣고 말았다. (물론 사수와 함께 진행한 프로젝트는 부트스트랩 말고, 더 최신에 나온 스타일을 사용했다.) 시간이 흐른 지금 강의를 듣다가 Tailwind CSS가 언급되는 걸 보고 처음 들었을 때 진작 알아보고 공부해볼걸 이라는 아쉬움이 들어 더 늦지 않게 간단하게 정리해보려고 ..

한 3년 전 쯔음에 진행한 프로젝트에서 백엔드 담당자와 대화를 하다가 node js에 대하여 들은 적이 있다. 대충 머리로는 이해하나 대충 입 밖으로 설명할 수 없는 개념이 마침 강의에 나와서 정리해보고자 한다. node.js 란? 처음 node js를 접하고, 무엇인지 알아보고자 공식 홈페이지에 들어갔는데, 홈페이지에서 하는 이야기라곤 Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 라고 하는 어려운 이야기였다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 크롬 V8엔진도 알고, JS 런..