No image

Dev/Frontend

[React] React.js 튜토리얼 8- 합성 (Composition)

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 7.

No image

Dev/Frontend

[React] React.js 튜토리얼 7- State 끌어올리기

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 6.

No image

Dev/Frontend

[React] React.js 튜토리얼 6- 폼(Form)

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 5.

No image

Dev/Frontend

[React] React.js 튜토리얼 5- list와 key

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 4.

No image

Dev/Frontend

[React] React.js 튜토리얼 4- 조건부 렌더링

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 3.

No image

Dev/Frontend

[React] React.js 튜토리얼 3- 이벤트 처리하기

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 2.

No image

Dev/Frontend

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 간단한 React 예제 프로젝트를 만들어보기 앞서, 알아둬야하는 React의 개념과 특징들을 살펴봅시다. . React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리합니다. 엘리먼트를 렌더링하기 위해서는 ReactDOM.createRoot()에 엘리먼트를 전달한 다음, root.render()에 전달해야 합니다. 튜토리얼1에서 만들어보았던 프로젝트의 index.js를 열어보면 다음과 같이 작성되어 있습니다. root.render에 App.js에 만들어놓은 App 엘리먼트가 전달된 것을 알 수 있습니다. ..

by DOMDOMI 2023. 12. 9.

No image

Dev/Frontend

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 저는 윈도우라서 Windows Installer를 클릭하여 다운로드받아 설치했습니다. 설치가 완료되면 시작줄에서 Node라고 검색하여 Node.js command prompt 터미널 앱을 열어주세요. 터미널이 열리면 이제 react 프로젝트를 생성해봅니다. 프로젝트를 생성하는 ..

by DOMDOMI 2023. 12. 8.

No image

Dev/Frontend

[React] reset.css 적용 방법

npm install styled-reset 우선 styled-reset 을 설치해줍니다. styled-components는 local로 돌아가기 때문에 global 한 css 를 만들기 위해서 createGlobalStyle 을 styled-components 로부터 import 해줍니다. 그리고 방금 설치한 styled-reset 도 import 해줍니다. import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; 그리고 GlobalStyles 라는 컴포넌트를 만들어줍니다. const GlobalStyles = createGlobalStyle` ${reset}; `; 참고로 ${reset} 내용을 출력..

by 알 수 없는 사용자 2021. 5. 14.

No image

Dev/Node.js

[오류해결] Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0.

C:\Users\Domdom\Code\react\practice>npm start Compiled with warnings. Compiled with warnings. Compiled with warnings. Compiled with warnings. Compiled with warnings. Failed to compile. ./src/SassComponent.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs...

by 알 수 없는 사용자 2021. 5. 13.