📚 한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다. 깊이 있는 개발 전문 서적 시리즈로 유명한 오라일리에서 리액트 관련 신간이 출판되었다는 소식을 듣고, 「전문가를 위한 리액트」를 신청했다. 더구나 2024년 12월 말 초판이 나온 신간으로, 최근 빠르게 변화하고 있는 리액트 최신 기술 동향을 잘 반영하고 있을 것이라는 기대감도 있었다. 이 글이 본 책이 어떤 내용으로 구성되어 있는지 궁금한 분들께 도움이 되길 바란다. 「전문가를 위한 리액트」의 목차는 다음과 같다. 입문 지식JSX가상 DOM재조정자주 묻는 질문과 유용한 패턴 (hooks, state, 최적화, 패턴 등)리액트의 서버사이드리액트의 동시성프레임워크 (remix, next.js)리액트 서버 컴포넌트리액트의 ..
웹 프론트엔드 개발자로서 단순히 개발하는 것에 그치지 않고 사용자 경험과 동료들과의 협업을 고려해 더 나은 코드를 작성하는 방법을 항상 고민하게 된다. 그러던 중 이 책을 알게 되었고,'라이프사이클부터 웹사이트 구축까지' 라는 문구가 표지에 있어 전반적인 내용을 포괄적으로 다룰 것 같아 꼭 읽어보고 싶었다. 「더 나은 웹개발을 위한 가이드」라는 이름처럼 이 책은 HTML, CSS, JavaScript, TypeScript 뿐만 아니라 최신 개발 경향, 다양한 디바이스별 개발 방법까지 폭넓은 주제를 다루고 있어 유익했다. 특정 기술에 깊게 집중하는 대신, 웹 개발의 흐름을 넓은 시각에서 이해할 수 있었다. 특히 요새 개인적으로 많이 사용하는 중인 CSS Grid에 대한 구체적이고 실용적인 설명이 포..
지금이 그때인 것 같다. 초심자의 행운 이후 잔인한 시험에 든 시간이. 부트캠프 수료 후 취업 했을 땐 개발을 모르던 내가 여기까지 해냈다는 성취감이 컸다. 하지만 만 1년 차가 된 지금은 내가 잘하고 있는 건지, 또 잘하는 개발자들에 비해 내가 너무 모자란 건 아닌지 많은 생각이 든다. 요새 마음을 다잡으려 제일 좋아하는 책인 「연금술사」를 다시 읽고 있는데, '무언가를 찾아 떠나는 여정은 항상 초심자의 행운으로 시작해서 잔인한 시험으로 끝난다.'라는 문장이 지금 내 상황과 너무 잘 맞는다고 생각했다. 그럼 난 이 시험을 어떻게 이겨낼 수 있을까. 그간의 나를 돌아보고, 앞으로의 여정을 다잡기 위해 회고글을 작성해 본다. 회사에서의 나는?잘한 점1. 뷰에 대해 알게 되었다.리액트만 알고 뷰는 하나도 몰..
브라우저 기반의 개발을 하는 프론트엔드 개발자더라도, 개발을 하다보면 결국 CS를 공부해야 한다고 느끼게 된다. 프로그래밍 언어는 결국 컴퓨터를 기반으로 하기 때문이다. 어떻게 공부하면 좋을까 고민을 하던 찰나, 컴퓨터 구조와 운영체제 기초를 다질 수 있는 이 책을 알게 되었다. 컴퓨터 구조와 운영체제 핵심 노트는 컴퓨터 구조를 왜 알아야 하는지부터 차근차근 시작해서 운영체제와 알고리즘까지 전반적인 개념을 폭넓게 배워볼 수 있는 목차로 구성되어 있다. 기본기를 다지는 책답게 단순히 글자로만 설명되어있는게 아니라, 그림이나 도표를 이용해 설명해주는 부분도 좋았다. 특히나 알고리즘은 그 순서가 어떻게 되는지 직접 써보면서 이해하곤 했는데 책에 이미 깔끔하게 정리가 되어있어 그 흐름대로 짚고 넘어갈..
요새 공부 중인 Nuxt.js의 서버가 익스프레스로 돌아가는 걸 보고 노드에도 관심을 가지던 중 Do it! 시리즈로 유명한 이지스퍼블리싱에서 Node.js 입문 도서가 나왔다는 소식을 들었다. Do it 시리즈는 프로그래밍 입문용 서적으로 많이 추천되는데, 최근 Vue.js를 공부할 때도 「Do it! Vue.js 입문」 책을 완독 하며 기초 개념을 쌓는데 큰 도움이 되었기에 기대가 됐다. 프론트엔드를 공부했던 터라 노드는 자바스크립트를 이용해 서버를 구성한다는 것 외에는 깊은 지식이 없었다. 책을 읽기 전에는 서버 쪽 책이라서 어려우면 어떡하지? 하는 생각이 들었는데 입문 도서답게 노드를 설치하는 방법부터 차근차근 목차가 구성되어 있었다. 또한 Do it 시리즈에서 내가 제일 좋아하는 N일 완독 플랜..
간단한 리팩토링 // 기존에 작성했던 코드 if (!isA && isB) { element.style.maxHeight = '384px' } else if (isA && !isB) { element.style.maxHeight = '360px' } else if (!isA && isB) { element.style.maxHeight = '320px' } else { element.style.maxHeight = '300px' } // 수정한 코드 let maxHeight = 300 if (!isA) { if (!sB) { maxHeight = 384 } else { maxHeight = 320 } } else if (!isB) { maxHeight = 360 } element.style.maxHeight..
지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다. 리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증싱글스레드와 이벤트 루프의 상관관계자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다. 이벤트 루프자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.즉, 브라우저 동작 타이밍을 제어하는 관리자이다. 프..
프로젝트 소개 프로젝트 명 DIEDIE.gg 기획 의도 리그 오브 레전드 게임 내 비매너 유저를 신고하고, 신고 전적 및 유저 정보를 확인할 수 있는 서비스 프로젝트 설명 프로젝트 기간 23/08/04 ~ 23/09/05 (프로젝트 주제 선정 및 담당 파트 구현 기간 전체) 사용 기술 Library React Programming Language TypeScript Styling Styled-Components State Management Recoil, Tanstack-Query Formatting ESLint, Prettier Version Control Git, GitHub Design Figma Communication Notion, Slack 기술적 의사 결정 TypeScript - 정적 타입 ..
비전공자의 개발 입문 이유"남들은 러닝화 신고 레이스를 달리는데 나는 그 트랙에 맨발로 서있는 기분이야." 재작년 커리어 전환을 준비할 때 친구에게 털어놓았던 고민이다. 준비하던 유학이 코로나로 인해 무산되며 이제 어떻게 해야 하나 많이 힘들었지만, 가만히 있을 수만은 없어 무엇을 하면서 살건지 정말 치열하게 고민했다. 그중 가장 큰 도움이 됐던 '내게 맞는 일을 하고 싶어'라는 책을 읽으며 아래와 같이 직업 선택을 위한 체크 리스트를 정리했다. ✅ 단순 작업이 반복되는 직무는 나와 맞지 않는다. ✅ 어려워도 꾸준히 성장할 수 있는 업무가 더 좋다. ✅ 일반 사무직으로는 성취감을 느끼기 어려웠다. ✅ 내가 하는 일이 직접적으로 나의 스펙 또는 성과가 되길 원한다. ✅ 자기 주도적으로 일할 수 있었으면 좋..
요구사항 정의 구현해야 할 기능 1) 공통 UI 구현하기 API 명세서 작성하기 2) 본문 CRUD 구현 본문 리스트 조회하기 본문 조회하기 본문 추가하기 본문 삭제하기 본문 수정하기 3) 배포 json-server 서버 배포 (heroku 사용) 리액트 프로젝트 배포 (S3, vercel 등 자유) 필수 요구사항 동적 라우팅 사용 1개 이상의 Custom Hook 구현 Form에 유효성 검증 기능 적용 버튼 컴포넌트 1개로 모든 버튼 구현 배포된 결과물에서는 console.log()가 보이지 않도록 처리 .env를 이용해서 API 서버의 URL 코드 상에서 숨기도록 처리 프로젝트 설명 자신이 좋아하는 과자를 소개할 수 있는 웹페이지를 만들고자 했다. 2023.04.28 ~ 2023.04.30 기간동안 ..
