철테코

기존에 프로젝트를 진행할 때 상태관리에 있어서 리덕스 구조를 사용해 왔습니다. 그런데 최근 리덕스 Tool-kit이 나오고 공식 홈페이지에서도 이를 적극 활용할 것을 추천하고 있습니다. 이번 글에서는 React-Redux 프로젝트의 생성 과 생성하면 기본적으로 세팅되는 Redux 구조와 State 관리에 대해서 알아보려고 합니다. 설치 리액트 + 리덕스 프로젝트 생성 프로젝트를 만들 폴더에서 VSCode에서 터미널을 열고, 다음과 같은 명령어를 입력합니다. npx create-react-app [프로젝트 명] --template redux 기존 프로젝트 + 리덕스 만약 기존 프로젝트에 리덕스를 추가하고 싶다면 다음과 같은 명령어를 통해 리덕스를 추가할 수 있습니다. redux, react-redux np..

1. 폴더 생성 프로젝트를 생성할 폴더를 하나 만든다. 2. VSCode Terminal에서 명령어 입력 VSCode에서 Terminal을 열고 npm install -g create-react-app npm 모듈인 'create-react-app'을 설치한다. 그 다음 아까 만들어진 폴더에서 다음과 같이 프로젝트를 생성한다. npx create-react-app my-app 명령어를 입력한다. "my-app"부분에 만들 프로젝트 명을 사용하면 된다. 다음과 같이 리액트를 실행할 준비가 되었다. 3. 실행하기 npm start 다음과 같은 명령어를 터미널에서 해당 폴더에서 실행하면 우리가 만든 리액트 앱을 실행할 수 있다. http://localhost:3000/ 인터넷 주소에 위의 주소를 입력하면 실행..

CSS는 Cascading Style Sheets의 약자로 콘텐츠의 글꼴, 색상, 크기 및 간격을 조정하거나 여러 열로 분할하거나 애니메이션 및 기타 기능을 추가하는 웹 페이지 스타일과 레이아웃에 사용된다. # CSS 적용 방법 1. 외부 CSS 파일 적용 방법 CSS 파일의 적용은 .css 파일을 별도로 작성하고, HTML의 에 참조한다. 이러한 방식을 가장 많이 사용한다. 구조와 스타일의 분리를 통해 유지보수성을 높여주기 때문이다. 헬로우 월드! 이것은 나의 첫 번째 CSS 예제입니다 2. 내부 CSS 적용 방법 외부 CSS 파일 대신, HTML의 헬로우 월드 이것은 나의 첫 번째 CSS 예제입니다 3. 인라인 스타일 인라인 스타일은 style 속성을 두어 한 요소(태그)에만 영향을 주는 CSS 선언..

프론트 엔드 공부를 시작했다면 HTML, CSS, Javascript는 필수적으로 배워야 한다. 또한 이들을 자유자재로 사용할 줄 알아야 한다. https://www.advancedwebranking.com/seo/html-study/ HTML Study Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The w..