🌱 𝐣𝐣𝐢𝐧𝐠𝐥𝐞 𝐝𝐞𝐕𝐥𝐨𝐠

Socket IO 실시간, 양방향, event 기반의 통신을 하는 framework webSocket은 위의 통신을 제공하는 여러 방법 중 하나 Socket IO는 webSocket의 부가기능 (X) Socket IO는 가끔 webSocket을 이용 (O) 만약 webSocket 이용이 불가능하면, Socket IO는 다른 방법을 이용해서 계속 작동 자동 재연결 지원, 연결 끊김 확인, 바이너리 지원 탄력성, 신뢰성 1. get socket server WebSocket //server.js const httpServer = http.createServer(app); const wsServer = new ws. WebSocketServer({httpServer}); Socket IO 유저에게 URL 제공..

1. express 로 서버 구축 express ? node.js의 프레임워크 서버 사이드 프레임워크로 Node.js의 API를 단순화하고, 쉽게 서버 구축 가능 express application으로부터 http server 생성 import express from 'express'; import http from 'http'; const app = express(); const server = http.createServer(app); 2. http 서버 위에, webSocket 서버 구축 -> 같은 포트 이용 import ws from 'ws'; //http 서버 전달 const wss = new we.WebSocketServer({ server }); 3. WebSocket Connection :..

1. 프로젝트 생성 -> VSCode 로 실행 $ mkdir prjname $ cd prjname $ npm init -y $ code . 2. git 설정 $ git init . $ git remote add origin gitURL $ git push -u origin main 3. 기본 파일 생성 $ touch README.md $ touch .gitignore 4. nodemon 설정 $ npm i nodemon -D // nodemon.json { "exec" : "babel-node src/server.js" } 5. babel 설정 $ npm i @babel/core @babel/cli @babel/node @babel/preset-env -D { "presets" : ["@babel/pre..

Jekyll 2008 release Ruby로 작성된 정적 사이트 생성기(SSG, Static Site Generator) JavaScript가 실행되면 빈 HTML 페이지 안에 마크업을 추가해주는 SPA(Single Page Application)와 다르게, 개발 후 Build 과정에서 마크업 생성 -> 검색 엔진 최적화(SEO) Github Pages에서 기본적으로 지원하기 때문에, 리포지토리에 올리면 자동으로 웹 페이지 호스팅 템플릿 엔진과 내부 데이터 쿼리는 Liquid 언어 사용 Gatsby 2015 release JAM Stack(JavaScript, API, Markup) 웹 구성 방법 JAM Stack 동작 원리 기존 : 서버의 데이터베이스 또는 CMS(Content Management S..

과거 웹사이트 배포 작성된 프로그램을 돌리는 서버를 두고, 직접 하드웨어나 운영체제 그외 모든 부분을 직접 관리 Iaas (Infrastructure as a Service) AWS, Azure 같은 클라우딩 컴퓨팅 서비스 등장 서버 인프라들을 공급 업체에서 관리하고, 사용자는 쉽게 웹 배포 가능 서버 인프라를 구성하고 웹을 배포하면 24시간 코드 구동 Faas (Functions as a Service) AWS lambda를 기반으로 하는 플랫폼 서버리스 : 위의 IaaS처럼 서버를 관리할 필요도 없이 클라우드 제공업체에 리소스(프로그램)만 할당하면, 바로 프로덕션 환경으로 배포 e.g. Netlify, Vercel 프로젝트를 여러개의 함수로 쪼개서 -> 매우 거대하고 분산된 컴퓨팅 자원에 함수를 등록..

기존 코드 비동기적으로 getMovie 함수가 실행되고 완료 후, getVideo 함수 실행 => 데이터 양이 많을 경우 비효율적 async function getMovie(id: string) { const response = await fetch(`${API_URL}/${id}`); return response.json(); } async function getVideos(id: string) { const response = await fetch(`${API_URL}/${id}/videos`); return response.json(); } //dynamic route export default async function MovieDetail({ params: { id } }: { params: {..

client component에서 기존의 API와 소통하던 방식 useEffect useState -> metadata 사용 불가 로딩 state 구현 'use client'; import { useEffect, useState } from 'react'; /* useState의 사용으로 인해, 사용 불가능 export const metadata = { title: 'Home', }; */ export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); //useState -> interactive component를 사용하겠다. -> "use c..

서버 컴포넌트 vs 클라이언트 컴포넌트 처음 백엔드 서버에서 클라이언트 컴포넌트와 서버 컴포넌트가 모두 렌더링 클라인트 컴포넌트만 프론트엔드에서 다시 렌더링, 다시 hydrated(activate) 클라이언트 컴포넌트의 자바스크립트는 사용자가 다운로드하여 실행하고, 서버 컴포넌트의 자바스크립트는 사용자가 다운로드 X 서버 컴포넌트는 딱 한번만 서버에 의해 실행 -> 유저는 HTML 얻음 그 다음, 클라이언트 컴포넌트 hydrate -> 상호작용 가능 모든 이벤트 리스너 추가, useState, API, 지리 정보..etc 원하는 경우 클라이언트 컴포넌트를 서버 컴포넌트 내에 포함 가능 (반대의 경우 X) "use client"를 쓰지 않으면, 기본적으로 모두 서버 컴포넌트이다.

문제 상황 로컬에 프로젝트 생성 git init + init commit 깃허브에서 레파지토리 생성 + readme initial commit 두 개의 서로 다른 시작점 commit으로 머지 불가능 에러 메세지 fatal : refusing to merge unrelated histories. 해결 방법 서로 관련 없는 커밋의 머지 허용 명령어 적용 --allow-unrelated-histories ex.) 머지 커밋 i ) vim edit mode 메세지 작성 esc ) to quit input mode :wq ) save(wrote) and quiet 해결 완료 참고 https://gdtbgl93.tistory.com/63 Git push가 안되는 경우 (fatal: refusing to merge ..

Library (ex. React) 코드 내에서 유저의 필요에 의해 이용, 활용하는 것 ex. 객체 지향 프로그래밍..etc => 구조에 관한 모든 결정은 유저가 내린다. React : UI 인터페이스를 build 하는데 사용하는 라이브러리 Framework (ex. Next.js) 프레임워크가 나의 코드를 활용한다 => 유저의 주도권 X 여러 결정을 유저 대신해주고, 자동화 시킨다 유저가 프레임워크의 규칙을 지켜야한다.