👩🏻‍💻 Dev

브랜치 이름 규칙기능 개발: feature/login, feature/select-product출시 준비: release-1.3, release-1.4긴급 수정: hotfix-1.2.1커밋을 해야 그때부터 브랜치다. 병합브랜치를 생성한다는 건, 협업을 위한 것그래서 브랜치를 병합한다. : 깃허브에서 병합 방법 : fast-forward와 3waysfast-forwardA branch에서 B branch를 생성한 시점부터,A branch에는 아무런 추가 구현을 하지 않고B branch만 추가 구현한 뒤B branch와 A branch를 합치면 -> A에 B가 붙으면 끝남.Before merge:main:    A---B              \feature:       C---DAfter fast-for..

깃허브 레포지토리 생성깃허브에서 레포지토리 생성하면 친절하게 세팅 방법을 알려준다. GitHub token처음으로 깃허브 연결한다면 usename, password 필요하다.password는 깃허브 패스워드가 아니라, 토큰 생성해서 집어놔야 한다. 프로필 - Settings - 제일 아래 Developer settings 들어가서Generate new token (classic) 해주면 된다.보안, 관리 효율성을 위해 여러 개의 토큰을 발급하여 사용할 수 있다.  git clonegit clone 원격저장소URL 새 디렉토리 생성: git clone을 실행하면, 지정한 리포지토리의 이름을 가진 새 디렉토리가 생성됨. 이 디렉토리는 클론된 리포지토리의 루트 디렉토리가 되는 것git init 실행: 새로 ..

commit을 하면 그 프로젝트의 버전을 통째로 옮기는 것!?한 수업에서 강사님께서 이렇게 말씀하셨다. 이 말처럼, 커밋을 들어가 browse files 하면 ? 그 당시의 프로젝트의 상태, 버전을 확인할 수 있다.그렇다면 Git은 모든 프로젝트를 새롭게 저장하는 걸까? -> 당연히 아니다. Git의 저장 방식은 효율적이고 강력한 버전 관리를 가능하게 하며,이는 스냅샷(Snapshot)과 델타(Delta, Δ 변화량)의 개념을 결합하여 이루어진다. 1. 스냅샷(Snapshot)Git은 각 커밋 시점에서 프로젝트의 모든 파일을 스냅샷으로 저장함. 그러나 모든 파일을 매번 복사하지 않음. 변경된 파일만 새롭게 저장하고, 변경되지 않은 파일은 이전 커밋의 데이터를 참조함.예를 들어, 100개의 파일이 있는 프..

GIT로컬 시스템GIT: 내 컴퓨터 안에서 버전 관리. 깃허브와 소통 (백업, 복구, ...)GITHUB: 원격 컴퓨터에서 백업 담당하는 시스템. 내 컴퓨터와 별도로 버전 관리. 다른 컴퓨터와 깃허브를 통해 협업 git installhttps://git-scm.com/ Git git-scm.comOS에 맞게 깃 설치git --version으로 확인 가능 쉘(Shell)셸 (Shell): 운영체제에서 사용자와 시스템 간의 인터페이스 역할을 하는 프로그램.사용자는 쉘을 통해 시스템 명령어를 입력하고, 쉘은 이 명령어를 해석하여 운영체제에서 실행할 수 있는 형태로 변환한다.왜 Shell이라는 이름을?- 사용자와 운영체네 내부(커널) 사이의 인터페이스를 감싸는 층- 껍데기를 통해서 안에 있는 내용물에 접근한다는..

.DS_Store 파일이란?.DS_Store는 macOS에서 자동으로 생성되는 숨김 파일이다.이 파일은 Desktop Services Store의 약자로, Finder(파일 탐색기)에서 디렉토리의 메타데이터를 저장하는 데 사용된다.여기에는 폴더의 아이콘 위치, 창 크기, 창 배경 이미지 등 폴더의 뷰 설정과 관련된 정보가 포함된다..DS_Store 파일은 사용자가 폴더를 열거나, 특정 방식으로 정렬하는 등의 작업을 할 때마다 생성되며, 폴더마다 하나씩 존재할 수 있다.이 파일은 macOS에서만 사용되며, 다른 운영체제에서는 불필요하거나, 때로는 불편을 줄 수 있다..DS_Store 파일 지우는 법1. 개별적으로 지우기터미널에서 다음 명령어를 사용해 특정 디렉토리 내의 .DS_Store 파일을 삭제할 수 ..

프로젝트란?하나의 프로그램을 만들기 위한 일련의 프로세스.기획, 설계, 소스 코드 구현, 테스트, 배포 등 프로그램을 만들기 위한 모든 과정많은 협업이 필요할 때도 있다.-> 협업을 잘하기 위해서는 코드, 문서 공유 등을 통한 소통이 중요하다! 개발자의 필수 역량이며 프로젝트의 성공을 좌우한다.  README의 역할1. 완성된 프로그램의 설명서프로그램 사용 방법레퍼런스2. 구현중인 프로젝트의 현황구현된 주요 기능구현 현황코드가 해결해야하는 문제 등 Markdown 작성법1. 순서가 있는 목록- 순서가 없는 목록_기울여_**굵게****_기울여 굵게_**# 제목 1~6단계개행은 역슬래쉬 \ ( -> 깃허브, 디스코드에선 다르게 사용 )백틱 3개```프로그래밍 코드는 줄의 제일 앞에 공백 4칸 이상 띄워서 ..

개요 목록 조회를 하는데, 첫 페이지에 나온 아이템이 두번째 페이지에도 노출되는 이슈가 있었다. (고유한 아이템이므로 한번만 보여야 한다.) 또한 이슈를 재현하는 과정에서, 5개, 10개, 15개씩 등 보도록 페이지 사이즈를 변경할 때마다 순서가 다르게 노출되는 문제도 발견하였다. (원래는 5개 -> 10개 선택 시 위에 5개는 변함이 없고 밑에 5개가 추가되는 식으로 작동해야하지만 그러지 않았던 것이다.) 백엔드 쿼리를 확인해보니, 정렬 기준이 NULL값이거나 중복된 값일 때 처리해주는 로직이 없어, 데이터베이스가 해당 레코드들을 임의의 순서로 반환하고 있어 발생하는 문제였다. 문제였던 MyBatis 쿼리 B.STATUS_DATE IS NULL ASC, B.STATUS_DATE ${sortDirecti..

프론트 개발을 할 때 아이콘은 필수 요소다. 처음 html css를 배웠을 때 font awesome 을 사용해서, 계속 여기서 아이콘을 찾았었는데 유료도 많고 한정적이라 아쉬움이 있었다. 앞으로는 리액트 프로젝트 아이콘은 React Icons에서 찾도록 하자! 다양한 Font Awesome, Ant Design, Bootstrap, Material Design 등 리액트에서 사용할 수 있는 유용한 아이콘들을 모두 찾을 수 있다. 다음과 같이 간단하게 사용할 수 있다. yarn add react-icons # or npm install react-icons --save import { FaBeer } from "react-icons/fa"; function Question() { return ( Lets..

자동 말줄임 처리 텍스트가 넘칠 때, 자동으로 말줄임 처리를 해줘야할 때가 있다. 이때 텍스트를 축약하는 기준으로는 크게 두 가지가 있다. 글자수에 따라 축약 CSS ellipsis 각각의 방법을 알아보자! 글자수에 따라 축약 텍스트 글자 수에 따라 조건부 렌더링을 해주면 된다. 그리고 잘린 텍스트에 마우스를 올리면 (hover 하면) 전체 텍스트를 볼 수 있도록 Tooltip으로 띄워줄 수 있다. 아래는 name이 10자를 넘으면 앞에서부터 10자를 보여주고, 뒷 부분은 '...'으로 잘라서 보여주는 코드 예시이다. ( 데이터가 없을 때 '-' 를 출력하도록 하는 조건부 렌더링도 포함되어 있다.) cell: ({ row: { original } }) => { return original.name ? (..

날짜 데이터가 디비에 있는 날짜와 다르게 나온다는 이슈가 있었다. 1. 먼저 프론트에서 요청 코드를 보낼 때도 문제가 있었다. select @@global.time_zone, @@session.time_zone,@@system_time_zone; 먼저 mysql 타임존을 확인해 보면, utc 기준으로 되어 있다는 것을 확인할 수 있었다. select now() select now()를 해보아도 한국 표준시보다 9시간 느린 것을 확인할 수 있었다. 프론트에서는 moment.js를 사용하고 있었는데, moment에서 utc를 붙이고 보내면 보낸 값과 동일하게 디비에 저장이 되고, utc를 붙이지 않으면 ISO8601 형식에서 +09:00으로 요청이 가기 때문에 백엔드에서 -9시간을 하고 값을 저장해주고 있었..