spring-boot
너무 헷갈리는 동기와 비동기 알아보기
웹 페이지에서는 동기적 동작과 비동기적 동작이 발생할 수 있다. 이번 포스팅에서는 spring boot를 이용해 동기와 비동기 동작에 대해 알아본다. Synchronous 동기적 방식은 하나의 요청이 발생하고 해당 요청이 끝나기 전까지 다른 작업을 할 수 없는 방식이다. 하나의 요...
#web
17개의 글
spring-boot
spring boot와 react를 사용해 웹 서비스 개발하기
Spring boot 와 react를 사용하여 웹 서비스를 개발해 보려고 한다. spring boot에 관견된 내용은 스프링 부트 핵심 가이드 책을 참고하였다. 기술 스택 name version Yarn 1.22.18 Spring Boot 2.5.6 React 18.2....
web
Node js 프로젝트에서 Swagger API 문서 자동화
swgger를 사용해보자 이전 프로젝트에서는 postman을 이용해 백엔드 api 문서를 생성했다. postman도 편하고 잘 동작하지만, swagger api를 사용해보려고 한다. yml파일을 생성해 하나의 파일에 정의하는 방식과 라우터 파일들에 직접 정의 할 수 있는 차이가 있...
web
REST API, path parameter와 query string의 이해
REST REST는 자원을 이름으로 구분해서 자원의 상태를 주고 받는 것을 의미한다. REST의 구성 요소는 Resource(자원), Verb(행위), Representation of Resource(표현)이 있다. Resource 모든 자원에는 고유한 id가 존재하고, 자원은 서...
web
Refresh Token이란??
Access Token 로그인이 필요한 모든 웹 페이지에서는 사용자가 인증되었는지 확인해야 한다. 일반적으로 access token은 JWT(jsonwebtoken)을 많이 사용하고, 헤더의 authorization에 저장해서 페이지마다 token을 검증하게 된다. Token 탈취...
web
Typescript class
OOP(Object Oriented Programming) Typescript는 객체 지향 프로그래밍(OOP)의 특징을 가지고 있다. OOP는 객체의 모임으로 컴퓨터 프로그램을 파악하려는 프로그래밍 방식이다. Typescript는 인터페이스, 상속, 정적 메서드 구현 등의 패턴을 ...
web
Typescript 시작하기
타입이 필요한 이유 Javascript에서는 타입이 없기 때문에 타입에 의한 에러가 발생해도 코드를 실행시켜 보기 전까지 오류를 알기 힘들다. typescript는 타입에 대한 오류가 발생했을 때 미리 에러가 발생하는 부분을 알려준다. 타입을 정의하여 개발 단계에서 실수를 줄이고,...
web
Spring boot 시작하기(view와 프로젝트 build)
view settings // controller/Hellocontroller.java @Controller public class Hellocontroller { @GetMapping("hello") public String hello(Model model) { model.add...
web
Cross-Origin Resource Sharing(CORS)
MDN web docs를 정리하였습니다. CORS(Cross-Origin Resouce Sharing) 다른 도메인에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도...
web
백엔드 3계층 구조로 구현한 프로젝트 템플릿
3계층 구조 설계 3계층 구조 설계는 백엔드 코드를 3개의 구조로 나눠 구현하는 것을 말한다. Controller, Service, Data Access계층으로 나눠져 있다. Data access계층은 Model 계층으로도 쓰인다. Controller layer 사용자의 reque...
web
리액트 Hook에 대해 알아보자
React hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. -react 공식 문서- Hook을 사용하면 계층의 변화 없이 상태 관련 로직을 재사용 가능하게 ...
web
async와 await
비동기(asynchronous) Javascript는 single thread 이므로 서버 요청을 기다려야 하는 경우 사용자는 멈춰있는 브라우저를 보게 된다. 그러므로 동기 처리가 아닌 비동기 처리가 필요하다. 비동기는 코드의 순서와 다르게 실행되는 것을 말한다. 비동기 처리 코드...
web
Middleware에 대해 알아보자
Middleware Express.js 동작의 핵심인 미들웨어는 Http 요청과 응답 사이에서 단계별 동작을 수행해주는 함수이다. middleware의 동작 원리 Express.js의 미들웨어는 HTTP 요청이 들어온 순간부터 시작된다. 미들웨어는 HTTP 요청과 응답 객체를 처리...
web
Node js 프로젝트 시작하기 (npm과 모듈 사용하기)
NPM npm은 node package manager로 프로젝트의 의존성을 관리할 수 있다. package.json 생성하기 npm init 프로젝트 디렉토리 안에서 위 명령어를 사용하면 package.json파일을 생성되고 Node js프로젝트가 된다. 파일에서는 프로젝트의 정보...
web
javascript 내장 함수 (문자열 다루기, map, filter, reduce)
이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다. 문자열 조작하기 문장에서 각 알파벳이 몇개 존재하는지 출력하는 알고리즘을 구현해 보았다. Javascript의 문자열을 조작할 수 있는 내장함수를 사용했다. const stringControll = "hi my n...
web
javascript(DOM, Event, Class)
이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다. javascript의 기초적인 문법은 바닐라 JS로 크롬 앱 만들기 포스트에 있다. DOM DOM은 Document Object Model로 문서(document)를 객체(object)로 표현(model)하는 것이...
web
Django model 다루기 (점프 투 장고)
점프 투 장고(여기)를 정리한 포스트입니다. SQLite를 데이터베이스로 사용한다 python manage.py migrate migrate명령어를 사용하여 admin, auth, contenttypes, sessions 앱들이 사용하는 테이블들이 생성된다 모델 작성하기 model...