본문 바로가기

분류 전체보기

 (21)
React-Redux 간단하게 따라 만들어보기 - 2편. React-Redux 간단하게 따라 만들어보기 - 1편. React-Redux 간단하게 따라 만들어보기. 이 글은 React-Redux라이브러리를 직접 열어서 구현해본 과정을 기록 한 글입니다. 만약 정보를 얻기 위해 들어오셨다면 시간이 아까우실 테니 뒤로 가시는 게 좋습니다. 아직 내공이 부족해서 내 2hakjoon-mindmap.tistory.com 이 글은 "React-Redux간단하게 따라 만들어보기 - 1편"에서 부족했던 부분을 개선한 내용을 기록한 글입니다. 2편 역시 정보를 전달보다는 기록에 가까운 글입니다. 1편에서 부족했던 부분. 1편은 사실 라이브러리를 탐방하고 간단하게 구현하는데에 초점을 맞추고 시작했었다. 라이브러리를 뜯어보는 것만으로도 쉽지가 않았고, 코드를 잘 짜기도 어려웠다. ..
React-Redux 간단하게 따라 만들어보기 - 1편. 이 글은 React-Redux라이브러리를 직접 열어서 구현해본 과정을 기록 한 글입니다. 만약 정보를 얻기 위해 들어오셨다면 시간이 아까우실 테니 뒤로 가시는 게 좋습니다. 아직 내공이 부족해서 내용이 많이 부실할 예정입니다. 참고하세요. 사실 우리가 쓰던 Redux는 React-Redux였다. Redux공식문서에 들어가면 README.md에 적혀있는 내용이다. React전용이 아닌 JavaScript앱을 위한 라이브러리이다. Core한 기능은 Redux라이브러리에 구현되어있으며, 우리가 React에서 사용하던 Redux는 Redux를 React에서 사용하기 위해 Redux를 컴포넌트로 한번 감싼 React-Redux이다. 그러므로 핵심 기능을 이해하기 위해선 Redux라이브러리를, React에서 어떻게..
How Next.js Works 정리 이 글은 Next.js의 공식문서중 How Next.js Works 페이지의 내용을 정리하는 글이다. Next.js를 처음 접하면서 정리한 간단한 요약정도로 보면 좋을것 같다. How Next.js Works Compiling 개발자들은 개발자에게 친화적인 TypeScript, JSX, 모던JS 버전의 코드를 작성합니다. 작성된 코드는 브라우저가 이해할 수 있는 JavaScript로 컴파일 되어야 하죠. Next.js는 Rust로 작성된 컴파일러와 저수준의 프로그래밍 언어, SWC플랫폼을 통해 컴파일링을 하고 있습니다. swc-project : https://github.com/swc-project/swc GitHub - swc-project/swc: Rust-based platform for the W..
원티드 프리온보딩 챌린지 2-1회차 지난 회차들에서 중복되었던 내용도 있었고, 이번 회차가 React Query의 심화 편 같았기 때문에 요약할 만한 키워드가 떠오르질 않는다. 그러므로 이번 글은 지금까지 내가 미뤄왔던 리팩토링과 새롭게 알게 된 부분을 적용한 사례를 쭉 나열해보려고 한다. Issue와 Pull Request 지난 세션에서 다른 참가자분이 수정사항을 Issue와 Pull Request로 관리하는 모습을 봤다. 괜찮은 방법인 것 같아서 나도 그렇게 해봤다. https://github.com/2hakjoon/wanted-pre-onboarding-challenge-fe-1/issues/2 queryClient 및 queryKey 통합 리팩토링 · Issue #2 · 2hakjoon/wanted-pre-onboarding-cha..
원티드 프리온보딩 챌린지 1-2회차 이번 세션은 Typescript와 함께 시작했다. 지난 시간에 TypeScript적용을 과제로 내주셨기 때문에, 각자 나름대로 학습한 내용에 대해서 다시한번 리마인드 시켜주고, 여러 팁들을 알려주셨다. 그 다음으로는 제출과제에 대한 피드백이었다. 대부분 비동기 처리에 방법에 대한 코드가 나왔다. 예시코드를 상당히 많이 준비를 하셨었고, 더 좋은 방향에 대한 인사이트를 얻을 수 있었다. 그리고는 과제로 React Query적용이 주어졌다. 오늘은 이 내용에 대해서 내가 적용한 내용을 기록해보려고 한다. 이번회차 핵심 내용. 외부 요소와의 결합이 강한 코드는 좋지 않다. 추상에 의존하자. ‘추상(abstraction)’에 의존하며 ‘구체(concretion)’에는 의존하지 않는 시스템. 제어권 위임을 통해 ..
원티드 프리온보딩 챌린지 1-1회차 이번 회차를 통해서 좋은 코드에 대해서 새로운 시선을 가지게 되었다. 클린 코드에 대한 내용을 모두 익힐수는 없었지만, 최소한의 가이드라인을 세우고, 좋은 코드를 짜는 나만의 기준을 만들고 리팩토링을 할 수 있었다. 회차를 통해 배우고 느낀점. 내가 세션을 듣고, 추천 영상등을 챙겨보면서 새로 배운점을 먼저 이야기 해보려고 한다. 선언적 프로그래밍. HOW가 아닌 WHAT으로 코드를 작성해야 가독성이 더 좋다. 관심사 분리. business 로직과 view로직은 분리하자. 적절한 추상화. 지나친 추상화는 오히려 안좋다. 그리고 추상화는 동일한 수준으로 맞춰주자. 비동기 처리를 더 가독성 좋게 작성하기. 머리속에 넣었으니 응용을 해보자. 1. 네이밍 수정. const loginHandler = ({ ema..
산책기록 데이터 압축해서 DB에 저장하기 산책데이터를 DB에서 저장하여 사용하고있는데, 산책을 오래해서 데이터가 많이 쌓이게 되면, 용량이 너무 커져서 저장이 되질 않는다. 그래서 최대한 양을 줄여보기로 했다. 약 100KB에 근접하면 DB에 string형태로 저장이 되질 않는다. 물론 저장이 된다고 하더라도, 수십 KB는 좀 문제가 있는 사이즈임이 분명하다. 개선을 시작해 보자. [ {latitude: 37.3364485, longitude: -121.8576395}, {latitude: 37.3356827, longitude: -121.8587522}, {latitude: 37.334909, longitude: -121.8599979}, {latitude: 37.3341251, longitude: -121.8612771}, {latitude..
react-native-maps 줌 state로 관리하기 const [mapZoom, setMapZoom] = useState(0) { setMapZoom( Math.ceil(Math.log(360 / region.longitudeDelta) / Math.LN2), ); }} > Math.ceil(Math.log(360 / region.longitudeDelta) / Math.LN2), 수식을 통해 현재 화면내에 그려진 지도의 영역을 통해서 줌레벨을 계산해 낼수 있다. user가 지도를 줌 할때, 해당 이벤트가 동작하고, 줌 된 상태의 레벨을 계산하여 state에 반영한다.

티스토리툴바