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 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 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 Js - 1. 개념정리 웹브라우저에서 쓰이는 자바스크립트를 서버에서 사용가능하게 해준다. : 크롬에 탑재된 자바스크립트 엔진이다. LTS버전으로 설치를 해준다. 터미널창에 node --version or node -v 명령어를 입력해서 잘 설치되었는지 확인한다. 모듈은 module.exports 또는 exports 객체를 통해 정의하고 외부로 공개한다. 그리고 공개된 모듈은 require 함수를 사용하여 임포트한다... npmNodeNode node cli 로 @font-face generator 만들기 - 1 그러다가 폰트들을 추가하고 각 폰트마다 @font-face 를 추가해서 사용하는 방식이 너무 귀찮다고 생각이 들어서 이걸 한번에 만들어주는 빌더가 있으면 좋겠다라는 생각을 하게 되었다. node 로 recursive 하게 폰트 파일들을 읽어와서 각 폰트 파일에 이름을 바탕으로 @font-face 를 만들고 거기에 font-family, src 를 추가해주는 방식으로 생각을 하였다. 예전에 n... Nodereact-formatclicommanderfont-faceNode [CS] Node.js Day-7 런타임이란 프로그래밍 언어가 구동되는 환경입니다. 쉽게 말해 프로그램이 동작할 때 프로그램이 동작하는 공간입니다. ex) Chrome, Safari 등 기존에는 JavaScript 런타임이 웹 브라우저 밖에 없었지만 node.js의 등장으로 브라우저가 아닌 공간에서도 실행될 수 있게 되었습니다. 웹 페이지 뿐 아니라 서버와 같은 다른 프로그램을 만들 수 있습니다. node.js는 JavaSc... 노드node.jsNodeNode
엘리스 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 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 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 Js - 1. 개념정리 웹브라우저에서 쓰이는 자바스크립트를 서버에서 사용가능하게 해준다. : 크롬에 탑재된 자바스크립트 엔진이다. LTS버전으로 설치를 해준다. 터미널창에 node --version or node -v 명령어를 입력해서 잘 설치되었는지 확인한다. 모듈은 module.exports 또는 exports 객체를 통해 정의하고 외부로 공개한다. 그리고 공개된 모듈은 require 함수를 사용하여 임포트한다... npmNodeNode node cli 로 @font-face generator 만들기 - 1 그러다가 폰트들을 추가하고 각 폰트마다 @font-face 를 추가해서 사용하는 방식이 너무 귀찮다고 생각이 들어서 이걸 한번에 만들어주는 빌더가 있으면 좋겠다라는 생각을 하게 되었다. node 로 recursive 하게 폰트 파일들을 읽어와서 각 폰트 파일에 이름을 바탕으로 @font-face 를 만들고 거기에 font-family, src 를 추가해주는 방식으로 생각을 하였다. 예전에 n... Nodereact-formatclicommanderfont-faceNode [CS] Node.js Day-7 런타임이란 프로그래밍 언어가 구동되는 환경입니다. 쉽게 말해 프로그램이 동작할 때 프로그램이 동작하는 공간입니다. ex) Chrome, Safari 등 기존에는 JavaScript 런타임이 웹 브라우저 밖에 없었지만 node.js의 등장으로 브라우저가 아닌 공간에서도 실행될 수 있게 되었습니다. 웹 페이지 뿐 아니라 서버와 같은 다른 프로그램을 만들 수 있습니다. node.js는 JavaSc... 노드node.jsNodeNode