일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 자동차수리시스템
- 객체 비교
- oracle
- 메소드오버로딩
- 예외미루기
- 자바
- GRANT VIEW
- Java
- 추상메서드
- 집합_SET
- exception
- EnhancedFor
- 정수형타입
- 인터페이스
- 컬렉션 타입
- 오라클
- cursor문
- 예외처리
- 대덕인재개발원
- 생성자오버로드
- 컬렉션프레임워크
- 사용자예외클래스생성
- abstract
- NestedFor
- 제네릭
- 어윈 사용법
- 한국건설관리시스템
- 다형성
- 환경설정
- 참조형변수
- Today
- Total
목록전체 글 (597)
거니의 velog
4. Consumer 대신 Hook 또는 static contextType 사용하기 * 이번에는 Context에 있는 값을 사용할 때 Consumer 대신 다른 방식을 사용하여 값을 받아 오는 방법을 알아보자. (1) useContext Hook 사용하기 * 리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있다. ColorBox 컴포넌트의 코드를 다음과 같이 수정해 보자. [ColorBox.js] import React, { useContext } from "react"; import ColorContext from "../contexts/color"; const ColorBox = () => { const ..
3. 동적 Context 사용하기 * 지금까지 배운 내용으로는 고정적인 값만 사용할 수 있다. 이번에는 Context의 값을 업데이트해야 하는 경우 어떻게 해야 하는지 알아보자. (1) Context 파일 수정하기 * Context의 value에는 무조건 상태 값만 있어야 하는 것은 아니다. 함수를 전달해 줄 수도 있다. * 기존에 작성했던 ColorContext의 코드를 다음과 같이 수정해 보자. 이번에 코드를 작성한 후 저장하면 오류가 발생할 텐데, 해당 오류는 나중에 수정할 것이므로 걱정하지 말자. [color.js] import { createContext, useState } from "react"; const ColorContext = createContext({ state: { color: ..
* 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..
6. 리액트 라우터 부가 기능 (1) History * History 객체는 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나로, 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있다. 예를 들어 특정 버튼을 눌렀을 때 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지해야 할 때 history를 활용한다. * 이 객체를 사용하는 예제 페이지를 한 번 작성해 보자. HistorySample 이라는 컴포넌트를 다음과 같이 만들어 보자. [HistorySample.js] import React, { Component } from "react"; class HistorySample extends Component ..