Framework
-
Node.js 공부 중 미들웨어에 대한 개념을 확실히 하고자 정리한 글입니다. 미들웨어란? 미들웨어(Middleware)는 이름 처럼 HTTP 요청과 응답의 처리 과정 중간에 위치하먀, 어플리케이션의 동작을 제어하고 변형하는 함수 또는 모듈을 의미합니다. 저는 미들웨어를 요청과 응답의 중간 단계라고 생각하고 공부하였습니다. // 미들웨어 함수 예 const myMiddleware = (req, res, next) => { console.log('This is a middleware.'); next(); // 다음 미들웨어 함수 호출 }; app.use(myMiddleware); // Express에서의 사용 예 미들웨어 함수는 세 개의 인자를 받습니다. req는 HTTP 요청 객체, res는 HTTP 응..
[Node.js] 미들웨어에 대해 알아보자Node.js 공부 중 미들웨어에 대한 개념을 확실히 하고자 정리한 글입니다. 미들웨어란? 미들웨어(Middleware)는 이름 처럼 HTTP 요청과 응답의 처리 과정 중간에 위치하먀, 어플리케이션의 동작을 제어하고 변형하는 함수 또는 모듈을 의미합니다. 저는 미들웨어를 요청과 응답의 중간 단계라고 생각하고 공부하였습니다. // 미들웨어 함수 예 const myMiddleware = (req, res, next) => { console.log('This is a middleware.'); next(); // 다음 미들웨어 함수 호출 }; app.use(myMiddleware); // Express에서의 사용 예 미들웨어 함수는 세 개의 인자를 받습니다. req는 HTTP 요청 객체, res는 HTTP 응..
2023.12.20 -
Node.js 공부하면서 시퀄라이저에 대해 알게되어, 공부한 내용을 정리한 글입니다. 시퀄라이저란? 시퀄라이저(Sequelize)는 Node.js에서 사용되는 ORM(객체 관계 매핑) 라이브러리 중 하나입니다. 스프링을 아시는 분들은 ORM에 대해서 익숙하시겠지만, 지금까지 시퀄라이저 없이 Node.js 환경에서 api를 만들고 계셨더라면, ORM이라는 개념이 낯설 수 있습니다. ORM 이란? ORM은 Object-relational Mapping의 약자로 데이터베이스와 객체 지향 프로그래밍 언어 간의 상호 작용을 간소화하는 프로그래밍 기술로, 객체와 데이터베이스간의 패러다임 불일치를 해결하기 위해 도입되었습니다. 패러다임 불일치란 객체 지향 프로그래밍 언어에서 사용되는 데이터 모델과 관계형 데이터베이스..
[Node.js] 시퀄라이저와 ORM, 프로젝트 템플릿Node.js 공부하면서 시퀄라이저에 대해 알게되어, 공부한 내용을 정리한 글입니다. 시퀄라이저란? 시퀄라이저(Sequelize)는 Node.js에서 사용되는 ORM(객체 관계 매핑) 라이브러리 중 하나입니다. 스프링을 아시는 분들은 ORM에 대해서 익숙하시겠지만, 지금까지 시퀄라이저 없이 Node.js 환경에서 api를 만들고 계셨더라면, ORM이라는 개념이 낯설 수 있습니다. ORM 이란? ORM은 Object-relational Mapping의 약자로 데이터베이스와 객체 지향 프로그래밍 언어 간의 상호 작용을 간소화하는 프로그래밍 기술로, 객체와 데이터베이스간의 패러다임 불일치를 해결하기 위해 도입되었습니다. 패러다임 불일치란 객체 지향 프로그래밍 언어에서 사용되는 데이터 모델과 관계형 데이터베이스..
2023.12.17 -
CORS란? CORS (Cross-Origin Resource Sharing) Policy(정책)는 웹 브라우저에서 실행되는 웹 애플리케이션들이 다른 도메인(origin)에 있는 리소스에 접근할 수 있는 권한을 부여하거나 제한하는 보안 정책입니다. 위 에러는 CORS 에러 입니다. 아마 다들 한 번 쯤은 봤을 에러인데요. 이 글에서는 왜 이러한 에러가 발생하는지, 그리고 어떻게 해결하는 지에 대해 아주아주 간략하게 정리해 보겠습니다. CORS에 대한 개념을 알아보기 위해 이 글을 보시는 것은 추천드리지 않습니다 🥲 다소 생략된 부분이 있다고 느끼실 수 있어요! CORS에러가 발생하는 이유 앞서 말했듯이 CORS는 다른 도메인에 있는 리소스에 접근하는 것과 관련이 있습니다. 여기서 다른 도메인(origin..
[React][Axios] CORS에러 발생 이유와 proxy를 통한 해결CORS란? CORS (Cross-Origin Resource Sharing) Policy(정책)는 웹 브라우저에서 실행되는 웹 애플리케이션들이 다른 도메인(origin)에 있는 리소스에 접근할 수 있는 권한을 부여하거나 제한하는 보안 정책입니다. 위 에러는 CORS 에러 입니다. 아마 다들 한 번 쯤은 봤을 에러인데요. 이 글에서는 왜 이러한 에러가 발생하는지, 그리고 어떻게 해결하는 지에 대해 아주아주 간략하게 정리해 보겠습니다. CORS에 대한 개념을 알아보기 위해 이 글을 보시는 것은 추천드리지 않습니다 🥲 다소 생략된 부분이 있다고 느끼실 수 있어요! CORS에러가 발생하는 이유 앞서 말했듯이 CORS는 다른 도메인에 있는 리소스에 접근하는 것과 관련이 있습니다. 여기서 다른 도메인(origin..
2023.10.16 -
RestTemplate RestTemplate는 스프링 프레임워크가 제공하는 클래스로, RESTful 웹 서비스와 상호작용 하는 과정을 단순화하여 편리하게 API를 호출할 수 있습니다. RestTemplate의 동작 원리 어플리케이션이 RestTemplate를 생성합니다. (URI, HTTP 메서드 등 헤더를 담아서 요청함) RestTemplaterk HttpMessageConverter를 사용하여 requestEntity를 요청 메세지로 변환합니다. RestTemplate가 ClientHttpRequestFactory로 부터 ClientHttpRequest를 가져와서 요청을 보냅니다. ClientHttpRequest는 요청 메세지를 만들어 HTTP 프로토콜을 통해 서버와 통신합니다. RestTempla..
[Spring] Rest Template란?RestTemplate RestTemplate는 스프링 프레임워크가 제공하는 클래스로, RESTful 웹 서비스와 상호작용 하는 과정을 단순화하여 편리하게 API를 호출할 수 있습니다. RestTemplate의 동작 원리 어플리케이션이 RestTemplate를 생성합니다. (URI, HTTP 메서드 등 헤더를 담아서 요청함) RestTemplaterk HttpMessageConverter를 사용하여 requestEntity를 요청 메세지로 변환합니다. RestTemplate가 ClientHttpRequestFactory로 부터 ClientHttpRequest를 가져와서 요청을 보냅니다. ClientHttpRequest는 요청 메세지를 만들어 HTTP 프로토콜을 통해 서버와 통신합니다. RestTempla..
2023.09.09 -
OAuth 앱 등록하기 깃허브에서 Setting > Developer Setting > OAuth Apps > Register a new application 으로 이동하여 OAuth 로그인을 할 앱을 등록해줍니다. 저는 현재 서버를 배포하지 않고 로컬에서 작업하고 있기 때문에 Hompage URL은 http://localhost:8080으로 해줬습니다. Authorization callback URL에는 로그인 후 돌아갈 즉 redirect url을 입력해주세요 토큰 생성하기 Register application을 누르고 바로 다음 화면에서 Generate a new client secret을 클릭하면 토큰이 발급됩니다. 발급받은 토큰은 Spring에서 사용되니 어딘가에 복사 해놓으세요 Spring 설..
[Spring] Spring에서 깃허브 OAuth 로그인하기OAuth 앱 등록하기 깃허브에서 Setting > Developer Setting > OAuth Apps > Register a new application 으로 이동하여 OAuth 로그인을 할 앱을 등록해줍니다. 저는 현재 서버를 배포하지 않고 로컬에서 작업하고 있기 때문에 Hompage URL은 http://localhost:8080으로 해줬습니다. Authorization callback URL에는 로그인 후 돌아갈 즉 redirect url을 입력해주세요 토큰 생성하기 Register application을 누르고 바로 다음 화면에서 Generate a new client secret을 클릭하면 토큰이 발급됩니다. 발급받은 토큰은 Spring에서 사용되니 어딘가에 복사 해놓으세요 Spring 설..
2023.09.01 -
@OneToMany @OneToMany 어노테이션은 하나의 엔티티와 다른 엔티티간의 일대다 관계를 매핑하는데 사용됩니다. 일대다 관계에서는 하나의 인스턴스가 다른 엔티티의 여러 인스턴스와 연결됩니다. @Entity public class Department { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; @OneToMany(mappedBy = "department", cascade = CascadeType.ALL) private List employees = new ArrayList(); } @Entity public class Employee { @Id @GeneratedValue..
[SpringBoot] @OneToMany, @ManyToOne, @ManyToMany 연관 관계 매핑, @JoinTable@OneToMany @OneToMany 어노테이션은 하나의 엔티티와 다른 엔티티간의 일대다 관계를 매핑하는데 사용됩니다. 일대다 관계에서는 하나의 인스턴스가 다른 엔티티의 여러 인스턴스와 연결됩니다. @Entity public class Department { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; @OneToMany(mappedBy = "department", cascade = CascadeType.ALL) private List employees = new ArrayList(); } @Entity public class Employee { @Id @GeneratedValue..
2023.08.30 -
스프링 시큐리티란? Spring Security는 자바 기반 웹 애플리케이션을 위한 보안 서비스를 제공합니다. Spring의 보안을 위한 표준 라이브러리로 사용됩니다. 스프링 시큐리티가 제공하는 기능은 다음과 같습니다. 인메모리 사용자 하나를 포함하는 AuthenticationManager 빈 사용자 이름은 user이고 암호는 콘솔에 출력됩니다 /css 나 /image 같은 공용 정적 리소스 위치를 위해 무시되는 경로, 다른 모든 엔드포인트에 대한 HTTP 기본 인증 스프링의 ApplicationEventPublisher 인터페이스로 게시되는 스프링 이벤트 자동 생성되는 기본 로그인 페이지 사용 예시 @Configuration @EnableWebSecurity public class SecurityCon..
[SpringBoot]스프링 시큐리티란? (Spring Security)스프링 시큐리티란? Spring Security는 자바 기반 웹 애플리케이션을 위한 보안 서비스를 제공합니다. Spring의 보안을 위한 표준 라이브러리로 사용됩니다. 스프링 시큐리티가 제공하는 기능은 다음과 같습니다. 인메모리 사용자 하나를 포함하는 AuthenticationManager 빈 사용자 이름은 user이고 암호는 콘솔에 출력됩니다 /css 나 /image 같은 공용 정적 리소스 위치를 위해 무시되는 경로, 다른 모든 엔드포인트에 대한 HTTP 기본 인증 스프링의 ApplicationEventPublisher 인터페이스로 게시되는 스프링 이벤트 자동 생성되는 기본 로그인 페이지 사용 예시 @Configuration @EnableWebSecurity public class SecurityCon..
2023.08.23 -
JSX란? 리액트에서 컴포넌트는 자바스크립트 함수로 작성합니다. 이 함수의 반환값은 HTML 값입니다. 이처럼 자바스크립트와 HTML태그를 섞어서 사용하는 문법을 자바스크립트 XML 즉, JSX라고 합니다. JSX는 공식 자바스크립트 문법은 아니지만, 리액트 공식 문서의 예제로도 사용될 만큼 많은 리액트 개발자가 사용합니다. JSX와 자바스크립트 표현식 JSX 문법을 이용하면 HTML태그에서 자바스크립트 표현식을 직접 사용할 수 있습니다. Body.js import React from "react"; function Body(){ const name = 'react' return ( body {name} ); } export default Body; App.js import React from "reac..
[React] JSX와 자바스크립트 표현식JSX란? 리액트에서 컴포넌트는 자바스크립트 함수로 작성합니다. 이 함수의 반환값은 HTML 값입니다. 이처럼 자바스크립트와 HTML태그를 섞어서 사용하는 문법을 자바스크립트 XML 즉, JSX라고 합니다. JSX는 공식 자바스크립트 문법은 아니지만, 리액트 공식 문서의 예제로도 사용될 만큼 많은 리액트 개발자가 사용합니다. JSX와 자바스크립트 표현식 JSX 문법을 이용하면 HTML태그에서 자바스크립트 표현식을 직접 사용할 수 있습니다. Body.js import React from "react"; function Body(){ const name = 'react' return ( body {name} ); } export default Body; App.js import React from "reac..
2023.08.15 -
node, npm 버전 확인하기 cmd에 node -v 와 npm --version 을 입력하여 node와 npm이 설치되어 있는지 확인합니다. yarn install npm install -g yarn 을 입력하여 yarn 을 설치하고 yarn --version 으로 버전을 확인하여 잘 설치 되었는지 확인합니다. yarn 으로 react install yarn global add create-react-app 으로 create-react-app 을 설치합니다. 그 후 create-react-app 프로젝트명 을 입력하여 해당 프로젝트에 리액트 앱을 생성합니다. cd로 생성한 디렉토리로 이동 후 yarn start를 입력하면 생성한 리액트 앱이 실행됩니다! react-router-dom 설치 yarn a..
[React] npm 으로 yarn 설치 & yarn으로 react 설치node, npm 버전 확인하기 cmd에 node -v 와 npm --version 을 입력하여 node와 npm이 설치되어 있는지 확인합니다. yarn install npm install -g yarn 을 입력하여 yarn 을 설치하고 yarn --version 으로 버전을 확인하여 잘 설치 되었는지 확인합니다. yarn 으로 react install yarn global add create-react-app 으로 create-react-app 을 설치합니다. 그 후 create-react-app 프로젝트명 을 입력하여 해당 프로젝트에 리액트 앱을 생성합니다. cd로 생성한 디렉토리로 이동 후 yarn start를 입력하면 생성한 리액트 앱이 실행됩니다! react-router-dom 설치 yarn a..
2023.07.28 -
이 글은 node.js 공식 문서를 참고하여 작성되었습니다. Node.js란? Node.js란 또 하나의 자바스크립트의 런타임입니다. Node.js 가 없을 때에는 자바스크립트의 유일한 런타임은 웹 브라우저 입니다. 하지만 Node.js 로 인하여 독립적인 런타임이 생기게 되었고 어떤 환경에서도 자바 스크립트를 실행할 수 있게 되었습니다. Node.js 설치하기 https://nodejs.org/ko 먼저 위 사이트에서 좌측 버튼을 클릭하여 node.js를 다운로드 해주세요. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 셋업 위자드를 실행 시키시고 Next를 누르다보면 필요한 tool을..
[Node.js] Node.js 설치하고 자바스크립트 파일 실행하기이 글은 node.js 공식 문서를 참고하여 작성되었습니다. Node.js란? Node.js란 또 하나의 자바스크립트의 런타임입니다. Node.js 가 없을 때에는 자바스크립트의 유일한 런타임은 웹 브라우저 입니다. 하지만 Node.js 로 인하여 독립적인 런타임이 생기게 되었고 어떤 환경에서도 자바 스크립트를 실행할 수 있게 되었습니다. Node.js 설치하기 https://nodejs.org/ko 먼저 위 사이트에서 좌측 버튼을 클릭하여 node.js를 다운로드 해주세요. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 셋업 위자드를 실행 시키시고 Next를 누르다보면 필요한 tool을..
2023.07.27 -
에러 메세지 Caused by: org.hibernate.AnnotationException: Association 'org.coteis.domain.article.Article.algorithmNo' targets an unknown entity named 'java.lang.Integer' 발생 배경 @ManyToOne @JoinColumn(name = "algorithm_no") private Integer algorithmNo; @ManyToOne @JoinColumn(name = "difficulty_no") private Integer difficultyNo; @ManyToOne @JoinColumn(name = "language_no") private Integer languageNo; @M..
[SpringBoot] AnnotationException: targets an unknown entity named : 조인 맵핑 시 데이터 타입이 다를 경우 발생하는 에러에러 메세지 Caused by: org.hibernate.AnnotationException: Association 'org.coteis.domain.article.Article.algorithmNo' targets an unknown entity named 'java.lang.Integer' 발생 배경 @ManyToOne @JoinColumn(name = "algorithm_no") private Integer algorithmNo; @ManyToOne @JoinColumn(name = "difficulty_no") private Integer difficultyNo; @ManyToOne @JoinColumn(name = "language_no") private Integer languageNo; @M..
2023.06.25 -
발생 배경 resource 의 data.sql 파일에 값을 넣고 실행하니 CommandAcceptanceException 이 발생하였다 중략 맨 마지막 SQLSyntaxErrorException을 보고 문법이 잘못되었나 싶었는데 그건 아니었다. 원인 파악 CommandAcceptanceException에 대해 검색해보니 원인은 다양했다 하이버네이트가 table을 만들 때 drop하지 못해서 계정의 권한으로는 할 수 없는 쿼리를 작성해서 SQL이나 H2의 예약어를 사용하여 Entity를 작성해서 나는 1번 사항에는 해당하지 않았다 하이버네이트가 table을 drop 하는 것은 확인되었기 때문이다. 2번 사항도 user 테이블 말고 다른 table에 insert하는 데에는 오류가 발생하지 않았기 때문에 해당..
[SpringBoot] CommandAcceptanceException : table명이 예약어일 때 발생하는 Exception발생 배경 resource 의 data.sql 파일에 값을 넣고 실행하니 CommandAcceptanceException 이 발생하였다 중략 맨 마지막 SQLSyntaxErrorException을 보고 문법이 잘못되었나 싶었는데 그건 아니었다. 원인 파악 CommandAcceptanceException에 대해 검색해보니 원인은 다양했다 하이버네이트가 table을 만들 때 drop하지 못해서 계정의 권한으로는 할 수 없는 쿼리를 작성해서 SQL이나 H2의 예약어를 사용하여 Entity를 작성해서 나는 1번 사항에는 해당하지 않았다 하이버네이트가 table을 drop 하는 것은 확인되었기 때문이다. 2번 사항도 user 테이블 말고 다른 table에 insert하는 데에는 오류가 발생하지 않았기 때문에 해당..
2023.06.10 -
리액트 앱 생성하기 1. 먼저 리액트를 실습할 폴더를 만들어주세요. 이 때 폴더 이름은 너무 길거나 대문자가 포함되어 있으면 안됩니다 ㅠㅠ 2. vscode 터미널 창에 npx create-react-app . 을 입력하세요 .을 입력하면 현재 디렉터리에 리액트 앱이 생성되고, 디렉터리 이름을 따로 입력하셔도 됩니다. +) npx 는 node package execute의 약자로 노트 패키지 실행이라는 명령입니다. Happy hacking 이라는 문구까지 확인하면 reactstudy 폴더에 뭔가 되게 많이 생겼을겁니다. create-react-app 으로 생성한 리액트 앱 또한 Node.js 패키지 입니다. 따라서 폴더 아래에 package.json, package-lock.json, node_modul..
[React] 리액트 앱 생성하고 실행하기리액트 앱 생성하기 1. 먼저 리액트를 실습할 폴더를 만들어주세요. 이 때 폴더 이름은 너무 길거나 대문자가 포함되어 있으면 안됩니다 ㅠㅠ 2. vscode 터미널 창에 npx create-react-app . 을 입력하세요 .을 입력하면 현재 디렉터리에 리액트 앱이 생성되고, 디렉터리 이름을 따로 입력하셔도 됩니다. +) npx 는 node package execute의 약자로 노트 패키지 실행이라는 명령입니다. Happy hacking 이라는 문구까지 확인하면 reactstudy 폴더에 뭔가 되게 많이 생겼을겁니다. create-react-app 으로 생성한 리액트 앱 또한 Node.js 패키지 입니다. 따라서 폴더 아래에 package.json, package-lock.json, node_modul..
2023.05.20