본문 바로가기

분류 전체보기

 (28)
Socket.IO Socket.IO란 Socket.IO는 Node.js 기반의 실시간 웹 어플리케이션을 구현하기 위한 Framework. 실시간, 양방향, event기반 통신 제공 how to Start & Use $npm i socket.io Server(node express) const express = require('express') const app = express(); const http = require('http') const SocketIO = require("socket.io"); const httpServer = http.createServer(app); const io = SocketIO(httpServer) ... io.on("connection", socket =>{ socket.on("roo..
node.js express에서 자주 쓰이는 메서드 const express = require('express') const app = express(); 1. app.get(path, callback): HTTP GET 요청에 대한 라우터를 등록 2. app.post(path, callback): HTTP POST 요청에 대한 라우터를 등록 3. app.put(path, callback): HTTP PUT 요청에 대한 라우터를 등록 4. app.delete(path, callback): HTTP DELETE 요청에 대한 라우터를 등록 5. app.use([path,] callback [, callback...]): 미들웨어 함수를 등록 이 메서드는 경로에 대한 라우터를 등록하지 않고, 모든 HTTP 요청에 대해 미들웨어 함수를 실행 6.app.set(n..
날씨(openWeather) API로 날씨정보 가져오기 openWeather API로 현재 날씨정보를 가져오기. 1. openWeather 사이트 접속, 현재 날씨를 가져올수 있는 api인 current Weather Data를 참조한다. https://openweathermap.org/current 2. 날씨를 불러올수 있는 방법이 아래와 같이 나와있다. 여기서 api키는 회원가입 후 my api keys를 확인하면 된다. https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} 3.우선 현재 장치의 위치를 가져와야한다. 다음은 브라우저에서 제공하는 JS의 Geolocation API 메서드이다. success와 error 부분은 콜백함수로 position을 매개변..
Zustand로 전역상태관리 해보기#1 말로만 듣던 쉽고 편하다는 zustand를 프로젝트에 적용하기 위해 사용 해 보았다. # 이하 예제에서 할것 state를 true로 만들기 state를 토글로 관리 count +1 및 초기화 1 . 먼저 create-react-app으로 만든 프로젝트에 아래 경로처럼 store를 관리할 파일을 만듬. => src\store\store.js를 만들어 줌 //store.js // zustand의 create를 사용하여 store를 생성. import {create} from 'zustand' //create 안에는 기본값을 갖는 state를 설정 , 함수명 형식으로 변경할 state에 대해 작성. //set()은 상태를 변경하는 메서드 // state를 false => true로 바꿔주고자 할때 export..
서버 사이드 렌더링이란? (SSR / Server Side Rendering) 들어가며 .. MPA와 SPA 먼저 , 클라이언트와 서버 간의 통신에서 웹 서버가 HTML을 반환하는 프로세스는 다음과 같이 요약할 수 있다. 기본적인 정적 페이지는 단순하게 HTML,CSS,JavaScript로 구성되어 있지만, 동적 페이지는 사용자의 비동기 요청을 실시간으로 처리하는 상호작용을 포함한다. 따라서 일반적인 웹 사이트의 경우 사용자가 클릭하거나 서버로 요청을 보내면 짧은 시간동안 빈 페이지를 표시하고 서버는 요청에 대한 응답으로 새로운 정적 페이지를 반환한다. 이러한 종류의 응용 프로그램을 MPA(Multiple Page Application) 라고 한다. 반면에 React나 Vue에서 사용하는 웹 페이지는 SPA(Single Page Application)라는 테마로 구성되어 있다. 사..
자바스크립트 배열 다루기(sort, join) 1.Sort() Number 정렬하기 const data = [3, 1, 33, 6, 12, 1152, 92] const sort = data.sort() console.log(sort) // 1, 1152, 12, 3, 33, 6, 92 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따르기 때문에 위와 같이 결과가 나온다. 오름차순 정렬하기 const sortAscending = data.sort(function (a, b) { return a - b }) console.log(sortAscending) //1,3,6,12,33,92,1152 내림차순 정렬하기 const sortDescending = data.sort(function (a, b) { return b - a }) console.log..
React로 로그인, 로그아웃 기능 구현하기(짱 쉽게) React Framework인 Next를 사용하여 로그인, 로그아웃 기능 구현 하는 방법 실제로 로그인/로그아웃을 처리해줄 서버가 없기때문에 더미데이터가 들어오면 state로 화면을 구현하는 방식입니다. 추가로 next와 ant Design이 사용되었습니다. 1. 프로젝트 구성 부가적인 작업파일들이 있는데 여기서 실제로 사용하는 파일은 components에 있는 AppLayout.js //메인 화면 LoginForm.js // 로그인할 화면 UserProfile.js // 로그아웃할 화면 세 파일을 사용합니다. 1-1. package.json package.json은 아래와 같이 설정 되어있습니다. 콘솔에서 npm i 로 설치합니다. 중요한 dependency는 next, react, react-dom,..
and , or 연산자로 코드 짧게 쓰기( &&, || ) [1] or 연산자 //테스트용 객체 const person = { name: "한국인", age: 20, job: "student" } or연산자는 첫번째 값이 존재하면 첫째값을 return , 그렇지 않으면 두번째 값을 리턴 기본값 설정할때 많이 사용 console.log(person.name || '이름이 없습니다.') //한국인 console.log(person.address || '주소가 없습니다.') //주소가 없습니다. [2] and 연산자 && 연산자는 두개의 값이 모두 참이면 마지막값을 return, 둘중에 하나라도 false면 false를 리턴 특수한 상황의 조건문에 많이 사용 console.log(person.age < 20 && '운전불가능'); //false console.log(..
리액트에서 자주 쓰이는 자바스크립트 문법 3가지 1. object shorhand 문법 객체 리터럴 선언시에 key로 선언된 값이 존재한다면, value 를 생략해도 자동으로 매칭시켜준다. 일반적으로 쓰는 JS문법 let name = "홍길동"; let age = 20; const person = { name:name, age:age } object shorhand 사용 예시 let name = "홍길동"; let age = 20; //key:value 형식이 아닌 key값만 선언한 형태 const person = { name, age } console.log(person) //result : {name: '홍길동', age: 20} 2.Destructuring (구조분해, 비구조화 할당) Destructuring은 구조화된 배열 또는 객체를 Dest..
뷰 메모모음 [1] Vue 시작하기 ================== 기본 명령어 : npm -v node -v package.json 생성 npm init 1.뷰 설치 npm i vue **특정버전까는법 @를 띄어쓰기 없이 붙이고 버전까지 npm i vue@2.7.0 2. webpack 생성 (리액트 웹팩 다루는거랑 동일) - npm i -D webpack webpack-cli ** : -D 는 개발용 옵션. [2] 빌드하기 1.package.json에서 스크립트 부분을 아래와 같이 지정 "scripts": { "build": "webpack" }, 2. npm run build 로 실행 3. vue-loader 설치 npm i vue-loader -D 3-1. vue-loader 설정 webpack.config...

티스토리툴바