🔍 npm npm은 Node Package Manager(노드 패키지 매니저)의 약어로, 대부분의 자바스크립트 프로그램은 패키지라는 이름으로 npm에 등록되어 있다. 특정 기능을 하는 패키지가 필요하다면 npm 에서 찾아 설치한다. ✅ 패키지 npm에 업로드된 노드 모듈을 패키지라고 부른다. 패키지가 다른 패키지를 사용할 수 있는데, 이런 관계를 의존 관계라 부른다. ✅ yarn npm의 대체자로 yarn이 있다. yarn은 페이스북이 내놓은 패키지 매니저로, 리액트나 리액트 네이티브 같은 페이스북 진영의 프레임워크를 사용할 때 볼 수 있다. 몇 가지 편리한 기능이 들어있지만 별도로 설치해야 하며, npm 서버가 느릴 경우 yarn으로 패키지를 대신 설치할 수 있다. Home Fast, reliable,..

22-23/22-23 Node.js 2022. 10. 13. 10:00

4.1 리액트의 이벤트 시스템 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말합니다. 리액트의 이벤트 시스템 사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 몇 가지 사항이 있습니다. 4.1.1 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. (예: onClick, onKeyUp) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다. 화살표 함수 문법으로 함수를 만들어 전달하거나, 렌더링 부분 외부에 미리 만들어서 전달해도 됩니다. 3. DOM 요소(div, button..

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

해당 포스트는 스프링 핵심 원리 - 기본편 강의 내용을 참고하였습니다. 스프링 핵심 원리 - 기본편 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링의 핵심 원리를 이해하고, 스프링 기본기를 확실히 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com ❗컴포넌트 스캔 📌컴포넌트 스캔과 의존관계 자동 주입 방법 1. @ComponentScan 를 설정 정보에 추가 @Configuration @ComponentScan( excludeFilters = @ComponentScan.Filter(type= FilterType.ANNOTATION, classes=Configuration.class) ) public class AutoAppConfig { //이전과는 달리 @B..

22-23/22-23 Spring 1 2022. 10. 13. 10:00

해당 포스터는 '초보 웹 개발자를 위한 스프링5 프로그래밍 입문' 책을 참고하였다. 4장의 키워드 1. 의존 자동 주입 2. @Autowired 애노테이션 3. @Qualifier 애노테이션 4. @Nullable 애노테이션 5. 명시적 의존 주입 1. 의존 자동 주입 의존 자동 주입 : 스프링이 알아서 의존 객체를 찾아서 주입하는 방법 @Autowired 애노테이션, @Resource 애노테이션, @javax.inject.Inject 애노테이션을 사용할 수 있다. 주로 사용하는 것은 @Autowired 애노테이션이다. 2. @Autowired 애노테이션을 이용한 의존 자동 주입 @Autowired 애노테이션을 이용하면 Setter 메소드를 사용하지 않아도 스프링이 필요한 의존 빈 객체를 찾아서 주입해준..

22-23/22-23 Spring 2 2022. 10. 13. 10:00

4장 이번장에서는 이벤트를 다루는 방법에 대해서 알아봅니다. ​ ​ ​ ​ HTML에서 DOM 요소에 이벤트를 설정하는 방법은 아래의 코드와 같습니다. alert함수를 이용해서 메시지 박스를 띄우는 방법으로, 이벤트를 실행하면 "" 사이의 자바스크립트를 실행하는 것이 특징입니다. click me 4.1.1 이벤트를 사용할 때 주의 사항 카멜 표기법 함수 형태 값 전달 (자바스크립트 코드 전달X) : HTML과의 차이점 DOM 요소에만 이벤트 설정 가능 (개발자가 직접 만든 컴포턴트에 자체 이벤트 설정 불가) 전달받은 props를 컴포넌트 내부 DOM 이벤트로 설정 4.1.2. 이벤트 종류 다양한 이벤트가 존재하지만, 책에서는 일부만을 다룹니다. Clipboard Composition Keyboard Fo..

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

I. 리액트 이벤트 시스템 1. 이벤트를 사용할 때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. HTML의 onclick은 리액트에서 onClick으로 작성 onekeyup은 onKeyUp으로 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달 HTML에서는 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣음 리액트에서는 함수 형태의 객체를 전달 화살표 함수 문법처럼 바로 만들어서 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 가능 3. DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있음 그러나 자신이 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할..

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

이번 장의 키워드 # 의존 주입(DI) # 조립기 # 스프링 빈(Bean) # 싱글톤 # Autowired 애노테이션 프로젝트 생성 및 실행 > 생략 의존 주입 DI(Dependency Injection) 의존(dependency): 객체 간의 의존 변경에 의해 영향을 받는 관계 ex) MemberDao의 메서드의 이름을 수정하면 MemberDao의 메서드를 사용하고 있는 MemberRegisterService 클래스의 소스 코드도 변경된다. public class MemberRegisterService { ... public Long regist(RegisterRequest req) { Member member = memberDao.selectByEmail(req.getEmail()); // membe..

22-23/22-23 Spring 2 2022. 10. 6. 10:32

해당 포스트는 스프링 핵심 원리 - 기본편 강의 내용을 참고하였습니다. ❗ AppConfig 📌 역할 사용 영역과 구성 영역을 분리 ➡ 관심사의 분리 (SRP 단일 책임 원칙 적용) 그러므로 클라이언트 코드는 수정 없이 객체를 변경할 수 있다! 예를 들어, 할인 정책을 바꾸고 싶을 때, AppConfig에서 간단하게 변경할 수 있다. ➡ OCP 준수 프로그램의 흐름을 AppConfig가 조종하므로 제어의 역전(IoC, Inversion of Control)이 일어난다. 같은 말로 의존성 역전 원리(DIP, Dependency Inversion Principle) 라고 한다. 이렇게 동적으로 객체를 생성하고 관리하면서 의존관계를 연결해주는 것을 IoC 컨테이너 혹은 DI 컨테이너라고 부른다. 📌 리팩토링 ..

22-23/22-23 Spring 1 2022. 10. 6. 10:31

🔍 요청과 응답을 알아보자 (a.k.a req, res) 클라이언트에서 서버로 요청(request)을 보내고, 서버는 클라이언트에 응답(response)를 보낸다. 따라서, 서버에는 요청을 받는 부분과 보내는 부분이 있어야 한다. 📌 서버를 만들어 보자 const http = require('http'); http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'}); res.write('Hello Node!'); res.end('Hello Server!'); }) .listen(8080, () => { console.log('8080에서 대기 중'); }); ✅ createServer 메..

22-23/22-23 Node.js 2022. 10. 6. 10:18

I. 컴포넌트 애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다. 데이터가 주어지면 UI를 구성 라이프사이클 API 이용 컴포넌트가 화면에서 나타났을 때, 사라질 때, 변화가 일어날 때에 작업 수행 지시 가능 임의 메서드 작성하여 기능들을 구현 1. 함수 컴포넌트 VS 클래스형 컴포넌트 컴포넌트를 선언하는 방식에는 두가지가 있다. 함수 컴포넌트, 클래스형 컴포넌트이다. 함수 컴포넌트(2장에서 봤던 App 컴포넌트가 함수 컴포넌트임) 클래스형 컴포넌트에 비해 선언하기 편리 메모리 자원 적게 사용, 빌드 후 결과물의 파일 용량이 적음 (클래스형 컴포넌트와 큰 차이 없음) state 및 라이프사이클..

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

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