제어 역전(Inversion of Control) 일반적인 자바 개발은 객체를 사용하기 위해 사용하려는 객체를 개발자가 직접 선언(new)하고, 제어하는 구조 입니다. 하지만! 제어 역전을 특징으로 하는 스프링은 객체의 생명 주기 관리를 외부(Spring Container, IoC Container)에 위임 합니다. 이처럼 객체의 관리를 컨테이너에 맡겨 제어권이 넘어간 것을 제어 역전이라고 합니다. IoC 컨테이너 역할 객체의 생명주기와 의존성 관리 객체의 생성, 초기화 및 소멸 담당 소스 구현 시간을 단축시키고, 의존 관계 낮춤 의존성 주입(DI) 제어 역전의 방법 중 하나로 사용할 객체를 직접 생성하지 않고, 외부 컨테이너가 생성한 객체를 주입받아 사용하는 방식 생성자를 통한 의존성 주입 필드 객체 ..
객체지향 복습 💡 면접에 자주 등장하는 다형성, 추상 클래스, 인터페이스 객체지향 4대 특성 캡슐화, 상속, 추상화, 다형성 상속을 왜 하는가? 재사용성(그대로 물려받되 변경이 필요한 경우) 이 때 일어나는게 다형성 📌 부모, 자식 클래스 모두 구현부가 있음. 캡슐화 내부 인스턴스를 외부에서 접근하는 것으로부터 보호하기 위함. 예) 운전자는 차 속도를 높일 때 엔진에 직접 접근하여 속도를 제어하면 안 됨. 최고 속도가 200km/h인데 250km/h로 조절하면 큰일남.. ✴️ 다형성 상위 클래스 타입의 참조 변수로 하위 클래스의 객체를 참조할 수 있다. 하위 클래스 is kind of 상위 클래스 💡 스프링 부트의 의존성 주입(AOP)과 비슷(객체를 누가 만들었냐에 따라 다름.. ex.제어 역전(IoC)..
안녕하세요. 마지막 글 올린게 .. 거의 한 달전이네요! 4월 19일부터 본격적으로 미니 프로젝트 시작해서 하루하루 정신이 없어서 글을 못 쓰다가 오늘 공식 일정이 끝난 김에 프로젝트 후기글을 쓰러 왔습니다. 정말 많은 일이 있었는데 그걸 다 쓰기엔 너무 TMI가 될 것 같아서 최대한 줄이고 줄여서 쓰고자 합니다. ㅎㅎ 제가 팀 리더로 선정이 되어 저 포함 3명이서 한 조를 이루었고, 스토리보드 기획은 약 1.5주간 진행했습니다. (4/5~4/15) 스토리보드는 Figma, Canva(로고), Miro, Google slide 등 다양한 툴을 사용하여 작업하였습니다. 정말 당연한 이야기지만 스토리보드 때 기획했던 그~대로 실제 작업물이 나왔습니다. (ㅋㅋㅋ) -> 이건 아래에서 보여드릴게요. 디자인이 ..
라우팅이란? 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트를 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템 입니다. 👉 리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글페이지 애플리케이션(SPA)를 만들 수 있습니다. SPA는 이름 그대로 페이지 하나로 돌아가는 애플리케이션이기 때문에 페이지 이동시 버벅임 없이 부드럽게 전환되지만, 웹 페이지 정보가 없기 때문에 SEO에는 매우 취약합니다. 허나 이는 HTML meta태그에 정보를 올리면 되어서 크게 걱정할 정도는 아닙니다. 최근에는 이런..
리액트에서 컴포넌트를 스타일링 할 때는 다양한 방식을 사용할 수 있습니다. 회사마다 요구하는 방식이 다르고 개발자마다 각자 취향에 따라 선택해서 사용할 수 있습니다. 자주 사용되는 스타일링 방식 일반 CSS : 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줍니다. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 입니다. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줍니다. 🔮 리액..
Hook 리액트 버전 16.8에 새로 도입된 기능 입니다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 합니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수 입니다. ⭐️ useState useState()는 리액트에서 상태(state)를 관리하기 위해 제공되는 hook 입니다. useState()를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있으며, 상태가 변경될 때마다 컴포넌트가 자동으로 다시 렌더링 됩니다. useState()는 배열 형태로 변환되며, 첫 번째 요소는 '현재 상태'이고, 두 번째..
리액트에서 배열과 맵은 컴포넌트 렌더링에서 매우 중요한 역할을 합니다. 배열은 순서가 '있는' 데이터의 집합으로, 각 요소는 인덱스를 가지고 있습니다. 맵은 key와 value를 가지는 구조로, key와 value 쌍으로 이루어져 있으며 key는 중복되지 않는 고유한 값 입니다. 고정 배열 렌더링 🙁 비효율 적인 방법 : 배열 그대로 작성하는 방법 import React from 'react'; const ArrayTest = () => { const users = [ { id: 100, userName: 'Karly', eMail: 'king@naver.com' }, { id: 200, userName: 'Elastine', eMail: 'hoho@gmail.com' }, { id: 300, userN..
Ref 참조(reference)의 줄임말로, React에서 DOM 요소나 클래스 컴포넌트 인스턴스에 대한 직접적인 참조를 생성하고, 저장하는 데 사용되는 객체 입니다. 사용 목적 DOM 요소에 대한 참조 👉 Ref를 사용하여 DOM 요소를 직접 조작할 수 있습니다. 이를 통해 포커스 설정, 텍스트 선택, 애니메이션 등을 구현할 때 유용합니다. 리액트 컴포넌트에서 id를 사용하면 안되는 이유!!! 👉 리액트 컴포넌트 안에서도 id를 사용할 수는 있습니다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 그대로 전달 됩니다. 하지만 특수한 경우가 아니면 사용을 권장하지 않습니다. 하나의 컴포넌트를 여러 번 호출하는 경우 유일해야 할 id가 중복 id로 만들어지게 됩니다. useRef Reac..
리액트에서 이벤트 핸들링은 HTML과 '비슷'하게 처리됩니다. 이벤트 핸들러는 JSX 요소의 props로 전달되며, 함수 형태로 작성 됩니다. 이벤트 핸들러 함수 정의 이벤트 핸들러 함수를 이벤트에 연결 이벤트 핸들러 함수에서 상태 업데이트 import React, {useState} from "react"; const EventHandler = () => { const [message,setMessage] = useState("안녕하세요."); // 값이 아닌 주소를 가지고 상태가 변했는지 판단함. const changeMessage= (e) => { setMessage(e.target.value); } return ( 이벤트 연습 입력 받은 메시지 : {message} ); } export defau..
들어가기 전에 ... 👉 리액트 16.8 이전 버전에서는 함수 컴포넌트에서 state를 사용할 수 없었습니다. 하지만 16.8 부터는 useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 사용법은 클래스 컴포넌트와 조금 다른데요. 이 과정에서 Hook을 사용합니다. ⭐️ 배열 비구조화 할당 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 도와주는 ES6 문법 중 하나 입니다. // 예제 1.(객체 리터럴) const person = { name: '홍길동', age: 30, address: '서울시 강남구', email: 'honggildong@naver.com' } const { name, age } = person; // 예제 2. (배열) const col..