👨‍💻 Web Development 검색 결과

129 개의 검색 결과가 있습니다.

👨‍💻 Web Development/React JS

[React JS] 4. 백엔드 기본구조 생성하기

[React JS] 4. 백엔드 기본구조 생성하기 1. 백엔드 기본구조 생성 package.json 생성 npm init express 설치 npm install express - index.js 가 entry파일 (여기로 요청이 들어옴) nodemon 설치 npm install nodemon 파일구조 생성 필요한 패키지 다운 npm install bcryptjs cors dotenv express jsonwebtoken mongoose - bcrypt : 비번 암호화 - cors : origin 두 개에서 통신 가능하게 - env : 환경변수 생성 생성한거 사용 - jsonwebtoken : 사용가능 - mongoose : mongo db 사용 2. express.static() 이미지, css, js..

2023. 7. 15. 21:29

👨‍💻 Web Development/React JS

[React JS] [참조] Redux

[React JS] [참조] Redux 1. Redux란? - Redux is a predictable state container for JavaScript - JS 어플리케이션을 위한 상태 관리 라이브러리 Props VS State Props (Properties) - 구성요소가 서로 통신하는 방법 (A->B 컴포넌트간 데이터 교환) - 상위 구성 요소에서 아래쪽으로 흐름 - 해당 값을 변경하려면 자식 관점에서 Props 변경가능, 부모는 내부 상태를 변경해야함 = 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 바꿔야한다는 말 (a bit immutable) State - 부모 -> 자녀가 아닌 하나의 컴포넌트 안에서 데이터 전달 ex) 검색 창에 글을 입력할 때 글이 변하는 것..

2023. 6. 22. 21:34

👨‍💻 Web Development/React JS

[React JS] 3. 프론트엔드 기본구조 생성하기

[React JS] 3. 프론트엔드 기본구조 생성하기 1. Vite를 이용한 리액트 생성 - vite npm init vite project name: ./ react 선택 javascript 선택 -> 리액트 생성 npm install -> node_module안에 package.json dependencies들이 들어감 폴더구조 생성 components : 공통 컴포넌트 hooks : 커스텀 훅스 layout : header(navBar) , footer, side bar pages : 페이지들 store : redux 상태관리 utils : 여러 컴포넌트에서 사용되는 함수들 파일 생성 2. ESlint 1) 필요한 모듈 설치 npm install -D vite-plugin-eslint eslint ..

2023. 6. 18. 18:57

👨‍💻 Web Development/React JS

[React JS] 2. React.js

[React JS] 2. React.js 1. 리액트란? - 페이스북에서 만든 라이브러리 (2013)- Components로 이뤄져있어 reusable / 재사용성이 뛰어남 ex) like기능, comment.js 를 다른 데서 사용가능! Real DOM VS Virtual DOMReal DOM - 만약 10개의 리스트 중 한가지의 리스트만 update 됨- 전체 리스트를 다시 reload 해야됨 -> super expensive Virtual DOM- 만약 10개의 리스트가 중 한가지의 리스트만 update 됨- 그 바뀐 한가지 아이템만 DOM에서 바꿔줌 어떻게? -> virtual dom에서 스냅샷 찍어두고 살펴본 뒤 바뀐 부분만 real dom에서 바꿔줌 2. Create React App으로 리액..

2023. 6. 8. 22:40

👨‍💻 Web Development/React JS

[React JS] 1. Node.js

[React JS] 1. Node.js 1.Node.js 자바스크립트를 크롬이나 IE가 아닌 서버사이드에서도 사용할 수 있게됨 java와 같이 서버사이드에서 사용할수있는 javascript Express JS? 2. boiler plate Project 3. Express.js npm install express --save const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening on port ${port}`) }) "s..

2023. 5. 21. 23:36

👨‍💻 Web Development/MySQL

[MySQL] 정리

[MySQL] 정리 MySQL Workbench 실행 -> CREATE SCHEMA 'mydatabase' DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; (속도 빠른 방법) SET NAMES utf8mb4; SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0; SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0; SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL'; DROP SCHEMA IF EXISTS carhartt; CREATE SCHEMA carhartt; USE carhart..

2023. 3. 19. 03:43