본문 바로가기

반응형

WINK-(Web & App)

(567)
[2025 1학기 스프링부트 스터디] 최비성 #5주차 섹션 6. 회원 관리 예제 - 웹 MVC 개발회원 웹 기능 - 홈 화면 추가 '/' 경로 페이지 만들기 package wink.spring_boot_study.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;@Controllerpublic class HomeController { @GetMapping("/") public String home() { return "home"; }} Hello Spring 회원 기능 회원 가입 회원 목..
[2025 1학기 스프링부트 스터디] 최비성 #4주차 섹션 5. 스프링 빈과 의존관계 스프링을 쓰면 웬만한 것들은 다 스프링빈으로 등록해서 써야 한다. 그렇게 해야 얻는 이점이 많다고 한다.컴포넌트 스캔과 자동 의존관계 설정 private final MemberService memberService = new MemberService();위처럼 쓰면 각 컨트롤러에서 MemberService 객체를 별도로 다 만들게 되는 비효율이 발생한다. 그러므로 spring container에 등록을 하고 사용해서 객체 하나만 만들어지도록 하자. private final MemberService memberService; @Autowired public MemberController(MemberService memberService) { this...
[2025 1학기 React.js 스터디] 이종민 #4주차 useRef 란 ? DOM 을 직접 선택해야 하는 상황에서 사용되는 Hook 함수입니다. 예시로 사용법을 써보겠습니다.import React, { useState, useRef } from 'react';우선 import에 useRef를 써준 뒤const nameInput = useRef();useRef를 사용하여 객체를 만들어줍니다. 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. const onReset = () => { setInputs({ name: '', nickname: '' }); nameInput.current.focus();}; 위 코드의 nameInput.current.focus(); 의 .current를 사용하여 .focus의 DOM AP..
[2025 1학기 React.js 스터디] 정채은 #4주차 1장 10~16 10. useRef 로 특정 DOM 선택하기 ref 가 뭔가? React에서 DOM요소나 클래스형 컴포넌트에 직접 접근할수 있게 도와주는 기능 ! 즉, 포인터 같은 역할 [useRef] 함수의 Hook 중 하나, 함수형 컴포넌트에서 사용되고 DOM 요소나 값을 저장할 때 사용됨.렌더링 유발 X Hook 이 먼지 몰랏다. Hook 이란.. 클래스형 컴포넌트에서만 사용되던 상태 관리와 라이프사이클 메서드를 함수형 컴포넌트에서 간단하게 사용하게 만든것. 대표 훅 들... useState(상태 관리), useEffect(사이드 이펙트 관리), useRef(DOM 접근), useContext(전역 상태 관리) ★ 클래스형 컴포넌트 vs 함수형 컴포넌트구분클래스형 컴포넌트함수형 컴포넌트선언 ..
[2025 1학기 React.js 스터디] 강민지 #4주차 1. useRef 기능 (1): ref를 사용하여 특정 DOM 선택하기 !EX) 초기화 버튼 누르고 난 후, 커서가 이름 입력칸으로 포커스 되도록 기능 구현 Ref 객체 만들기 -> 원하는 DOM에 ref값 설정 -> 실행 순서!! 2. 배열 렌더링하기 # 고정적인 배열 렌더링 # 동적인 배열 렌더링 -> map() 함수 사용 !++++++++++key(고유 식별값) props 설정 만약 고유값이 없다면, index를 key로 사용 ! 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문에key 는 꼭꼭 필요하다 !!! 3. useRef 기능 (2) : 변수를 관리 & 설정 후 바로 조회 O / 값이 바뀌어도 컴포넌트가 리렌더링 되지 않음 EX) 배열에 새 항목을 추가할..
[2025 1학기 React.js 스터디] 최은희 #4주차 소리 한 번 지르고 시작.....useRef-리액트는 DOM을 직접 조작하지 않고 가짜를 사용하는데, 직접 조작해야할 때가 생긴다 이때!! ueseRef를 사용(DOM을 조작하거나 변하지 않는 데이터를 기억할 때 사용하는 훅)(리액트 훅은 컴포넌트에서 상태관리 state나 생명주기 관리 useEffect를 가능하게 하는 함수들이라고 한다) -내부적으로 저장만 하고 싶을 때 사용한다 (화면에 보여주고 싶을 땐 useState사용) -> 무엇을 알수 있는가?!useRef로 연결된 HTML 태그는 .current를 통해 언제든지 직접 조작할 수 있다!!만약 useState로 하면 상태를 바꾸고 나면 컴포넌트가 다시 렌더링 되지만 useRef는 몰래 돔만 조작한다map()-여러 데이터를 담은 배열을 map()로..
[2025 1학기 알고리즘 스터디] 윤성욱 #3주차 11047. 동전 0import java.util.Scanner;public class makeZero { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); int k = sc.nextInt(); int cnt = 0; int[] coins = new int[n]; for (int i = 0; i = 0; i--) { if (coins[i] 1541. 잃어버린 괄호import java.io.BufferedReader;import java.io.IOException;import ..
[2025 1학기 React.js 스터디] 이가인 #4주차 1. useRef 로 특정 DOM 선택2. 배열 렌더링3. useRef로 컴포넌트 안에 변수 만들기4. 배열에 항목 추가5. 배열 항목 제거 6. 배열 항목 수정7. useEffect useRef 로 특정 DOM 선택하는 방법 - !- ref 사용 이유1. DOM에 직접 접근 가능2. useState와 달리 값이 변해도 컴포넌트가 리렌더링되지 않고 값 저장 가능함3. 이전 값이나 상태를 저장해두고 싶을 때 유용함 - useRef라는 Hook 함수 사용React에서 DOM 요소나 값의 참조(reference) 를 저장하고 유지하기 위해 사용하는 Hook 기존 InputSample코드에서 초기화 버튼을 클릭했을 때 포커스가 초기화 버튼에 그대로 남아있음이름 input 에 포커스가 잡히도록 useRef 를..

반응형