요모조모

9월 25일로 부트캠프는 종료되었다. 시작할 땐 분명 아직 멀었다 싶었는데, 결국 끝이 왔다.어딘가에 소속되어 있지 않으면 불안하고, 혼자 공부하면 잘 하고 있는 건지 걱정되고, 나태해지고 등등의 이유로 부트캠프에 참여했었는데, 이제 끝나니까 갑자기 세상에 던져진 기분이다... 그리고 나름 5개월 동안 정 들었는데, 동료 피드백 쓰고 부트캠프 소감 쓰고 롤링 페이퍼를 쓰는 등 끝나가는 분위기가 조성되니까 슬퍼졌다... (근데 다들 안 그래보였다)사실 당장 뭘 해야 할 지 부터가 막막하지만, 일단 나름대로 계획을 세워서 하나씩 해보려고 한다... 당장 급한 건 정처기 실기. 시험 전까지는 여기에 비중을 좀 많이 두기로...혼자 알아서 잘 하는 사람이 아니다 보니까 두려움이 거의 공포 정도로 자라날 때가 있..

이제 다음주부터 당장 파이널 프로젝트가 시작된다. 시작 전에 생각을 좀 정리해야 할 것 같다.📚  어제 매니저님께서 프로젝트 조원들간의 갈등은 실력 차에서 오진 않는다는 얘기 듣고 살짝 안심이 됐다. 나는 스스로가 없던 갈등도 생기게 할 만큼 실력이 부족하다고 생각해서...😢  리액트 수업 시작 즈음부터 프로젝트만 생각하면 스트레스였다. 원래 성격이 걱정이 많은 편이라 더 그런 것 같다. 온갖 부정적인 생각은 다 하고, 만약 내가 이런 실수를 한다면, 저런 실수를 한다면 이런 생각 하면서 무서워하고. 그런 거 다 쓸데 없다는 걸 알지만 생각을 멈출 수가 없다. 지금 난 아직 자바스크립트 개념을 물어보면 제대로 대답을 못한다면? 문제가 생기면 구글링을 하는 게 아니라 지피티한테 먼저 물어본다면? 지피티..

🍰 오늘도 아자자자!🍴 명령형 핸들(Imperative Handle): 함수형 컴포넌트에서 클래스 컴포넌트의 ref와 유사한 기능을 제공하는 개념.forwardRef와 함께 사용 - 부모로부터 전달 받은 ref를 자식 컴포넌트에 연결함useImperativeHandle 훅 사용 - 이 훅을 통해 부모에게 노출할 메서드나 속성을 정의함명령형 핸들은 주로 DOM 요소에 직접 접근해야 하는 경우나 복잡한 애니메이션 제어 등에 유용함.🍫 명령형 핸들이 뭔데?명령형(imperative) 프로그래밍 패러다임을 가리킴.프로그램의 상태를 변경하는 명령문을 사용하여 프로그램이 어떻게 동작해야 하는지를 상세히 기술함.React는 주로 선언적(declarative) 방식을 사용하지만, 이 기능은 더 직접적이고 명령적인..

🍰 수업 때 한 번 줌 소리가 아예 안 들린 적이 있어서 매우 당황했다. 무슨 문제지;🍴 Motion One: JavaScript 애니메이션 라이브러리.React와 같은 프레임워크에 의존하지 않고, CSS와 JavaScript 만으로 애니메이션을 구현할 수 있게 해줌.Web Animations API(WAAPI)를 활용하여 고성능 애니메이션을 제공함.WAAPI: 브라우저에 내장된 네이티브 애니메이션 APIJavaScript에서 직접 제어할 수 있어 정밀한 애니메이션 가능작은 파일 크기로도 고성능 애니메이션 구현 가능 - 웹 페이지의 로딩 시간 최소화에 기여함pnpm add motion// 사용하고자 하는 파일에서import { animate } from 'motion'; // 추가하기  🍴 forw..

🍰 날씨도 더운데 가만히 앉아서 수업 들으려니까 더 졸리고 집중이 잘 안 되는 것 같다. 🍴 useRef: React 훅. 컴포넌트의 생명주기 동안 유지되는 가변값을 저장하는 데 사용됨.반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨.값을 변경해도 컴포넌트가 리렌더링 되지 않음.주로 DOM 요소에 직접 접근하거나 이전 상태를 기억하는 데 사용됨.countRef를 사용하여 컴포넌트의 리렌더링 없이 값을 유지하고 변경할 수 있는 예시 코드.import React, { useRef, useState } from 'react';function CounterWithRef() { const countRef = useRef(0); const [, setDummy] = useState(0); const i..

🍰 요즘 수업 집중도는 올라가서 좋은데, 내용은 이해가 되지 않아서 슬프다. 이해했다고 생각해도 막상 실습을 시키면 손을 못 댄다. 🍴 Hook의 등장React 컴포넌트는 Container (Stateful)와 Presentational (Stateless)로 구분됨.상태를 가질 수 있는 건 클래스뿐이었고, 클래스 내부 로직은 재사용이 어려웠음.이로 인해 래퍼 헬 문제가 발생했음: 컴포넌트가 래퍼로 감싸지는 구조가 반복되어 복잡해짐.결과적으로 Huge components가 만들어져 리팩토링과 테스트가 어려워짐.문제 해결 시도상태를 가진 로직을 재사용하려고 클래스와 고차 함수(H.O.C)를 사용.컴포넌트를 쪼개지 않으면 React의 장점이 사라짐.상태를 가질 수 있는 다른 방법이 필요.Hook 등장함수..

🍰 완전 이해 못 했던 수업. 예습의 필요성을 철저히 느꼈다.🍴 선언형 vs 명령형 프로그래밍: 프로그램을 작성하는 두 가지 주요 접근 방식. React는 선언형 프로그래밍 패러다임을 따름. 🍫 선언형 프로그래밍(Declarative Programming)원하는 결과를 명시함'무엇'을 할 지 설명함상태를 기반으로 UI를 설명함리액트 = 선언적 프로그래밍 도구 🍫 명령형 프로그래밍(Imperative Programming)목표를 달성하기 위한 단계별 지침을 제공함.'어떻게' 할 지 설명함.UI를 직접 조작하는 방식임.전통적인 DOM 조작 방식. 🍴 Rendering 그리고 Commit 🍫 React의 렌더링 과정Trigger - 렌더링 프로세스 시작하는 단계. 주로 state 변경이나 부모 컴포..

🍰 5일 전 수업이지만 열심히 생각해내서... 써야 한다.🍴 순수 함수함수가 호출되지 전에 존재했던 객체나 변수는 변경하지 않음.같은 입력이 주어지면 같은 결과를 반환해야 함.React 컴포넌트는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정함.=> 같은 입력이 주어지면 반드시 같은 JSX를 반환한다는 뜻.그럼 누가 순수함을 보장하는가? => 우리가 규칙을 지켜야 함.🍫 어떤 게 순수 함수인데?const plus = (x, y) => x + y;위 함수는 1, 2를 넣는다고 가정했을 때 1, 2를 몇 번을 넣어도 결과는 항상 동일하게 3이 나온다.컴포넌트(함수)는 순수한 로직만 가져야 함.순수한 로직 => 컴포넌트를 렌더링 하는 것. 렌더링 프로세스는 리액트의 DOM을 생성하기 때문에 순수해야 함..

🍰 요즘 진짜 뭘 복습하려고 해도 뭐부터 손 대야 할지도 모르겠고, 막 저번 주 수업도 이해 안 간 게 있는데 그게 쌓이고 쌓이다 보니 그냥 체념하고 새로 배우는 내용들이나 이해하기로 했다. 일단은 하자.🍴 컴포넌트 속성 매뉴얼 검사왜 필요한가? => 컴포넌트는 외부로부터 전달 받은 데이터인 속성(props)에 따라 마크업을 생성해 반환함.컴포넌트 제작자는 정확히 요구되는 마크업을 생성하기 위해 속성 타입을 지정해야 함.리액트 컴포넌트 제작 시 컴포넌트 속성 타입 지정하는 방법은? => propTypes 선언지난 시간에는 주어진 데이터의 자료형을 문자열로 반환하는 함수를 작성했었다.export function typeOf(data) { return Object.prototype.toString.ca..

🍰 우와 너무 밀려서 일단 올려놓고 업데이트 해야겠다.🍫 ?urlVite 또는 다른 번들러에서 사용되는 특별한 쿼리 파라미터에셋 처리 지시자 - ?url은 번들러에게 이 파일을 어떻게 처리해야 하는 지 알려줌?url 사용 시 번들러가 자동으로 content hash를 생성해줌🍫 Content hash파일의 내용을 기반으로 생성되는 고유한 문자열파일 내용 변경 시 해시 값도 변경됨생성 과정번들러가 빌드 과정에서 각 파일의 내용을 읽음파일 내용을 해시 함수에 통과시켜 고유한 해시값을 생성함이 해시 값을 파일 이름에 추가함번들러가 이 과정을 자동으로 처리함 🍴 JSX 마크업: JSX는 JavaScript의 확장 문법. HTML보다 더 엄격하고 몇 가지 규칙이 있음. 🍫 1. 하나의 루트 엘리먼트로 반..