거니의 velog

* 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 방식이란 없다. 회사마다 요구하는 스펙이 다르고, 개발자마다 각자 취향에 따라 선택하기 때문이다. 이 장에서는 어떠한 방식이 있는지 알아보고, 자주 사용하는 방식을 하나하나 사용해 보도록 하겠다. * 이 장에서 알아볼 스타일링 방식은 다음과 같다. - 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식이다. - Sass : 자주 사용되는 CSS 전처리기(pre-proccessor)중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있게 해 준다. - CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유..

4. useMemo * useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여 주는 함수형 컴포넌트를 작성해 보자. * src 디렉터리에 Average.js 파일을 생성하고 다음의 코드를 작성해 보자. import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중..."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () ..

[loginTemplate.jsp] DDIT BOARD Remember Me 로그인 아이디&비밀번호 찾기 회원가입 DDITBOARD 회원가입 프로필 이미지 프로필 이미지를 선택해주세요 프로필 정보 중복확인 남자 여자 우편번호 찾기 개인정보처리방침 가입하기 뒤로가기 package kr.or.ddit.controller.crud.notice; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMet..

* Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. * 이번 실습은 다음과 같은 흐름으로 진행된다. * 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해 주자. $ yarn create react-app hooks-tutorial 1. useState * useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 이전에도 이미 사용해 보았는데, 이번 장에서 다시 복습해 보자. 만약 함수형 컴포넌트에서 상태를..

3. 라이프사이클 메서드 사용하기 * 이전에 살펴본 라이프사이클 메서드를 직접 사용해 본다. 이번 실습은 다음 흐름으로 진행된다. (1) 예제 컴포넌트 생성 src 디렉터리에 LifeCycleSample.js라는 컴포넌트를 만들자. import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, }; myRef = null; // ref를 설정할 부분 constructor(props) { super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState)..

* 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. * 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. * 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 사용할 수 없는데, 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. Hooks에 대한 내용은 다음에 알아보도록 하자. 1. 라이프사이클 메서드의 이해 * 라이프사이클 메서..

@Slf4j @Controller @RequestMapping("/item3") public class FileUploadController03 { /* * 4. 비동기 방식 업로드 * * - 비동기 방식으로 여러 개의 이미지를 업로드 하는 파일 업로드 기능을 구현한다. * * # 환경설정 * * - 의존 관계 정의(pom.xml 설정) * > commons-io: 파일을 처리하기 위한 의존 라이브러리 * > imgsalr-lib: 이미지 변환을 처리하기 위한 의존 라이브러리 * > jackson-databind: json 데이터 바인딩을 위한 의존 라이브러리 * * # 파일 업로드 구현 설명 * * - 파일 업로드 등록 화면 컨트롤러 만들기 (FileUploadController03) * - 파일 업로..

package kr.or.ddit.controller.file.item03; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import lombok.extern.slf4j.Slf4j; @Slf4j @Controller @RequestMapping("/item3") public class FileUploadController03 { /* * 4. 비동기 방식 업로드 * * - 비동기 방식으로 여러 개의 이미지를 업로드 하는 파일 업로드 기능을 ..