본문 바로가기

분류 전체보기213

'코딩 자율학습 제로초의 자바스크립트 입문' 도서 리뷰 본 포스트는 길벗 24차 개발자 리뷰어로 선정되어 도서를 제공받아 작성한 글입니다.      기술 도서 리뷰를 작성하는건 오랜만인데, 우연찮게 좋은 기회를 받아 작성할 기회가 생겼습니다.  이번에 리뷰할 도서는 제로초(zerocho) 라는 이름으로 각종 강의와 집필 활동을 하고 계신 조현영님의 "코딩 자율학습 제로초의 자바스크립트 입문" 입니다. 이전에도 제로초님의 강의나 책을 읽으며 공부했던 적이 있었는데, 마침 최신 도서를 리뷰하게 되어 기대가 많이 되었습니다. 약 2주간 책을 읽으며 느꼈던 감상을 결론부터 말하자면, 프로그래밍 입문자들을 대상으로 추천하고 싶은 책입니다. 다른 언어를 충분히 익히신 상태에서 자바스크립트를 새로 배워보려는 분들보다는, 프로그래밍 자체를 처음 시작하시는 분들에게 적합하다.. 2024. 5. 15.
React 19? 18.3 먼저 살펴보기 들어가며 지난달 25일, React 19가 공개되었습니다. 여러가지 기능이 추가된 버전을 사용할 수 있게 되었는데, 기존 프로젝트에서 곧바로 버전을 올리기엔 고려해야 할 점들이 꽤 존재합니다. 18에서 19로 업그레이드를 생각하는 사용자들을 위해, React 18.3이 함께 공개 되었습니다.    18.3 은 이전과 기능상으로 완전히 동일하지만, 19에서 deprecated된 API들에 대한 경고가 추가되었습니다. 리액트 팀은 버전 업 이전에 먼저 적용해보고, 충분한 수정 작업을 거친 뒤 올리기를 권장하고 있네요. 이 포스트에서는 개인적으로 중요하다고 생각되는 변경점들을 일부만 살펴 볼 예정이고, 전체 변경 내용은 React 19 업그레이드 가이드 문서나 릴리즈 노트를 참고해주세요.   변경점문자열 re.. 2024. 5. 5.
classname으로 스타일 간결하게 관리하기 React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 classnames 라이브러리를 사용하면 요소에 클래스 네임들을 간결하게 관리할 수 있는 라이브러리입니다. 설치 // npm을 사용한다면, npm install classnames // yarn을 사용한다면, yarn add classnames 먼저 사용하는 패키지 매니저를 통해 classnames 라이브러리를 설치합니다. 적용 이제 적용해볼텐데, 아래와 같은 상태의 리액트 컴포넌트가 있다고 가정해보겠습니다. import * as styles form './style.css.ts'; exp.. 2024. 3. 24.
useEffect 내부에서는 기명함수를 사용하자 useEffect useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로, 공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다. 코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다. 이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 코드의 동작을 알기 어려워 질 때가 종종 발생합니다. 따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다. 이 상태에서, 임의로 오류를 발생시켜 보겠습니다. Uncaught Error: Error occurred! at (/src/App.jsx?t=1710664770335:24:11) 에러가 발생한 위치의 stack trace에 at 뒤로 파일의 .. 2024. 3. 17.
Redux와 RTK로 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용되어 온 Redux와 RTK에 대해 알아보겠습니다. Redux Redux는 Flux 패턴을 따라가는 상태 컨테이너입니다. Dispatcher의 Action를 통해 Store의 상태를 변화시키고, 이 상태가 다시 View에 차례대로 반영되는 단방향 구조가 Flux 패턴의 핵심입니다. 이러한 구조로 만들어진 컨테이너를 활용하여 쉽게 데이터를 집약하고, 일관성 있게 관리할 수 있다는 것이 바로 Redux의 장점입니다. 예시를 통해 React에서 Redux를 사용하는 방법에 대해 알아보.. 2024. 3. 3.
2024년도 신입의 취업 후기 들어가며 23년도 회고를 작성한지 얼마 되지 않았는데 좋은 일이 생겨 후기를 작성하게 되었다. 겨울동안 줄기차게 진행했던 취업 준비를 마무리하고, 2월부터 프론트엔드 개발자로 커리어를 시작하게 되었다. (이 글을 쓰는 지금이 출근 3일차의 따끈따끈한 신입인 상태다!) 사진에는 모두 담지 못했지만, 취업까지의 과정이 쉽지만은 않았다. 우테코를 수료하고 학업을 마무리하러 돌아오긴 했지만, 동시에 간간히 개인 프로젝트를 진행하고 이력서를 넣으며 취업의 문을 두드리곤 했었다. 그 결과, 지금까지 47번의 지원 중 2곳의 합격을 받아 최종적으로는 현재 캐치테이블에 신입 프론트엔드 개발자로 합류하게 되었다. 그동안 취업을 위해 어떻게 준비했었는지 잊어버리기전에 이 자리를 빌려 간단히 기록해두려고 한다. 나의 장점은.. 2024. 2. 8.