안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 도리 깃허브로 놀러오세요 전체 아티클76 git stash 했던 내용이 사라졌을 때 당황하지 마세요 잠깐 정리를 먼저 해보겠습니다 🫨· 작업한 내용이 사라졌다면 git stash list를 통해 데이터를 확인하고 복구해보세요 작업을 하다가, git stash로 잠깐 저장해두었던 내용이 사라졌던 적 있으신가요? 코드 리뷰를 해야하는 상황이 왔는데 잠깐 작업 내용을 git stash를 통해 저장하고 여러 브랜치들을 옮겨다니던 중 관련 작업 내용들이 사라져버려서 기억하고자 포스팅을 진행합니다..git stash를 수행하고, 가장 최근 저장된 stash 내용을 적용하려면 git stash apply 명령어를 사용합니다. 하지만, git stash를 한번 더 입력을 한 경우 최근 stash의 내용이 덮어쓰여져버리는데, 이 경우에는 어떻게 할 수 있을까요?git stashgit stash apply보통의 경우,.. 2024. 7. 9. Reduce로 코드 클린하게 만들기 잠깐 정리를 먼저 해보겠습니다 🫨· reduce 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고 하나의 결과 값을 반환합니다. 코드리뷰를 받으면서 생각보다 고려해서 작성했던 코드가 reduce를 만나 엄청 간결해지는 과정을 보고, 평소에는 reduce를 사용하는 빈도가 많이 없어서 이번 기회에 한번 복습하고자 이렇게 포스팅을 하게 되었습니다. 이번 포스팅에서는 reduce에 대해 가볍게 알아보고, 어떤 방식으로 코드가 간결해졌는데 리뷰를 해보려고 합니다.arr.reduce(callback [, initialValue]);reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음과 같은 인수를 받습니다. · accumulato.. 2024. 7. 2. 분리된 파일의 tanstack mutate 메소드를 컴포넌트 안에서 사용하기 잠깐 정리를 먼저 해보겠습니다 🫨· tanstack-query를 별도 파일로 설정하여 패칭 결과에 따라 로직을 만들 수 있지만, 복잡한 상태 관리를 처리할 때는 컴포넌트 내부에서도 처리를 할 수 있어요 개발을 진행하면서 서버와 통신에 대한 데이터 패칭 파일은 컴포넌트와 분리하여 진행하고 있습니다. 데이터 패칭 성공 및 실패 후에 대한 링크 이동 · 토큰 저장 등 간단한 로직의 경우는 데이터 패칭 파일에서 onSuccess · onError 으로 처리를 할 수 있는데, 컴포넌트에서 반응형 을 관장하는 값을 직접 건드려야할 경우에는 컴포넌트 단에서 패칭 결과에 따른 로직을 작성해야합니다. 분리되어 관리되고 있는 데이터 패칭 코드는 아래와 같습니다. 코드의 가독성을 위해 임포트와 타입 정의에 대한 부분은 제.. 2024. 6. 28. React의 커밋 페이즈, 렌더 페이즈 단계 목차· 트리거 단계 (Trigger Phase)· 렌더 단계 (Render Phase)· 커밋 단계 (Commit Phase)리액트 라이프 사이클에 대한 부분을 대강 알고있지만, 누군가 설명을 해보라고 했을 때 설명을 진행하긴 하지만 버벅이곤 합니다. 이런 버벅이는 증상이 아직 익숙하지 않다는 증거라는 생각에 오늘은 커밋 페이즈, 렌더 페이즈에 대한 부분들을 포스팅해보려고 합니다. 리액트 렌더링 단계에는 렌더 단계(Render Phase)와 커밋 단계(Commit Phase)가 있는데 렌더 단계에서는 화면에 그릴 것들을 파악하고, 커밋 단계에서는 직전에 파악한 것들을 화면에 적용합니다. 리액트가 초기 렌더링 동작과, 리렌더링시에 각 단계에서 어떤 것들을 수행하는지 살펴봅니다.잠깐 정리를 먼저 해보겠습니.. 2024. 6. 24. Vite 환경에서 구글 애널리틱스 3분만에 적용하기 목차· 패키지 설치하기· vite.config.js에 설정 추가하기· vite.config.js 환경 변수 설정어쩌다보니 3분 카레같은 글들만 작성을 하게 되는데, 오늘은 구글 애널리틱스를 Vite 플러그인을 통해 쉽게 적용을 할 수 있는 방법에 대해 알아보려고 해요. 다른 블로그에는 리액트에서 구글 애널리틱스를 연동하는 방법을 다양하게 잘 알려주고 있지만, 해당 플러그인의 경우 비교적 애널리틱스 적용을 빠르게 해줄 수 있어요.패키지 설치하기자신의 패키지 매니저에 맞는 방식으로 vite-plugin-radar 를 설치합니다. 뒤에 수식을 붙여 의존성으로 설치하는 것을 추천해요.npm i --save-dev vite-plugin-radaryarn add -D vite-plugin-radarpnpm add .. 2024. 6. 12. 타입스크립트 딥다이브 해당 내용은 타입스크립트 딥다이브를 보고, 내용을 요약하고 정리합니다.아는 내용이 섞일 수 있지만 복습차 테크블로그에 정리를 진행하고 있습니다.2024.05.31 자로 업데이트 되었으며, 학습한 내용이 계속 업데이트 될 예정입니다. 원시 데이터에서 동등 연산자와 일치 연산자 차이자바스크립트에서 동등 연산자(==), 일치 연산자(===)가 존재합니다.이때 동등 연산자는 탄력적으로 string을 number로 변환합니다.console.log(5 == '5') // trueconsole.log(5 === '5') // falseconsole.log('' == '0') // falseconsole.log(0 == '') // trueconsole.log('' === '0') // falseconsole.log(.. 2024. 5. 31. 이전 1 2 3 4 5 ··· 13 다음
