나의 기록생활

SwiftUI에서 where 구문이란?SwiftUI는 선언형 UI 프레임워크로, iOS 앱 개발을 효율적으로 할 수 있도록 도와준다. SwiftUI에서 조건부 렌더링 및 반복문 처리에 유용한 기능 중 하나는 바로 where 구문이다. 이 글에서는 where 구문의 기본 개념과 SwiftUI에서 어떻게 활용되는지에 대해 살펴본다.1. where 구문 기본 개념Swift에서 where는 주로 조건을 추가하여 특정 로직을 필터링하거나 반복문에서 특정 조건을 만족하는 경우에만 동작하도록 제한하는 데 사용된다. 예를 들어, 배열의 특정 값만을 처리하거나, 조건에 맞는 요소를 선택적으로 출력할 때 유용하다.2. where 구문 사용법1) for-in 루프에서의 where가장 기본적인 사용 사례는 for-in 루프 ..

실무에서 이전 코드 중 react-router-dom의 useLocation을 이용하여 location.state에 데이터를 담아 이동할 페이지에 데이터를 보내는 방식이 있다는 것을 알았다. 이 방법을 보며 든 생각은 이렇다.장점:1. 데이터를 URL등에 보이지 않게 전달할 수 있다.2. 부가적인 라이브러리 사용 없이 가볍게 활용할 수 있다.단점: 1. Query Parameter를 이용하는 것 처럼 데이터가 전달되지 않을 때의 처리가 필요하다(필수 데이터에 대해서는 사용성이 좋지않다) 이 기회에 페이지를 이동할 때 데이터를 전달하는 방법이 어떤것이 있는지 더 정리해보려고 한다.1. useNavigate와 Link를 사용한 location.state 데이터 전달의 장점보안성: URL에 데이터를 노출하지 ..

가끔, 브랜치를 잘못 선택해서 커밋 단위의 작업물들을 다른 브랜치로 이관시키고 싶을 때가 있다. 그럴 때 사용할 수 있는 기능이 cherry-pick이다. Git Cherry-Pick이란?Git cherry-pick은 특정 커밋을 선택하여 현재 브랜치에 적용하는 강력한 명령어이다. 이 명령어는 특정 커밋의 변경 사항을 다른 브랜치에 적용하고자 할 때 유용하다. 예를 들어, 잘못된 브랜치에 커밋된 변경 사항을 올바른 브랜치로 옮기고 싶을 때 사용할 수 있다.Cherry-Pick의 어원"Cherry-pick"이라는 용어는 과일을 따는 행위에서 유래되었다. 체리 나무에서 가장 좋은 체리만 골라 따는 것처럼, Git에서도 원하는 커밋만 선택하여 적용하는 것을 의미한다.Cherry-Pick 사용 시기버그 수정: ..

Ant Design(antd)는 React 생태계에서 가장 널리 사용되는 UI 컴포넌트 라이브러리 중 하나이다. 디자인의 일관성과 개발 효율성을 동시에 추구하는 개발자들에게 큰 사랑을 받고 있다. 이번 글에서는 Ant Design의 특징, 장단점, 설치 방법, 그리고 간단한 사용법을 살펴본다.Ant Design(antd)란 무엇인가?Ant Design(antd)는 알리바바 그룹이 개발한 UI 라이브러리로, 기업용 애플리케이션 개발에 최적화되어 있다. Ant Design은 시각적 일관성과 효율성을 강조하며, 개발자가 보다 빠르고 쉽게 아름다운 UI를 구현할 수 있도록 돕는다.주요 특징풍부한 컴포넌트: 버튼, 테이블, 모달, 폼 등 다양한 UI 컴포넌트를 제공한다.디자인 가이드라인: 일관성 있는 디자인을 유..

데이터 시각화는 웹 개발에서 중요한 요소이다. 데이터를 그래프나 차트로 표현하면 사용자는 정보를 더 쉽게 이해할 수 있다. Chart.js는 이를 가능하게 하는 가벼운 JavaScript 라이브러리로, 다양한 차트 타입을 제공하며 사용법이 간단하다. 이 글에서는 Chart.js의 특징, 장단점, 설치 방법, 그리고 사용 예제를 소개한다.Chart.js란 무엇인가?Chart.js는 HTML5 기반의 캔버스를 활용하여 다양한 차트를 생성할 수 있는 JavaScript 라이브러리이다. Pie, Line, Bar, Radar 등 8가지 이상의 기본 차트를 지원하며, 플러그인을 통해 확장할 수도 있다. 또한, Chart.js는 반응형 디자인을 기본으로 지원하여 다양한 디바이스에서 일관된 사용자 경험을 제공한다.C..

웹 개발에서 폼 관리는 필수적이다. 하지만 복잡한 폼과 밸리데이션 로직을 관리하는 일은 종종 개발자에게 큰 부담이 된다. Formik은 이러한 문제를 해결하기 위해 등장한 라이브러리로, React에서 폼 관리를 쉽고 효율적으로 도와준다.Formik이란?Formik은 React 애플리케이션에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리이다. 이 라이브러리는 폼 상태와 밸리데이션, 제출 등을 효율적으로 관리할 수 있는 기능을 제공한다.Formik의 특징1. 간편한 폼 상태 관리Formik은 폼의 상태를 간단하게 관리할 수 있도록 돕는다. 모든 입력 필드의 상태는 자동으로 Formik이 관리해주므로, 개발자는 폼 상태 관리에 신경 쓸 필요가 없다.2. 유연한 밸리데이션 지원Formik은 Yup과 같은 라..

React 생태계에서 많이 사용되는 React DnD 라이브러리를 소개하고, 설치부터 사용법까지 자세히 설명해본다.React DnD란 무엇인가?React DnD는 React 애플리케이션에서 드래그 앤 드롭 기능을 간단하게 구현할 수 있도록 돕는 강력한 라이브러리로, HTML5 Drag and Drop API를 기반으로 하며, 유연한 커스터마이징과 다양한 기능을 제공한다.React DnD의 주요 특징고도로 커스터마이징 가능: 다양한 드래그 앤 드롭 시나리오를 지원하여 원하는 대로 동작을 설정할 수 있다.플러그인 시스템: DragSource와 DropTarget이라는 고차 컴포넌트(HOC)를 활용해 쉽게 드래그 앤 드롭 기능을 추가할 수 있다.Redux와 유사한 패턴: 상태 관리가 Flux 패턴으로 이루어져..

1. brew로 watchman 설치 brew upgradebrew install watchman 2. watchman 설치 경로 확인 및 Disk Access 권한 추가which watchman 2-1. System Settings - Privacy & Security - Full Disk Access에서 Terminal(iTerm) 추가2-2. +버튼을 눌러 Shift + Command + G 를 눌러 brew bin 경로로 이동하여 watchman 추가 3. expo 프로젝트 생성npx create-expo-app@latest4. 프로젝트 web으로 실행npm run web Error: The watchman connection was closed at Client.cancelCommands에러 발..

실무를 수행할 때 동일한 데이터를 포함해서 API를 테스트 해야할 때가 있다. 그럴 때 Postman에서 Environments preset에 등록하여 번거롭지 않게 수행하는 방법을 정리한다.1. Postman에서 Environments를 Globals로, 혹은 커스텀 preset을 만든다.2. 필요한 값들을 preset에 저장한다.3. 호출 테스트를 할 API Request에서 Scripts 탭으로 간다.4. Pre-request 탭을 선택하여 아래 코드를 입력한다.// Postman Environment Object 추출const { reference } = pm.environment.values;// logging을 위해 선언let environment = {};// Authorization을 위한..

페이지 유지보수를 수행하다 보면, 특정 페이지의 URL을 추적해서 따라가는 경우도 있고, 특정 API의 URL을 추적해서 따라가는 경우도 있다. 이때, URL에 불특정한 값이 들어가게 되면 전체검색이 어려워진다. 이 때 사용하기 좋은 정규식 검색에 대해 정리해본다.1. 정규식이란? (정규 표현식, RegEx, Regular Expression)특정한 규칙을 가진 문자열의 패턴을 정의하는 표현 방식으로, 주로 문자열 검색, 치환, 추출에 사용된다. 2. Visual Studio Code에서 정규식으로 전체 검색하는 방법Cmd +Shift + F를 입력하여 전체 검색 창 활성화 후 세번째 버튼(.*)을 활성화 한다.3. 정규식으로 특정 URL 검색하는 방법 예시"/a/b"의 URL을 찾으려고 할때는 그대로 ..