저장을 습관화

React는 사용자 정의 태그를 만드는 기술이다. 만약 아래와 같은 코드가 있다고 가정한다. - src/App.js import logo from "./logo.svg"; import "./App.css"; function App() { return ( WEB HTML CSS JS Welcome Hello, Web ); } export default App; 이 코드에서 추가나 수정, 삭제 작업이 필요할때 지금 당장은 작업에 어려움이 없겠지만 만약 나 , 의 내용이 수백 수천 수만 줄이라면, 작업을 진행하기 이전에 코드를 파악하는 것조차 벅찰 것이다. 이를 간편하게 하기 위해 기존 HTML 태그가 아닌 사용자가 직접 정의한 태그를 사용하는 기술이 React이다. src/App.js에 다음과 같이 내용을 ..

1. React 웹 서버 가동 시 제일 먼저 보이는 웹 페이지는 src/index.js로 인해 실행된 것이며 import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); // If you want to start measuring performance in your app, pass a function // to log resul..

node.js 사전 설치가 필요하며 class가 아닌 function 위주로 진행할 예정 작업을 진행할 폴더 생성 이때 폴더명이 'react'일 경우 오동작 가능성이 있으니 지양할것 터미널에서 신규 리액트 앱 생성 명령어 입력 $ npx create-react-app . Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. Creating a new React app in..

hoist, 호이스트란 '끌어올리는' 이미지이다. 그 동안 함수를 작성할때 코드의 윗 줄에서 작성하고 아랫 줄에서 사용하곤 하였는데 강의를 듣다보니 이와 다르게 아직 함수 선언이 되지 않은 상단 부분에서 함수를 사용하는 코드를 보았다. 이게 어떻게 가능한지 잊지않게 메모한다. 자바스크립트에서 함수 선언은 호이스팅(hoisting)이라는 메커니즘에 의해 이루어진다. 호이스팅은 변수 및 함수 선언을 코드의 맨 위로 올려서 처리하는 것을 의미한다. 즉, 변수와 함수가 선언된 위치와 상관없이 함수를 사용할 수 있다. 이는 코드 실행 전 컴파일러에 의해 처리된다. 함수가 전역 범위에서 선언된 경우 해당 함수는 전역 함수로 간주되어 어디서든 호출할 수 있다. 예시) sayHello(); // 호출 가능 functi..

일반적으로 소켓 통신은, 동일한 소켓 아이디를 가진 서버와 클라이언트 간의 일대일통신이다.(유니캐스트) 현재 서버와 연결 중인 모든 소켓을 대상으로 통신을 보내고 싶을때(브로드캐스트)는 socket.broadcast.emit()을 사용한다. 준비 - index.hbs Chat {{! 중략 }} {{! socket.io - 웹 클라이언트와 서버 간 실시간 양방향 통신을 지원해줌}} - script.js const socket = io('/chattings'); const getElementById = (id) => { return document.getElementById(id) || null; }; // get DOM element const helloStrangerElement = getElementB..

1. 네임스페이스 http 연결 방식의 경우 엔드포인트를 통해 api를 나누었다. 예를 들어 users/signup, users/login, users/update의 API를 가진 컨트롤러, 서비스 등의 내용이 담긴 users.module.ts post/write, post/update, post/delete의 API를 가진 컨트롤러, 서비스 등의 내용이 담긴 posts.module.ts 이렇게 users와 post 두 개의 모듈로 나누어 유지 보수성을 향상시킬 수 있었다. 웹소켓을 사용한 양방향 통신 방식에서는 네임스페이스를 통해 모듈을 나눌 수 있다. - chats.gateway.ts - 소켓의 게이트웨이, 클라이언트와 서버 간의 소켓 통신을 처리하는 엔드포인트 // 중략 import { WebSoc..

/views/index.hbs {{! 템플릿 엔진 }} {{! 서버 사이드에서 클라이언트 사이드(브라우저)로 보낼때 html로 렌더링 될 내용 }} {{! https://docs.nestjs.com/techniques/mvc }} Hello World! Chat {{! babel - 최신 자바스크립트 문법을 브라우저에서 사용가능하게 지원해줌 }} {{! polyfill, 자바스크립트를 지원하지 않는 브라우저에서도 자바스크립트 메서드 등을 사용할 수 있게 해줌 }} {{! socket.io - 웹 클라이언트와 서버 간 실시간 양방향 통신을 지원해줌}} {{! public부터 시작하는 절대 경로로 지정해야지, 상대 경로로는 적용되지 않는다. }} {{! main.ts에서 선언한 내용에 따라 진행되기 때문이다..

지난 multer 사용에 이어서.. https://ctrs.tistory.com/437 NestJS - multer를 이용한 미디어 파일 서비스 공식문서 https://docs.nestjs.com/techniques/file-upload Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeSc ctrs.tistory.com Amazone S3 접속 https://s3.console.aws.amazon.com/s3/..

공식문서 https://docs.nestjs.com/techniques/file-upload Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea docs.nestjs.com 이미지, mp3, mp4 등의..

NestJS 공식 문서 swagger 관련 https://docs.nestjs.com/openapi/introduction Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea docs.nestjs.com..