[React] useRef
2022. 5. 8. 17:13
프로그래밍/React
useRef로 특정 DOM 선택 자바스크립트에서 특정 DOM을 선택해야 하는 경우, getElementById, querySelector과 같은 DOM selector 함수를 사용했다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 있다. 특정 input에 포커스 주기 특정 엘리먼트 크기 가져오기 스크롤바 위치 가져오거나 설정 Canvas 요소에 그리 그리기 등 이러한 경우에 DOM에 직접적으로 접근하기 위해 ref를 사용한다. 더보기 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 이는 잘못 사용된 것이다. 사용은 가능하지만 리액트 사상에 어긋난 설계이다. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 ↔ 자식 흐름으로 교류해야 한다. 이러한 ref를 함수 ..
[JS] 고차 함수
2022. 5. 2. 12:10
프로그래밍/JavaScript
고차 함수 함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차함수라고 한다. 고차함수를 이용하면 코드의 중복을 제거하는 것이 용이하다. const func = () => { return () => { console.log('hello'); }; }; 반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다. const innerFunc = func(); innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다. const func = (msg) => { return () => { console.log(msg); }; }; 화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다. cons..
[JS] 태그 선택, 이벤트 달기
2022. 4. 29. 17:52
프로그래밍/JavaScript
querySelector 자바스크립트에서는 HTML 태그를 가져오는 것을 선택한다고 표현한다. querySelector는 선택하기 위해 사용하는 함수이고, 사용 방법은 다음과 같다. document.querySelector('선택자') 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열을 의미한다. 태그가 여러 개 있는 경우에 모두 선택하고 싶을 경우 querySelectorAll 함수를 사용한다. 1번째 참가자 제시어: 입력 버튼2 버튼3 버튼이 세 개 이므로 콘솔 창에 세 개의 태그가 동시에 표시된다. 여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아니라 NodeList라는 특수한 객체이다. 세 개의 버튼 중 두 번째와 세 번째 버튼을 동시에 선택하고 싶을 경우 ..
[Spring] Auto-wiring
2022. 4. 25. 01:26
프로그래밍/Spring
Auto-wiring (의존 관계 자동 설정) 개념 Dependency Injection을 명시적으로 설정하지 않아도 container가 bean의 타입이나 이름을 이용하여 DI를 자동으로 수행하는 기능 XML 설정 방법 엘리먼트에 autowire 속성을 이용하여 자동 설정 방식 지정 모든 bean 객체들에 대해 특정 방식을 적용하려면 엘리먼트에 default-autowire 속성 이용 autowire 값 의미 no (default) auto-wiring을 수행하지 않음 byName property와 같은 이름 또는 id 값을 갖는 bean을 찾아 주입 (setter-based injection) byType property와 같은 타입을 갖는 bean을 찾아 주입 (setter-based injecti..
[Spring] DI - XML 기반 설정
2022. 4. 24. 17:34
프로그래밍/Spring
Spring Container 핵심 기능 자바 객체(bean)의 라이프 사이클 관리 Dependency Injection(DI) 종류 BeanFactory interface의 구현체 Bean 객체를 생성하고 DI를 실행하는 기본적인 기능 제공 ApplicationContext interface 및 그 sub-interface의 구현체 Anntation 기반 설정, Java code 기반 설정 다양한 부가 기능 추가 제공 Spring Container의 bean 생성 및 관리 BeanFactory interface org.springframework.beans.factory.BeanFactory Spring container에 대한 기본적인 API 정의 getBean(String name, Class re..
[Spring] Spring MVC(2)
2022. 4. 22. 05:04
프로그래밍/Spring
MVC Pattern Model: Business logic 실행, 데이터 처리, 결과 데이터 생성 View: User interface 생성(presentation logic 실행), 출력 화면 생성 Controller: Request 처리, request/response 데이터 전달 Spring MVC 주요 구성요소 DispatcherServlet: Client의 요청(request)을 받아 Contoller에게 전달. Controller의 처리 결과를 View에 전달하여 응답(response)을 생성하도록 함(front controller) HandlerMapping: Client의 요청 URL을 어떤 Controller가 처리할지를 결정 HandlerAdapter: DispatcherServlet..
[React] 이벤트 핸들링
2022. 4. 19. 10:48
프로그래밍/React
이벤트 (Event) 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 onmouseover, onclick 이벤트 등 import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕하세요!'); const onClickLeave = () => setMessage('안녕히 가세요!'); const [color, setColor] = useState('black'); return ( 입장 퇴장 ... 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML의 onclick -> ..
[Spring] Spring MVC(1)
2022. 4. 17. 11:17
프로그래밍/Spring
스프링을 사용하는 이유 스프링이 지원하는 웹 MVC 프레임워크 때문이다. 스프링 MVC의 설정 방법만 익혀두면 웹 개발에 필요한 다양한 기능을 구현할 수 있게 된다. 프로젝트 생성 웹 어플리케이션을 개발을 위한 메이븐/그레이들 프로젝트는 웹을 위한 디렉토리 구조가 추가된다. src/main/java src/main/webapp src/main/webapp/WEB-INF src/main/webapp/WEB-INF/view webapp은 HTML, CSS, JS, JSP 등 웹 어플리케이션을 구현하는데 필요한 코드가 위치한다. WEB-INF에는 web.xml 파일이 위치한다. 스프링 MVC 설정 스프링 MVC를 실행하는데 필요한 최소 설정은 다음과 같다. 스프링 MVC의 주요 설정(HandlerMapping..
[JS] 이벤트 버블링 / 이벤트 위임
2022. 4. 11. 01:50
프로그래밍/JavaScript
window 브라우저 전체를 담고 있는 객체 document는 웹 페이지 전체를 의미 요소를 가져오는 방법 중 가장 대표적으로 쓰이는 것 document.querySelector()의 첫 번째 인자 안에는 css 선택자들을 넣어줌 이벤트를 감지하려면 리스너를 달아줌 addEventListener('click', () => {}) 첫 번째 인자는 어떤 이벤트가 발생했는지를 문자열로 두 번째 인자는 콜백 함수 요소 생성 document.createElement("button") 첫 번째 인자는 생성하고자 하는 태그의 이름을 문자열로 span.innerText = "X"; li.appendChild(span) button.addEventListner()도 가능 button.onclick = () => {} l..
[Spring] Spring DI
2022. 4. 1. 17:31
프로그래밍/Spring
Spring DI DI는 'Dependency Injection'의 약자로 '의존 주입'을 의미한다. 여기서 말하는 '의존'은 객체 간의 의존을 말한다. import java.time.LocalDateTime; public class MemberRegisterService { private MemberDao memberDao = new MemberDAO(); public void regist(RegisterRequest req) { Member member = memberDao.selectByEmail(req.getEmail()); if (member != null) { throw new DuplicateMemberException("dup email " + req.getEmail()); } Member..