혜르미온느

진행한 일 공통 Header 레이아웃 세팅하기 https://hyermione.tistory.com/33 리액트 라우터를 통하여 공통 레이아웃 설정하기 본 포스팅의 예시 코드는 이전 포스팅에서 사용한 코드와 연결되는 부분이 있다. 이전 포스팅을 읽고 오지 않아도 이해하는 데에는 무리가 없지만 내용의 흐름상 읽어보는 것을 추천한다. [react hyermione.tistory.com

본 포스팅의 예시 코드는 이전 포스팅에서 사용한 코드와 연결되는 부분이 있다. 이전 포스팅을 읽고 오지 않아도 이해하는 데에는 무리가 없지만 내용의 흐름상 읽어보는 것을 추천한다. [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..

MBTI를 맹신하는 편이지만 듣다보면 어느정도 수긍되는 부분이 있다. 그 중 하나가 '부지런하고 싶지만 게으름', '게으른 자들 중에서는 부지런함' 등의 부분인데 많이 공감이 된다. 토이프로젝트에 있어서도 마찬가지인데, 부지런하고 싶고 또 나름 부지런하여 이런 저런 프로젝트의 레파지토리를 열어두지만 게으름에 완주는 못하게 되는 경우가 상당히 많다. 사실 늦게라도 하면 되지만 흐름이 끊겨 하기가 싫다는 핑계도 있다. 하여 프로젝트 일기를 써보면 조금이나마 완주할 수 있지 않을까 하여 간단하게 적어보려고 한다. 주제선정 먼저 주제는 이커머스계의 1위를 자리하고 있는 네이버 쇼핑을 따라해보고자 한다. 코드가 같은 수는 없겠지만 따라해보면서 어떤 사용성을 추구하며, 그를 구현하기 위해서는 어떻게 해야하는지 도움..

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

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

B.F.F란 Best Friend Forever 이라는 뜻의 약어인데, 개발계에서 영원히 함께 할 수밖에 없는 짝꿍을 뽑으라면 Backend와 Frontend가 아닐까 싶다. 개발에서의 BFF란 Backend For Frontend라는 뜻으로 해석 그대로 프론트엔드를 위한 백엔드를 의미한다. 나름대로 자료를 많이 읽어보았지만 읽으면 읽을수록 광범위하고 섬세한 범위를 포함하고 있어 다 풀기에는 아직 더 많은 공부가 필요할 듯싶다. 이번 포스팅은 많은 자료를 기반으로 이해해 본 BFF의 개념을 소개해보고자 한다. 10년 전 즈음, 모바일이 활성화 되기 이전에는 거의 모든 개발 플랫폼은 웹에 한정되어있었다. 당시에는 하나의 백엔드를 통하여 하나의 플랫폼이 1:1 매칭 되어 서비스해도 전혀 무리가 되는 시절이 ..

센트리에는 할당량 개념이 존재한다. sentry 공식 문서에는 Quota라고 표현하는데, 기업버전을 제외하고는 모든 버전에서 제한이 걸려있어 할당량 관리가 매우 중요하다. 이렇게 엔터프라이즈버전을 제외하고는 모두 제한이 걸려있다. 그래서 오류를 수집 할 때, 꼭 필요한 알짜들을 잘 필터링하여 수집하고 고쳐나가는게 중요하다. 그러나 아무렇게나 하게 된다면 나는 제외를 하였다고 생각했는데, 수집되는 경우가 더러있다. denyUrls 관련 기능을 설명하며 잠시 언급 한 적이 있는데, 예를 들어 에러 리스트에서 특정 에러를 ignored 시켰고, 이후 Unresolved 리스트로 들어오는 것이 아니라 ignored로 들어오는 것도 확인하였는데, 할당량이 가득 차는 경우가 있다. 왜냐하면 리스트에서 설정한 ign..