최근에 프론트엔드 개발자로 일하고 계신 루쏘님에게 코드 리뷰 멘토링을 받았습니다. 코드 리뷰 멘토링에 대한 설명 글은 아래 링크에서 확인하실 수 있습니다. https://artvelop.vercel.app/23 처음에는 인프런에 스터디 게시판을 보고 알게 되었는데요. 좋은 기회라고 생각해서 빠르게 연락을 드렸고 이틀만에 과제를 진행해서 코드 리뷰를 받게 되었습니다. 리뷰 받았던 과제는 아래 링크로 확인하실 수 있습니다. https://github.com/Seung-wan/codereview-react/pull/1 코드 리뷰를 위한 과제도 정성스럽게 준비해주셔서 재밌게 작업할 수 있었는데요. 나중에 코드 리뷰를 할 때 알아차렸는데 제가 피그마 디자인 시안을 잘못 보고 개발했던 컴포넌트가 있어서 조금 아쉬웠..
React에서 함수 컴포넌트가 도입된 이후 v16.8부터 다양한 hook들이 소개되고 있습니다. 그 중에서 상태를 관리하는 useState, useReducer와 같은 상태를 다루기 위해서 꼭 사용해야 하는 훅도 있지만 useCallback, useMemo, memo와 같이 겉보기 동작에는 전혀 영향을 주지 않는 훅들도 있습니다. 메모이제이션은 무엇일까? 사용하는 것과 사용하지 않는 것에 동작의 차이가 없다면 이 훅은 어떤 목적에서 사용되는 걸까요? 이미 알고 계시겠지만 React에서는 메모이제이션(Memoization)을 위해 사용하고 있습니다. 메모이제이션의 대한 위키를 찾아보면 '컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제..
사실 (Fact) 이번 주 수업은 현석님께서 진행해 주셨습니다. React, 미션, 프론트엔드 테스트, 스토리북에 관련된 내용들이었습니다. 수업시간에 회사에서 야근을 하느라 제대로 듣지 못해 녹화본을 보면서 정리하려고 합니다. 리액트 페이먼츠 미션을 시작했습니다. 리액트로 본격적으로 코드를 작성하게 되어 재밌었습니다. 생각보다 고민되는 부분이 많았지만, 리뷰어분과 의견을 주고받으며 리팩터링 하는 과정에서 정말 많이 배웠습니다. 그리고 앞으로 배울 것 또한 정말 많이 남아 있습니다. 느낌 (Feeling) 리액트로 작성한 코드를 리뷰받는 것이 정말 좋았습니다. 평소에 했던 고민들, 어려웠던 점을 리뷰어분과 나누며 해결해 나가는 과정이 좋았습니다. 리뷰를 받으면서 느낀 점은 클린 코드를 작성하기 위해서는 정..
사실 (Fact) TDD, 클린 코드 with JavaScript 과정과 동일하게 첫 수업은 OT로 시작했습니다. 메이커준님께서 진행해주셨고 간단하게 체크인후에 각자가 과정에 임하는 목표에 대해 작성하여 열의를 불태웠습니다. 이 과정의 목표, 진행 방식또한 친절하게 설명해주셔서 앞으로 8주간의 그림을 그릴 수 있었습니다. 1주차의 미션은 리액트로 계산기를 구현하는 미션이었고 React를 체험하며 기본적인 개념들을 학습하는 온보딩의 목적이었습니다. JS 과정에서 한번 해봤던 계산기 미션이었지만, 리액트로 구현하려니 또 새로웠고 나름 시간을 많이 써서 미션을 완료하게 되었습니다. 리뷰를 받고 나서는 제가 평소에 놓치고 있었던 부분을 확실히 알 수 있었습니다. 리뷰받은 내용을 반영하고, PR이 Merge됨으로..
React에서 DOM에 innerHTML을 사용하기 위한 방식입니다. HTML태그와 내용을 넣을 수 있는데 이러한 경우에는 XSS(크로스 사이트 스크립팅) 공격에 쉽게 노출될 수 있습니다. 이러한 보안 문제때문에 React에서는 JSX에 html 태그를 그대로 넣으면 브라우저에 html 태그가 그대로 출력됩니다. const App = () => { const getHtml = () => { return 'Hello!'; } return ( {getHtml()} ) } export default App; HTML 태그를 JSX안에서 DOM에 삽입하기 위해서는 html 태그에 dangerouslySetInnerHTML 속성을 이용합니다. dangerouslySetInnerHTML속에는 객체를 넣어야 하고 객..
