junyCoding

스프링에서 개발을 하다 보면 요청, 응답 dto 값에 validation을 적용하는 경우가 많다. 예를 들어 Request 요청이 다음과 같고 내부 필드에는 title 이 존재할 때 title의 null 여부와 size에 대해서 유효성 검사를 추가하고 싶은 경우가 존재한다. title 은 null 이 아니었으면 좋겠고 길이는 1 ~ 255 자 사이였으면 좋겠다. 다행히도 스프링은 기본적으로 다양한 유효성을 검사해주는 어노테이션을 제공한다. import javax.validation.constraints.NotNull; import javax.validation.constraints.Size; public class Request { // title 은 null 이 아니여야하고 길이는 1 ~ 255 자 사..

IOC 란 ? 아래 코드를 보자 @Controller public class OrderController { private OrderService orderService = new OrderService(); } 위 코드는 OrderController 라는 클래스에서 OrderService 객체를 new 키워드로 생성해서 사용하고 있다. 위와 같은 경우는 직접 OrderService 라는 의존성을 관리 하고 있는 상태이다. 아래 코드를 보자. @Controller public class OrderController { private OrderService orderService; public Controller(OrderService orderService){ this.orderService = orde..

자바스크립트의 호이 스팅, 클로저, this에 대한 이해를 하기 위해서는 실행 콘텍스트에 대한 이해가 매우 중요하다. 그럼 실행 콘텍스트란 무엇일까? 실행 컨텍스트? 실행 가능한 코드가 실행되기 위해 필요한 환경이다. 여기서 실행 가능한 코드는 전역 코드나 함수 내 코드를 말한다. 결국 코드를 실행하기 위해 JS 엔진은 코드 실행에 필요한 변수나, 함수, 변수의 유효 범위들을 알고 있어야 하기 때문에 실행 컨텍스트가 필요하게 되는 것이다. 그럼 실행 컨텍스트는 어떻게 이루어져 있을까? 실행컨텍스트는 3가지 객체로 이루어져 있다. 하나씩 알아보자. 첫 번째는 변수 객체이다. 변수 객체는 JS 실행에 필요한 변수, 함수 선언, 함수에 인자로 전달되는 매개변수의 인수를 담는 객체이다. 이때 전역 컨텍스트의 경..

Virtual DOM Virtual DOM 은 실제 DOM과 비슷한 React의 객체 트리입니다. 실제 DOM을 제어하지 않고 Virtual DOM을 통해 변경된 부분만 DOM에 반영하는 작업을 하는 것이죠. Virtual DOM의 생성 ReactDOM.render( , document.getElementById('root') ) JSX 문법을 사용한 ReactDOM.render을 호출하면 Virtual DOM 이 만들어집니다. ReactDOM.render( React.createElement(App) , document.getElementById('root')); JSX 문법을 변환하면 다음과 같은 JS 코드가 만들어지고 이때 render 함수는 React에서 사용하는 타입의 컴포넌트를 생성합니다. 첫..

호이스팅? 오늘은 호이스팅이 무엇이고 어떻게 일어나는지를 알아보려고 합니다. 호이스팅은 함수나 변수가 코드가 실행되기 전에 메모리에 저장되는 것입니다. 실제로 코드가 우리가 작성한 코드 최상단으로 끌어 올려지는 것이 아닙니다! 끌어 올려진 것처럼 보이는 것이죠. JS 엔진의 동작 방식 때문에 호이 스팅이 일어나게 되는데요. JS 엔진이 우리가 작성한 스크립트를 확인하고 첫 번째로 하는 일은 우리의 코드에 있는 데이터에 대한 메모리를 세팅하는 일입니다. 이때 실제로 실행하는 것이 아니라 실행을 위한 준비일 뿐이죠. 함수 같은 경우는 전체 함수에 대한 참조값이 저장됩니다. var 같은 경우는 실제 변수에 저장된 값이 아닌 undefined로 메모리에 초기화가 되고 let, const 같은 경우는 uninit..

NodeJS 동작원리 NodeJS의 동작 원리를 알기 위해서는 javascript의 동작원리를 먼저 알아야 합니다. javascript 는 싱글 스레드로 동작하는 언어입니다. 싱글 스레드이기 때문에 한 번에 하나의 작업만 처리할 수 있게 되죠. 그렇다면 자바스크립트는 어떻게 동작 할까요? 위의 그림처럼 Javascript의 런타임은 메모리 힙과 콜 스택으로 구성됩니다 메모리 힙은 메모리 할당을 담당하는 곳이고 콜 스택은 코드가 호출되면서 스택으로 쌓이는 곳입니다. 콜 스택❓ 하나의 메인 스레드에서 호출되는 함수들은 콜 스택에 쌓이게 됩니다. 이 함수 들은 LIFO(나중에 쌓이는 것이 먼저 처리되는) 방식으로 실행되죠. Javascript는 싱글 스레드 기반이기 때문에 하나의 메인 스레드와 하나의 콜 스택..

풀이 입력값이 순서대로 정렬되어있지 않으므로 입력을 받고 정렬을 해줍니다. 사대 같은 경우에는 오름차순으로 동물 같은 경우에는 x 축이 작은 순으로 정렬해줍니다. 입력값이 크기 때문에 순차적으로 검사하기 위함이다. 만약 정렬하지 않고 모든 경우에 수를 검사한다면 시간 초과가 빵...! 저는 동물을 기준으로 순회하면서 각동물이 사대에 범위에 포함되어 잡힐 수 있는지 판단했습니다. 문제를 그림으로 표현하면 다음과 같고 대략 3가지 경우를 생각해줘야합니다. 첫 번째는 사대의 범위를 Y 축 기준으로 넘는 경우입니다. 이때는 어느 사대도 저위에 동물을 잡을 수 없기 때문에 다음 동물을 검사합니다. 두 번째는 범위에 포함되는 경우입니다. 범위에 포함되는 경우에는 현재 확인 중인 사대를 유지하면서 다음 동물로 넘어갑..

Apollo Client의 캐시 관리 기법 아폴로 클라이언트는 GrahpQL 쿼리요청 결과를 로컬에 저장할 수 있는 캐시 기능을 제공한다. 클라이언트에서 서버로 Graphql 쿼리를 요청하면 그 결과를 클라이언트 측 메모리에 저장하게 되는 것이다. 이를 잘 활용하면 클라이언트 측에서 동일한 쿼리를 요청할 때 재사용할 수 있기 떄문에 불필요한 요청을 줄일 수 있다. 기본적으로 브라우저 캐시는 GET 요청만 캐싱한다. 하지만 GrahpQL의 경우는 모든 요청을 POST로 하므로 브라우저 캐시를 사용할 수 없다. 이를 해결해 주는 좋은 해결책이 Apollo Client이다. 이는 POST 요청을 하는 GraphQL 요청에도 캐시를 사용할 수 있게 해 준다. 그렇다면 캐시 과정은 어떻게 일어날까? 요청을 보내면..

🌟MongoDB를 사용한 이유 우리 프로젝트에서 NOSQL에 해당하는 MongoDB 를 사용했다. 실시간 통신이 많아서 빠른 Data 조회 속도가 필요했기 때문이다. 또한 MongoDB 는 위치기반의 데이터 관련 쿼리를 지원하기 때문에 위치기반 애플리케이션인 우리 앱에 적합하고 판단했다. 그렇다면 SQL과 NOSQL의 특징과 차이점을 무엇일까? ⁉️ SQL? 구조화된 쿼리 언어 (Structured Query Language) 로서 특정 유형의 데이터 베이스와 상호 작용하는 데 사용되는 쿼리 언어입니다. SQL의 주요 특징은 다음과 같습니다. 정해진 스키마(구조)에 따라서 데이터 베이스를 테이블에 저장 데이터는 관계를 통해서 연결되고 여러 개의 테이블에 분산되어 저장 첫 번째는 엄격한 스키마인데 데이터를..

www.notion.so/93636d3e1ad1481faa261cbfc25d8be4 개발환경설정 웹팩 ✍️ www.notion.so