![[React]입문자를 위한 React.js](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F700%2F1*DZqnIAu_TC15PIaYFXi4qA.png&w=3840&q=75)
![[Storybook]스토리북에 대하여](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*wjLSWrA0StrjDTIg39yd9A.png&w=3840&q=75)
개발
[Storybook]스토리북에 대하여
스토리북은 디자인 시스템이 발전하며 같이 성장해왔다. 스토리북은 디자인 시스템을 기반으로 한 재사용 가능한 컴포넌트 단위의 개발을 지원한다. 컴포넌트 단위의 개발을 지원하기 위해 UI Test, actions, controls, docs 등 다양한 기능을 지원한다.
고영준·2021년 8월 22일
정체성 · 동기와 학습 · 실행과 관리 · 두두닷 도구. 도전을 멈추지 않는 사람들의 기록을 모았습니다.
스토리북은 디자인 시스템이 발전하며 같이 성장해왔다. 스토리북은 디자인 시스템을 기반으로 한 재사용 가능한 컴포넌트 단위의 개발을 지원한다. 컴포넌트 단위의 개발을 지원하기 위해 UI Test, actions, controls, docs 등 다양한 기능을 지원한다.
![[Git]깃 하나로 코린이 탈출기](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*sOBcZ9NJBcWV0B0vx049Zw.png&w=3840&q=75)
제목처럼 깃과 친해지는 것만으로 코린이(코딩+어린이)를 탈출할 수 있을까? 정답은 ‘Yes’이다. 나 또한 Git과 더욱 친해지기위해 Git에대한 공략집을 써보게됐다.
![[개발] 개발 포기자가 개발자로 탈바꿈한 방법](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*QlLDasc2FpqdjqznPa-dqg.png&w=3840&q=75)
지난 7개월간 개발 공부를 시작했다. 하지만 이전에 개발을 포기하게 만든 기간이 있었다. 하지만 최근 공부를 하면서 흥미를 붙이게 되었다. 개발을 포기했던 사람이 어떻게 다시 개발자가 되었는지 나의 관점에서 이야기 해보려고 한다.
![[개발] 1년차 개발자가 공부하는 방법](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*8v6EhKGBEQqkrAK8-SRNqw.jpeg&w=3840&q=75)
한 해를 마무리 하며, “벌써 개발자가 된지 1년이라는 시간이 지났구나” 하는 생각이 들었다. 작년에 워킹홀리데이를 끝내고 다시 돌아와 10월 쯤 취업을 한 후 직업으로 개발을 한지 약 1년이 되었다. 지난 1년을 돌아보니 다양한 경험을 많이 했던 것 같다. SOUNDGYM이라는 서비스를 1년 동안 개발 및 운영해보고, Stack Overflow 점수도 올려보고, React를 직접 하나씩 분석하며 글도 썼다. 처음으로 컨퍼런스(2019 Naver Deview)를 가서 좋은 기술과 문화에 대해 알게된 기회도 얻었다.
![[개발] 주니어 개발자가 공부하는 방법](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*3NpQUZesyiN7bNaZ99rQ8w.jpeg&w=3840&q=75)
작년, 3월 졸업과 함께 떠난 워킹 홀리데이와 함께 개발 공부를 시작했다. Javascript와 HTML, CSS도 모르는 상태로 시작한 내가 10개월이 지나고 보니 어느새, React, React-Native를 통해 웹과 앱을 만들고, Node.js와 Sequelize를 통해 서버를 구현하고 GraphQL-Seoul에 참여하기 시작해 Dooboolab의 해커톡에 참여하고 있다는 것이 새롭게 느껴진다.
![[React] 리액트를 처음부터 배워보자. — 07. createRef와 useRef 그리고 useImperativeHandle](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*dUJ4lIArEsMzz-BpggeULA.jpeg&w=3840&q=75)
1년간 실무를 하며 ref 를 자주 사용하며 ref 기능의 다양한 사용 예시를 경험하였고, 해당 기능에 대해 다시 한 번 공부하고 싶다는 생각이 들었다. React 라이브러리는 ref를 왜 만들었을까 n이 글은 해당 질문을 중심으로 ref와 연관된 아래 개념들을 정리하는 글이다.
![[React] 리액트를 처음부터 배워보자. — 06. 합성 이벤트와 Event Pooling](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*pxzKQg0syEO706a_rq0CFw.jpeg&w=3840&q=75)
SyntheticEvent 객체는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 래퍼 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다. 이번 글은 SynctheticEvent객체가 어떤 원리로 동작하고, 의사 코드를 통해 알게 된 이벤트 풀링의 대략적 원리에 대한 글이다.
![[React] 리액트를 처음부터 배워보자. — 05. Context API](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*5wgdDOUVUELAXnOYuPV_dQ.jpeg&w=3840&q=75)
리액트는 기본적으로 데이터를 부모 컴포넌트에서 자식 컴포넌트로 전달하는 단방향 데이터 흐름을 지향한다. 하지만, 컴포넌트를 만들 때 종종 단방향 데이터 흐름보다는 공유되는 데이터 관리가 필요할 때가 있다. 리액트 공식 문서에서는 전체 UI의 테마나 로그인 한 유저 정보 등을 보관할 때 사용한다고 하며 실제로 Context API를 적용한 경우는 현재 SOUNDGYM 앱의 오디오 플레이어 위치를 전역적(Global)으로 관리하기 위해 사용하고 있다.
![[React] 리액트를 처음부터 배워보자. — 04. Functional Component와 useState](/_next/image?url=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1400%2F1*eQlXxwo7Y8g82EFdon_CiA.jpeg&w=3840&q=75)
최근 1년 동안 React를 처음 접하게 되는 사람들은 자연스럽게 React Hooks와 함께 React를 시작하곤 한다. 처음 내가 제로초님의 NodeBird 강의를 들으며 개발을 시작했을 때도 Hooks를 이용해 대부분의 컴포넌트를 만들었다. 1년이 지난 지금useState, useCallback, useMemo , useImperativeHandle 등 다양한 Hooks를 사용할 수 있게 되었다. 하지만 최근 React를 깊게 공부하기 시작하며 Hooks가 어떻게 컴포넌트를 조작하는지에 대한 궁금증이 생기기 시작했다.
