반응형 분류 전체보기50 [React Toy Project] 리액트 토이프로젝트 노트앱(Note App) 만들기 ✍️ Intro. 리액트 기초 문법 공부를 끝마친 후 공부한 내용을 활용해보고자 만들었습니다. 💻 사용 기술 Design tool: Figma Editor: VScode Lang html css React.js (Router, Redux, styled-component) 배포: Github.io 📅 개발 기간 총 8일 소요 (디자인 2일, 개발 6일) 🗂 폴더 구조 📁 components - 화면을 구성하는 작은 요소 단위의 엘리먼트들을 구성하는 폴더입니다. 📁 images - 백그라운드 이미지, 아이콘 등을 모아놓은 폴더입니다. 📁 pages - Router를 통해 이동하는 페이지들을 구성하는 폴더입니다. 📁 style - styled-components를 활용한 글로벌스타일과 테마(다크/라이트모드) .. 2022. 10. 23. [React Hook] 리액트 훅의 state 관리 함수 useState() 함수를 사용해보자. [React Hook] 리액트 훅의 state 관리 함수 useState() 함수를 사용해보자. 오늘은 리액트 훅 중 하나인 useState() 함수 사용법을 알아보려 한다. 오늘 글에서는 깊은 동작원리에 대해서는 다루지 않을 예정이다. (나는 쪼렙 코린이니까,, 기회가 된다면 동작원리는 나중에 공부해서 정리할 거임.) useState() 함수를 사용하기 위한 사용 문법과 간단한 예제를 통해 가볍게 이해할 수 있도록 준비했다. 들어가기 전 State란? 리액트 컴포넌트가 가질 수 있는 동적인 상태값을 일컫는 말이다. React Hook은 뭔데? 리액트 훅은 리액트 버전 16.8부터 새로 추가된 요소로, 리액트 훅이 추가되기 전에는 class 기반 컴포넌트로 상태 값을 관리했었으나, class 기반 컴포넌.. 2022. 9. 25. [React] 맥(Mac os) VSCODE 리액트 프로젝트 생성하는 방법(개발환경세팅) React 맥(Mac os) VSCODE 리액트 프로젝트 생성하는 방법(개발환경 세팅) 현재 리액트 스터디를 하면서, 인강에서 알려주는 대로 개발환경을 세팅하다 보니 기억에 남지도 않고 신규 토이프로젝트를 진행할 때마다 일일이 인강을 찾아서 볼 순 없다고 생각이 들어, 오늘에야말로 리액트 개발을 할 때 제일 중요하지만 자주 까먹는 개발환경 세팅에 대해서 기록해놓으려고 한다. 1. 노드.js(Node.js) 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 노드.js 공식 홈페이지로 들어가 LTS 버전으로 설치한다. 최신 버전을 설치해도 되긴 .. 2022. 9. 24. [JS ES6] 자바스크립트 구조 분해 할당(Destructuring assignment) [JS ES6] 자바스크립트 구조 분해 할당(Destructuring assignment) 🧐 JS 구조 분해 할당(Destructuring assignment)이란? 개발할 때 키를 가진 데이터 여러 개를 하나에 저장할 땐 객체를, 데이터를 순서대로 저장할 땐 배열을 사용한다. 이 배열과 객체의 전체 또는 일부를 함수로 전달해야 할 때 사용한다. 구조 분해 할당(Destructuring assignment)을 통해 객체나 배열을 '변수'로 분해할 수 있게 도와주는 특별한 문법인 것이다. 1. 배열(Array) 안에 있는 데이터를 변수에 담는 방법 1-1. 기존 방법 // 배열 안에 있던 데이터를 변수에 담는 기존 방법 const arr = [1,2,3]; const a = arr[0]; const b .. 2022. 8. 5. [React 기초] JSX 문법 01 - className, 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호), inline style React 기초 JSX 문법 01 - className, 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호), inline style JSX란? JSX는 문자열도, 태그도 아닌 JavaScript에서 XML문법을 추가 확장한 문법이다. 리액트에서 JSX 사용은 필수가 아니지만, 대부분 사용하는 이유는 자바스크립트 내에서 HTML 작성하듯 비슷하게 작성할 수 있는 장점으로 많이 사용하고 있다. JSX는 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 1. className 일반 html 태그에서 class를 추가할 때에는 text 위와 같이 어트리뷰트 이름을 쓰는 것이 맞으나, React JSX 문법은 카멜케이스(camelCase) 프로퍼티 명.. 2022. 8. 2. 이전 1 ··· 3 4 5 6 다음 반응형
