글 업로드 할 때 이미지 프리뷰를 보여주기위해서는 URL.createObjectURL vs FileReader.readAsDataURL 두 가지 방법을 활용할 수 있다. 이걸 비교해 보고자 한다URL.createObjectURL: 브라우저 메모리 내 객체를 참조하는 임

브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 번들을 실행하여 동적으로 컨텐츠를 채우는 렌더링 방식브라우저가 서버에 빈 HTML과 JS 파일 요청브라우저가 JS 파일을 다운로드하고 실행실행된 JS가 HTML의 빈 공간

프로그래머스 데브코스에서 진행한 2차 팀 프로젝트 회고를 진행해 보려 한다 처음 경험하는 규모의 프로젝트는 처음이기도 했고 2024년 마지막 프로젝트였기 때문에 더 욕심이 났다.그리하여 우리 팀이 만든 서비스는 두둥!O운완?O운완 서비스는 현대인의 건강한 라이프스타

24.12.16 📚 오늘 한 일 팔로우 기능 추가 메인페이지 디자인 및 퍼블리싱 💬 마치며 스와이퍼 커스텀 만만치 않았다... 리액트에선 css 모듈 불러오는 오류가 계속 나서 link로 넣었다. 24.12.17 📚 오늘 한 일 메인 페이지 bmi 계산기 추가

24.12.07 📚 오늘 한 일 프로젝트 디자인작업 수정 프로젝트 맡은 부분 퍼블리싱 💬 마치며 고려해야 할 부분이 추가적으로 계속 생긴다. 그래도 프로젝트 기간이 짧다보니 애자일하게 가는 게 맞을 것 같다. 24.12.08 📚 오늘 한 일 프로젝트 디자인

프로젝트를 본격적으로 시작하는 첫날플로우차트디자인디자인리뷰퍼블리싱 역할분배수정할 부분은 많지만 일단 이렇게 하는 것만 종일 걸렸다아직 완전하진 않지만 조금씩 의견이 좁혀지고 있는 것 같음! 성장했다장하다이번 프로젝트로 팀원들 보두 각자 부족한 부분을 채울 수 있었으면

✨ 학습 내용JSON Server를 활용한 REST API 구현JSON Server 라이브러리 설치 및 설정db.json 파일 생성하여 더미 데이터 구성GET, POST, PUT, DELETE 메서드 테스트Fetch API를 사용한 데이터 통신fetch 함수를 통한 H

전역 상태 관리 Context API, Redux, zustand전역 상태 관리를 활용한 카운터 앱 구현전역 상태로 카운터 값 관리하기Context API: 메모리 최적화를 위한 상태와 함수 분리zustand(디벨롭): 로그아웃시 reset 함수 호출Context 중첩

useEffect함수형 컴포넌트의 생명주기를 관리하는 React Hook컴포넌트의 마운트, 업데이트, 언마운트 시점에 특정 작업 수행실습: Todo 리스트에서 로컬스토리지를 활용한 데이터 영속성 구현메모이제이션불필요한 리렌더링을 방지React.memo(): 컴포넌트 자

useReducer (별도 포스팅 예정) 코테 공부 - 스택 useReducer 예제 복습 당일 과제 TODO 만들기(등록, 추가, 삭제)TODO 과제 회고id 값을 설정할 때 초기에는 배열의 마지막 인덱스를 기준으로 id를 설정했는데, 배열 변경이 일어날 경우 예상치

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.arr은 자연수를 담은 배열입니

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.별(\*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.n과 m은 각각 1000 이하인 자연수입니다.입력5 3출력rectangle 빈 변수 선언for문 이용해서 가로 길

A: Virtual DOM은 실제 DOM을 추상화한 가벼운 복사본으로, 메모리에 존재하는 객체입니다. 변경 사항이 발생했을 때 실제 DOM에 직접 반영하지 않고, Virtual DOM에서 먼저 처리한 후 필요한 부분만 실제 DOM에 업데이트하여 효율적인 렌더링을 가능하

특징빌드 도구가 이미지를 최적화하고 관리함사용하지 않는 이미지는 최종 번들에 포함되지 않는 트리쉐이킹 적용빌드 시 이미지 이름이 해시값이 포함된 새로운 파일명으로 변환임포트(import)를 사용하여 이미지 추가장점: 빌드 도구가 경로를 자동으로 관리하고, 이미지 최적화

비제어 컨트롤러는 DOM 요소에 직접 접근하여 값을 관리하는 방식으로, 실시간 값 변화 감지 불가useRef를 사용해 DOM 요소 참조React에서 제공하는 Hook으로, 값을 보관하고 관리할 수 있는 저장소주요 특징:컴포넌트가 리렌더링되어도 동일한 참조값 유지값이 변

1\. 일반 변수 선언 (화면 렌더링에 영향 없음)let, const, var로 선언된 변수들은 리액트가 변화 추적 불가2\. 상태 변수 선언 (화면 렌더링에 영향 있음)useState와 같은 리액트 훅으로 선언상태 변경 시 화면 자동 리렌더링React에서 상태를 사용

리액트 이미지 렌더링useStateuseRef(별도 포스팅 예정)주말 과제 한다고 포스팅 할 글 정리를 못해서 주말 이용해서 해 봐야겠다... 요즘 매일 새로운 걸 궤짝으로 배우는데 소화할 수 있는 양은 소주잔 정도라(술 안 좋아함) 수업 없는 주말이 소중해졌다. 폼

프롭스 드릴링리액트 조건부 렌더링리액트 반복 렌더링재사용 가능한 컴포넌트Tailwind Css오늘 실습이 많았다 확실히 개념만 배우는 것보다 내 눈에 UI가 보이는 게 재미있는 것 같다. 피그마 디자인을 컴포넌트로 만들어 보고 props를 구조분해할당과 나머지매개변수를

map 메서드는 배열의 요소를 순회하며 새로운 배열을 반환하는 역할을 함리액트에서 자주 사용되는 이유는 JSX 요소를 배열 데이터로부터 생성하는 작업에 매우 적합하기 때문임콜백 함수 실행: 배열의 각 요소를 순회하며 콜백 함수 실행새로운 배열 생성: 콜백 함수의 반환값

React에서 조건부 렌더링은 특정 조건에 따라 컴포넌트를 표시하거나 숨길 때 사용JSX 외부에서 조건에 따라 전체 컴포넌트 또는 JSX 블록을 처리할 때 유용함JSX 내부에서 참과 거짓에 따라 다른 요소를 렌더링할 때 사용JSX 범위 안에서 참에 따른 분기 처리를 하