분류 전체보기38 [React] 리액트로 간단한 게시판 만들기 (simple board/ CRUD) 기본 설정 프로젝트 파일 생성 $ npx create-react-app '프로젝트명' 간단한 레이아웃과 css 적용을 위해 부트스트랩을 사용하겠습니다. (필수 x) 참조 : https://react-bootstrap.github.io/ react bootstrap 설치 $ npm install react-bootstrap bootstrap 상단에 import 합니다. import 'bootstrap/dist/css/bootstrap.min.css'; 필요한 부트스트랩 component도 import. 서버 기본 세팅 XAMPP에서 서버 M SQL DB, Apache server 실행 같은 root에 서버 폴더 생성하고 터미널에 명령어 입력 node express 서버 실행 //패키지 json 설치 $ n.. 2023. 10. 6. [React] Hooks 리액트 훅 리액트 훅(React Hooks)은 함수 컴포넌트에서 React의 상태(state)와 생명주기 기능을 사용할 수 있게 해주는 기능입니다. 이전에는 클래스 컴포넌트에서만 상태와 생명주기를 관리할 수 있었는데, 훅을 이용하면 함수 컴포넌트에서도 이러한 기능들을 사용할 수 있습니다. React Hooks Hooks은 함수형 컴포넌트에서 상태(state) 및 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능. (클래스 컴포넌트에서 사용 x) → 장점 : 간결한 코드, 모듈화, 논리의 재사용성. ※ React 16.8.0부터 Hook을 지원. React Native는 v0.59부터 지원합니다. React Hooks 종류 useState : 상태를 추가, 관리할 때 사용. useEffect : 부수 .. 2023. 10. 6. [React] 개발환경 설정 (기초) React Basic React 설치 전, 가장 먼저 해야할 일 → node.js 설치 (npx 실행하기 위해서 !) Node.js 공식 홈페이지 https://nodejs.org/ko 안정적인 좌측의 LTS 버전(이전 버전) / 최신 버전 중 원하는 버전으로 다운로드하여 사용하면 됩니다. 버전 확인 방법 node --vertion npm -v 1. 개발환경 설정 terminal 혹은, 프로젝트 폴더를 vs Code로 열고 터미널에 아래 명령어 입력 npx create-react-app . //작업할 폴더를 생성하지 않았다면 프로젝트 폴더명 함께 입력 npx create-react-app ‘프로젝트명’ npx으로 create react app 생성하기 npx는 일회용으로 설치, 실행, 삭제까지 한번에 가.. 2023. 10. 3. [Javascript] ECMAScript 6 (ES6) ES6 정의 ES6(ECMAScript 6)는 ECMAScript 표준의 가장 최신 버전 현대적인 코드를 사용하면, 코드가 간결해지고 생산성이 향상 ↑ 1. 변수 선언 방식(var/ let/const) var : 재정의와 재선언 모두 가능 let : 가변변수로 재정의가 가능하지만 재선언은 불가능 const : 불변변수로 재선언과 재정의 모두 불가능 * 재선언 : 동일 변수명을 다시 선언하는 것 * 재정의 : 값이 지정된 변수에 값을 변경하는 것 * 스코프(scope) : 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위 //변수 선언 var x = 0; // 재정의 x = 2; // 재선언 var x = 2; var의 문제점 ① 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있다. ② .. 2023. 8. 13. 이전 1 ··· 6 7 8 9 10 다음
