홍준혁

어제 하도 고생을 해서 12시 땡 되자마자 숙소에서 기절해버렸다. 덕분에 6시에 깨서 이른 시간에 준비해서 나갈 수 있었다. 미리 스포를 하자면 오늘은 사진을 정말 많이 찍었다. 특히 배경이 정말 이뻐서 정신없이 찍었던 것 같다. 최근에 내가 가장 좋아하는 밴드인 검정치마 조휴일 씨가 정규 앨범을 냈다. 내가 제주도 가는 건 어떻게 알고 이때 앨범을 딱 내냐... Teen Troubles라는 앨범인데, 뚜벅이 여행하는데 정말 큰 힘이 되었다. 곡 중에서 매미들과 Powder Blue, 99%, Follow You, 불세례는 꼭 들어보시길. 맘에 들었다면 201 앨범도 완주해보길 추천한다. https://www.youtube.com/watch?v=k6Ys3M5xNWQ 본론으로 들어가서 눈 뜨자마자 가장 먼..

이 글은 나중에 내가 혼자서 여행을 갔던 추억을 회상하기 위해서 쓴 글이다. 최근에 취뽀를 하고 남은 기간 동안 뭘 해야 하나 고민을 많이 했었다. 그리고 다양한 고민거리들이 많았었는데 그 고민들을 정리할 수 있는 시간이 필요했다. 나에게 취업 전까지 남았던 건 돈과 시간이다. 그래서 이번에 제주도로 여행을 결심하게 되었다. 사실 가족들과 제주도에서 시간을 보낼수도 있었다. 하지만 나는 여유를 가지며 생각 정리를 하기 위해서 혼자 여행을 계획하게 되었다. 물론 걱정도 됐다. 아무래도 4박 5일 동안 제주도라는 섬에서 혼자 있어야 하는데 괜찮을지 걱정이 앞섰다. 많이 외롭기도 했다. 그래서 결정한 것이 게스트 하우스다. 다른 사람들과 함께 어우러져 살아가는 숙소를 선택했다. 이곳이라면 나의 심심함을 다른 ..

오늘의 주제는 Hook입니다. React 버전 16.8 이후부터 Hook API가 도입되면서 함수형 컴포넌트에서도 상태, 생명주기 등을 사용할 수 있게 되었습니다. Hook API를 사용해서 사용자의 입맛에 맞게 사용되어지는 Custom Hook 또한 있죠. 정말 편리한 기능입니다. 그래서 오늘은 Hook이 어떻게 동작하는지, 활용은 또 어떻게 하는지 알아보도록 하겠습니다. 면접 단골질문 클로저(Closure)를 아시나요? 여러분이 프론트엔드 개발자로써 면접을 봤다면 JS 클로저를 아냐는 질문을 들어봤을 것 같습니다. 클로저는 실행 컨텍스트 내부의 함수가 외부 실행컨텍스트를 참조할 때 생기는 현상을 의미하는데요, 사실 React Hook은 클로저와 매우 밀접한 관계가 있습니다. 아해의 코드를 보도록 하겠..

안녕하세요 오늘은 제가 평소에 궁금했던 주제로 글을 써보려고 합니다. Context API의 기능과 왜 사용하는지, Context API의 리렌더링 이슈란 무엇인지 그리고 Redux를 대체할 수 있는지. 위 내용을 설명하는 글을 작성할려고 합니다. 우선 Context API를 사용할려면 그 개념을 알아야 합니다. Context가 나온 이유 React는 단방향 데이터 흐름입니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 직접 전달해야 합니다. 이 데이터 흐름은 간단해 보입니다. 그저 위에서 아래로 흐르니 말입니다. 실제로 단방향 데이터 흐름은 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽습니다. 하지만, 이러한 흐름이 깊어진다고 생각해봅시다. 위 그림처럼 1이라는 컴포넌트에서 6이라는 컴포넌트에 ..

리액트 설계 방법에 대한 이해가 부족하다고 생각되어 공부하면서 글을 정리합니다. 개발을 하다 보면 앱이 커지고 그럴수록 컴포넌트의 수가 많아지고 컴포넌트의 수가 많아질수록 설계 방식이 중요해진다고 생각합니다. 단일 책임 원칙은 컴포넌트가 한 가지 일을 하는 것이 이상적이라는 설계 원칙입니다. 그래서 이러한 설계 원칙을 따르며 진행해보겠습니다. 위 컴포넌트는 리액트 공식문서에서 가져온 사진입니다. 각 컴포넌트를 자세히 살펴보도록 하겠습니다. FilterableProductTable (노란색) => 전체를 포괄하는 영역입니다. SearchBar (파란색) => 모든 유저의 입력을 받습니다. ProductTable (연두색) => 유저의 입력을 기반으로 데이터 컬렉션을 필터링해서 보여줍니다. ProductC..

가끔 모달을 만들다 보면 onClose, onOpen, isOpen 이런 값들을 props로 넘기고 넘기고 넘기고... 동일한 작업을 계속 하게됩니다. 이러한 현상은 Props Drilling 현상이라고 하며, 당연하게도 프로젝트가 커질수록 좋지 않은 구조입니다. 그럼 방법은 뭘까요? 이번 아티클에서는 리액트에서 효율적으로 모달 상태를 관리하는 법을 다뤄보도록 하겠습니다. const [isAModalOpen, setIsAModalOpen] = useState(false); const [isBModalOpen, setIsBModalOpen] = useState(false); const [isCModalOpen, setIsCModalOpen] = useState(false); const handleAOpen..