SMALL

분류 전체보기 85

React : 기본 훅(Hook) - useState

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseState 컴포넌트 내에서 상태(state)를 관리할 때 사용하는 훅이다.- useState 함수의 인자로 state의 초기 값을 지정한다.- state(상태 값)과 setState(상태 값을 변경하는 함수)를 배열로 반환한다.import React, { useState } from 'react'; // useState importexport default..

🤍Dev : FE/React 2025.05.13

Github gh-pages로 React 배포하는 방법

gh-pages React 를 배포해야하는데 파일을 직접 업로드 하는 방법 말고 배우질 않아서...! 인프런 강의를 보다가 gh-pages 라는 거로 배포할 수 있다는 사실을 알게 되었다!엄청 편리하다 gh-pages는 요거다https://www.npmjs.com/package/gh-pages gh-pagesPublish to a gh-pages branch on GitHub (or any other branch on any other remote). Latest version: 6.3.0, last published: 4 months ago. Start using gh-pages in your project by running `npm i gh-pages`. There are 1121 other pro..

🖤Dev : BE/배포 2025.05.11

React : Hook

React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/75" data-og-url="https://jini-dev.tistory.com/75" data-og-image="https://blog.kakaocdn.net/dna/E9uEx/hyYPc17D81/AAAAAAAAAAAAAAAAAAAAAEBIB470QAqo8FEq_TdcFNuLU-oHNtuLY6Uaumn2R_s0/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=HDZwMOVSnI%2FGuFdNtHSxNP6kvbg%3D

🤍Dev : FE/React 2025.05.10

React : 클래스형 컴포넌트와 훅의 등장 이유

React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/75" data-og-url="https://jini-dev.tistory.com/75" data-og-image="https://blog.kakaocdn.net/dna/E9uEx/hyYPc17D81/AAAAAAAAAAAAAAAAAAAAAEBIB470QAqo8FEq_TdcFNuLU-oHNtuLY6Uaumn2R_s0/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=HDZwMOVSnI%2FGuFdNtHSxNP6kvbg%3D

🤍Dev : FE/React 2025.05.09

React : 컴포넌트와 Props, State (+ useState 훅)

컴포넌트란?- 스스로 상태를 관리하는 캡슐화된 코드 조각=> 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본적으로 함수이기 때문에 자신만의 고유한 로직이 들어갈 수 있다. 함수 형태로 컴포넌트를 만들게 되면 함수 스코프에 의해서 외부와 내부 스코프가 나눠지기 때문에- 스스로 상태(state)를 가질 수 있다.- 컴포넌트는 명확한 범위와 의미를 가질 수 있도록 파일을 분리한다=> 각각 개별의 파일로 나눈다. - 최상위 컴포넌트의 이름은 암묵적으로 App이다.=> 루트 컴포넌트- 최상위 컴포넌트(App)을 렌더링 하는 코드는 index.js에 둔다.=> 엔트리 포인트Props 부모 컴포넌트에서 자식 컴포넌트..

🤍Dev : FE/React 2025.05.09

ESLint, Prettier 설정 방법

ESLint문법 및 코드 스타일을 검사해주는 도구 - 문법적인 오류를 사전에 발견할 수 있다.- 협업에서 통일된 코드 스타일을 유지할 수 있도록 도와준다 ❗Lint 는 여러가지가 있다. 1. CRA (create-react-app) 에서 설정 방법cra 설치시 기본적으로 내장되어 있기 때문에 package.json 에 "eslintConfig" 안에서 설정한다."eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 2. 별도의 파일로 적용하기root 경로(package.json 과 동일한 경로)에 .eslintrc.json 파일을 생성한다.json 형태로 코드를 작성한다.{ "extends": ["react-a..

💻Dev/Tool 2025.05.09

Node.js란? Node.js 설치 방법 (+VSC)

Node.js 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 런타임 환경 - 오픈소스 JavaScript 엔진인 크롬 V8을 기반으로 동작- Single 쓰레드의 non-blocking I/O 이벤트 기반 비동기 방식으로 동작- Node.js 는 NPM을 포함하고 있다. (설치 할때 함께 설치된다)런타임 환경 (runtime environment)컴퓨터가 현재 실행중인 OS와 별개로 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신이다.가상 머신 (Virtual Machine : VM)하나의 물리적 컴퓨터에서 여러 운영체제(OS)를 실행하기 위한 소프트웨어, 서버 운영 등에 유용하다.NPM NPM : Node Package ManagerJS 패키지를 쉽게 설치, 업데이트,..

React : 구구단 출력하기

요구사항구구단을 2~9단 출력한다단, 5단은 제외한다홀수 단은 다른 색으로 표시한다.구구단은 오른쪽으로 나열되게 한다.const num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; {/* 여기에 JSX를 활용하여 요구사항에 맞게 구구단을 완성시켜보세요! */} 풀이function list(a) { return ( {num.map((i) => { return {`${a} X ${i} = ${a * i}`}; })} );} {list(2)} {list(3)} {list(4)} {list(6)} {list(7)} {list(8)} {list(9)} 정답 코드 {num.map( (n) =>..

🤍Dev : FE/React 2025.05.08

React : JSX 문법과 연산 (리스트 렌더링)

JSX 문법JSX : JavaScript + XMLJS 확장 문법이다. HTML 모양에 가까운데 내부적으로 JavaScript를 사용할 수 있다.React 는 JSX를 이용해서 컴포넌트를 작성한다. 1. 최상위 부모 요소는 1개로 단일해야한다. Hello, world!2. 함수의 실행문이나 값을 작성할 때에는 {} 를 사용한다const name = 'lala' {name} // lala 3. 주석 작성은 {/**/} 으로 한다. (한줄 작성은 없다) {/* 주석입니다. */} {name} 4. 모두 닫힘 태그를 사용한다.5. 태그의 속성 이름이 HTML과 다르다- 클래스 속성은 className으로 표기한다- for 속성은 htmlFor 으로 표기한다- onclick 속성은 ..

🤍Dev : FE/React 2025.05.08

React란?

React사용자 인터페이스를 만들기 위한 JS 라이브러리웹 개발을 쉽게 할 수 있도록 도와주는 라이브러리 => 사용자 인터페이스를 독립적인 컴포넌트 단위로 만들어 재사용성과 유지보수성을 높여주는 JS 라이브러리 프레임워크 : 개발을 위한 기본 틀, 뼈대라이브러리 : 개발에 필요한 도구 또는 집합 왜 React 인가?1. 굉장히 많이 사용해서 수요가 많고 방대한 생태계이다.2. SPA 개발에 적합하다. (SEO에 좋다)3. 화면을 여러 단위로 쪼개고, 재사용하는 식으로 코드 관리가 유용하다.4. 유용한 라이브러리들이 많다.React 이전 웹 서비스의 동작 방식 (MPA) Multiple Page Application여러 페이지로 구성되어 있고 페이지 이동시에 서버에서 새로운 HTML을 받아오는 형식이다.페..

🤍Dev : FE/React 2025.05.08
LIST