맨 땅에 프론트엔드 개발자 되기

REACT 프로젝트 GitHub Pages로 배포하기 1. GitHub 저장소 만들기 우선, GitHub에 repository를 생성해줍니다. 노란색으로 표시한 명령어를 잘 복사해둡니다. 2. 프로젝트에 GitHub 원격 저장소 연동하기 create-react-app 으로 프로젝트를 생성할 경우 자동으로 git init이 되어 버전관리가 되어있지만, 아닐 경우 git init으로 버전관리를 시작해줍니다. 그런 다음, 터미널에 아까 복사해둔 노란색 명령어를 입력 후 엔터를 누르면, 원격 저장소와 프로젝트가 연동됩니다. git remote add origin 원격 저장소 주소 3. GitHub pages로 배포하기 GitHub pages는 gh-pages를 설치해야 사용할 수 있습니다. 설치하기 전에 먼저 ..

카테고리 명령어 내용 git 시작 git init git으로 버전관리 시작 git 복제 git clone https://URL 원격 저장소 소스 코드 복제 (.gitignore에 .env 명시되어 있다면 .env 파일 보존 안됨) git clone 로컬 저장소/ 경로 로컬 저장소 복제 git 추적 git status git으로 관리되는 파일 상태 확인 git add . 전체 파일의 변경사항을 추적 (추적 다음 커밋해야함) git 파일명 해당 파일의 변경사항을 추적 git 커밋 git commit -m '커밋 메세지' 추적된 변경사항 커밋(버전 생성) git log 커밋 로그 확인(생성된 버전 모두 확인) git 브랜치 git branch 브랜치 목록 조회 git branch 브랜치명 브랜치명으로 브랜치 ..

Redux 기본 개념과 작동 방식 Redux 란? 상태 관리 라이브러리로 리액트를 사용할 때 상태를 관리하는 것을 도와주는 라이브러리다. 상태 관리를 왜 해야되는가? 에 대해 생각해보면, 리액트에서는 컴포넌트끼리 상태값을 주고 받을 때 props를 통해 주고 받는데, 자식관계가 딥해질 수록 중간 컴포넌트들에 의미없는 props 내려주기가 반복되고, 자식 컴포넌트들끼리 상태값을 직접 주고 받는 것이 불가능하다. (무조건 부모 컴포넌트를 거쳐야만 가능) 그리하여 상태 관리를 쉽게 도와주는 라이브러리들이 생겨났고, 그중에 가장 많이 쓰이는 상태 관리 라이브러리가 Redux 다. Redux는 공통으로 쓰이는 상태 값을 한 곳에 모아 필요한 곳에 뿌려주는 클라우드 개념이랄까? props로 내려주지 않고, 필요한 ..

리액트 React State, Props 리액트를 사용할 때 꼭 알아야 하는 개념인 State와 Props에 대해 알아보자. Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 State는 컴포넌트 내부에서 대상의 상태를 나타내는 데이터 State 리액트를 사용하여 개발하는 것과 바닐라 자바스크립트를 사용하여 개발하는 것의 가장 큰 차이는 직접 DOM을 조작하지 않는다는 것이다. DOM을 직접 조작하지 않는 이유 = 리액트를 사용하는 이유 (아래 글 참고) 리액트를 사용하는 이유 (SPA, CSR, SSR) 리액트를 사용하는 이유 (SPA, CSR, SSR) 많은 개발자들에게 사랑받고 있는 리액트!! 현재, 많은 현업 개발자들에 의해 쓰이고 있고, 프론트엔드 개발에 관심이 있다면 다들 한번씩은 들어봤..

리액트 React 시작하기 (CDN & CRA) 1. CodePen 으로 시작하기 CodePen은 웹에서 코딩을 작성할 수 있는 애플리케이션이다. CodePen에서 시작하는 방법은 실제 프로젝트를 만들 수 있는 방법은 아니고, React를 경험해보거나 간단한 테스트 코드를 실행해볼 때 사용하는 방법이다. CodePen https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io CodePen에 간단하게..

HTML 시맨틱 태그를 사용하는 이유 시맨틱(Semantic) 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다. 시맨틱 태그를 왜 써야하는데? 영역마다 무슨 태그를 써야하는지 생각하는 게 귀찮고 그냥 다 div 태그를 써버리면 되는데 뭐하러 시맨틱 태그를 사용하나? 라고 생각이 들 수도 있겠지만, 시맨틱 태그를 사용하는 것과 아닌 것에 차이점이 있다. 1. 검색엔진 최적화(SEO) 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 ..