🔍 CLI (Command Line Interface) 콘솔 창을 통해 프로그램을 수행하는 환경 그래픽 사용자 인터페이스와 반대되는 개념 대표적인 CLI 방식 소프트웨어 : 리눅스의 셸, 브라우저의 콘솔, 명령 프롬프트 대표적인 GUI 방식 소프트웨어 : 윈도와 맥 운영체제, 웹 애플리케이션 ✅ 콘솔 명령어 node나 npm, nodemon처럼 콘솔에 입력하여 어떤 동작을 수행하는 문장 패키지명과 콘솔 명령어는 다르게 만들 수 있다 //package.json { ... "license": "ISC", "bin": { "cli": "./index.js" } bin : 콘솔 명령어와 해당 명령어를 호출할 때 실행 파일을 설정하는 객체 현재 콘솔 명령어는 cli, 실행 파일은 index.js로 지정 $ npm..

22-23/22-23 Node.js 2023. 1. 5. 10:00

이번 13장에서는 리액트 라우터로 SPA를 개발하는 방법에 대해서 알아보고자 합니다. ​ 13.1 SPA란? Single Page Application의 약자인 SPA는 한 페이지로 이루어진 애플리케이션을 의미합니다. 서버에서 사용자에게 제공하는 화면은 한 종류지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면 가질 수 있습니다. 이전에 만든 todo-list 웹 애플리케이션을 사례로 보면, 홈, 포스트 목록, 포스트 등 여려 화면을 볼 수 있었습니다. 사용자에게 보이는 화면을 서버가 준비하는 전통적인 웹 페이지와 달리, 리액트 같은 라이브러리 혹은 프레임워크를 사용하는 방법이 있습니다. 좀 더 구체적으로 이를 설명하면 아래와 같습니다. 뷰 렌더링 -> 사용..

22-23/22-23 리액트 스타터 1 2023. 1. 5. 10:00

13.1 라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다. 블로그를 만든다고 가정한다면, 블로그 애플리케이션은 여러 페이지로 구성되어 있습니다. 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 포스트 목록 페이지: 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우팅 시스템을 구축하기 위해 사용할 ..

22-23/22-23 리액트 스타터 3 2023. 1. 5. 10:00

13장의 키워드 세션 보관 클래스 HttpSession 인터셉터 - HandlerInterceptor 쿠키 * 이 장에서는 로그인 기능을 이용해 세션, 인터셉터, 쿠키에 대해 설명한다. 로그인 처리를 위한 코드 준비 AuthInfo 클래스 : 로그인 성공 후 인증 상태 정보(ID, Email, Name)를 세션에 보관할 때 사용 AuthService 클래스 : 이메일과 비밀번호가 일치하는지 확인 후, AuthInfo 객체를 생성 * 암호 일치 여부를 확인하기 위한 matchPassword() 메서드를 Member클래스에 추가한다. public class AuthService { private MemberDao memberDao; public void setMemberDao(MemberDao memberD..

22-23/22-23 Spring 2 2023. 1. 5. 10:00

전개 연산자와 배열의 내장 함수를 이용해 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어쓸 수 있습니다. 그러나 객체 구조가 엄청나게 깊어지면 불변성을 유지하며 이를 업데이트하기 어렵습니다. 이번 장에서는 immer라는 라이브러리를 사용하여 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트하는 것을 배워보도록 하겠습니다. 12.1 immer를 설치하고 사용법 알아보기 immer 라이브러리를 사용하기 위해서는 yarn을 통해 설치해야 합니다.이번 예제로 쓸 리액트 프로젝트와 함께 immer을 설치해 주세요. $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer 위와 같이 폼에서 아이디와 이름을 입력하면..

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

11장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트하는 것이 왜 중요한지 배웠습니다. 전개 연산자와 배열의 내장함수를 사용하면 간단하게 배열과 객체를 복사하고 새로운 값을 덮어쓸 수 있지만, 객체의 구조가 매우 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듭니다. 이러한 상황에서 immer라는 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하면서 업데이트를 해줄 수 있습니다. 12.1 immer를 설치하고 사용법 알아보기 12.1.1 immer 설치 $ yarn add immer 12.1.2 immer를 사용하지 않고 불변성 유지 먼저 immer를 사용하지 않고 불변성을 유지하면서 값을 업데이트하는 컴..

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

10장에서 만든 일정 관리 애플리케이션은 추가되어 있는 데이터가 매우 적기 때문에 아직은 사용하는 데 불편함이 없습니다. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 따라서 11장에서는 이와 같은 흐름으로 컴포넌트 성능 최적화를 위한 실습을 진행합니다. 많은 데이터 렌더링하기 -> 크롬 개발자 도구를 통한 성능 모니터링 -> react.memo를 통한 컴포넌트 리렌더링 성능 최적화 -> onToggle과 onRemove가 새로워지는 현상 방지하기 -> react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 우선 실제로 랙(lag)을 경험해보기 위해 많은 데이터를 렌더링해 보겠습니다. createBulkTodos ..

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

앞선 단원에서 전개 연산자와 배열의 내장 함수를 사용하여 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓰는 것을 배웠습니다. 하지만 객체의 구조가 깊어진다면 불변성을 유지하면서 업데이트하는 것은 힘든 일입니다. 이러한 상황에 immer라이브러리를 사용해볼 수 있습니다. 이번 단원에서는 다음과 같은 순서로 진행합니다. immer 설치 immer 사용법 App 컴포넌트에 immer 적용하기 useState의 함수형 업데이트와 immer 함께 쓰기 I. immer 설치 및 사용법 알아보기 1. immer 설치 $ yarn add immer 2. immer 사용법 immer라이브러리를 사용하면 불변성을 유지하면서 간단하게 값을 업데이트할 수 있습니다. import produce from 'immer'; cons..

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

지난 장에서 학습한 내용을 활용해 애플리케이션을 만들었습니다. 데이터가 적을 때 사용하는 것은 불편하지 않지만, 데이터가 무수히 많아지면 지연이 발생하여 애플리케이션이 느려질 것입니다. 이번 실습에서는 이를 해결하는 과정을 다룹니다. 이번 장에서는 많은 데이터를 렌더링하고, 크롬 개발자 도구로 성능을 모니터링하고, React.memo를 통해 컴포넌트 리렌더링 성능을 최적화하고, onToggle과 onRemove가 새로워지는 현상을 방지하고, react-virtualized를 사용하여 렌더링을 최적화하겠습니다. 11.1 많은 데이터 렌더링하기 우선 지연을 발생시키도록 많은 데이터를 렌더링하겠습니다. App 컴포넌트를 수정합니다. //App.js import { useState, useRef, useCall..

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

데이터가 무수히 많아지면 앱 속도가 느려지는 것을 체감할 정도의 지연이 발생한다. I. 많은 데이터 렌더링하기 => App 컴포넌트를 다음과 같이 수정하여 데이터를 추가하면 랙(lag)이 발생한다. createBulkTodos 함수를 만들어 2500개의 데이터를 자동 생성한다. //App.js function createBulkTodos() { const array = []; for(let i=1;i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); (...) }; export default App; 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것이다. useState( createBulk..

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

12장의 키워드 메시지(문자열) 다루기 MessageSource 문자열 관리 인터페이스 메시지 출력 태그 커맨드 객체의 값 검증과 에러 메시지 처리 에러 메시지 처리 태그 Validator (글로벌 범위, 컨트롤러 범위) Bean Validation을 이용한 값 검증 처리 MessageSource 문자열 관리 인터페이스 스프링은 locale(지역)에 상관없이 일관된 방법으로 문자열(메시지)를 관리할 수 있도록 MessageSource 인터페이스를 제공한다. 특정 지역에서 메시지를 사용할 때 getMessage()를 이용한다. package org.springframework.context; import java.util.Locale; public interface MessageSource { String..

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

🔍 웹 소켓 실시간 양방향 데이터 전송을 위한 기술 WS 프로토콜 사용 노드에서는 WS나 Socket.IO 같은 패키지를 통해 웹 소켓 사용 가능 처음 웹 소켓 연결이 이루어지고 나면 계속 연결된 상태로 있으므로 업데이트가 있는지 따로 요청 보낼 필요 없음 HTTP 프로토콜과 포트 공유 가능하므로 다른 포트에 연결할 필요 없음 ✅ 폴링(polling) 웹 소켓 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송 구현했고, 대표적인 방법이 폴링이다. HTTP가 클라이언트에서 서버로 향하는 단방향 통신이므로 주기적으로 서버에 새로운 업데이트가 있는지 요청 보낸 후, 있다면 가져오는 단순 무식한 방법. ✅ 서버센트 이벤트(Server Sent Events, SSE) EventSource 객체 사용 처음에 한..

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