👩🏻‍💻 Dev

다음과 같이 urlDetails 에 정보를 저장한 상황일 때 const [urlDetails, setUrlDetails] = useState(); // * urlDetails useEffect(() => { filecompAPI .urlDetails(selectedUrlHash) .then((response) => { setUrlDetails(response.data); }) .catch((error) => { console.error('Error fetching URL details: ', error); }); }, [selectedUrlHash]); export interface IUrlDetailContent { urlHash: string; url: string; rep: boolean; repU..

https://tanstack.com/table/v8 TanStack Table | React Table, Solid Table, Svelte Table, Vue Table Headless UI for building powerful tables & datagrids with TS/JS, React, Solid, Svelte and Vue tanstack.com 체크 박스를 선택하고, 선택된 체크박스에서 Hash 를 반환해줘야하는 상황일 때 import { useState } from 'react'; // ... 이전 코드 ... const ExampleComponent = () => { const [selectedUrlHash, setSelectedUrlHash] = useState(null); con..

html, css 하며 했던 가장 기본적인 내용인데 justifyConfent 만 하고 끝이 아니라 display: 'flex' 도 해주는 걸 까먹지 맙시다 ! JSX에서 span과 select 한 줄 출력 예시 ⬇ (feat. chatGPT) . Flexbox 사용 CSS의 Flexbox를 사용하여 부모 div 컨테이너 안의 자식 엘리먼트를 가로 방향으로 정렬할 수 있습니다. justifyContent: 'space-between'를 이미 사용하셨으므로, 아마도 부모 컨테이너는 Flex 컨테이너일 것입니다. 이 경우 아래와 같이 시도해볼 수 있습니다. {currentUrl} {/* 옵션들 */} 위 코드에서 alignItems: 'center'는 자식 엘리먼트를 수직으로 가운데 정렬하기 위해 사용됩니다..

JSX expressions must have one parent element. 이 오류는, JSX에서는 표현식(expression)이 하나의 부모 요소(parent element)로 감싸져 있어야 하기 때문에 발생한다. 이 오류의 가장 간단한 해결 방법은 나 빈 태그를 사용하는 방법이다. 는 React에서 여러 개의 자식 요소를 하나의 그룹으로 묶어주는 데 사용되는 특수한 컴포넌트이다. JSX에서 여러 요소를 반환하려고 할 때는 부모 요소가 필요한데, 를 사용하면 추가적인 DOM 노드를 생성하지 않으면서 요소를 그룹화할 수 있다. 컴포넌트는 일반적으로 다음과 같이 사용된다. {/* 자식 요소들 */} 또는 축약형으로 와 태그로 표현할 수도 있다. {/* 자식 요소들 */} 즉, 는 JSX를 작성할 때..

JSON 형식을 받아와서, 화면에 줄바꿈을 반영하여 예쁘게 보여주고 싶은데 개행 문자를 어떻게 변환할 수 있을까? response = "{\n \"hobby\": \"/exercise/swim\"\n}" 이렇게 응답이 왔다고 했을 때 이것을 그대로 출력하면 \n 이 그대로 문자로 출력될 것이다. ** 이스케이프 문자 {userDetails?.userInfo && ( {userDetails?.userInfo} )} JSX에서, 태그를 이용해주면 \n 개행문자를 줄바꿈으로 변형하여 보여줄 수 있다.

커밋메시지를 작성할 때, 일관된 규칙을 따르는 정해놓고 따르도록 하는 것을 '커밋메시지 컨벤션'이라고 한다. 커밋메시지 컨벤션 중에서도 많이 사용되는 'Conventional Commits' 을 소개하려고 한다. Conventional Commits 사이트에 방문하면, 구조와 구성 요소, 사용 사례가 자세히 나와있다. Conventional Commits 사용 목적CHANGELOG를 자동으로 생성하기 위해서(포함된 커밋의 타입에 기반하여) 유의적 버전을 자동으로 변경하기 위해서팀 동료, 타인, 그리고 기타 이해당사자에게 변화의 본질을 전달하기 위해서빌드와 배포 프로세스를 수행하기 위해서더 구조화된 커밋 히스토리를 보여줘서 사람들이 프로젝트에 기여하기 더 쉽도록 하기 위해서 구조[적용 범위(선택 사항)]:..

『Do it! 깃 & 깃허브 입문』 3장. 깃과 브랜치 를 참고하였습니다 목차 3-1 브랜치란 3-2 브랜치 만들기 및 이동하기 3-3 브랜치 정보 확인하기 3-4 브랜치 병합하기 3-1 브랜치란? 브랜치(branch) 나무가 가지에서 새 줄기를 뻗듯이 여러 갈래로 퍼지는 데이터 흐름 깃으로 버전 관리를 시작하면 기본적으로 main 브랜치(구 master 브랜치) 만들어짐 사용자가 커밋할 때마다 main 브랜치는 어떤 게 최신 커밋인지 정보를 가짐. 기존 파일은 main 브랜치에 그대로 유지하면서, 새 브랜치에서 기존 파일 내용을 수정하거나 새로운 기능을 추가할 수 있음. main브랜치에서 새 브랜치를 만드는 것을 '분기(branch)한다' 분기했던 브랜치를 main 브랜치에 합치는 것을 '병합(merg..

『Do it! 깃 & 깃허브 입문』 2장. 깃으로 버전 관리하기 를 참고하였습니다 목차 2-1 깃 저장소 만들기 2-2 버전 만들기 2-3 커밋 내용 확인하기 2-4 버전 만드는 단계마다 파일 상태 알아보기 2-5 작업 되돌리기 2-1 깃 저장소 만들기 저장소(repository) : 버전이 저장되는 공간 1. 새로운 디렉터리 만들기 $ git init 'initialize(초기화하다) 'Initialized empty Git repository in...' 라는 메시지 나왔으면 이제부터 해당 디렉터리에서 깃 사용 가능 이후 다시 ls -la 해보면? git 디렉터리가 생김! 이 폴더가 깃을 사용하면서 버전이 저장될 '저장소(repository)' *Finder에서 hello-git 디렉터리를 열었을 때..

『Do it! 깃 & 깃허브 입문』 1장. 깃 시작하기 를 참고하였습니다 목차> 1-1 지옥에서 온 문서 관리자, 깃 1-2 맥에 깃 설치하기 1-3 리눅스 명령 연습하기 1-4 빔 편집기에서 텍스트 문서 만들기 1-1 지옥에서 온 문서 관리자, 깃 깃으로 할 수 있는 것들 - 버전 관리하기, 백업하기, 협업하기 - "버전관리 → 백업 → 협업" 순서로 배워야 한다. 깃 프로그램의 종류 - 깃허브 데스크톱(GitHub Desktop) ; 온라인 저장소 서비스인 깃허브에서 제공하는 프로그램. 장점 : 복잡한 깃 사용법을 그래픽 사용자 인터페이스(graphic user interface, GUI)로 구현해서 사용이 편리. 단점 : 기본적인 기능 위주여서 고급 사용자에겐 아쉬움 - 커맨드 라인 인터페이스(co..