본문 바로가기
반응형

전체 글166

[React] 6장: 리스트와 Key - 동적인 목록 만들기 6장: 리스트와 Key - 동적인 목록 만들기배열 데이터를 UI에 동적으로 렌더링하는 방법을 배웁니다. React가 리스트의 변경 사항을 효율적으로 추적하고 업데이트하는 데 필요한 key prop의 중요성을 이해합니다.1. 핵심 개념map() 함수: JavaScript 배열의 내장 함수로, 배열의 각 요소를 순회하며 새로운 배열을 만듭니다. React에서는 이 map() 함수를 사용하여 데이터 배열을 엘리먼트 배열로 변환합니다.Key: 리스트의 각 엘리먼트에 부여해야 하는 고유하고 안정적인 문자열 속성입니다.왜 필요한가?: React는 key를 사용하여 리스트의 어떤 항목이 변경, 추가, 또는 제거되었는지 식별합니다. key가 없으면 React는 리스트가 변경될 때마다 전체 리스트를 파괴하고 새로 만드는.. 2025. 9. 16.
[React] 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기조건부 렌더링은 특정 조건에 따라 다른 컴포넌트나 엘리먼트를 렌더링하는 기법입니다. 사용자의 로그인 상태, 데이터 로딩 여부, 권한 등 다양한 상황에 맞춰 동적인 UI를 만들 수 있습니다.1. 핵심 개념 및 기법if 문 사용하기: 가장 기본적인 방법입니다. 컴포넌트의 렌더링 로직이 복잡할 때, return 문 이전에 if 문을 사용하여 조건에 따라 다른 JSX를 반환할 수 있습니다.삼항 연산자 (Ternary Operator): condition ? expressionIfTrue : expressionIfFalseJSX 내부에서 간단한 조건부 렌더링을 처리할 때 매우 유용합니다. 한 줄로 깔끔하게 표현할 수 있습니다.논리 연산자 && (AND): cond.. 2025. 9. 16.
[React] 4장: 이벤트 핸들링 - 사용자와의 상호작용 4장: 이벤트 핸들링 - 사용자와의 상호작용사용자의 클릭, 입력, 마우스 움직임 등 다양한 행동에 반응하는 방법을 배웁니다. React의 이벤트 시스템은 웹 표준과 유사하지만 몇 가지 차이점이 있습니다.1. 핵심 개념이벤트 핸들러(Event Handler): 특정 이벤트가 발생했을 때 실행되는 함수입니다.이벤트 바인딩: JSX 엘리먼트에 이벤트 핸들러 함수를 연결하는 과정입니다.React 이벤트 시스템의 특징:카멜 케이스(camelCase): 이벤트 이름은 onclick, onmouseover 대신 onClick, onMouseOver와 같이 카멜 케이스를 사용합니다.함수 전달: HTML에서는 문자열 형태로 코드를 전달하지만(onclick="alert('hello')"), React에서는 함수 자체를 전.. 2025. 9. 16.
[React] 3장: State와 생명주기 - 살아 움직이는 컴포넌트 3장: State와 생명주기 - 살아 움직이는 컴포넌트State는 컴포넌트가 스스로 관리하는 내부 데이터입니다. 사용자의 상호작용 등으로 State가 변경되면, React는 컴포넌트를 다시 렌더링하여 화면을 업데이트합니다. 컴포넌트의 '생명'과도 같은 State와 생명주기를 다루는 방법을 배웁니다.1. 핵심 개념State: 컴포넌트의 "상태"를 나타내는 데이터입니다. Props가 부모로부터 받은 '외적인' 데이터라면, State는 컴포넌트가 자체적으로 생성하고 관리하는 '내적인' 데이터입니다.useState Hook: 함수형 컴포넌트에서 State를 사용할 수 있게 해주는 Hook(훅)입니다.const [state, setState] = useState(initialValue); 형태로 사용합니다.sta.. 2025. 9. 16.
[React] 2장: Props - 컴포넌트에 생명 불어넣기 2장: Props - 컴포넌트에 생명 불어넣기Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 통로입니다. Props를 통해 재사용 가능한 동적인 컴포넌트를 만드는 방법을 배웁니다.1. 핵심 개념Props (Properties): 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터 묶음입니다. 자바스크립트 객체 형태로 전달되며, 자식 컴포넌트 내에서는 읽기 전용(read-only)입니다. 즉, 자식 컴포넌트가 직접 props를 수정해서는 안 됩니다. (이러한 규칙을 "Top-down data flow"라고 합니다.)Props 전달: 자식 컴포넌트를 사용할 때 HTML의 속성(attribute)처럼 propName="value" 형식으로 전달합니다.Props 사용: 자식 컴포넌트는 함수의 첫 .. 2025. 9. 16.
[React] 1장: JSX와 컴포넌트 - React의 첫인상 1장: JSX와 컴포넌트 - React의 첫인상React 개발의 가장 기본이 되는 두 가지 개념, JSX와 컴포넌트에 대해 배웁니다. UI를 레고 블록처럼 조립 가능한 부품으로 만드는 방법을 이해합니다.1. 핵심 개념컴포넌트(Component): React는 UI를 "컴포넌트"라는 독립적이고 재사용 가능한 조각으로 나누어 관리합니다. 각 컴포넌트는 자신만의 로직(JavaScript)과 모양(JSX)을 가집니다. 현대 React에서는 JavaScript 함수로 컴포넌트를 만드는 함수형 컴포넌트가 표준입니다.JSX (JavaScript XML): JavaScript를 확장한 문법으로, UI가 어떻게 생겨야 하는지 설명하기 위해 사용됩니다. HTML과 매우 비슷해 보이지만 실제로는 JavaScript입니다. .. 2025. 9. 16.
[JAVA] 자바 기초 핵심 정리 자바(Java) 기초 핵심 정리이 문서는 자바의 기본 구동 원리부터 객체 지향 프로그래밍, 디자인 패턴, 파일 입출력까지의 핵심 개념을 체계적으로 정리한 종합 복습 자료입니다.Part 1: 자바 시작하기프로그래밍의 첫걸음, 자바의 기본 개념과 문법을 알아봅니다.1.1. 자바란?자바 구동 원리: 개발자가 .java 파일을 작성하면, 컴파일러가 이를 바이트 코드(.class)로 번역하고, 자바 가상 머신(JVM)이 이 클래스 파일을 실행합니다.코드의 시작점: 자바 프로그램은 main 함수(메소드)를 찾아 그곳부터 코드를 읽고 실행하기 시작합니다.활용처: 웹(Spring), 앱(Android), 데스크톱 소프트웨어(JavaFX) 등 다양한 분야에서 사용됩니다.1.2. 기본 문법리터럴(Literal): 코드에 .. 2025. 9. 16.
[Spring] 자바 스프링 프레임워크 개론 Spring Framework & Web Development 종합 강의노트이 문서는 웹 개발의 기초부터 Spring Framework의 핵심 원리, 실제 REST API 구현까지의 과정을 유기적으로 정리한 종합 복습 자료입니다.Part 1: 웹 개발의 기초웹 애플리케이션 개발을 이해하기 위해 가장 먼저 알아야 할 네트워크와 서버의 기본 개념입니다.1.1. 네트워크와 통신통신: 매체를 사용하여 정보를 서로 주고받는 과정 (Request 요청, Response 응답).인터넷: 통신 프로토콜을 이용해 정보를 주고받는 글로벌 통신망.네트워크: 인터넷을 통해 연결된 컴퓨터들의 구조.프로토콜: 네트워크에서 데이터를 원활하게 통신하기 위한 규칙과 절차의 집합. (예: 신호등, 전화번호 체계)1.2. 핵심 프로토콜I.. 2025. 9. 16.
반응형

티스토리툴바