거니의 velog

* Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있다. Context API는 리액트 v.16.3부터 사용하기 쉽게 많이 개선되었다. 이 기능은 리액트 관련 라이브러리에서도 많이 사용되고 있다. 예를 들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다. * 이번 실습은 다음 흐름으로 진행된다. 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 * 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 떄는 어떻게 해야 할까? 리액트 애플리케이션은 컴포넌트 간..

7. 리액트 라우터 적용하기 * 방금 진행한 뉴스 뷰어 프로젝트에 리액트 라우터를 적용해 보자. 기존에는 카테고리 값을 useState로 관리했는데, 이번에는 이 값을 리액트 라우터와 URL 파라미터를 사용하여 관리해 보자. (1) 리액트 라우터의 설치 및 적용 * 우선 현재 프로젝트에 리액트 라우터를 설치하자. $ yarn add react-router-dom // v5 설치 용도 $ yarn add react-router-dom@5 * 그리고 index.js에서 리액트 라우터를 적용하자. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; impor..

5. 데이터 연동하기 * 이제 NewsList 컴포넌트에서 이전에 연습 삼아 사용했던 API를 호출해 보도록 하자. 컴포넌트가 화면에 보이는 시점에 API를 요청해 볼 것이다. 이때 useEffect를 사용하여 컴포넌트가 맨 처음 렌더링되는 시점에 API를 요청하면 된다. 여기서 주의할 점은 useEffect에 등록하는 함수에 async를 붙이면 안 된다는 것이다. useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문이다. * 따라서 useEffect 내부에서 async/await 를 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해 주어야 한다. * 추가로 loading이라는 상태도 관리하여 API 요청이 대기 중인지 판별할 것이다. 요청이 대기 중일 때는..

3. newsapi API 키 발급받기 * 이번 프로젝트에서는 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러온 후 보여 줄 것이다. 이를 수행하기 위해서는 사전에 newsapi에서 API 키를 발급받아야 한다. API 키는 아래 주소로 가입하면 발급받을 수 있다. https://newsapi.org/register Register - News API Email addresses will be verified, please enter a real one. Disposable addresses have been blocked. Reminder: If you are a business or are using News API commercially then a subscription is req..

package kr.or.ddit.security; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.security.core.Authentication; import org.springframework.security.core.userdetails.Use..

package kr.or.ddit.controller; public class SecurityController { /* * [ 18장 : 스프링 시큐리티 ] * * 1. 스프링 시큐리티 소개 * * - 애플리케이션에서 보안 기능을 구현하는데 사용되는 프레임워크이다. * - 스프링 시큐리티는 필터 기반으로 동작하기 때문에 스프링 MVC와 분리되어 동작한다. * * # 기본 보안 기능 * - 인증 (Authentocation) * > 애플리케이션 사용자의 정당성을 확인한다. * * - 인가 (Authorization) * > 애플리케이션의 리소스나 처리에 대한 접근을 제어한다. * * # 시큐리티 제공 기능 * - 세션 관리 * - 로그인 처리 * - CSRF 토큰 처리 * - 암호화 처리 * - 자동 로..

* 지금까지 배운 것을 활용하여 카테고리 별로 최신 뉴스 목록을 보여 주는 뉴스 뷰어 프로젝트를 진행해 볼 것이다. https://newsapi.org/ News API – Search News and Blog Articles on the Web“Ascender AI has a mission to apply AI to the media, and NewsAPI is one of our most valuable resources. Ascender is redefining how users interact with complex information, and the NewsAPI feed is an essential showcase for our technologies.” Braddock Ganewsapi.o..