본문 바로가기

728x90

모든 카테고리

카테고리 없음 2023. 4. 11. [docker] compose.yml 파일 작성 🔵 compose.yml 파일이란? 다중 container Docker app 을 정의하고 실행하기 위한 도구이다. docker build 를 하게 되면 단일 폴더로 app을 서비스 하게 되는데, docker-compose.yml 은 여러 폴더의 복잡한 app을 쉽게 실행, 관리 할 수 있게 해준다. 🟢 작성예시 version: "3.9" services: express_server: build: ./server ports: - "5000:5000" depends_on: - db environment: - MONGODB_URI=mongodb://db:27017/color99b db: image: mongo:latest ports: - "27017:27017" next_server: build: ./ser..

[tpyescript] server 구축

카테고리 없음 2023. 4. 10. [tpyescript] server 구축 🔵 tpyesrcipt 로 server 여는 방법 server 폴더를 만들어 놓고 아래 순서를 따라한다. 🟢 terminal 세팅 npm init -y npm i express ts-node typescript dotenv nodemon cors npm i @types/express @types/node @types/cors 추후 next js (port : 3000) 과 연동하기 위해 cors도 설치해준다. - express : web application 구축 프로세스를 단순화 하는 node.js 용 웹 프레임워크 -> 쉽게 서버를 구성할 수 있게 만든 class 와 라이브러리의 집합체 - dotenv : .env 파일에서 application 으로 환경 변수를 로드할 수 있게 해주는 패키지. 데이터..

카테고리 없음 2023. 4. 7. [docker] dockerfile 작성 🔴 dockerfle - 코드 한 줄 한 줄을 layer 라고 부르며, 상단에 위치할 수록 변하지 않는 부분이, 하단에 위치할 수록 자주 변하는 부분이 위치하게 한다. 예를 들면 아래코드에서 # Use the official Node.js image as the base image FROM node:14 # Set the working directory WORKDIR /app # Copy the package.json and package-lock.json files to the working directory COPY package*.json ./ # Install the dependencies RUN npm install # Copy the rest of the application code to t..

카테고리 없음 2023. 4. 7. [docker] 도커란 🔵 docker - 사전적 정의 : Docker는 컨테이너화를 사용하여 애플리케이션 구축, 배포 및 관리 프로세스를 간소화하는 오픈 소스 플랫폼이다. 컨테이너는 애플리케이션과 해당 종속성을 함께 패키징하는 가볍고 휴대 가능하며 자급자족 가능한 단위로, 애플리케이션이 다양한 환경에서 일관되게 실행되도록 한다. - 정리하자면, 한 컴퓨터에서 환경 세팅 (node, vscode, photoshop 등) 을 하고나서 작업을 하다가도, 이직, 서버확장, 컴퓨터 교체 등등 여러가지 이유로 작업하던 환경을 옮겨야하는 상황이 발생한다. 이때 새로운 환경에서 작업하던 환경을 다시 세팅하는 것은 여간 번거로운 일이 아니고, 내가 한 게 아니라 연락이 닿지 않는 다른 사람이 만들어 놓았던 환경이라거나, 너무 구버전의 내용이..

[express] typescript로 next.js 외부서버 만들기

카테고리 없음 2023. 4. 6. [express] typescript로 next.js 외부서버 만들기 🟡 next.js 환경 설정 npx create-next-app servertest 연동할 nextjs front를 하나 미리 만들어둔다. 🔴 package 설치 (server 폴더 새로생성) //front nextjs 폴더와 다른 독립된 폴더를 하나 생성후 npm init -y npm install express npm install typescript @types/express npm install tsnode @types/tsnode 🟣 index.ts 파일 작성 express 서버를 설정하고, 구성하는 logic를 작성한다. import express, { Request, Response } from "express"; import cors from "cors"; const app = expres..

개발/Next.js 2023. 4. 6. [Next.js] 내장 서버의 기능과 외부서버의 필요성 🔵 nextjs 내장 서버? next js 에는 내장 서버가 있는데 이는 next js 환경이 구축될 때 node_modules 프로젝트 directroy의 종속성의 일부로 자동으로 포함되어서 직접 찾거나 수정할 수 있는 단일 파일이 아니다. 🟢 그렇다면 내장서버의 기능은? 기본 제공 서버는 들어오는 요청, 라우팅, 핫 모듈 교체 및 기타 개발 관련 작업을 처리한다. - 핫 모듈 교체 (HMR) : 개발자가 전체 페이지를 새로 고치지 않고도 코드의 변경사항을 볼 수 있는 기능. 코드가 변경되면 내장서버가 실시간으로 애플리케이션 업데이트를 처리하여 개발 프로세스를 더 빠르고 효율적으로 만든다. - Routing : application 에서 다양한 URL과 경로를 처리하기 위한 서버측의 routing을 제..

[MongoDB] db Collection, 데이터 입력

개발 2023. 4. 6. [MongoDB] db Collection, 데이터 입력 🔴 compass, shell 가동 compass 프로그램을 열고, new connection 을 누른후 바로 connect 버튼을 눌러 접속한다. mongoShell 을 실행한 후 compass 에서 connect한 localhsot:포트번호 의 포트번호를 입력해주어 들어간다. 🟡 db 조회. 명령어 show dbs 결과 위의 결과는 compass 에 ui로도 확인이 가능하다. 🟠 db 생성 명령어 use 결과 하지만 이렇게만 생성하면 compass ui로도, show dbs로도 확인이 불가능하다. 확인하려면 db안에 collection을 1개라도 만들고, 그 안에 값을 1개이상 넣어주어야 한다. 🟣 collection 생성 및 data 삽입 명령어 db..insertOne(data) 결과 🟢🔵

[mongoDB] 설치 및 세팅

개발 2023. 4. 6. [mongoDB] 설치 및 세팅 🔵 설치 아래 홈페이지에 접속하여 https://www.mongodb.com/try/download/community Try MongoDB Community Edition Try MongoDB Community Edition on premise non-relational database including the Community Server and Community Kubernetes Operator for your next big project! www.mongodb.com version 과 platform 선택후 download를 받는다. 🟢 추가 부가 기능 # MongoDB compass - mongoDB를 웹페이지가 아닌 window 상에서 프로그램으로 gui를 제공한다. # MongoDB She..

개발/Next.js 2023. 4. 5. Page 관리 🔴 Root Page (main Page) Root 폴더/src( create할때 옵션으로 src를 쓸지말지 결정한다) / pages / index.tsx 🟡 간단한 페이지 이동 (static routing) pages/index.tsx 코드 및 ui export default function Home() { return ( asd /pages/index.tsx /pages/sub/index.tsx /pages/sub/[as].tsx /pages/sub/[as].tsx ); } 위에서 /sub 로 이동하게되면 sub폴더에 있는 index.tsx를 실행하게 된다. 따라서 위와 같이 pages 폴더 안에 sub 폴더를 생성하고, index.tsx 를 생성한다 /pages/sub/index.tsx 코드 exp..

개발/Next.js 2023. 4. 5. [Next.js] 기본 Next.js 란? react에 없는 SSR, SSG, ISR 과 같은 기능들을 제공하는 react를 위한 오픈소스 자바스크립트 웹 프레임워크 react는 사용자의 웹 브라우저에서만 실행되기 때문에 SEO(search engine optimization)의 효과를 거의 볼 수 없고, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 실행 초기에 성능 부담이 생긴다. 위와 같은 특징들로 인해 만들어진 Server Side Rendering Framwork 이다. React + Express.js + React-Router-Dom + SSR 을 영리하게 합쳐놓은 기술 스택 위의 기능들을 그대로 가져와 쓴다는 게 아니라 저런 느낌의 라이브러리를 구현해 놓았다는 것이다. | 제공하는 기능 정적 사이트 생성 증분..

개발/JavaScript 2023. 4. 4. 코드 동작원리 예제 🔵 사용할 코드 router.post("/latestUser", async (req, res) => { const Op = Sequelize.Op; const tradeList = await User.findAll({ order: [["createdAt", "DESC"]], }); console.log("tradeList", tradeList); const tempTrade = []; const tempUser = []; for (let i = 0; i < tradeList.length; i++) { if (!tempTrade.includes(tradeList[i].sellerAddress)) { if (tempTrade.length < 3) { tempTrade.push(tradeList[i].user..

개발/JavaScript 2023. 4. 4. Javascript 기초 🔴 학습목표 실제로 눈으로 보고 작성하는 코드와 달리 컴퓨터 내부에서 동작하는 소스 및 원리는 눈에 보이지 않기에 추상적일 수 밖에 없다. 이 추상적인 개념과 원리를 이해하고 , 코드로 구체화할 수 있는 능력도 길러야한다. 🟡 JavaScript의 동작원리 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다. 자바스크립트 엔진은 싱글스레드 기반 언어인데, 싱글이라는 이름에서 알 수 있듯이 작업을 처리하는 공간이 하나기에 다른 작업을 수행하려면 현재 수행중인 작업이 끝날때까지 기다려야하는 문제점이 있다. 이러한 문제점을 해결하기위해 자바스크립트 런타임환경이 생겨났는데, 이는 오랜 시간이 걸리는 작업들은 백그라운드에서 처리하고, 간단하게 처리할 수 있는 작업들만 스택에서 처리하는 방식이다. 싱글스레..

이전 1 2 3 4 다음

Calendar

Tags

더보기

Archives

Visits

Today

Yesterday

티스토리툴바