Frank의 공부 일지

자바스크립트의 강력한 장점이자 단점은 동적이라는 것이다. 추적이 안되는 객체들이 너무나도 많기 때문에 속성의 변경이 너무나도 쉬우면서, 반대로 변경이 너무 쉬워 잘못된 것을 실행 중에 알게 된다. 실제로 어떤 서비스를 운영할 때에 테스트할 때 발견되지 않았던 버그가 생길 수 있다 이러한 문제를 타입스크립트가 해결해주었는데 타입스크립트는 기본적으로 변수에 타입을 지정해주면서, 코드를 추적해준다. 타입스크립트 장점 - 자바스크립트의 상위 집합 - 모든 코드에 대해 타입을 지정하지 않아도 유추를 통한 타입 제어가 가능 - 절차지향, 객체지향, 함수형 활용 가능 타입스크립트 단점 - 초반 세팅이 불편 - interface나 class 등의 이름 때문에 오류가 발생하기도 함 - 가독성이 상대적으로 떨어짐

자바스크립트는 하나의 콜 스택을 가지는 싱글 스레드 프로그래밍 언어 * 싱글 스레드 - 한 번에 하나의 명령 집합 그렇기 때문에 자바스크립트는 동기식으로 작업을 처리할 수 밖에 없는데, 이로 인해서 많은 문제가 발생 -> 이를 해결하는 방식이 자바스크립트 런타임 자바스크립트 런타임 - 오래 걸리는 일은 백그라운드에서 처리하고 간단하게 처리할 수 있는 작업들만 콜 스택에서 수행한다면 효율적으로 처리할 수 있다. Web API - 브라우저와 함께 제공 - HTPP 전송, setTimeout, DOM Event 등과 같은 다양한 작업 수행 - 브라우저에서 캐싱, 데이터베이스 저장소를 사용할 수 있게 해준다. 즉, Web API를 사용하여 백그라운드에서 비동기적으로 작업을 처리할 수 있다. 이벤트 루프와 콜백 ..

- 객체 기반의 스크립트 프로그래밍 언어 - 웹 브라우저 내에서 주로 사용, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. - Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용 - 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 - 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능

MySQL과 MySQL2의 차이점은 바로 promise다. mysql은 콜백 기반이기 때문에 promise를 사용하지 못하고 npm에 있는 promise-mysql 모듈을 따로 설치해서 사용해야 한다. 하지만 mysql2는 promise를 지원하기 때문에 다른 모듈을 설치하지 않고 사용이 가능하다. promise - promise로 구현된 비동기 처리 함수는 콜백을 예측 가능한 패턴으로 사용하도록 도와준다. 순차적이지 않은 비동기함수의 실행순서를 제어할 수 있게 도와주고 콜백 패턴에 비해 가독성이 좋고 반환된 결과물을 사용하기 편하게 도와준다. promise의 세 가지 상태 - pending: new Promise로 Promise가 생성된 직후부터 resolve나 reject가 호출되기 전까지의 순간 -..

현업에서 세션 저장소에 대해 3가지 중 한 가지를 선택하는데 1. 톰캣 세션을 사용 - 별다른 설정 없을 때 기본적으로 선택되는 방식 - 2대 이상의 WAS가 구동되는 환경에서는 톰캣들 간의 세션 공유를 위한 추가 설정이 필요 2. MySQL과 같은 데이터베이스를 세션 저장소로 사용 - 여러 WAS 간의 공용 세션을 사용할 수 있는 가장 쉬운 방법 - 많은 설정 필요 없지만, 로그인 요청마다 DB IO가 발생하여 성능상 이슈가 발생할 수 있다. 3. Redis, Memcached와 같은 메모리 DB를 세션 저장소로 사용 - B2C 서비스에서 가장 많이 사용 2번을 사용하려면 spring-session-jdbc 등록을 해야 한다. build.gradle에 compile('org.springframework..

세션에 사용자 정보를 저장하기 위한 Dto 클래스 -> 왜 User 클래스 쓰지 않고 새로 만들어서 쓰는지? - User 클래스를 세션에 저장하려면 User 클래스에 직렬화를 구현하지 않았다는 의미의 에러가 뜬다. 그렇다고 오류를 해결하기 위해 User 클래스를 넣기에는 User 클래스가 엔티티이기 때문에 언제 다른 엔티티와 관계가 형성될지 모른다. 즉, @OneToMany, @ManyToMany 등 자식 엔티티를 갖고 있다면 직렬화 대상에 자식들까지 포함되서 성능 이슈, 부수 효과가 발생할 확률이 높다. 그래서 직렬화 기능을 가진 세션 Dto를 하나 추가로 만드는 것이 이후 운영 및 유지보수 때 도움이 많이 된다.

로그인을 직접 구현할 때 - 로그인 시 보안 - 비밀번호 찾기 - 비밀번호 변경 - 회원가입 시 이메일 혹은 전화번호 인증 - 회원정보 변경 하지만 OAuth 로그인 구현 시 위의 목록의 것들을 모두 구글, 페이스북, 네이버 등에 맡기면 된다. 구글 서비스 등록 https://console.cloud.google.com Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com [프로젝트 선택] - [새 프로젝트] [API 및 서비스] - [대시보드] - [사용자 인증 정보] - [사용자 인증 정보 만들기] - [OAuth 클라이언트 ID 만들기] [동의 화면 구성] - [앱 이름..

src/main/resources/static/js/app/index.js var init = function() { ~ }; var save = function() { ~ }; init(); index.js의 첫 문장에 var main = { ~ }라는 코드를 선언했는데 굳이 index라는 변수의 속성으로 function을 추가한 이유가 뭘까? 예를 들어 index.mustache에서 a.js가 추가되어 a.js도 a.js만의 init과 save function이 있다해도 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 나중에 로딩된 js의 init, save가 먼저 로딩된 js의 function을 덮어쓰게 된다. 여러 사람이 참여하는 프로젝트에서 중복된 함수 이름은 자주 발생할 수 있다. 그러다 보니..

템플릿 엔진 - 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어 예전에 Jsp, Freemaker 등(서버 템플릿 엔진) 요즘은 리액트, 뷰의 View 파일(클라이언트 템플릿 엔진) -> 모두 결과적으로 지정된 템플릿과 데이터를 이용하여 HTML을 생성하는 템플릿 엔진 $(document).ready(function(){ if(a=="1"){ % } }); 이 코드는 if문과 관계없이 무조건 test를 콘솔에 출력하는데 이유는 프론트엔드의 자바스크립트가 작동하는 영역과 JSP가 작동하는 영역이 다르기 때문인데 JSP를 비롯한 서버 템플릿 엔진은 서버에서 구동된다. 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브..

API를 만들기 위해 총 3개의 클래스가 필요한데 · Request 데이터를 받을 Dto · API 요청을 받을 Controller · 트랜잭션, 도메인 기능 간의 순서를 보장하는 Service · Web Layer - Controller, JSP/Freemarker 등의 뷰 템플릿 영역 - 이외에도 필터, 인터셉터, 컨트롤러 어드바이스 등 외부 요청과 응답에 대한 전반적인 영역 · Service Layer - @Service에 사용되는 서비스 영역 - 일반적으로 Controller와 Dao의 중간 영역에서 사용 - @Transactional이 사용되어야 하는 영역이기도 함 · Repository Layer - 데이터베이스와 같이 데이터 저장소에 접근하는 영역 · Dtos - Dtos는 Dto들의 영역이..