Progamming93 [벨로퍼트] props와 state 리액트 컴포넌트에서 다루는 데이터는 props와 state, 두 개로 나뉜다. 미리 요약해서 설명하자면, props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정할 수는 없다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 직접 변경할 수 있다. 새 컴포넌트 만들기 MyName 이라는 새로운 컴포넌트를 만들어보자. //MyName.js import React, { Component } from 'react'; class MyName extends Component { render() { return ( 안녕하세요! 제 이름은 {this.props.name} 입니다. ); } } export default My.. 2019. 7. 11. [벨로퍼트] JSX 컴포넌트 파일 파헤치기 리액트를 사용하면 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수를 우수하게 해준다. 컴포넌트에 해당하는 코드는 App.js 에서 확인할 수 있다. import 무엇인가를 불러온다는 것이다. 첫번째 import는 리액트와 그 내부의 Component를 불러온다. 파일에서 JSX를 사용하려면, 꼭 React를 import 해주어야 한다. import 한다는 것은 webpack을 사용하기에 가능한 작업이다. 이렇게 불러오고 나면 나중에 프로젝트를 빌드하게됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게된다. CSS 파일을 불러오게되면, 나중에 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해주는 작업을 진행하고, 자바스.. 2019. 7. 5. [벨로퍼트] 리액트 프로젝트 시작하기 Webpack, Bable은 무슨 용도인가요? 리액트 프로젝트를 만들게 되면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 된다. 여러가지 파일을 한 개로 결합하기 위해서 "Webpack" 이라는 도구를 사용하고, JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해 Babel이라는 도구를 사용하게 된다. 준비사항 1. Node.js 설치 : Webpack과 Babel같은 도구들은 자바스크립트 런타임인 Node.js를 기반으로 만들어졌다. 그렇기에 해당 도구들을 사용하기 위해 Node.js를 설치한다. 2. Yarn 설치 : 개선된 버전의 npm이라고 생각하면 된다. npm은 Node.js를 설치하게 될 때 같이 딸려오.. 2019. 7. 5. [벨로퍼트] 리액트는 무엇인가 프론트엔드 라이브러리/프레임워크 리액트는 정말 인기있는 프론트엔드 라이브러리이다. 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다. 어떠한 UI를 동적으로 나타내기 위해서는 수많은 상태를 관리해줘야한다. 프로젝트가 사용자와의 인터랙션(상호작용)이 별로 없다면, 사실상 프론트엔드 라이브러리는 필요하지 않다. 하지만 프로젝트의 규모가 커지고, 다양한 UI와 인터랙션을 제공하게 된다면, 많은 DOM 요소들을 직접 관리하고 코드를 정리하는 것은 갈수록 힘든 일이 될 것이다. 웹 개발을 하게 될 때 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발과 UI를 구현하는 것에 집중할 수 있도록 하기 위해서 여러 라이브러리나 프레임워크들이 만들어졌다. 대표적으로 Angular, Embe.. 2019. 7. 5. RestController란? 들어가기 전에 이번 시간에는 Rest API를 Spring MVC를 이용해 작성하려면 어떻게 해야하는지 방법에 대해 알아보도록 하겠습니다. 학습 목표 1. Spring MVC를 이용해 Rest API를 작성하는 방법에 대해 이해한다. 핵심 개념 - Rest API - Web API - @RestController - MessageConvert @RestController - Spring4 에서 Rest API 또는 Web API를 개발하기 위해 등장한 어노테이션 - 이전 버전의 @Controller와 @ResponseBody를 포함한다. @MessageConvertor - 자바 객체와 HTTP 요청/응답 바디를 변환하는 역할 - @ResponseBody, @RequestBody - @EnableWebMv.. 2019. 5. 14. 레이어드 아키텍처(Layered Architecture) 란? 들어가기 전에 이번 시간에는 웹 어플리케이션을 만들 때 자주 사용하는 레이어드 아키텍처(Layered Architecture)에 대해 알아보자. 학습 목표 1. 웹 어플리케이션 개발시 레이어드 아키텍처(Layered Architecture)가 사용되는 이유에 대해 이해한다. 2. 웹 어플리케이션 개발시 각 레이어드의 구성요소에 대해 이해한다. 핵심 개념 - Controller - Service - Repository Controller에서 중복되는 부분을 처리하려면? - 별도의 객체로 분리한다. - 별도의 메소드로 분리한다. 컨트롤러와 서비스 - 비지니스 메소드를 별도의 Service 객체에서 구현하고, 컨트롤러는 Service 객체를 사용하도록 한다. Service 객체란? - 비지니스 로직(Busin.. 2019. 5. 13. Spring MVC를 이용한 웹 페이지 작성 실습 들어가기 전에이번 시간에는 Spring MVC를 이용하여 웹 어플리케이션을 작성하는 방법에 대해 실습을 통해 알아보자. 학습 목표- Spring MVC를 이용해 프로젝트를 구성할 수 있고, 개발자가 작성해야 할 파일이 무엇인지 이해한다.- Spring MVC를 이용해 웹 어플리케이션을 작성할 수 있다. 핵심 개념- DispatcherServlet- WebApplicationInitializer- @RequestMapping = @GetMapping = @PostMapping DispatcherServlet을 FrontController로 설정하기- web.xml 파일에 설정- javax.servlet.ServletContainerInitializer 사용 : 서블릿 3.0 스펙 이상에서 web.xml 파.. 2019. 3. 14. Spring MVC 구성요소 들어가기 전에이번 시간에는 Spring MVC에서 가장 핵심적인 역할을 수행하는 DispatcherServlet이 어떤 순서로 동작하는지 살펴보도록 하자. 이를 통해 Spring MVC에서 사용되는 컴포넌트들에 대해 알아보자. 학습 목표1. DispatcherServlet이 어떤 순서로 동작하는지 이해한다.2. DispatcherServlet에서 사용되는 컴포넌트(객체)들은 어떤 것들이 있느지 알아본다. 핵심 개념- DispatcherServlet- HandlerMapping- HandlerAdapter- ViewResolver Spring MVC 기본 동작 흐름 - Database를 제외한 파란색 부분들은 모두 Spring MVC가 제공해주는 것- 보라색 부분들은 개발자가 만들어야 하는 부분- 녹색으로.. 2019. 3. 14. Spring MVC란? 들어가기 전에이번 시간에는 Spring 프레임워크에서 웹 어플리케이션 작성을 위해 제공하는 Web MVC 모듕레 대해 알아보도록 하자. 학습 목표1. MVC Model 1과 MVC Model 2 구조의 차이점에 대해 이해한다.2. 발전된 형태의 MV Model 2 구조에 대해 이해한다. 핵심 개념- MVC Model 1- MVC Model 2- Spring MVC MVC- Model-View-Controller의 약자- 원래는 제록스 연구소에서 일하던 트뤼그베 린즈커그가 처음으로 소개한 개념으로, 데스크톱 어플리케이션용으로 고안되었다.- Model : 모델은 뷰가 렌더링하는데 필요한 데이터. 예를 들어 사용자가 요청한 상품 목록이나, 주문 내역이 이에 해당한다.- View : 웹 어플리케이션에서 뷰(Vi.. 2019. 3. 14. 이전 1 2 3 4 5 ··· 11 다음
