본문 바로가기

전체 글

 (134)
git 작업하기 실전편 gitHub 커밋 과정 git init git init: Git 저장소를 새로 만드는 명령. init 명령을 실행하면 현재 디렉토리를 git이 추적할 수 있도록 .git폴도를 생성한다. Git 저장소로 변환한다. git add 변경사항을 로컬에 staging한다. 혹은 git index에 추가한다. git add {fileName}: 파일을 인덱스에 추가하는 명령. 인덱스는 저장소에 커밋 하기 전 변경 내용을 임시로 저장하는 위치이다. git add .: 변경된 파일 전부를 staging 하는 명령 git commit git commit -m "commit messgae": 인덱스에 추가된 파일을 커밋하는 명령. 커밋은 파일이나 디렉토리의 변경 사항을 저장소에 반영하는 작업이다. git commit --..
git branch 관리요령 Github에 이슈 생성 해당 이슈에 대한 branch를 dev branch로부터 생성. 여기서, branch 이름은 f#-issue_name_simple 로 지정 할 것. f는 feature의 약자. #은 github issue 번호. issue_name_simple은 해당 이슈에 대한 간략한 제목 작업시에 특정 작업이 frontend이냐, 혹은 backend냐에 따라 f#-frontend, f#-backend 두 개의 브랜치를 둬서 관리 해당 이슈 작업 완료 시, f#-frontend 및 f#-backend의 작업내용을 먼저 f#-{simple_issue_name} 브랜치에서 병합 한 이후, 그 브랜치를 dev 브랜치에 병합. main -> dev -> f#-{simple_issue_name} -> ..
Header Layout 프로젝트를 진행하며 레이아웃의 구현에 대한 큰 틀을 이해할 수 있었다. 기본적으로 페이지는 헤더와 바디로 구성되어 있다. 이번 글에서는 그 중 header파트에 대한 구현을 기록하려 한다. 프로젝트를 통틀어 Material-UI를 이용해 구현했다. 가장 상위 컴포넌트인 AppBar는 두개의 하위 컴포넌트로 이루어져 있다. 그것이 ToolBar와 Drawer이다. 둘은 같은 level에 존재하며 ToolBar가 코드의 윗 부분에 있다. ToolBar는 화면의 가장 상단에 표시되며 drawer을 위한 햄버거, 사이트명, 유저의 간략한 정보등을 표시한다. 사이트 이름은 process.env를 통해 나타낼 수 있다. ToolBar의 햄버거 아이콘의 클릭 여부에 따라 지정해놓은 state인 open이 결정되고 o..
2021-05-27 :: RESTful API에 로그인 하기 https://restcookbook.com/ REST가 요즘 뜨겁다. REST가 마침내 API 프로그래머들로 재발견되었다. 하지만 REST가 첫 생각처럼 그렇게 쉽지는 않다. HATEOAS를 다루면서 요구되는 일정한 인터페이스 아래 코드를 짜는 것은 상당히 까다롭고, 결국 사람들은 이전의 restful하지 못한 형태로 돌아가고는 한다. 하지만 그럴 필요는 없다. REST에 대해 제대로 알고 난 뒤에는 당신 역시 REST를 좋아할 것이다. RESTful API에 로그인 하기 사용자가 RESTful APi에 접속해서 허락된 자원에게만 접근할 수 있도록 하기 위해서 무엇이 필요할까? RESTful한 서버와 그렇지 않은 서버의 가장 큰 차이점 중 하나는 RESTful 설정 안의 세션 상태가 사용자 측에 있고 ..
2021-05-21 :: useEffect 이번 글을 통해 useEffect 라는 Hook을 사용하여 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 그리고 업데이트 될 때 특정 작업을 처리하는 방법에 대해 알아보겠다. Mount/Unmount 우선 마운트/언마운트를 관리해보자. import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(..
2021-04-24 :: Material UI 시작하기 터미널을 통해 아래 코드를 실행시켜 ui/core을 설치 해준다. npm install @material-ui/core npm install @material-ui/icons Material-UI의 기본 폰트인 Roboto를 import 해준다. 기본 html폴더에 폰트 등록하기 public/index/html에 폰트를 등록 해주자. Basic Component Typograph text를 추가할 때 사용하는 컴포넌트이다. Hello, World! Grid - 반응형 cssbaseline -> give default css @material에서 Icon도 많이 사용 가능 gutterBottom paragraph 메인홈페이지 component -> example of deoms, explainat..
2020-05-21 :: Promise Promise는 ECMASCript 6부터 추가되었다. 비동기 처리를 작성하다 보면 콜백 함수가 중첩되어 알아보기 어려운 코드가 만들어진다. 이때 Promise를 사용하면 복잡하게 중첩된 코드를 더욱 알아보기 쉽게 작성할 수 있다. 비동기 처리의 예 setTimeout이나 addEventListener 메서드는 비동기적으로 실행된다. 하지만 이들을 다루는 코드는 보통 순차적으로 실행되지 않는다. console.log("A"); setTimeout(function() {console.log('B'); }. 0}; console.log("C"); 위와 같은 코드의 실행결과는 A C B가 된다. setTimeout 함수로는 인수로 받은 콜백 함수를 일정 시간이 흐른 후에 실행하도록 예약하는 처리만 하고, 그다..
2021-05-20 :: Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 이를테면 사용자 로그인 정보, 어플리케이션 환경 설정, 테마 등이 있다. Context API를 이용한 전역 상태 관리 흐름 이해하기 리액트 어플리케이션에서 여기저기에 필요한 데이터는 보통 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 그리고 최상위 컴포넌트에서 해당 데이터를 사용하는 컴포넌트 까지 props형태로 전달해주는데 그 경로가 복잡해지는 경우 관리하기가 매우 복잡하다. 이런 경우 Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아와서 사용이 가능하다. Context API 사용법 익히기 src 디렉터리에 contexts 디렉터리를 만든 뒤 그 안에 col..

티스토리툴바