전체 글
-
useState와 useEffect를 넘어선 고급 React HooksReact 2024. 1. 29. 14:11
React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..
-
Git 기초 마스터하기 - 5편 Git을 활용한 최대 협업 효율성 활용하기Git 2024. 1. 22. 13:49
Git을 활용하여 협업의 효율성을 극대화하는 방법에 대해 다루겠습니다. 현대의 개발 환경에서는 팀워크와 효율적인 협업이 중요합니다. 이번 글에서는 Git의 기능을 활용하여 팀 내에서의 협업을 개선하는 여러 전략을 살펴보겠습니다. 1. 효과적인 브랜치 관리 1.1 브랜치 전략 선택 Gitflow, 피처 브랜치, 포킹 워크플로우 중에서 프로젝트에 적합한 전략을 선택합니다. 1.2 브랜치 규칙 설정 명확한 브랜치 명명 규칙을 설정하여 협업 시 혼란을 줄입니다. 2. Pull Request와 코드 리뷰 2.1 Pull Request의 중요성 코드 통합 전에 동료의 검토를 받는 과정입니다. 2.2 코드 리뷰 문화 구축 팀원 간의 상호 검토를 통해 코드 품질을 높이고, 지식 공유를 촉진합니다. 3. 협업을 위한 G..
-
Git 기초 마스터하기 - 4편 Git log로 프로젝트 히스토리 분석Git 2024. 1. 15. 15:42
프로젝트의 히스토리를 효과적으로 탐색하고 분석하는 방법에 대해 알아보겠습니다. 1. Git log 기초 최근 커밋 목록을 보기 위해 기본적인 git log 명령어로 시작합니다. 그리고 출력 커스터마이징이 하기 위해서는 아래와 같은 플래그를 사용하여 로그 출력을 커스터마이징 합니다. --pretty=format:"%h - %an, %ar : %s" 2. 고급 로그 필터 2.1 시간 기반 필터 --since, --until, --after를 사용하여 날짜별로 커밋을 필터링합니다. 2.2 작성자와 커미터 필터 --author="Name"을 사용하여 작성자별로, --committer="Name"을 사용하여 커미터별로 필터링합니다. 3. 브랜치와 병합 시각화하기 3.1 그래픽 로그 --graph 플래그는 브랜치와..
-
Git 기초 마스터하기 - 3편 Alias와 Hook으로 워크플로우 최적화하기Git 2024. 1. 8. 15:34
이번 편에서는 Alias와 Hook을 사용하여 Git 워크플로우를 최적화하는 방법을 알아봅시다. 위 기능들은 반복적인 작업을 자동화하고 시간을 절약해 주어, 개발 프로세스를 더 효율적이고 간소화된 방식으로 만들어 줍니다. 1. Git Aliases Git에서 Alias는 자주 사용하는 명령어에 대한 사용자 정의 단축키를 만들 수 있게 해 줍니다. 생성하는 방법은 Git 설정 파일에서 간단히 설정할 수 있습니다. git config --global alias.co checkout git config --global alias.br branch git config --global alias.ci commit 이제 git checkout대신 간단하게 git co를 사용할 수 있습니다. 2. Automating..
-
Git 기초 마스터하기 - 2편 효과적인 병합 기법과 충돌 해결Git 2024. 1. 2. 16:15
효과적인 병합은 건강한 코드베이스를 유지하는 데 중요하며, 충돌을 해결하는 방법을 이해하는 것은 모든 Git 사용자에게 필수적입니다. 이 글은 고급 병합 기술과 전문가처럼 충돌을 처리하는 방법을 안내합니다. Git 병합 이해하기 병합은 한 브랜치의 변경 사항을 다른 브랜치에 통합하는 과정입니다. 협업 환경에서 흔히 발생하지만, 충돌을 일으킬 수도 있습니다. 1. 병합 전략 1.1 Fast-Forward Merge 병합되는 브랜치에 다른 커밋이 없을 때 발생합니다. git checkout main git merge feature-branch 1.2 Three-Way Merge 두 브랜치 모두에서 다른 커밋이 있을 때 사용됩니다. git merge feature-branch 2. 병합 충돌 처리하기 2.1 ..
-
Git 기초 마스터하기 - 1편 브랜치 전략Git 2023. 12. 27. 14:09
Git의 브랜치는 메인 개발 라인에서 벗어나 다른 이들에게 영향을 주지 않고 독립적으로 작업할 수 있게 해 줍니다. 기능, 수정, 실험 관리에 필수적입니다. 첫 번째로 Git을 사용할 때 가장 기본이 되는 브랜치 전략에 대해 알아보겠습니다. 1. Feature Branch Workflow 각각의 새로운 기능은 자체 브랜치에서 개발되며, 최종적으로 메인 브랜치로 병합됩니다. git checkout -b feature/new-feature-name # 기능 작업 git commit -am "새로운 기능 추가" git checkout main git merge feature/new-feature-name 2. Gitflow Workflow 프로젝트 릴리스를 중심으로 한 엄격한 브랜치 모델. 피처, 개발, 릴리..
-
Javascript ES14 문법정리JS & TS 2023. 12. 15. 14:00
계속 작성하다 보니 어느덧 가장 최신인 ECMAScript 2023까지 왔습니다. 이렇게 정리를 해보니 점점 발전하고 있는 JS에 대해 새삼 느끼는 시간이었습니다. 1. findLast와 findLastIndex 배열 작업 시 특정 요소를 찾는 것은 자주 발생하는 작업입니다. find 메서드는 이러한 프로세스를 단순화하기 위해 도입되었지만, 첫 번째 일치하는 요소만 반환합니다. 그러나 때로는 배열의 끝에서부터 마지막 일치하는 요소를 찾아야 하는 상황이 있습니다. 이럴 때 findLast와 findLastIndex가 유용하게 사용됩니다. // 이전 방법 const users = [ {id: 1, name: 'user1', age: 19}, {id: 2, name: 'user2', age: 14}, {id:..
-
Javascript ES13 문법정리JS & TS 2023. 12. 4. 18:10
1. Top-level await(최상위 await) 지금까지 JavaScript에서는 await 키워드를 async 함수 내에서만 사용할 수 있었습니다. 그러나 ECMAScript 2022에서는 최상위 모듈에서도 Promise를 기다리기 위해 await 키워드를 사용할 수 있게 되었습니다. 이를 통해 부모 모듈의 실행이 자식 모듈의 실행이 완료될 때까지 기다리게 됩니다. // before await Promise.resolve(console.log("Inkoop")) // SyntaxError: await is only valid in async function const print = async () => { await Promise.resolve(console.log("Inkoop")) } prin..