전체 글
안녕하세요. 고민하는 개발자가 되고 싶은 Hayden 입니다. 초보 개발자의 공부 과정을 기록하는 블로그입니다. 현재 Spring boot에 관심을 가지고 공부하고 있습니다.
00. 문제 상황내 깃허브 Repo에서 받은 PR을 병합하려고 봤는데 이번에도 어김없이 충돌이 발생했다.평소처럼 Resorve conflicts 버튼을 눌렀는데 충돌이 너무 많아서 웹에디터로는 병합할 수 없다더라.. 잘 봐보니 커맨드라인으로 해결해야 한다고 해서 이번엔 깃 콘솔로 에러를 해결해 보려고 한다.다행히도 충돌 병합 과정을 나름 상세히 알려줘서 따라해보고자 한다. 01. 깃 Repo 클론해오기충돌이 발생한 레포를 클론 후 해당 경로로 이동한다. 02. 새로운 브랜치 생성이후 새로운 브랜치를 생성 후 backend 브랜치의 내용을 가져오려 하는데 에러가 발생했다.내용을 읽어보니 backend 브랜치가 없어서 발생한 오류 같다.브랜치를 확인해보면 backend 브랜치가 원격에만 존재하고 local에..
01. HTTP Request Method란?HTTP Request: 클라이언트 - 서버 구조에서, 클라이언트가 서버가 가진 자원에 대하여 특정한 동작을 요청하는 행위, 이때 서버는 각 자원을 요청할 수 있는 경로를 URI 를 통해 명시한다. HTTP Request Method: 클라이언트가 서버에 요청을 보낼 때, 서버가 처리할 동작을 명시하는 방법02. HTTP Request Method 종류GET: 서버가 가지고 있는 자원을 요청할 때 사용HEAD: 서버의 정보를 알고 싶을 때 사용, GET과 유사하지만 Response Body로 응답받지 않고, Header와 Cookies로만 응답받음POST: 요청한 자원을 서버에 저장하고 싶을때 사용. 이 때 자원은 주로 Request Body에 담아서 요청PU..
01. 문제 상황현재 진행중인 프로젝트에서, 꽉 찬 컴포넌트를 만들어야 할 일이 생겼다.그를 위해 찾아보니 가장 많이 보이는 해결책이 vw, vh 단위를 사용하는 것이다.그러나 이 방법을 프로젝트에 적용시켜보니 그리 좋은 해결책은 아닌것 같다는 생각이 들었다.이유는 아래와 같다.vw, vh 단위는 브라우저의 스크롤 영역까지를 포함시킨 뷰포트 크기를 반환한다.이런 이유로 언제 브라우저에 스크롤바가 생겨서 사이트가 깨질지 알 수 없다.1번과 같은 맥락으로, 모바일에서 사용하기 난처하다.모바일에는 기본적으로 네비게이션바, 노치 등이 포함되어 있으므로 100vh 등을 적용하면 페이지가 넘친다.02. 해결 방법해결방법은 간단했다.바로 innerHeight(innerWidth)와 props, 이벤트 리스너를 사용하..
01. 문제 상황리액트 프로젝트의 규모가 커져서 컴포넌트가 많아지고, 해당 컴포넌트가 사용하는 css파일도 많아질 경우 css의 속성을 관리하는것은 여간 귀찮은 일이된다.그래서 리엑트에서 CSS파일에서도 전역변수를 사용할 수 있는 방법을 찾아보고자 한다.02. 사용 방법1. scss 설치개발자들이 들으면 발작하는 말 중 하나가 이것이다.제가 사용하는 언어는 HTML, CSS에요! ^^...CSS는 언어가 아니라 마크업 문서이다. 고로 CSS에는 변수 따위가 존재하지 않는다.이를 해결하기 위해 우리는 SCSS를 사용할 것이다. 먼저 아래 명령어로 라이브러리를 설치하자.$npm i sassSASS는 CSS에서 변수를 사용할 수 있게 해주는 라이브러리다.변수 사용 이외에도 다양한 기능들도 있는 것 같은데 우선..
웹사이트를 구현하다 보면, 여러 URL에 대하여 각기 다른 페이지들을 넘겨줄 경우가 있다.다행히 리액트에서는 react-router-dom 라이브러리를 통해 이러한 기능을 제공한다.사용 방법을 바로 살펴보자.01. 라이브러리 설치npm install react-router-dom가장 먼저 라이브러리를 설치한다.02. Router.js 파일 만들기패키지 설치가 끝났으면 경로별로 어떤 컴포넌트를 넘길지를 처리해줄 라우터 컴포넌트를 만들어준다.이때 Router.js의 위치는 index.js와 같은 디렉토리에 만들어준다.Router.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';function Router({authorized, compon..