블로그

코드스쿼드 프로젝트에서 레인지 슬라이더를 만들어야 할 일이 생겼다. 직접 구현하고 싶었지만 react-range 라는 모듈을 사용해서 구현했고, 프로젝트를 끝내고 주말인 오늘! 직접 구현을 해보려고 책상에 앉았더니 유튜브가 2시간을 뺏어가버렸다.. 하여튼 포스팅과 함께 레인지 슬라이더 만들기를 연습해보려 한다. 현재 시각 2021년 6월 5일 오후 3시 21분 시작! 이번 프로젝트에 구현해야 했던 레인지 슬라이더는 곡선이라는 점을 제외하면 아래의 이미지와 비슷한 느낌! 단방향이 아닌 양방향으로 구현해야 하며, 이를 어떻게 구현해야 할 지 고민만 하고 끝나버렸다. 처음부터 목표를 배포로 잡다보니 많은 기능을 고민했고, 때문에 목표가 좌초되지 않았을까.. 이번에 생각한 기능은 다음과 같다! 1. 기획 필수 ..

저번 프로젝트를 진행하면서 캐로셀을 만들었고, npm 배포까지 성공했다! 👍 프로젝트 기간 내에 배포를 마치고 싶었지만 추가적인 기능을 좀 더 고려하면서 기능을 구현하려고 하다보니 프로젝트가 끝나고 난 뒤에도 시도해보는 게 어떻겠냐는 얘기가 나왔고 덕분에 일요일을 빌려 완성할 수 있었다. 전부 구현하지는 못했지만 필수적이라 생각한 기능들은 구현해서 배포했고, 만족스러운 경험이었다! 컴포넌트 설계 처음에 컴포넌트를 설계하는 회의를 마치고 자고 일어났더니 @디코가 멋진 이미지를 만들어주셨다. 덕분에 의욕이 더 고취되어 성공하지 않았나 하는 생각이 들었다. ::) 옵션 키 기본값 설명 구현 여부 perPanel 4 하나의 패널에 보여줄 컴포넌트 갯수 O speed 500 트랜지션의 속도 (단위 : ms) O ..

https://ui.toast.com/weekly-pick/ko_20190731 포스팅을 읽으며, 최근 진행한 미션이 생각났다. 이번에 팀 미션으로 2주간 리액트를 학습하며, 결과물을 만들어야 하는 상황을 맞이했다. 미션과 학습을 함께 진행해야 하는 상황에서 팀원들과 어떻게 진행해야 할 지 회의를 했고, 첫 주는 리액트에 대한 학습만 하기로 결정했다. 투두리스트 자체를 바닐라로 구현했을 때, 시간이 오래 소요되는 미션이 아니니 괜찮겠다는 안일한 마인드도 있었기에 미션 기간의 절반을 통크게 학습 비용으로 설정했다. 하지만 여러 컬럼을 고려해야 하는 상황, 그리고 프론트엔드 끼리 작업하므로 간단한 API를 직접 구축해야 하는 상황(사실 이건 몽고로 CRUD만 구현해서 헤로쿠로 배포했기에 어려운 작업은 아니었..

리액트 useEffect: 개발자가 알아야 할 네가지 팁 React useEffect: 4 Tips Every Developer Should Know 리액트 Hook에서 useEffect 함수를 어떻게 작성하면 좋을 지에 대해 짤막한 네 개의 팁을 공유하는 포스팅이다. 1. 단일 목적의 useEffect 먼저 useEffect는 단일 목적의 함수로 분리해야 한다. function App() { const [varA, setVarA] = useState(0); const [varB, setVarB] = useState(0); // 이렇게 하면 안된다! useEffect(() => { const timeoutA = setTimeout(() => setVarA(varA + 1), 1000); const tim..