choijming21 님의 블로그

오늘은 Redux를 이용해서 나만의 todolist를 만들어보겠다! 배포는 netlify를 이용해서 배포하였다.    # 완성본        #시연영상         오늘의 중요한 내용은 Redux를 이용하는 것이니 Redux 코드에 대해서 설명해보겠다! 먼저 크게 순서는 이렇게 진행된다. 1. Redux store 설정2. action 정의3. reducer 생성4. 컴포넌트와 Redux 연결      1. Redux store 설정src 폴더 안에 store 폴더를 만들어서 index.js파일을 생성한 후 store를 생성한다.// 1. store 생성import { createStore } from "redux";// 6. 리듀서 함수 스토어에 연결해주기import todoReducer from "..

오늘은 내가 최근에 과제를 하면서 겪었던 props drilling 문제와 이를 리액트 Context API로 해결한 경험을 공유하려고 한다.  포켓몬들의 데이터를 컴포넌트 간에 주고 받을 때 'props'를 이용해서 과제를 만들고 있었다. props는 데이터를 컴포넌트간 쉽게 전달할 수 있지만 'props-drilling'이라고 불리는 문제가 발생한다. 'props-drilling'이란 데이터를 전달하기 위해 여러 중간 컴포넌트를 거치는 경우를 말한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트까지 데이터를 전달할 때, 그 사이에 있는 모든 컴퓨터가 'props'로 데이터를 받아야 할 때가 있다. 이건 코드가 길어지고 복잡해지는 원인이 될 수 있다.  그래서 오늘은 'props-drilling'으로 ..

호버(hover)란?호버는 마우스 커서를 특정 요소 위에 올려놓은 상태를 말한다. 사용자 인터페이스에서 중요한 상호작용 방식 중 하나로, 추가 정보를 제공하거나 시각적 피드백을 주는데 자주 사용된다.    CSS에서는 ":hover" 의사 클래스(pseudo-class)를 사용하여 호버 효과를 구현한다. 이를 통해 요소에 마우스를 올렸을 때의 스타일을 정의할 수 있다. 아래는 호버 효과 예시이다..hover-button { padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; t..

먼저 React의 CRUD에 대해 알아보겠다.  CRUD 란?CRUD는 리액트를 사용하여 기본적인 데이터 운영 기능을 구현하는 것을 말한다. 다음 네 가지 기본 데이터베이스 운영을 나타낸다.Create(생성): 새로운 데이터를 만들고 추가하는 기능Read(읽기): 기존 데이터를 조회하고 표시하는 기능Update(갱신): 기존 데이터를 수정하는 기능Delete(삭제): 기존 데이터를 제거하는 기능           오늘은 TodoList에 Update를 추가해보겠다!업데이트에 필요한 요소는 Read(현재 값을 가져와야 함)와 Create(현재 값 위에 덮어 씌어야 함)이다.   forEach와 map의 차이 forEach :forEach는 배열을 순회하면서 각 요소를 처리하지만, 새로운 배열은 반환하지 않..

useEffectuseEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.컴포넌트가 마운트 됐을 때, 컴포넌트가 언마운트 됐을 때, 컴포넌트가 업데이트 됐을 때 특정 작업을 처리할 수 있다.즉, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용해야한다.     useEffect() 사용법 기본형태useEffect(function, deps) - function: 수행하고자 하는 작업- deps: 배열 형태이며 의존성 배열이라고 한다. 배열 안에는 검사하고자 하는 특정 값 or 빈 배열     활용해보기! import를 사용해 useEffect..

오늘은 하루만에 Olympic-Medal-Traker를 만들어보았다.    시연 영상이다.     이 작업물은 처음부터 끝까지 내가 스스로 만들어보았다. 중간에 막히는 부분이나 오류부분만 검색해서 해결하였다.과제를 하면서 알게된 부분을 이 블로그에 담아보겠다!      이것은 내 코드의 일부분이다. 여기서는 논리 or 연산자(||)를 사용해보았다.  if (existingCountry) { existingCountry.gold = gold || existingCountry.gold; existingCountry.silver = silver || existingCountry.silver; existingCountry.bronze = bronze || existingCountry..

오늘은 나만의 TodoList를 만들어 볼 것이다. 간단한듯 보이지만 초보인 나에게는 조금 어려웠다!    일단 나만의 투두리스트 완성본이다. 기능구현에 집중하느라 디자인은 간단하게 만들어 주었다. 시연 영상이다.     이제 만드는 과정을 이야기 해보겠다! 복습하는 마인드로 쭉 이야기해보겠다!      먼저, 크게 구조를 잡아주었다. 크게 구조를 잡은 다음 중복되는 부분은 나중에 컴포넌트로 분리해줘도 되니깐 크게 세개의 컴포넌트 구조를 생각했다.  1. App.jsx : 부모 컴포넌트로, input창과 '추가' 버튼이 있는 부분이다.2. TodoBoard: 투두리스트가 보여질 공간이다.3. TodoItem: 투두리스트 중 하나의 투두가 차지하는 공간이다. 이렇게 세개의 컴포넌트로 분리했다.      이..

나는 아직 코딩의 '코'자도 잘모르는 햇병아리이기 때문에, 베이직 / 스탠다드 / 챌린지 반 중 베이직반을 선택하였다!    시멘틱 html  접근성 향상: 의미론적 태그는 시각 장애인을 위한 스크린 리더와 같은 보조 기술에 의미 있는 정보를 제공한다.검색 엔진 최적화(SEO): 검색 엔진은 콘텐츠의 의미를 더 잘 이해할 수 있도록 돕는 의미론적 태그를 사용하여 페이지를 더 효과적으로 인덱싱하여 검색 엔진 결과 순위를 높인다.유지보수 용이성: 의미론적 태그는 코드의 가독성을 높여, 개발자들이 웹사이트를 더 쉽게 이해하고 유지보수할 수 있게 한다.      목표: 샘플 todos를 읽어와 화면에 뿌려주기!const todos = [ { id: 1, text: "Buy milk" }, { id: 2, t..

Q. 문제: 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를 들어 n이 12345이면 [5, 4, 3, 2, 1]을 리턴합니다.  제한 조건: n은 10,000,000,000이하인 자연수입니다.   입출력 예nreturn12345[5, 4, 3, 2, 1]    내가 푼 답function solution(n) { return String(n) .split('') .reverse() .map(arr => parseInt(arr));}문제를 일단 나누어 생각해본다. (숫자를 문자열로 변환 -> 문자열을 배열로 만들기 -> 배열을 뒤집기 -> 각 문자를 숫자로 변환)1. 숫자를 문자열로 변환: String(n)을 사용하여 입력 받은 숫자를 문자열로 변환2..

React란?Facebook에서 개발한 오픈 소스 프론트엔드 라이브러리이다. 웹 및 모바일 에플리케이션의 사용자 인터페이스를 구축하는데 사용된다.예를 들어, React는 레고블럭과 같다. 작은 블록(컴포넌트)들을 조합하여 복잡한 구조물(애플리케이션)을 만든다.  주로 React는 SPA를 만드는데 사용됨으로 현대 웹개발에서 매우 인기 있는 도구이다. 동적이고 반응적인 사용자 인터페이스를 만드는데 특히 유용해서 많은 기업들이 사용중이다!  주요 특징- 컴포넌트 기반: UI를 재사용 가능한 작은 조각(컴포넌트)으로 나눈다.- 가상 DOM: 실제 DOM 변경을 최소화 하여 성능을 개선한다.- 단방향 데이터 흐름: 데이터의 흐름을 예측 가능하게 만든다. 사용 이유- 효율적인 UI 업데이트: 변경된 부분만 업데이..