Node 엘리스 SW 엔지니어링 🐰 - DOM과 Node 객체 사진 및 정보 출처: 엘리스 sw 엔지니어링 🌲 노드 트리 :HTML DOM에서 정보를 저장하는 계층적 단위 노드 트리는 노드들의 집합으로 노드간 관계를 표현 자바스크립트에서는 dom을 이용해 노드 트리에 포함된 모든 노드에 접근 가능함 🪜 노드의 종류 문서 노드: HTML 문서 전체를 나타내는 노드 요소 노드: 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드 주석... NodeNode NestJs Guard 하지만 가드는 ExcutionContext를 사용할 수 있기 때문에 다음에 어떠한 라우트 핸들러가 실행되는지 정확하게 알 수 있다. ExecutionContext는 ArgumentsHost를 상속 받았기 때문에 각 통신 프로토콜에 맞는 switch 메소드를 통해 Request, Response, next()를 얻어올 수 있다. getClass는 클라이언트로 요청이 들어왔을 때 처리할 수 있는... NodeNestJSNestJS node 시작 node 설치 vscode 설치 npm : 라이브러리 설치를 도와주는 도구 -> node설치시 같이 설치 됨 package.json : npm으로 라이브러리 설치 시 어떤 라이브러리를 설치했는지 기록해주는 파일 express 라이브러리 설치 터미널 npm init 명령 실행 후 엔터 entry point에서 내가 원하는 파일명 설정 npm install express 라이브러리를 설치하는 순... NodeNode NODEJS Node.js : Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임 웹서버: nodejs자체로 웹서버 구동가능 CRUD create read updat delete read conditional 파일리스트 동기 비동기 비동기: 효율적이지만 복잡함 callback module... NodejsNode NestJs Config project의 root에서 아래의 명령어를 터미널에 입력하면 dependency를 추가할 수 있다. 해당 패키지는 내부적으로 Node에서 환경을 나눌 때 주로 사용하는 dotenv를 내부적으로 사용하고 있다고 합니다. forRoot()의 인자로는 ConfigModuleOptions를 받을 수 있는데 ConfigModuleOptions의 interface는 아래와 같이 정의되어 있다. 해당 ... NestJSNodeNestJS react - CORS 오류 해결 사담 react로 날씨 웹을 만들기 위해 공공데이터포털에서 날씨 관련 API를 사용하려고 했으나 불러오는 과정에서 CORS 오류가 발생했다. 이전에 사용했던 API에선 이런 경우가 없었기에 당황스러웠다. 검색해서 찾아보니 CORS라는 정책 문제였다. CORS 관련 자세한 내용은 이분이 자세하게 설명해 주셨다. 뭐가 문제인지 알았기에 쉽게 해결하는가 했으나 꽤 오랜시간 애를 먹었다. 인터넷에 ... ReactNodecorsNode 우분투에 node, mysql 설치하기 aws통한 배포 두번째 시간 우분투환경에서 node.js와 mysql 설치 해당 코드를 우분투 환경 터미널에다가 한줄한줄 입력해서 node.js 설치를 진행합니다. 위에 명령어 순서대로 잘 진행을 하셨다면 해당 우분투 환경에서 node 와 npm 이 잘 설치되었다는 것을 확인할 수 있게 됩니다. 이제 해당 폴더안에 node-modules 를 다운받아 줍시다 명령어는 npm i 로 진행해 주세... mysqlNode우분투awsNode HTML에서 노드란 무엇인가? HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다. 노드 트리는 최상위 레벨인 루트 노드(root node, 사진에서 Document)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다. 자바스크립트에서는 HTML DOM을 이용해 노드 트리에 포함된 모든 노드... NodehtmlNode Planet Scale Push 에서 Planet Scale 데이터베이스 생성과, prisma 와 연결할 준비를 했었다. 이번에는 prisma에서 만든 model을 우리 데이터베이스인 Planet Scale에 넣어주는것을 간단하게 포스팅 할 것이다! 우선 schema-prisma 파일을 보도록하자! 내가 가진 프로젝트의 schema-prisma 파일은 다음과 같이 작성되어있다! generator client 부분에는 pre... Nodeprismaplanet scaleNode [앱개발]-React Native Expo JSX 리액트 네이티브(기술) & Expo(도구) 리액트 네이티브는 자바스크립트(js) 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 이다. (라이브러리란 개발 할 때 사용하는 도구이다.) 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구이며, 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있게 도와주는 도구이다. 리액트 네이티브 하나로 안드로이드 앱과 iOS앱 두... 리액트 네이티브JSXNodereact nativenpmExpoExpo [React TIL] Node.js & Why React? node.js 설치 vscode 유용한 extension 설치 node.js 기초 섹션 강의 수강 react.js 기초 섹션 강의 수강 node package manager = node.js의 패키지 도구 , 관리 용이 우리가 만들 패키지의 정보를 기록하는 환경설정 파일 이름,버전,정보,설정 등 main : 진입 파일 다른사람의 모듈을 쓰고 싶을때 사용 package.json의 depende... ReactNodereact.jsnode.jsNode NestJs Provider (With 역할과 구현) Custom Provider가 왜 나오게 되었는지에 대한 이해 Custom Provider의 사용법 에서 작성한 것처럼 NestJs는 Spring과 달리 Interface타입으로 Provider를 등록할 수 없다. 정리하자면 Typescript를 이용하여 정의한 Interface는 컴파일이 되면 사라지기 때문에 Interface타입으로는 DI를 받을 수 없다고 한다. 결론부터 말하자면 나눌 ... NestJSNodeNestJS [ Project - 완성 ] 포트폴리오 공유 사이트 제작기 검색 기능은 Mongoose ODM을 사용하여 사용자의 이름, 기술 스택에서 검색어가 존재하는지 정규표현식을 통해 대소문자 구분 없이 검색이 가능하게 하였다. 이미지 업로드 기능은 Multer를 사용하여 구현하였다. 비밀번호 찾기 기능은 nodemailer 모듈을 사용하여 구현하였다. 딱 봤을 때 코드 길이가 줄어들지 않아서 어디가 간편하고 좋은지 모를 수 있지만 딱 코드만 보고도 어느 값이... 프로젝트expressjsmongodbNodemongooseNode NestJs Provider Provider의 핵심은 종속성으로 주입(Injection) 될 수 있다는 것이다.(스프링의 bean과 개념이 유사하다. 즉, 객체는 서로 다양한 관계를 생성할 수 있으며 객체와 객체의 관계를 맺어주는 역할을 분리할 수 있다. Java에서는 Spring을 이용하여 DIP를 지킬 수 있게되고 Node에서는 NestJs를 이용히여 DIP를 지킬 수 있게 되는 것이다. 공식 문서의 HINT에 적혀... NestJSNodeNestJS Node.js : node express로 서버 개설하기 사용자와 사물(혹은 시스템) 사이에서 의사소통할 수 있도록 만들어진 매개체이다. 이 UI가 존재함으로써 사용자는 컴퓨터(사물)와 상호 작용할 수 있게 되는 것이다. API(Application Processing Interface)는 Application 간에 서로 상호작용할 수 있도록 돕는 매개체이다. 왜냐하면 메뉴판엔 어떤 요리를 시킬 수 있는지 명시해 놓아 그 특정 메뉴만 시킬 수 있기... 위코드NodeWecode FullStacknode.jsNode node cli 로 @font-face generator 만들기 - 2 저번에 폰트 파일을 바탕으로 font-face CSS 파일을 만들어주는 간단한 node cli 를 개발하는 과정을 포스팅 했었는데 이제는 이를 npm 에 올리고, github actions 을 통해 자동 배포를 하는 방법을 포스팅 해보려고 한다. 이를 클릭해서 필자는 npm 에 올릴것이기 때문에 Publish Node.js Package 에 Set up this workflow 를 눌러서 들... react-formatNodegithub actionsnpmclifont-faceNode [백준] 10430. 나머지(feat. Javascript / node.js) 알고리즘 (A+B)%C는 ((A%C) + (B%C))%C 와 같을까? (A×B)%C는 ((A%C) × (B%C))%C 와 같을까? 세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오. 예제 입력 예제 출력 무엇을 해결해야 하는가? 입력값을 const [A, B, C] = input;로 나눠서 쓰는게 편리하다. (저 공식을 부르는이름 까먹음!)... 백준Node계산기JavaScript1043010430 Callback과 Callback Hell Callback 관련 배경 내용을 안 쓰기 뭣해서 주저리주저리 쓰게 되었는데, 건너뛰고자 한다면 다음 포스트부터 읽으면 무난할 것 같다. Javascript 실행 환경(Browser, Node 등)에서 함수를 Non-blocking하게 처리하고 싶을 때 callback 함수를 인자로 갖는 함수를 사용할 수 있다. 일반적으로 보는 함수의 경우 함수의 리턴값(3)을 받아서 다음 작업(consol... NodeJavaScriptJavaScript Callback Hell 리팩토링하기 앞에서 Callback Hell의 다음 예시를 보았고, Callback을 빼주는 것만으로는 함수들의 재사용이 어렵다는 것을 보았다. 그 이유 2가지는 다음과 같았다. 각 작업이 뒤의 작업에 의존하고 있으며, 그 의존성이 함수 본문에 hard-coding되어 있음. 각 작업의 error handling이 함수 본문에 hard-coding되어 있음. 이를 리팩토링하고자 한다. 먼저 files.f... NodeJavaScriptJavaScript [Node] 01-Node.js 시작하기 Javascript로 백엔드를 구축할 수 있다. Node.js 는 프레임 워크가 아니다. 프레임 워크 : 일정한 틀을 가지고 있어서, 개발자가 틀에 맞춰 프로그램을 완성할 수 있게 해주는 코드 체계. node.js는 자바스크립트 언어의 실행 환경일 뿐이고, 일정한 틀이 없다. node.js 설치 방법 LTS 버전 Current 버전 Node.js를 만드는 개발자들은 매년 4월과 10월에 새로... jsNodeNode [Boiler Plate] (2) User Schema & Model 이번에는 Boiler plate의 초기 셋팅을 끝내고 유저의 모델과 스키마를 만든다!!🌷 Schema 란? Schema 는 document, defalut values, validator 등의 구조를 정의한다. Model 이란? Model 은 creating, querying, updatingm deleting record 등 DB에 대한 인터페이스를 제공한다. Model의 역할은 Schem... serverexpressjsnodejsmongodbNodeBoilerplateBoilerplate Js - 1. 개념정리 웹브라우저에서 쓰이는 자바스크립트를 서버에서 사용가능하게 해준다. : 크롬에 탑재된 자바스크립트 엔진이다. LTS버전으로 설치를 해준다. 터미널창에 node --version or node -v 명령어를 입력해서 잘 설치되었는지 확인한다. 모듈은 module.exports 또는 exports 객체를 통해 정의하고 외부로 공개한다. 그리고 공개된 모듈은 require 함수를 사용하여 임포트한다... npmNodeNode
엘리스 SW 엔지니어링 🐰 - DOM과 Node 객체 사진 및 정보 출처: 엘리스 sw 엔지니어링 🌲 노드 트리 :HTML DOM에서 정보를 저장하는 계층적 단위 노드 트리는 노드들의 집합으로 노드간 관계를 표현 자바스크립트에서는 dom을 이용해 노드 트리에 포함된 모든 노드에 접근 가능함 🪜 노드의 종류 문서 노드: HTML 문서 전체를 나타내는 노드 요소 노드: 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드 주석... NodeNode NestJs Guard 하지만 가드는 ExcutionContext를 사용할 수 있기 때문에 다음에 어떠한 라우트 핸들러가 실행되는지 정확하게 알 수 있다. ExecutionContext는 ArgumentsHost를 상속 받았기 때문에 각 통신 프로토콜에 맞는 switch 메소드를 통해 Request, Response, next()를 얻어올 수 있다. getClass는 클라이언트로 요청이 들어왔을 때 처리할 수 있는... NodeNestJSNestJS node 시작 node 설치 vscode 설치 npm : 라이브러리 설치를 도와주는 도구 -> node설치시 같이 설치 됨 package.json : npm으로 라이브러리 설치 시 어떤 라이브러리를 설치했는지 기록해주는 파일 express 라이브러리 설치 터미널 npm init 명령 실행 후 엔터 entry point에서 내가 원하는 파일명 설정 npm install express 라이브러리를 설치하는 순... NodeNode NODEJS Node.js : Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임 웹서버: nodejs자체로 웹서버 구동가능 CRUD create read updat delete read conditional 파일리스트 동기 비동기 비동기: 효율적이지만 복잡함 callback module... NodejsNode NestJs Config project의 root에서 아래의 명령어를 터미널에 입력하면 dependency를 추가할 수 있다. 해당 패키지는 내부적으로 Node에서 환경을 나눌 때 주로 사용하는 dotenv를 내부적으로 사용하고 있다고 합니다. forRoot()의 인자로는 ConfigModuleOptions를 받을 수 있는데 ConfigModuleOptions의 interface는 아래와 같이 정의되어 있다. 해당 ... NestJSNodeNestJS react - CORS 오류 해결 사담 react로 날씨 웹을 만들기 위해 공공데이터포털에서 날씨 관련 API를 사용하려고 했으나 불러오는 과정에서 CORS 오류가 발생했다. 이전에 사용했던 API에선 이런 경우가 없었기에 당황스러웠다. 검색해서 찾아보니 CORS라는 정책 문제였다. CORS 관련 자세한 내용은 이분이 자세하게 설명해 주셨다. 뭐가 문제인지 알았기에 쉽게 해결하는가 했으나 꽤 오랜시간 애를 먹었다. 인터넷에 ... ReactNodecorsNode 우분투에 node, mysql 설치하기 aws통한 배포 두번째 시간 우분투환경에서 node.js와 mysql 설치 해당 코드를 우분투 환경 터미널에다가 한줄한줄 입력해서 node.js 설치를 진행합니다. 위에 명령어 순서대로 잘 진행을 하셨다면 해당 우분투 환경에서 node 와 npm 이 잘 설치되었다는 것을 확인할 수 있게 됩니다. 이제 해당 폴더안에 node-modules 를 다운받아 줍시다 명령어는 npm i 로 진행해 주세... mysqlNode우분투awsNode HTML에서 노드란 무엇인가? HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다. 노드 트리는 최상위 레벨인 루트 노드(root node, 사진에서 Document)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다. 자바스크립트에서는 HTML DOM을 이용해 노드 트리에 포함된 모든 노드... NodehtmlNode Planet Scale Push 에서 Planet Scale 데이터베이스 생성과, prisma 와 연결할 준비를 했었다. 이번에는 prisma에서 만든 model을 우리 데이터베이스인 Planet Scale에 넣어주는것을 간단하게 포스팅 할 것이다! 우선 schema-prisma 파일을 보도록하자! 내가 가진 프로젝트의 schema-prisma 파일은 다음과 같이 작성되어있다! generator client 부분에는 pre... Nodeprismaplanet scaleNode [앱개발]-React Native Expo JSX 리액트 네이티브(기술) & Expo(도구) 리액트 네이티브는 자바스크립트(js) 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 이다. (라이브러리란 개발 할 때 사용하는 도구이다.) 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구이며, 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있게 도와주는 도구이다. 리액트 네이티브 하나로 안드로이드 앱과 iOS앱 두... 리액트 네이티브JSXNodereact nativenpmExpoExpo [React TIL] Node.js & Why React? node.js 설치 vscode 유용한 extension 설치 node.js 기초 섹션 강의 수강 react.js 기초 섹션 강의 수강 node package manager = node.js의 패키지 도구 , 관리 용이 우리가 만들 패키지의 정보를 기록하는 환경설정 파일 이름,버전,정보,설정 등 main : 진입 파일 다른사람의 모듈을 쓰고 싶을때 사용 package.json의 depende... ReactNodereact.jsnode.jsNode NestJs Provider (With 역할과 구현) Custom Provider가 왜 나오게 되었는지에 대한 이해 Custom Provider의 사용법 에서 작성한 것처럼 NestJs는 Spring과 달리 Interface타입으로 Provider를 등록할 수 없다. 정리하자면 Typescript를 이용하여 정의한 Interface는 컴파일이 되면 사라지기 때문에 Interface타입으로는 DI를 받을 수 없다고 한다. 결론부터 말하자면 나눌 ... NestJSNodeNestJS [ Project - 완성 ] 포트폴리오 공유 사이트 제작기 검색 기능은 Mongoose ODM을 사용하여 사용자의 이름, 기술 스택에서 검색어가 존재하는지 정규표현식을 통해 대소문자 구분 없이 검색이 가능하게 하였다. 이미지 업로드 기능은 Multer를 사용하여 구현하였다. 비밀번호 찾기 기능은 nodemailer 모듈을 사용하여 구현하였다. 딱 봤을 때 코드 길이가 줄어들지 않아서 어디가 간편하고 좋은지 모를 수 있지만 딱 코드만 보고도 어느 값이... 프로젝트expressjsmongodbNodemongooseNode NestJs Provider Provider의 핵심은 종속성으로 주입(Injection) 될 수 있다는 것이다.(스프링의 bean과 개념이 유사하다. 즉, 객체는 서로 다양한 관계를 생성할 수 있으며 객체와 객체의 관계를 맺어주는 역할을 분리할 수 있다. Java에서는 Spring을 이용하여 DIP를 지킬 수 있게되고 Node에서는 NestJs를 이용히여 DIP를 지킬 수 있게 되는 것이다. 공식 문서의 HINT에 적혀... NestJSNodeNestJS Node.js : node express로 서버 개설하기 사용자와 사물(혹은 시스템) 사이에서 의사소통할 수 있도록 만들어진 매개체이다. 이 UI가 존재함으로써 사용자는 컴퓨터(사물)와 상호 작용할 수 있게 되는 것이다. API(Application Processing Interface)는 Application 간에 서로 상호작용할 수 있도록 돕는 매개체이다. 왜냐하면 메뉴판엔 어떤 요리를 시킬 수 있는지 명시해 놓아 그 특정 메뉴만 시킬 수 있기... 위코드NodeWecode FullStacknode.jsNode node cli 로 @font-face generator 만들기 - 2 저번에 폰트 파일을 바탕으로 font-face CSS 파일을 만들어주는 간단한 node cli 를 개발하는 과정을 포스팅 했었는데 이제는 이를 npm 에 올리고, github actions 을 통해 자동 배포를 하는 방법을 포스팅 해보려고 한다. 이를 클릭해서 필자는 npm 에 올릴것이기 때문에 Publish Node.js Package 에 Set up this workflow 를 눌러서 들... react-formatNodegithub actionsnpmclifont-faceNode [백준] 10430. 나머지(feat. Javascript / node.js) 알고리즘 (A+B)%C는 ((A%C) + (B%C))%C 와 같을까? (A×B)%C는 ((A%C) × (B%C))%C 와 같을까? 세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오. 예제 입력 예제 출력 무엇을 해결해야 하는가? 입력값을 const [A, B, C] = input;로 나눠서 쓰는게 편리하다. (저 공식을 부르는이름 까먹음!)... 백준Node계산기JavaScript1043010430 Callback과 Callback Hell Callback 관련 배경 내용을 안 쓰기 뭣해서 주저리주저리 쓰게 되었는데, 건너뛰고자 한다면 다음 포스트부터 읽으면 무난할 것 같다. Javascript 실행 환경(Browser, Node 등)에서 함수를 Non-blocking하게 처리하고 싶을 때 callback 함수를 인자로 갖는 함수를 사용할 수 있다. 일반적으로 보는 함수의 경우 함수의 리턴값(3)을 받아서 다음 작업(consol... NodeJavaScriptJavaScript Callback Hell 리팩토링하기 앞에서 Callback Hell의 다음 예시를 보았고, Callback을 빼주는 것만으로는 함수들의 재사용이 어렵다는 것을 보았다. 그 이유 2가지는 다음과 같았다. 각 작업이 뒤의 작업에 의존하고 있으며, 그 의존성이 함수 본문에 hard-coding되어 있음. 각 작업의 error handling이 함수 본문에 hard-coding되어 있음. 이를 리팩토링하고자 한다. 먼저 files.f... NodeJavaScriptJavaScript [Node] 01-Node.js 시작하기 Javascript로 백엔드를 구축할 수 있다. Node.js 는 프레임 워크가 아니다. 프레임 워크 : 일정한 틀을 가지고 있어서, 개발자가 틀에 맞춰 프로그램을 완성할 수 있게 해주는 코드 체계. node.js는 자바스크립트 언어의 실행 환경일 뿐이고, 일정한 틀이 없다. node.js 설치 방법 LTS 버전 Current 버전 Node.js를 만드는 개발자들은 매년 4월과 10월에 새로... jsNodeNode [Boiler Plate] (2) User Schema & Model 이번에는 Boiler plate의 초기 셋팅을 끝내고 유저의 모델과 스키마를 만든다!!🌷 Schema 란? Schema 는 document, defalut values, validator 등의 구조를 정의한다. Model 이란? Model 은 creating, querying, updatingm deleting record 등 DB에 대한 인터페이스를 제공한다. Model의 역할은 Schem... serverexpressjsnodejsmongodbNodeBoilerplateBoilerplate Js - 1. 개념정리 웹브라우저에서 쓰이는 자바스크립트를 서버에서 사용가능하게 해준다. : 크롬에 탑재된 자바스크립트 엔진이다. LTS버전으로 설치를 해준다. 터미널창에 node --version or node -v 명령어를 입력해서 잘 설치되었는지 확인한다. 모듈은 module.exports 또는 exports 객체를 통해 정의하고 외부로 공개한다. 그리고 공개된 모듈은 require 함수를 사용하여 임포트한다... npmNodeNode