[React] Redux의 개념과 활용 1. Redux 개념 1) Redux의 필요성 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리 위와 같이 컴포넌트가 구성되어있다고 가정하자. 만약, App 컴포넌트에서 데이터 상태(state)에 변화가 생겨서 state를 업데이트하면 App 컴포넌트가 리렌더링 되고, 리액트 특성상 하위 컴포넌트도 모두 리렌더링 된다. 그렇기 때문에 TodoInput만 업데이트하길 원해도 TodoList도 함께 리렌더링 되는데, 이런 경우는 TodoList 컴포넌트에 shouldComponentUpdate를 구현하는 등 방지 할 수 있는 방법이 있긴 하다. 하지만, 프로젝트가 더 복잡해진다면 이런 방법도 어려워질 것이고, 아래와 같은 비효율적인 면이 있다...

[Spring] Gradle을 위한 Groovy 문법 요약정리 Groovy Groovy 실행원리 그루비 소스는 컴파일하면 자바 클래스가 만들어진다. 이것을 실행하기 위해서는 groovy.jar와 asm.jar 라이브러리 파일이 필요하다. Groovy 문법 요약 변수 선언과 값 할당 동적 타입 바인딩 def a = 20 // 값을 할당할 때 a 변수의 타입이 결정됨 a = "문자열" // 다른 값을 할당하면 변수의 타입이 바뀜 b = "문자열" // 변수 선언 시 def를 생략해도 됨 정적 타입 바인딩 int a = 20 // 변수 a는 int로 데이터형이 고정됨 a = "문자열" //문자열 값을 할당하면 오류 발생 문자열과 자동 형변환 String a = "문자열" // 변수 a는 String으로 데이터..

[Spring] IntelliJ에서 Spring + Maven 프로젝트 생성하기 이번 포스팅의 목표는 IntelliJ를 이용하여 Spring + Maven 프로젝트를 생성하고, 실행 가능한 상태까지 만드는 것이 목표이다. 프로젝트 구조 구성이나 여러 추가적인 작업은 이 포스팅에서 다루지 않겠다. 개발환경 셋팅 IntelliJ 설치 페이지 JDK 설치 및 환경변수 셋팅방법 Tomcat 설치방법 프로젝트 생성 ① IntelliJ를 실행하면 뜨는 초기화면이다. 여기서 'Create New Project'를 클릭한다. ② 보통 JDK(여기선 Java8, JDK1.8을 사용)를 설치했다면, 아래와 같이 Project SDK가 자동으로 잡혀 있다. 설치를 하지 않았다면 JDK를 먼저 설치해주자. (하..

1. @Media 규칙 Media 규칙이란? @Media 규칙은 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙 Media 속성 Media 속성을 사용하면 음성 장치부터 점자는 물론 프린터와 텔레비전에 맞게 스타일 시트를 사용할 수 있다. 2. 반응형 웹 미디어 쿼리는 밑의 표와 같이 장치를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수 있다. 속성 설명 width 화면의 너비 height 화면의 높이 device-width 장치의 너비 device-height 장치의 높이 orientation 장치의 방향 device-aspect-ratio 화면의 비율 color 장치의 색상 비트 color-index 장치에서 표현 가능한 최대 색상 개수 monochrome 흑백 장치의 픽셀..

1. Vue Router란? Vue에서 SPA(Single Page Application)을 구현 시, 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인이 Vue Router이다. 원래 사용자의 URI Request가 들어오면 서버 즉 백엔드에서 Controller가 그 Request에 해당하는 Response로써 정적 파일(html, css, javascript ...)을 보내준다. Vue Router는 프론트엔드에서 요청 URI에 따라 전체 새로운 돔을 변경하는 것이 아니라, 브라우져에서 변화가 있는 부분의 돔을 변경하는 방식이다. 2. 설치 CDN html head 태그 안에 vue CDN 밑에 아래와 같이 추가해 줍니다. (vue를 CDN으로 이용하시는 경우 기준입..

float 속성을 사용한 레이아웃 구성 Header Navigation Aside Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo animi perspiciatis voluptas porro! Temporibus repudiandae autem quas eaque earum perspiciatis perferendis ipsum, sed maiores, numquam aliquam doloribus placeat voluptas commodi? Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nemo eaque exercitationem praesentium dol..