I'm a Fig, Not a Pig

오늘은 깃에서 병합하는 방법들 중에 fast-forward와 3 way merge 방식에 대해서 공부하려고 한다. GIT에서 사용되는 병합 방법 2가지 1. fast-forward branch간의 병합을 진행할 때 커밋이 생기지 않고 merge 명령어를 실행하는 브랜치의 Head Commit이 병합되는 branch의 Head commit으로 이동되는 방식이다. 어떤 경우에서 사용될까? 서로 다른 브랜치의 base commit에 내용이 변경되지 않았을 때 사용된다. 이는 base commit이 커밋을 하지 않은 것과 동일한 의미를 갖는다. 직관적으로 예로 들자면, main branch에서 새로운 브랜치 하나를 생성 한 후에 main branch는 더이상 커밋하지 않고, 생성된 브랜치에서만 커밋을 하는 경우..

git init : 새로운 git 저장소 초기화git add . : 현재 directory의 모든 파일울 staging Area로 이동git add : 파일을 staging area에 추가하기git reset : 파일을 staging area에서 제거하기git status : staging area와 작업 영역의 상태 확인git log : 전체 깃 history 보기. git log -5 하면 최근 다섯줄 보기처럼 마지막 줄을 지정할 수 있음git log --pretty=oneline : --pretty 옵션을 사용하면 커밋 히스토리를 다양한 방식으로 출력할 수 있음. (--pretty  옵션에 oneline이라는 값을 주면 커밋 하나당 한 줄씩 출력함)git commit -m "message" : S..

이메일, 비밀번호 정규식 const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/; const passwordRegEx = /^[A-Za-z0-9]{8,20}$/ /^ : 시작 $/ : 끝 [A-Za-z0-9] : 영문 대소문자 혹은 숫자로 시작 ([-_.][A-Za-z0-9]) : 두 번째 글자부터는 영문 대소문자 혹은 숫자이며 - _ .이 들어갈 수 있음 * : 문자 또는 숫자가 0개 이상 나타남 @가 중간에 반드시 들어가야 함 도메인 부분도 마찬가지로 영문 대소문자 혹은 숫자로 시작하며 그 다음부터-_.이 들어갈 수 있음 . 이 최소한 하나는 반드시 들어가야 함 .뒤에 com..

오늘은 효율적인 효율적인 구조를 짜기 전 CRA 초기세팅 후 생성되는 폴더와 파일들에 대해 알아보려고 한다. CRA 초기세팅 후 디렉토리들 살펴보기  CRA로 초기세팅 후 생성되는 파일 구조이다. node_modulesCRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더package.jsonCRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일모든 프로젝트마다 package.json이 하나씩 존재한다."dependencies"리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.실제 코드는 node.modules 폴더에 존재한다."scripts"start : 프로젝트 development mode(개발 모드) 실행..

Git 설치 & 환경설정1. Git 설치하기 2. 설치 완료 후 Git bash 열기 3. git bash에서 환경설정 하기 1) 유저 이름 설정git config --global user.name "your_name" 2) 유저 이메일 설정하기 (Github 가입시 사용한 이메일 쓰기)git config --global user.email "your_email" 3) 정보 확인하기git config --list Github에 처음 코드 업로드 하기1. 초기화git init 2. 추가할 파일 더하기git add ..(점) 은 모든 파일이라는 뜻. 선택적으로 올리고 싶으면 add뒤에 파일 이름 붙여주면 됨 (예. git add index.html) 3. 상태 확인 (선택사항)git status 4. 히스토..

리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게 리액트는 따로 내장 클래스가 존재하지 않는다. 따라서 리액트에서 AJAX를 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다.  그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까? 리액트와 함께 쓰면 좋은 HTTP Client 라이브러리가 많지만 여기에선 리액트에서 많이 쓰이는 것 중에 하나인 Fetch API를 비교하며 axios 라이브러리를 알아볼 것이다. 1. AJAX (Asynchronous Javascript And X..

1. 렌더링이란? HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 2. 클라이언트 사이드 렌더링(CSR)클라이언트인 브라우저가 렌더링을 처리하는 방식이다. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(View)를 그리는 주체가 되는 것이다. 2.1. CSR의 동작 과정(1) : 초기 화면 수행사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청한다.서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달한다. (해당 페이지에는 JS 링크가 포함되어 있다.)전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 다운로드하여서 최종적인 화면을 사용자에게 보여준다. (해당 부분에서 사용자에게 보여준 뒤 JS를 로..

목차 1. Context 2. 리액트 Context 사용 방법 3. useContext 훅이란 React에서 컴포넌트가 데이터를 다루는 방법으로 Props, State 그리고 Context가 있다. 오늘은 Context에 관한 개념과 사용 방법에 대해 다뤄보려고 한다. 1. Context Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다. 전역 데이터를 Context에 저장한 후 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다. React에서 Context를 사용하기 위해서는 Context API를 사용해야 하며 Context의 Provider와 Consumer를 사용해야 한다. Context에 저장된 데이터를 사..

Axios interceptor와 Refresh Token axios 공식문서에 따르면 interceptor는 api 요청에서 then이나 catch로 처리되기 전에 응답을 가로챌 수 있도록 하는 것이다. 프로덕트에서 로그인 시에만 가능한 행동들의 경우 header에 athorization : token 옵션을 함께 보내야한다. 이때 토큰이 만료되면 서버에서 토큰 만료로 인한 오류응답을 준다.(보통 401이나 403이 토큰 만료 오류이다) 토큰 탈취 문제를 피하고자 엑세스 토큰의 유효시간은 짧게 설정해두고 리프레시 토큰을 통해 엑세스 토큰을 재발급 받아야하는데 서비스를 이용하는 유저입장에서 반복적으로 401에러를 보는 것은 굉장히 불편한 일이다. 따라서 401에러가 나오면 유저가 보지 못하게 중간에서 가..

목차 1. Redux 2. 리덕스 언제 써야 할까? 3. 리덕스 vs Context API 4. 리덕스에서 사용되는 키워드 5. 리덕스의 3가지 규칙 6. 리덕스 사용하기 1. Redux 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리이다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. 리덕스에서는 리듀서와 액션이라는 개념을 사용한다. 따라서 개발 방식이 Context API와 useReducer Hook과 매우 유사하다. 참고로 redux 는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만 무조건 리액트와 함께 사용 할 필요는 없다. 일반 JavaScript 환경에서 사용 ..