본문 바로가기

전체 글

(47)

테크 리더들이 생각하는 "개발자 원칙" 필자는 학습 루틴이 느슨해지거나, 나태해질 때 쯤 우아한 테크 Youtube 채널을 들어가 신입 개발자 분들의 10분 테코톡을 보면서 요새 궁금해하는 키워드들이 무엇인지 탐색해보곤 한다. (이와 동시에 공부하기도 한다.) 그 중에서도 주기적으로 진행하는 컨텐츠, 우아한 테크 세미나는 현업 개발자 분들의 스피치 및 인터뷰로 짧은 시간 안에 양질의 테크 트렌드와 이직 시장 분위기를 파악할 수 있어 애청하는 편이다. 지난 3월, 우아한 형제들에서 진행하는 우아한 테크 세미나 라이브 스트리밍을 시청한 적이 있는데 요즘의 무기력한 자신을 돌이켜 보며 당시 메모했던 내용을 복기하며 포스팅을 올려본다. 특히 자주 접하던 네임드 개발자 분들의 질의응답 인터뷰가 인상적이었는데, 7개월이 지난 지금 내용을 곱씹어 보니 그..

Emotion으로 React 컴포넌트 디자인하기 Emotion? HTML 요소 혹은 React 컴포넌트에 CSS를 적용하기 위한 라이브러리 CSS-in-JS 라이브러리 중에서는 Styled Component 라이브러리가 가장 대두 되었으나, MUI(Material UI)가 스타일링 엔진을 Emotion으로 채택하면서 이목이 집중되고 있음 (Emotion에서도 styled component의 장점을 차용해서 활용하려는 흔적이 돋보임) css() 함수를 통해 간편한 React 컴포넌트 스타일링이 가능 공식 문서가 굉장히 친절하므로 Getting Started 항목을 읽어보는 것이 가장 명시적 패키지 설치 (react) vanilla 환경은 @emotion/css 패키지로 설치 $ yarn add @emotion/react emotion에서도 styled ..

React 공식문서 톺아보기 (feat.코어 자바스크립트) 리액트 개발자들은 공부를 시작한 순간, 심화 기술에 대한 레퍼런스 참고 시, 새로운 버전이 출시되면 어김없이 공식문서를 찾게 된다. 수 많은 테크 블로그들의 정보와 비교해 가장 심플하고 가장 직관적이며 가장 정확한 정보를 가지고 있기에 뗄레야 뗄 수 없다. 필자는 최근 한 동안 코어 자바스크립트 공부에 빠져 실행 컨텍스트, 스코프, 비동기에 대한 기본기를 다졌다. (이에 대한 내용은 느낀 바가 많아 정리 후 포스팅 할 예정이다) 자바스크립트 엔진이 동작하는 방식을 이해하고 다시 읽는 공식문서는 좀 색달랐다. 예전에는 그저 페이스북이 정한 법칙대로. 로마에 왔으면 로마의 법을 따르라는 것 마냥 "그냥 그렇게 써야 돼"로 문서를 받아들였다면, 지금은 "로컬 state를 적용하기 위해서 왜 function 컴..

구글 스프린트 7기 FTOOS, 뒤늦은 회고 프롤로그 지난 3월, 한창 VanillaJS로 lotto 프로젝트의 코드 리뷰를 진행하던 시점에 있던 일이다. 처음에 function으로 구현되어 있던 객체들을 class형으로 리팩토링 해보면서 ES6부터 class 개념이 도입되고, 이로 인해 절차 지향형 언어 JavaScript가 OOP 패러다임을 따르고 있는 것이 기존 스크립트 언어의 정체성을 반하는 행위가 아닐까 싶은 의문이 들었다. function 객체와 class 객체의 차이점이 궁금해지면서 관련 기술 포스팅을 서치하던 중 우연히 현 카카오 엔터프라이즈에서 시니어 프론트엔드 개발자로 일하고 있는 teo의 글 객체지향 프로그래밍과 javascript (약간의 역사를 곁들인...) 을 접하게 됐다. 팩트만 나열한 기술 포스팅이 아닌 인사이트를 경험..

2022 GDG Korea 이력서 멘토링 후기 대다수의 직장인에게 이력서란 단순히 이직을 위한 "수단"이 아니게 됐다. 이력서를 주기적으로 갱신하고, 커리어를 회고하는 일은 다양화된 커리어의 방향성을 정립할 수 있는 주춧돌이 된다.이를 토대로 원하는 분야의 기업에서 오퍼를 받거나 JD를 검토해보면서 현 IT 시장에서 공통적으로 요구하는 역량이 무엇인지 파악할 수도 있다. 이처럼 이력서 관리는 소프트웨어 엔지니어에게 빠질 수 없는 필수 역량(?) 중 하나가 되었다. 지난 4월 23일, GDG Korea WebTech에서 진행한 이력서 멘토링 관련 세션을 참여했다. 단순 호기심에 신청한 행사였는데 굉장히 만족스러웠기에 뒤늦게나마 후기를 적어본다. 페스타를 통해 신청했고 개발자 이력서 키워드로 구글링하면 최 상단에 위치한 이력서 작성법 포스팅으로 유명한 ..

ResizeObserver로 반응형 구현하기 (feat. 첫 PM 체험기) 지난 4월, 고객사 측에서 대규모 프로젝트 통합에 앞서 반응형 동작에 대한 요구사항이 생겨 갑작스럽게 데드라인성 프로젝트를 진행하게 되었다. 성능 최적화를 위해 절대 좌표로 구현되어 있는 내부 컴포넌트 구조에서 특정 모바일 브라우저의 인앱 기능을 통해 글꼴 크기 비율(%)을 변경하면 컨텐츠가 잘리지 않고 반응형처럼 동작해야 하는 요구사항이었다. 실제로 브라우저에서 글꼴 크기를 변경했을 때 computed style의 font size는 변경해주지만 notify event를 따로 내어주지 않기 때문에 내부 프레임워크의 event flow를 태울 수 없기에 적절한 대안이 필요했다. 애초에 컴포넌트가 상대 좌표로 구현되어 있었다면 간단히 flex 를 통해 반응형 레이아웃을 구축할 수 있었겠지만 기존 제품의 구..

3월 회고, 코드 리뷰 스터디와 멘탈 케어의 흔적들 어느덧 3월이 끝나간다. 오미크론 확진으로 3월 첫 주는 회복에만 힘쓰느라 일주일을 약에 취해 살았다.. (누가 경미한 감기 증세라 했나요.. 목에 칼춤을 추는 기분이였다..!) 그렇게 일상에 복귀한 지 보름 째. 그동안 커밋 잔디를 심지못해 부채감을 느끼며 VanillaJS 코드 리뷰 스터디와 Next.js 프로젝트 등 계획했던 일정들이 부메랑처럼 돌아와 매우 바쁜 일상을 보내게 되었다. 맘 같아서는 일주일에 한 번씩 회고록을 작성하려 했으나.. 😂 각 잡고 포스팅을 쓸 여유가 나지 않아 개인 notion에만 조금씩 정리했던 내용들과 개인적인 멘탈이 흔들렸을 때 극복했던 방법들을 톺아보고자 한다. 🖍 3월에 진행한 것들 1. 출근 전 10분 TIL 저널 작성 2. React 공식문서 정독 3. Vani..

React #4. Lifecycle Hook vs useEffect React의 Lifecycle이란? 리액트는 컴포넌트 기반으로 설계된 라이브러리이다. 리액트에서 우리가 만드는 컴포넌트는 React에서 각각의 컴포넌트는 생명주기(Lifecycle)를 가진다. 즉, 컴포넌트도 인생이 있다는 것이다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. Lifecycle은 크게 세 가지 유형으로 나눌 수 있는데, 특히 업데이트가 되는 시점에 props, state를 통한 상태 관리가 필요하므로 주목하길 바란다. - 생성(mount) DOM이 생성되고 웹 브라우저 상에서 나타날 때 - 업데이트(update) props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제 렌..

이전 1 2 3 4 ··· 6 다음

티스토리툴바

티스토리툴바