'Javascript' 카테고리의 글 목록 (3 Page)

[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클

2022.12.05

0. 한눈에 비교하는 클래스 컴포넌트 vs 함수 컴포넌트 1. 클래스 컴포넌트 생성 shortCut : rcc (함수 컴퍼넌트 생성은 : rafce : react arrow function component export) import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } function이 class로 바뀐 것을 볼 수 있다. AppClass.js : 클릭수를 보여주는 버튼 그리는 예제 import React, { Component } from 'react'; import './App.css'; export default class ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임

2022.12.04

리액트 가위바위보 게임 Box 2개 만들기(나 버전, 컴퓨터 버전) src 아래에 component 폴더 만들고 Box.js 만들어줌 컴포넌트 생성 단축키 : 컴포넌트 만드는 단축키 : rafce 단축키가 안나올 경우 설치 extention 컴포넌트 만들시 주의사항: 컴포넌트 이름은 반드시 대문자로 시작 리액트가 컴포넌트와 일반 HTML태그(,등..)을 구별하는 방법은 태그가 대문자로 시작하는지 여부이다 따라서 소문자로 시작을 하면 일반 HTML태그로 분류해버리기 때문에 반드시 첫 글자는 대문자로! App.js / Box.js / App.css 코드 (1) 유저가 선택할 수 있는 가위, 바위, 보 버튼 (2) 유저가 선택한 가위, 바위, 보 이미지가 보여지는 UI 세팅 (3) 컴퓨터 출력 가위, 바위, ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (1) 리액트의 컨셉 state

2022.12.02

React! 는 값의 변화에 react 반응하다란 컨셉에 걸맞게 변수 값이 바뀔 때 마다 getElementById~ innerText~ 일일히 해주던걸 해주지 않아도 된다. 값이 변하면 UI도 자동으로 바꿔준다. -> State state가 변하면 UI가 변하게 한다. 터미널 프로젝트 만들고 싶은 폴더 생성 mkdir react-test cd react-test npx create-react-app 폴더명 나같은 경우는 npx create-react-app rsp 로 함 생성하는데 시간 좀 걸림. cd rsp code . 하면 바로 세팅된 비쥬얼 스튜디오 코드 프로젝트가 열린다. 1. App.js App.css 정리 App.css 파일 안에 있는 모든 내용 지워준다. 아래와 같이 정리해준다. impor..

Javascript/Node.js

[Node.js] (5) 요청과 응답 연결하기, 버퍼 개념 (리디렉션, 유저입력값 파일생성 후 저장)

2022.11.24

(1)~(4)까지는 서버를 스핀 업하는 방법과, 들어오는 요청에 대한 정보를 담은 요청 객체를 받고, 응답을 돌려줄 수 있는 응답 객체에 대한 포스팅을 작성하였다. 터미널 서버 종료 ctrl + c 서버 재시작 node app.js 1. 실습용 웹서버 코드 작성 아래와 같이 입력해준다. const url = req.url; url이 뭔지에 따라서 다른 내용을 클라이언트에게 보내주도록 하자. if (url === '/') { const http = require('http'); const server = http.createServer((req, res) => { const url = req.url; if (url === '/') { res.write(''); res.write(''); res.write(..

Javascript/Node.js

[Node.js] (4) 응답 전송

2022.11.24

const http = require('http'); const hostname = '127.0.0.1'; const port = 3001; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.write(''); res.write(''); res.write('Hello from my Node.js Server!'); res.write(''); res.end('Hello Node'); //이 시점부터는 더 이상 아무 것도 입력해서는 안됨 //이 부분은 우리가 클라이언트로 다시 전송하는 부분으로, Node.js가 클라이언트로 다시 전송하기 때문 re..

Javascript/Node.js

[Node.js] (3) 요청 객체

2022.11.23

Javascript/Node.js

[Node.js] (2) Node의 라이프사이클 및 이벤트 루프

2022.11.23

const http = require('http'); const server = http.createServer((req, res) => { console.log(req); }); server.listen(3000); 위 코드로 생성한 서버는 제대로 기능하지 않는다. 예를 들어, 아직 응답을 반환하지 않는다. Node.js가 관리하는 이벤트 루프 작업이 남아 있는 한 계속해서 작동하는 루프 프로세스로, 이벤트 리스너가 있는한 계속 작동한다. 등록 후 제거하지 않았던 이벤트 리스너(createServer에 계속되는 이벤트 리스너)는 서버가 계속 운영되기 위해 제거하지 않아야 한다. 코어 노드 애플리케이션은 이 이벤트 루프에 의해 관리된다. 데이터베이스에 접근할 때도 데이터 요청을 넣으라는 메시지를 보내고 ..

Javascript/Node.js

[Node.js] (1) 첫 시작, Node 서버 생성

2022.11.22

미리보기 const http = require('http'); const server = http.createServer((req, res) => { console.log(req); }); server.listen(3000); 준비 : 프로젝트, 공식 홈페이지 설명서 https://nodejs.dev/en/learn/ Introduction to Node.js Getting started guide to Node.js, the server-side JavaScript runtime environment. Node.js is built on top of the Google Chrome V8 JavaScript engine, and it's mainly used to create web servers - b..

Javascript/Node.js

[Node.js] 사용자가 원하는 폴더 이름 안전하게 받아오기

2022.08.23

node app.js 파일명 으로 실행해주면, var os = require('os'); const path = require('path'); const folder = process.argv[2]; const workingDir = path.join(os.homedir(), 'Pictures', folder); if (!folder || !fs.existsSync(workingDir)) { console.error('Please enter a folder name in Picture'); } console.log('Working Directory: ' + workingDir); - process.argv 길이가 3인 배열 - process.argv[2] 파일명 -const workingDir = pat..

Javascript/Javascript

배열의 함수들

2022.07.22

배열 자체를 변경 새로운 배열을 만들어서 반환 위와 같이 크게 두가지 스타일로 분류 가능 const 죽s = ['낙지죽','전복죽','호박죽','핕죽']; //특정한 오브젝트가 배열인지 체크 console.log(Array.isArray(죽s)); // true console.log(Array.isArray({})); //false //특정한 아이템의 위치를 찾을 때 console.log(죽s.indexOf('호박죽')); //2 //배열 안에 특정한 아이템이 있는지 체크 console.log(죽s.includes('호박죽')); // true console.log(죽s.includes('야채죽')); //false // 아이템 추가 : 제일 뒤 // 배열 자체를 변경 죽s.push('참치죽'); con..

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Javascript

[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클

[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임

[React + Node 같이 때려잡기] (1) 리액트의 컨셉 state

[Node.js] (5) 요청과 응답 연결하기, 버퍼 개념 (리디렉션, 유저입력값 파일생성 후 저장)

[Node.js] (4) 응답 전송

[Node.js] (3) 요청 객체

[Node.js] (2) Node의 라이프사이클 및 이벤트 루프

[Node.js] (1) 첫 시작, Node 서버 생성

[Node.js] 사용자가 원하는 폴더 이름 안전하게 받아오기

배열의 함수들

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역