9장 컴포넌트 트리에 데이터 공급하기 Context 상태 변화 코드를 쉽게 분리할 수 있다. Context를 사용하는 이유 'Props Drilling' 문제를 해결하기 위해 Props Drilling : Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되어야 하는데, 때로는 중간에 있는 여러 컴포넌트를 통해 전달되어야 하는 경우가 있다. 이때 발생하는 것이 Props Drilling 문제이다. Context란? 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능 ex) project2의 Body, Sidebar, Main은 모두 "할 일을 관리한다"라는 문맥 아래에서 동작하는 컴포넌트 ContextAPI Context를 만들고 다루는 리액트 기능 Context 만들기 import React..

23-24/React.js 3 2024. 1. 5. 10:00

이번장에서는 보안과 관련된 용어와 개념을 알아보고 스프링에 보안을 적용할 때 사용하는 스프링 스큐리티(Spring Security)에 대해 알아보겠습니다. 먼저 보안과 관련된 용어를 간단하게 설명하겠습니다. 인증(authentication) : 사용자가 누구인지 확인하는 단계를 의미합니다. 대표적으로 '로그인'이 있습니다. 로그인이 성공하면 애플리케이션 서버는 응답으로 사용자에게 토큰(token)을 전달합니다. 로그인에 실패한 사용자는 토큰을 전달받지 못해 원하는 리소스에 접근할 수 없게 됩니다. 인가(authorization) : 앞서 설명한 인증을 통해 검증된 사용자가 애플리케이션 내부의 리소스에 접근할 때 사용자가 해당 리소스에 접근할 권리가 있는지를 확인하는 과정을 의미합니다. 일반적으로 인증 단..

23-24/Spring 2 2024. 1. 5. 10:00

13.1 보안 용어 이해 13.1.1 인증 인증(authentication): 사용자가 누구인지를 확인하는 단계 가장 대표적인 인증의예가 "로그인" 데이터베이스에 등록된 아이디와 패스워드를 사용자가 입력한 아이디와 비밀번호와 비교해 일치 여부 확인 로그인에 성공하면 애플리케이션 서버는 응답으로 사용자에게 토큰(token)을 전달 로그인에 실패한 사용자는 토큰을 전달받지 못해 원하는 리소 스에 접근할 수 없음 13.1.2 인가 인가(authorization): 인증을 통해 검증된 사용자가 애플리케이션 내부의 리소스에 접 근할 때 사용자가 해당 리소스에 접근할 권리가 있는지를 확인하는 과정 예) 로그 인한 사용자가 특정 게시판에 접근해서 글을 보려고 하는 경우 게시판 접근 등급을 확인해 접근을 허가 하거나 ..

23-24/Spring 3 2024. 1. 5. 10:00

1. Context 리액트 컴포넌트 트리 전체를 대상으로 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능이다. 리액트 컴포넌트 계층 구조에서 컴포넌트 간에 값을 전달할 때 발생하는 Props Drilling 문제를 해결하기 위해 사용한다. Context를 이용하면 단계마다 일일이 Props를 전달하지 않고도 컴포넌트 트리 전역에 데이터를 공급할 수 있어 Props Drilling 문제를 간단하게 해결할 수 있다. 2. ContextAPI Context를 만들고 다루는 리액트 기능으로 createContext, Context.Provider 등이 있다. React.createContext를 이용하면 새로운 Context를 만들 수 있다. import React from "react"; con..

23-24/React.js 2 2024. 1. 5. 10:00

11.1 테스트 준비하기 - 테스트에 사용할 패키지 jest - 9장의 NodeBird 프로젝트에 jest 패키지 설치 * jest $npm i -D jset package.json에 test라는 명령어를 등록하고 명령어 실행 시 jest 실행 //package.json { "name":... "version":... ... "scrpits":{ "start":... "test":"jest" }, ... } routes 폴더 안에 middlewares.test.js를 만든다. 테스트용 파일은 파일명과 확장자 사이에 test나 spec을 넣으면 된다. //middlewares.test.js test('1+1은 2 입니다.',()=>{ expect(1+1).toEqual(2); }) 함수의 첫 번째 인수로는..

23-24/Node.js 1 2024. 1. 5. 10:00

🌟12장 키워드🌟 웹 소켓 socket.io ws 양방향 단방향 12.1 웹 소켓 이해하기 웹 소켓: HTML5에 새로 추가된 스펙 실시간 양방향 데이터 전송 가능 WS 프로토콜 사용 사용조건은 서버와 브라우저가 WS프로토콜을 지원할 것(노드 같은 것과 최신의 브라우저는 ws혹은 Socket.IO 같은 패키지로 웹 소켓 사용 가능) 최초 연결 이후 쭉 연결된 상태이므로 업데이트 유무 확인 요청 보낼 필요 없음(폴링의 단점 해결) HTTP 프로토콜과 포트 공유 가능하므로 다른 포트에 연결할 필요 없음 서버센트이벤트의 작업 가능 폴링: 웹 소켓이 나오기 이전의 기술 주기적으로 서버에 새로운 업데이트가 있는지 확인해야 하는 단점 단방향 통신 클라이언트 -> 서버 O 서버 -> 클라이언트 X 서버센트 이벤트 S..

23-24/Node.js 2 2024. 1. 5. 10:00

안녕하세요, 컴퓨터공학전공 IT개발동아리 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team A103의 메타버스에 대한 이야기인데요, 메타버스 유형별 특징에 대해 알아봅시다!

Corner 코너 2024. 1. 4. 14:30

🌟11장 키워드🌟 jest 패키지 유닛 테스트 테스트 커버리지 통합 테스트 부하 테스트 1. 테스트 준비 (9장의 NodeBird 서비스를 그대로 사용) 테스트를 위한 jest 패키지 설치 npm i -D jest package.json에 명령어 추가 "scripts": { "start": "nodemon app", "test": "jest" }, middlewares/index.test.js 에 테스트 코드 작성 후 npm test로 테스트 실행 2. 유닛 테스트 실제 NodeBird의 코드를 테스트해 보기 middlewares/index.js에 있는 isLoggedIn, isNotLoggedIn 함수를 테스트 https://inpa.tistory.com/entry/JEST-%F0%9F%93%9A-%E..

23-24/Node.js 2 2023. 12. 29. 10:00

1. useReducer 이해하기 이전에 작성한 [할 일 관리] 앱을 열고 component 폴더에 TestComp.js라는 임시 컴포넌트를 하나 만든다. TestComp.js 작성 import { useState } from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; TestComp를 App 컴포넌트의 자식으로 배치해 페이지에 렌더링 한..

23-24/React.js 2 2023. 12. 29. 10:00

최근 개발되는 서비스들은 마이크로서비스 아키텍처(MSA)를 주로 채택 MSA란 애플리케이션이 가지고 있는 기능(서비스)이 하나의 비지니스 범위만 가지는 형태 12.1 RestTemplate이란? RestTemplate은 스프링에서 HTTP 통신 기능을 손쉽게 사용하도록 설계된 템플릿 HTTP 서버와의 통신을 단순화한 이 템플릿을 이용하면 RESTful 원칙을 따르는 서비스를 편리하게 만들 수 있다. RestTemplate은 기본적으로 동기 방식으로 처리되며, 비동기 방식으로 사용하고 싶은 경우 AsyncRestTemplate 사용 RestTemplate은 많이 사용되지만 지원 중단(deprecated)된 상태이므로 향후 자주 사용될 WebClient 방식도 알아두기를 권장 ✅ RestTemplate 특징..

23-24/Spring 3 2023. 12. 29. 10:00

최근 서비스들은 마이크로서비스 아키텍처(MSA)를 주로 채택합니다. MSA는 애플리케이션이 가지고 있는 서비스가 하나의 비즈니스 범위만 가지는 형태로, 애플리케이션은 자신이 가진 기능을 API로 외부에 노출하고, 다른 서버가 API를 호출하여 사용할 수 있게 구성합니다. 따라서 각 서버가 다른 서버의 클라이언트가 되는 경우가 많습니다. 이번 장에서 다른 서버로 웹 요청을 보내고 응답을 받을 수 있게 돕는 통신 모듈인 RestTemplate와 WebClient에 대하여 알아봅시다. 12.1 RestTemplate이란? RestTemplate은 HTTP 통신 기능을 손쉽게 사용하도록 설계된 스프링 템플릿입니다. HTTP 서버와의 통신을 단순화한 템플릿을 이용하면 RESTful 원칙을 따르는 서비스를 편리하게..

23-24/Spring 2 2023. 12. 29. 10:00

7장 useReducer와 상태 관리 useReducer 이해하기 상태 변화 코드를 쉽게 분리할 수 있다. 실습 준비하기 1. component > TestComp.js 생성 import {useState} from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); }; const onDecrease = () => { setCount(count-1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; + 버튼 : onIncrease 함수 호출 → count 값 +1 - 버튼 : onDec..

23-24/React.js 3 2023. 12. 29. 10:00