JBEE.io

Jbee
Written by@Jbee
프론트엔드 개발자: 설계.테스트.생산성.클린코드.멘토링에 관심이 많음. FEConf Organizer / TypeScript Korea Organizer.

GitHubTwitterFacebook

[React] 3. React Architecture

React에서 널리 사용되는 Pattern(?)이라고 하면 Dan의 Presentational and Container Components이 아닐까 생각된다. 16.8.x에서 도입된 hooks API로 과연 이 구조가 의미가 있는 구조일까, 맞는 구조일까 다시 생각해보면서 구조를 잡아보았다.👉 고민 1. Function vs Class우선 모든 컴포넌트를…

[React] 2. Redux Architecture

상태 관리, 어떻게 할 것인가?상태 관리를 위한 선택지는 많다. 심지어 고르지 않는 선택지도 있다. 선택만 하면 절반은 다 된 것이다. 애플리케이션의 규모가 크다 보니 상태 관리를 보조하는 라이브러리가 필요했고 이번 프로젝트에서는 Redux를 선택했다.👉 고민 1. Context API와 Hooks API를 조합이 부분을 가장 우선적으로 검토했다. Do …

[React] 1. Development Environment Setup

Scaffolding 도구를 사용할 것인가, 하얀 도화지부터 시작할 것인가Webpack 설정부터 한땀 한땀 할 수 있다. 관련 자료도 많아졌고 Webpack도 zero config를 ‘지향’하면서 많은 부분이 default config로 들어가게 되며 진입 장벽이 낮아졌다. 그럼에도 불구하고 CRA(create-react-app)를 사용하여 많은 부분을 …

[React] 0. 들어가면서

React는 라이브러리이다. 라이브러리와 프레임워크의 가장 큰 차이점은 자유도에 있다고 생각한다. 프레임워크는 여러 약속의 집합이라고 할 수 있다. React를 사용하다보면 수많은 의사 결정을 마주하게 되는데 이러한 부분들을 약속으로 정해 프레임워크화하여 프로젝트에 적용한 작은 경험을 공유한다.React Ecosystem에서의 best practice라고…

Code Formatting 자동화

팀 단위로 프로젝트 개발이 이뤄지면서 합의한 Coding convention을 지키며 개발하는 것이 중요해졌습니다. 그러나 여전히 소프트웨어 개발을 할 때, 비즈니스 로직, 구조 설계, UX 등 많은 부분을 고려해야 합니다. 이 와중에 convention을 하나 하나 신경써야 하는데, 그러기엔 우리 인생은 너무 짧습니다.이 글에서는 일관된 conventi…

Facebook F8 Hackathon 후기

지난 4월 말, Facebook에서 F8이라는 컨퍼런스를 진행했다. 그리고 나는 행사의 해커톤 참석자로 선정되어 참가하게 되었다. 해커톤 참가자들에게는 컨퍼런스 기간 동안의 숙소와 왕복 항공편이 지원됐다. 올해 운은 전부 끌어다 쓰지 않았을까 생각된다.아직도 짜릿하다. 🤩ToCScheduleEnglish, English and EnglishFourth h…

질문을 잘하는 개발자

문제가 발생했을 때 또는 모르는 것이 생겼을 때, 이를 해결할 수 있는 가장 빠른 방법은 자신의 상황을 잘 알고 있는 누군가에게 질문하는 것입니다. 그 누군가는 옆 동료가 될 수도 있고 멘토나 사수 등이 될 수 있습니다.충분한 구글링을 우선 선행당연히 위에서 말한 ‘문제’와 ‘모르는 것’은 구글링으로 해결되는 문제를 의미하지 않습니다. 우리가 마주하게 되…

테마 스위치 기능 추가하기

이 블로그 템플릿에는 우측 상단에 dark theme, light theme를 switch 할 수 있는 기능이 있습니다. 구현을 궁금해하시는 분들이 계실 것 같아서 하나의 포스팅으로 작성해봤습니다.CSSCSS는 Cascading Style Sheets 의 약자입니다. 적절한 이름이 아니라고 생각하시는 분도 계시던데, 저는 언어의 역할과 그 특성을 굉장히 …

스크롤 이벤트 최적화

⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅을 읽기 전, JavaScript의 Event Loop와 자바스크립트 비동기 처리 과정 일독을 추천 드립니다.우리는 아래처럼 브라우저의 스크롤에 이벤트를 추가할 수 있습니다. 함수에 를 추가해보겠습니다. 함수가 마구 실행됩니다. 위 예시에서는 console을 찍는…

블로그를 만들며 고려한 것들 (JBEE.io)

오랜 숙원 사업이었던 블로그 마이그레이션이 거의 마무리되었고 그 과정 속에서 고민했던 내용을 정리해 보았습니다. 추가하고 싶은 기능은 많았지만 블로그를 만드느라 포스팅을 게을리하여 부랴부랴 마무리했습니다.0. Choose Tool블로그를 마이그레이션 해야겠다라는 생각을 할 때부터 Gatsby로 정해져 있던터라 고민은 없었습니다. 선택한 결과는 매우 만족입…