본문 바로가기
반응형

분류 전체보기

 (115)
[트러블 슈팅] 커스텀 훅의 업데이트가 반영되지 않을 때 [개인 프로젝트] 올림픽 메달 트래커를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다.커스텀 훅의 상태가 업데이트 됐는데 컴포넌트가 렌더링이 되지 않음발생한 오류 🔥국가 추가, 수정, 삭제를 커스텀 훅으로 따로 관리하고 해당 기능이 필요한 곳에서 `useCountry` 훅을 호출하는 방식으로 코드를 수정했는데 국가 추가를 눌렀을 때 `InputGroup` 컴포넌트에서 발생한 `addCountry` 함수는  잘 동작하지만 `MedalList` 컴포넌트에서 리스트가 보이지 않는 문제 발생. 해결 과정 🔎https://react.dev/learn/reusing-logic-with-custom-hooks Reusing Logic with Custom Hooks – ReactThe library for..
React 입문 6 (DOM, VirtualDOM) DOM이란? 📖DOM (Document Obejct Model)이란 웹 문서의 구조화된 표현인데요 엘리먼트를 tree 형태로 표현한 것이 DOM입니다. 트리의 요소 하나하나를 `노드`라고 합니다. 각 `노드`는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공합니다.// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.document.getElementById("demo").innerHTML = "Hello World!";// p 태그들을 모두 가져와서 element 변수에 저장해줘const element = document.getElementsByTagName("p");// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘const x = do..
React 입문 5 (명령형, 선언형) 명령형 프로그래밍 vs 선언형 프로그래밍 📖선언형 프로그래밍선언형 프로그래밍은 원하는 결과를 묘사하는 방식으로 코드를 작성합니다. 아래 예시는 자바스크립트를 이용해 배열에 짝수만 필터링하는 간단한 예제입니다.이 코드는 evenNumbers라는 새로운 배열을 만들어, filter메서드를 이용해 짝수만 필터링해 저장합니다. const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); 이 예시는 짝수를 어떻게 필터링해야 하는지가 아닌, 짝수를 필터링한 결과를 얻는 것에 초점이 맞춰져 있는데요.  ✨선언형 프로그래밍의 특징✨ 데이터를 어떻..
React 입문 4 (불변성) 리액트에서 불변성을 유지해야 하는 이유 📖불변성이란❓불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 아래 코드는 불변성을 유지할 수 없습니다.let numbers = [1, 2, 3];numbers.push(4); // 배열에 직접 요소를 추가console.log(numbers); // [1, 2, 3, 4] `numbers.push(4)`는 원래 데이터 구조를 직접 변경하기 때문에 불변성을 유지할 수 없습니다. ❓불변성을 깨뜨리는게 왜 문제가 될까예측 불가능한 코드 : 데이터 구조를 직접 변경하면 다른 부분에서 해당 데이터를 참조하고 있을 때 예상치 못한 방식으로 동작할 수 있기 때문입니다.버그 추적의 어려움 : 원본 데이터가 여러 곳에서 변경된다면 어디서 변경했는지 추적하기 어려워집니..
React 입문 3 (Props, State) props란 📖컴포넌트끼리의 정보교환 방식부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터입니다!props는 반드시 위에서 아래 방향으로 흐른다. (부모 -> 자식 단반향)props는 읽기 전용을 취급하며, 변경하지 않는다. Props로 값 전달하기컴포넌트 간의 정보를 교류할 때 `props`를 사용합니다.// src/App.jsximport React from "react";function App() { return ;}function GrandFather() { return ;}function Mother() { const name = '홍부인'; return ; // 💡"props로 name을 전달했다."}function Child(props) { console.log(props); //..
React 입문 2 (컴포넌트, jsx) React Components란?📖리액트에서 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것을 말합니다! 개념적으로 컴포넌트는 javascript 함수와 유사합니다. 함수형 컴포넌트// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현을 해보면 아래와 같죠.function App () { return hello} 클래스형 컴포넌트class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}  JSX란?📖JSX(j..
React 입문 1 (SPA, CSR, SSR, 라이브러리) React란 📖UI를 만들기 위한 라이브러리입니다. 1. React가 라이브러리인 이유프레임워크라고 불리기에는 제공해야 하는 기능이 부족하고 `상태관리(Redux)`, `라우팅(React-router-dom)` 등 개발자가 직접 제어하기 때문입니다.  프레임워크 vs 라이브러리📖1. 프레임워크개발자가 기능 구현에만 집중할 수 있게 애플리케이션의 구조 또는 틀을 제공하기 때문에 프레임워크가 정한 규칙과 구조 내에서 개발을 진행할 수 있습니다. 2. 라이브러리라이브러리는 특정 기능을 수행하는 코드의 집합으로 필요에 따라 선택적으로 사용할 수 있습니다.ex) `React.js` `react-router-dom` `redux` 3. 제어의 역전 (IoC)개발 시 `제어`를 하는 것은 개발자의 역할인데 프레임..
[팀 프로젝트] 영화 검색 사이트 팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/  요구 사항 📌필수 구현 사항✅ TMDB 오픈 API 이용✅ 영화 정보 상세 페이지 구현✅ 상세 페이지 영화 리뷰 작성 기능 구현     ✅ 비밀번호 암호화✅ github PR 사용한 협업✅ UX를 고려한 validation check 도전 과제✅ CSS flex, grid, 반응형 UI 구성✅ 상세 페이지 리뷰 수정 및 삭제 기능✅ 메인 페이지 정렬 기능 (이름, 별점, 개봉일 등) 추가 기능 ✅ 홈 화면..

티스토리툴바