junnnhhh

https://ko.legacy.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.legacy.reactjs.org Component는 React Element를 생성하기 위해 쓰이는 틀이다. Component를 통해 UI를 재사용 가능한 여러 조각으로 나누고, 각 조각을 사용할 수 있다. (Component 추출) Component는 props라는 속성을 사용하여 다른 엘리먼트를 만들어 낼 수 있다. Component의 종류 Function Component function Welcome(props) { return Hello, {pro..

Chroma DB 공식 홈페이지에서는 client 언어로 Python, NodeJS에 대한 가이드를 제공한다. 따라서, 나는 NodeJS를 사용해서 Chroma DB를 설치하는 작업을 진행할 예정이다. https://docs.trychroma.com/getting-started 🔑 Getting Started | Chroma Select a language docs.trychroma.com Visual Studio Code, Python, Microsoft Visual C++ 14 이상, NodeJS를 미리 설치를 해주고 다음 과정을 진행하자. 1. NodeJS에서 chromadb 패키지 다운로드 받기 npm init npm install --save chromadb 이제 chromadb에 서버를 구성을..

https://ko.legacy.reactjs.org/docs/rendering-elements.html 엘리먼트 렌더링 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org Element는 React App의 가장 작은 단위이다. React에 모든 엘리먼트는 root 엘리먼트 안에 들어가게 되는데, 이 모든 엘리먼트는 React DOM에서 관리하고,` root 엘리먼트는 root DOM 노드라고도 한다. React 엘리먼트를 렌더링 하기 위해서는 우선, DOM 엘리먼트를 ReactDOM.createRoot()에 전달하고, React 엘리먼트를 root.render()에 전달해야 한다. const root = Rea..

https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org JSX(JavaScript Xml)이란? → 자바스크립트의 문법을 확장시킨 것, JavaScript + XML / HTML 이다. ex) JSX 코드 const element = Hello, world!; JSX의 역할 JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 된다. JSX → JavaScript로 변환을 도와주는 함수인 React.createElement가 내장되어 있음. // JSX를 사용한 코드 cl..

배열이란 리스트처럼 다수의 값들을 순차적으로 포함하고 있는 하나의 객체이다. 배열 만들기 var shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; 배열은 보통 대괄호를 사용하여 표시를 한다. 또한, JavaScript의 경우, 배열 내부의 한 타입으로만 이루어지는 것이 아닌 다양한 형태의 요소들을 함께 넣을 수 있다. var sequence = [1, 1, 2, 3, 5, 8, 13]; var random = ["tree", 795, [0, 1, 2]]; 배열 내부 요소의 총 개수를 알고 싶은 경우 array.length 를 통해 알 수 있다. ※ 간혹 length()로 헷갈릴 수 있는데 이 부분은 조심하자! var sequence = [1, 1..

타입스크립트에서는 .ts 파일을 모듈이라고 한다. 단일 타입스크립트 파일 하나로 프로젝트를 구현해도 되지만, 기능이 다양하고 많은 경우에는 한 파일로 관리하기에 코드 관리 및 유지 보수 등 관리 측면에서 효율성이 좋지 않다. 이를 위해서 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할하는 '모듈화(modulization)' 라는 작업을 하는데 타입스크립트에서는 import 및 export를 사용하여 모듈화를 할 수 있다. hello.ts const hello = function() { // 보낼 키워드 앞에 export 키워드를 작성한다. console.log("안녕하세요") } const bye = function() { console.log("안녕히 가세요") } 이 hello.ts 라는 파..

JavaScript에서 값을 비교할 때, 보통 동등 연산자(==, !=)를 사용하여 비교할 두 변수의 값 일치 여부를 판단한다. 이 때, 변수 타입에 상관없이 값만 비교하여 일치 여부를 판단하게 되는데 값 뿐만 아니라 타입 일치 여부도 비교를 하고 싶은 경우에 사용하는 것이 '일치 연산자'이다. let a = 1; let b = '1'; console.log(a == b); // true console.log(a != b); // false console.log(a === b); // false console.log(a !== b); // true

웹 서버 호스트에서 경로를 통해 정적 파일을 참조하는 경우가 있다. ex) localhost:3000/public/css/test.css → public/css/test.css 파일을 보여줌. 이미지, css 파일 및 javascript 파일 같으 정적 파일을 제공하려면 epxpress.static 함수를 사용해야 한다. 정적 파일이 포함된 디렉토리의 이름을 express.static 함수의 전달하면 파일의 직접적인 참조를 할 수 있다. app.use(express.static('public')); // public 이라는 이름의 디렉토리를 정적 파일을 제공하는 디렉토리로 설정 public 디렉토리 구조가 다음과 같다고 하자. 그러면 다음과 같이 public 디렉토리에 있는 정적 파일을 로드할 수 있다...

Cookie 란? → 웹 서버가 생성해서 웹 브라우저로 전송하는 작은 정보 파일. cookie-parser 사용하기 1) 모듈 설치 npm install cookie-parser 2) 모듈 임포트 const cookieParser = require('cookie-parser'); 3) 사용법 const express = require('express'); const cookieParser = require('cookie-parser'); const app = expres(); app.use(cookieParser()); app.get('/', (req, res) => { req.cookies; // 쿠키에 저장된 내용을 가져옴 res.cookie( key, value, options ); // 쿠키에 k..

한 서비스에서 url 접속 시, 로그인 접속 여부에 따라 접속이 가능, 아니면 로그인 페이지로 이동하여 로그인 후, 접속할 수 있게 하는 처리 과정이 필요할 것이다. 이를 해결하기 위해서는 url 이동 시, 로그인 검사 여부를 하는 interceptor에서 처리를 하게끔 하는 것이 좋은 방법이라 생각이 들었다. express의 경우 app.use()를 이용하여 손쉽게 해결할 수 있었다. app.use(function(req, res, next) { const originUrl = req.originalUrl; if(/* 로그인 ok ex) 세션 정보로 확인 */) { next(); // url 이동 } else /* 로그인 false인 경우 */ { res.redirect("/login"); // 로그인..