3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수 컴포넌트와 클래스형 컴포넌트가 있습니다. 2장에서 보았던 코드는 함수 컴포넌트로, 다음과 같은 구조로 이루어져 있습니다. import './App.css'; function App() { const name = 'react'; return {name}; } export default App; 함수 컴포넌트는 클래스형 컴포넌트보다 선언하기 훨씬 편하다는 장점이 있습니다. 다음은 클래스형 컴포넌트의 구조를 보겠습니다. import React, { Component } from 'react'; class App extends Component{ render() { const name = 'react'; return {name}; } } ex..

22-23/22-23 리액트 스타터 3 2022. 10. 6. 10:00

이번 장에서는 컴포넌트에 대해 배워보겠습니다. 1장에서 컴포넌트는 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체라고 배웠습니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다. import React from ‘react‘; import ‘./App.css‘; function App() { const name = ‘리액트‘; return {name}; } export default App; 2장에서 보았던 App.js는 함수형 컴포넌트입니다. import React, { Component } ..

22-23/22-23 리액트 스타터 1 2022. 10. 6. 10:00

2.1 코드 이해하기 create-react-app으로 hello-react 프로젝트를 만들고 src/App.js 파일을 VS code에서 엽니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; import 구문은 특정 파일을 불러오는 것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용할 수 있습니다. 모듈을 불러와서 사용하는 것은 브라우저에는 없는 기능입니다. 이는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해..

22-23/22-23 리액트 스타터 1 2022. 9. 29. 10:01

1. 스프링 프로젝트 시작하기 메이븐 프로젝트 생성(또는 그레이들 프로젝트 생성) 이클립스에서 메이븐 프로젝트 임포트 스프링에 맞는 자바 코드와 설정 파일 작성 실행 1.1 메이븐 프로젝트 생성 프로젝트 폴더(C:\spring5fs\sp5-chap02)에 pom.xml 파일을 작성한다. pom.xml 메이븐 프로젝트에 대한 설정 정보를 관리하는 파일로서 프로젝트에서 필요로 하는 의존 모듈이나 플러그인 등에 대한 설정을 담는다. 더보기 4.0.0 sp5 sp5-chap02 0.0.1-SNAPSHOT org.springframework spring-context 5.0.2.RELEASE maven-compiler-plugin 3.7.0 1.8 1.8 utf-8 : 메이븐 의존 설정 의존을 추가한다: 일반적인..

22-23/22-23 Spring 2 2022. 9. 29. 10:01

I. 코드 이해하기 1. import 구문 import React from 'react'; //react 모듈에서 React 컴포넌트를 불러오는 것 : 특정 파일을 불러오는 것으로, 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이며, 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다. 브라우저에서 사용하려면 번들러(bundler) 사용해야 한다.[ -> 파일을 묶듯이 연결] - 번들러의 예시 : 웹팩, Parcel, browerify 등 -> 리액트 프로젝트에서는 주로 웹팩을 사용한다( ∵ 편의성과 확장성이 비교적 뛰어나다) - 웹팩의 로더 - SVG/CSS 파일을 불러와서 사용한다 ( 별도의 설정이 필요없어 편리하다) ◎ 최신 JS로 작성된 ..

22-23/22-23 리액트 스타터 2 2022. 9. 29. 10:01

2.1코드 이해하기 2.1.0 import React from 'react'; import 구문은 특정 파일을 불러오는 구문입니다. import를 통해 다른 파일을 불러오고 모듈도 불러와서 사용할 수 있습니다. import React from 'react'; 위의 코드는 React라는 모듈을 react라는 패키지에서 불러온다는 뜻입니다. 2.1.1 번들러와 로더 원래 브라우저에서는 import를 통해 모듈을 불러올 수 없습니다. 이런 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용합니다. 번들러는 묶는다는 뜻으로 import를 통해 불러온 모듈을 모두 합쳐 하나의 파일로 만들어 줍니다. 또한 최적화를 통해 여러 개의 파일로의 분리도 가능합니다. 리액트에서는 주로 웹팩이라는 번들러를 사용합니다. im..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:01

1 . 스프링이란 흔히 스프링은 스프링 프레임워크를 뜻하며, 스프링 프레임워크는 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크이다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다. 스프링의 주요 특징 의존주입(Dependency Injection : DI) 지원 - 각각의 계층이나 서비스들 간에 의존성이 존재할 경우 프레임워크가 서로 연결시켜준다. AOP(Aspect-Oriented Programming, 관점 지향 프로그래밍) 지원 - 트랜잭션이나 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우 해당 기능을 분리하여 관리할 수 있다. MVC 웹 프레임워크 제공 JDBC, JPA 연동, 선언적 트랜잭션 처리 등 DB 연동 지원 자바 기반의 어플리케이션을 개발..

22-23/22-23 Spring 2 2022. 9. 29. 10:00

🔍 스프링의 탄생 배경 2000년대 초반, 자바 개발자들은 EJB라는 서버 컴포넌트 모델을 사용했다. 유연함을 찾아보기 힘든 정형화된 애플리케이션으로, 자바 개발자들은 객체 지향 언어를 사용함에도 객체 지향적인 서버 개발을 이어나가는 것이 쉽지 않았고 심지어 느렸다. 그러던 무렵, 이에 불만을 가진 몇 개발자의 노력으로 드디어 '스프링'이 세상에 나온다. 현재는 스프링과 함께 JPA, 하이버네이트가 많이 사용되고 있다. 🔍 스프링 개발을 돕는 다양한 도구 스프링 데이터 : 각종 DB의 CRUD를 돕는 기술(예: 스프링 데이터 JPA) 스프링 세션 : 세션 기능을 편리하게 돕는 기술 스프링 시큐리티 : 보안 기능 편의 기술 스프링 Rest Docs : API 문서화 및 테스트 간편화 기술 스프링 배치 : ..

22-23/22-23 Spring 1 2022. 9. 29. 10:00

1.1 왜 리액트인가? 최근 몇 년간 많은 개발자들은 자바스크립트에 뜨겁게 열광하고 있습니다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 지금은 애플리케이션에서 가장 핵심적인 역할을 합니다. 우리는 그중에서 자바스크립트 라이브러리를 사용하여 사용자 인터페이스를 만들고, 최대한 성능을 아끼며 편안한 사용자 경험을 제공하는 리액트에 대해서 알아보고자 합니다. 1.1.0 MVMM과 MVC MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)는 프레임 워크의 아키텍쳐(구조) 입니다. 이 두 가지 구조의 공통점은 모델과(Model) 뷰(View)가 있다는 것입니다. 여기서 모델은 애플리케이션의 데이터를 관..

22-23/22-23 리액트 스타터 3 2022. 9. 29. 10:00

I. 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었다. 1. 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키텍처들을 들어볼 수 있다. 코드 개발시 규칙을 만들어 반복되는 것을 패턴으로 만든다. 이 패턴을 모두가 따르도록 하는 구조를 아키텍처라고 한다. UI(User Interface)가 만들어진 후 ..

22-23/22-23 리액트 스타터 2 2022. 9. 29. 10:00

🔍 노드 내장 모듈.zip 📌 os 노드는 os 모듈에 정보가 담겨 있어 정보를 가져올 수 있다. 일반적인 웹 서비스를 제작할 때는 사용 빈도가 높지 않지만, 운영체제별로 다른 서비스를 제공할 때 유용하다. const os = require('os') console.log('운영체제 정보--------------------') console.log('os.arch(): ', os.arch()) // 프로세서 아키텍처 정보 -> process.arch와 동일 console.log('os.platform(): ', os.platform()) // 운영체제 플랫폼 정보 -> process.platform과 동일 console.log('os.type(): ', os.type()) // 운영체제 종류 consol..

22-23/22-23 Node.js 2022. 9. 29. 10:00

혹시 웹페이지를 만들어본 경험이 있나요. 혹은 웹 페이지를 만들면서, 수많은 html 태그와 복잡한 항목을 코딩하기에 지쳐본 경험이 있나요. ​ 여기 이 복잡함에 염증을 느껴 그 해결책으로 React를 이용했고, 이를 계기로 '웹 개발' 영역에 터를 잡은 사람이 있습니다. 저자 김민준은 자신이 좋아하는 리액트를 더 많은 사람들이 쉽고 편하게 배우기를 바라면서 한 권의 책을 집필합니다. ​ ​ 리액트를 다루는 기술 - 교보문고 입문부터 대규모 애플리케이션까지 한 권으로 | 리액트 베스트셀러 1위리액트, 현장 밀착 입문서는 따로 있다!자바스크립트의 기본 기능과 문법을 숙지한다리액트의 기본기를 익히려면 자바스 www.kyobobook.co.kr ​ 책 [리액트를 다루는 기술]은 리액트를 처음 다루는 사람부터 ..

22-23/22-23 리액트 스타터 1 2022. 9. 29. 10:00