mystudynote

Express는 Node.js를 위한 빠르고 간결한 웹 프레임워크로, 웹 애플리케이션과 API를 쉽게 구축할 수 있도록 도와줍니다. Express는 미들웨어와 라우팅 기능을 제공하여 서버 측 로직을 간단하게 작성할 수 있게 해줍니다.Express의 주요 개념미들웨어(Middleware):미들웨어는 요청(Request)과 응답(Response) 객체를 처리하는 함수입니다. 미들웨어는 요청-응답 주기에서 여러 단계로 나뉘며, 각 단계에서 특정 작업을 수행할 수 있습니다. 미들웨어는 app.use()를 통해 등록되며, 순차적으로 실행됩니다.라우팅(Routing):라우팅은 클라이언트 요청에 대해 서버가 어떤 응답을 할지 결정하는 과정입니다. Express에서는 app.get(), app.post(), app.p..

웹 개발을 하다 보면 request를 할 때 CORS policy에 의해 에러가 발생하는 상황이 많다.CORS가 무엇인가?? CORS 웹 브라우저에서 실행되는 웹 애플리케이션이 다른 도메인, 프로토콜 또는 포트에서 리소스를 요청할 수 있도록 허용하는 보안 기능기본적으로 웹 브라우저는 동일 출처 정책 (Same-Origin Policy)를 따른다. 따라서 웹 페이지가 자신이 로드된 출처와 다른 출처의 리소스에 접근하려는 것을 제한한다.CORS는 이 제한을 완화하여 특정 조건 하에서 다른 출처의 리소스에 접근할 수 있게 만든다.여기서 출처(Origin)는 프로토콜(http/https), 도메인, 포트 번호를 포함한 세 요소로 구성된다. 같은 IP를 사용하더라도 포트 번호가 다르면 다른 출처로 간주된다. CO..

결과http://본인의 서버 IP:port/path 를 입력해서 위와 같이 서버의 폴더에 접근할 수 있게 만들어보자 ! 준비 사항ubuntu 서버에 apache가 설치되어 있다.sudo apt updatesudo apt install apache2 config 파일 수정/etc/apache2/apache2.conf 파일에서, 접근하고자 하는 폴더로의 엑세스 권한을 부여애햐 한다. Options Indexes FollowSymLinks AllowOverride None Require all granted DocumentRoot / Alias 설정/etc/apache2/sites-available/000-default.conf 파일에서, documentroot과 Alias를 설정할 수 있다...

WSL: Windows Subsystem for Linuxcra: create-react-app WSL 설치wsl --installUbuntu 22.04가 설치된다. 설치 후 다시 시작하면 wsl을 검색 및 실행할 수 있다. Node 설치 및 CRAnvm install --lts #최신 버전 node 설치npm i -g typescript ts-node #타입스크립트 컴파일러 설치npx create-react-app --template typescript #Node.js 프로젝트 생성

우분투에 MonggDB 설치하기 https://velog.io/@seungsang00/Ubuntu-MongoDB-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-Ubuntu-20.04 [Ubuntu] MongoDB 설치하기 (Ubuntu 20.04) 터미널 창에서 위의 명령어를 입력해 Description 부분을 확인하면 현재 설치된 우분투의 버전을 확인할 수 있다.터미널에서 다음 명령을 실행하여 https://www.mongodb.org/static/pgp/server-4.4.asc 에서 MongoDB velog.io 이 포스트를 그대로 따라했다. :> 기본 db 관련 명령 mongo #mongo 쉘 진입 show dbs #db목록 조회 use #db 선택하기 or 없으면 생성하기 d..

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 세팅 테일윈드 CSS는 부트스르탭과 같은 CSS 프레임워크를 쉽게 개발할 수 있게 해주는 저수준 프레임워크이다. 리액트 프레임워크와 함께 사용해서 컴포넌트 스타일링을 쉽게 할 수 있다. 테일윈드 CSS는 PostCSS 플러그인 방식으로 동작한다. 따라서 PostCSS, autoprefixer, 테일윈드CSS를 함께 설치해야 한다. npm i -D postcss autoprefixer tailwindcss #구성 파일 만들기 npx tailwindcss init -p #daisyui 플러그인 설치 npm i -D daisyui #기타 플러그인 설치 npm i -D @tailwindcss/line-..

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 EventBubbling.tsx import type { SyntheticEvent } from "react" export default function EventBubbling(){ const onDivClick = (e: SyntheticEvent) => { const {isTrusted, target, bubbles, currentTarget} = e console.log('click event bubbles on ', isTrusted, target, bubbles, currentTarget) } const onButtonClick = (e:SyntheticEvent) => { const..

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 컴포넌트란 화면 UI를 처리하는 클래스를 의미한다. 리액트 컴포넌트(리액트 프레임워크가 제공, ex. h1, div)와 사용자 정의 컴포넌트로 나뉜다. 그리고 리액트에서 컴포넌트는 클래스 기반 컴포넌트와 함수형 컴포넌트가 있다. 1. 클래스 컴포넌트 1-1. 속성 Props 2. 함수 컴포넌트 클래스 컴포넌트 src/App.tsx 클래스 컴포넌트는 react 패키지가 제공하는 Component 클래스를 상속받아야 하며, render 메서드를 포함해야 한다. render 메서드는 null / React.createElement 호출의 반환값 / JSX 등으로 가상 DOM 객체를 반환해야 한다. -..

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 React.createElement 호출의 복잡성 문제 createElement는 가상 DOM 객체를 만들어 주는 함수지만 HTML 요소가 부모/자식 관계로 구성되면 코드가 지나치게 복잡해진다. src/index.tsx 파일 import ReactDOM form 'react-dom/client' //더 작성하기 쉬운 이름으로 고침 const CE = React.createElement //가상 DOM (pVirtualDOM) 생성 const rootVirtualDOM = CE('ul',null,[ CE('li', null, [ CE('a', {href: 'http://www.google.com'..

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 문서 객체 모델 (Document Object Model, DOM) 웹 브라우저는 HTML 문서를 화면에 출력할 때 자바스크립트 객체 조합으로 바꾼다. 이 자바스크립트 객체는 모두 자신의 특징에 맞는 인터페이스를 구현하는데, 인터페이스를 총칭하여 문서 객체 모델(DOM)이라고 한다. DOM은 웹 페이지를 트리 구조로 표현한다. HTML 요소들은 이 트리의 노드로서 추가된다. Javascript를 사용해서 노드들의 스타일, 속성 등을 업데이트할 수 있다. 즉, DOM은 javascript가 웹 페이지를 쉽게 수정할 수 있게 만든 것이다. ==> 자바스크립트만 사용하는 프런트엔드 개발은 물리 DOM..