Age of Discovery

사이드 프로젝트를 진행하면서 제어컴포넌트와 비제어컴포넌트에 대해 알게되었다. 리액트에서 input을 이용하는 방식 중에 state와 onChange를 이용해 실시간으로 value를 감지하며 input을 제어하는 방식이랑 ref로 렌더링은 일으키지 않으면서 input의 value값만 취하는 방식이 있다 라는 정도만 알고 있었는데 정확한 명칭이 있었다.. 같이 프로젝트 하는 분께서 https://legacy.reactjs.org/docs/uncontrolled-components.html Uncontrolled Components – React A JavaScript library for building user interfaces legacy.reactjs.org 이 링크를 주시면서 공식문서를 읽어보면 ..

그동안 정신이 없어서 꽤 오랜만에 글을 남겨본다...ㅎㅎ 링크게더 사이드프로젝트를 진행하면서 단순히 굴러가게 만드는 게 아니라 코드 컨벤션과 개발 문화를 정립하며 어떻게하면 반복을 줄이고 재사용할 수 있을 지를 많이 생각할 수 있게 됐다. emotionJS로 styled component를 생성하여 재사용하고 props에 따라 조건적으로 다른 스타일을 보여주는 방법을 공유하고자 한다. 사실 styled component랑 크게 다를건 없지만 https://next--emotion.netlify.app/docs/typescript Emotion - TypeScript Emotion includes TypeScript definitions for @emotion/react and @emotion/style..

https://jurgen-94.tistory.com/91 [React] - 라이브러리 없이 무한 슬라이드 구현 (1) 프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 하단 동그라미 클릭시 해당 이미지로 움직이기 2. 좌우 Arrow버튼으로 이미지 슬라이드 3. 약 3초마 jurgen-94.tistory.com 이전에 했던 포스팅에 이어 이제는 실제로 함수를 만들고 동작시켜보자. useEffect훅에 handleOriginSlide가 있기 때문에 handleOriginSlide 함수먼저 살펴보자 function handleOriginSlide(index: number): void { setTimeout(() => { setNum(index); setCarous..

프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 좌우 Arrow버튼으로 이미지 슬라이드 2. 약 3초마다 자동 슬라이드 3. 무한 슬라이드 이정도라고 할 수 있겠다. 코드를 한줄씩 파헤쳐보자 const imageBox = useRef(null); 우리가 만들 캐러셀의 사진배열들을 보관하는 div 컨테이너에 imageBox라는 변수명의 useRef를 지정해준다. 타입스크립트를 사용했기 때문에 useRef가 지정될 Dom타입을 붙여준다. const [num, setNum] = useState(1); 현재 구현하려는 기능의 핵심중의 핵심이다. 이 state를 어떻게 갖고노느냐에 따라 이미지를 좌우자재로 이동시킨다. const [carouselTransition, s..

나는 운이 정말 좋은 사람이다. 프로젝트 하나를 마친 후 교육기관의 매니저를 맡게 됐는데 동시에 다른 프로젝트에 참가하게 됐다. 이름은 링크 게더 인적 자원과 기술적 자원을 공유하는 서비스이다. 쉽게 말하면 사이드 프로젝트 모집 플랫폼 누군가 보기엔 다소 진부할 수 있는 주제이지만 이 프로젝트가 나한테 특별하게 다가오는 이유는 현업에서 일하고 계신 분들과 같이 하게 됐고 또한 그 회사의 기획자, 디자이너 분까지 모셔 기획부터 탄탄하게 진행되고 있기 때문이다 유지보수가 용이하며 동시에 클린 한 코드를 작성할 수 있는 기회에 목말랐던 나에게는 둘도 없는 찬스이지 않을까.. 지난 프로젝트에선 6주 안에 결과물을 완성시키는 게 우선이었기 때문에 시간에 쫓기며 굴러가게만 만들었다. 그에 대한 대가는 바로 손도 못..