joycie416 님의 블로그

이번에는 지난주에 예고한대로 `useContext` hook과 `memoization`에 대해 살펴보려고 한다. 1. `useContext`React context의 필요성useContext를 사용하기 전에는 prop을 부모 컴포넌트에서 자식 컴포넌트로 전달해주며 데이터를 전달했다. 하지만 중간 컴포넌트에서 해당 데이터가 불필요한 경우도 많을 것이고 컴포넌트 사이의 거리가 아주 멀면 prop drilling이 발생할 것이다. Prop drilling이 발생하면 다음과 같은 문제점이 생긴다.깊이가 너무 깊어지면 어떤 컴포넌트로부터 전달된 prop인지 파악하기 어려움어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어 대처가 늦어짐이 때 `useContext` hook, 즉 context API를 통해 쉽게 ..

오늘은 `Redux Toolkit`(`rtk`)의 아주 기초적인 사용법에 대해 정리해보려고 한다. 지난번 Redux 기본 사용법에서는 initial state, action value, action creator, reducer를 직접 작성해주어야 했는데, `rtk`에서는 action value를 별도로 작성하지 않아도 된다. 큰 틀은 redux과 크게 다르지 않지만 세부적인 부분에서 차이점이 있다. Redux Toolkit 사용 기초기본 설정먼저 아래 명령어를 실행해 rtk를 설치해주자.yarn add react-redux @reduxjs/toolkit 이후 `src`폴더에 `redux`폴더를 만든 후 `config` 폴더와 `slices` 폴더를 만들자.먼저 `config/configStore.js`..

전 프로젝트에서도 경험했지만, 부모 요소에 클릭 이벤트를 적용하고 자식 요소에도 클릭 이벤트를 적용하면, 부모 요소의 이벤트가 적용되는 문제점이 있었다. 이를 해결하는 방법을 찾아 정리하려고 한다. `Event.stopPropagation()`현재 이벤트가 버블링 단계에서 더 이상 전파(propagate)되지 않도록 막아준다. 아래 코드를 실행해보면 자식 요소를 클릭해도 '부모 요소 클릭' 알림창이 뜨는 것을 확인할 수 있다. {alert('부모 요소 클릭')}}> {alert('자식 요소 클릭')}} />  이때 자식 요소 onclick을 아래와 같이 수정하면 자식 요소를 클릭했을 때 '자식 요소 클릭' 알림창이 뜨는 것을 확인할 수 있다. {alert('부모 요소 클릭')}}> ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해이 문제에서는 조건문 사용이 관건인 것 같다. 또한 네 가지 방향을 어떻게 단순하게 정리할 수 있는지도 학습 목표 중에 하나인 것 같다.현재 살펴보고 있는 위치를 저장하는 변수를 `curPos = [r, c]`, 행과 열의 개수를 나타내는 변수를 각각 `rows`와 `cols`라고 하자. 과정1 - 진행할 것인지 결정하는 조건문해당 진행 방향을 선택할지 말지에 관한 조건에 부합하는지 확인하는 방법은 여러 가지가 있을 것이다. 그 중 가장 기초적인 방법은 index가 공원을 벗어나는지 판단하는 것이다.if ..

`useContext`, `useMemo`를 다루기로 했는데, 헷갈려서 까먹기 전에 redux 기본 사용법을 정리하려고 한다. Redux왜 redux를 사용할까?`useState`만 사용하여 state를 관리하려면 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 공유해야 했다. 그러면 몇 단계 하위 컴포넌트에서 사용하려면 불필요한 props도 계속 전달해줘야 하는 불편함이 있다. 이처럼 props를 계속 아래로 아래로 내려보내는 것을 prop drilling이라고 한다. Prop drilling을 해결하는 하나의 방법으로 redux를 사용할 수 있다. Redux를 사용하면 state를 공유하기 위해 부모-자식 컴포넌트 관계를 유지하지 않아도 된다. 앞으로 `useState`를 사용해 특정 컴포넌트에서..

https://school.programmers.co.kr/learn/courses/30/lessons/178871 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해calling에 불린 사람은 한 등수 앞으로 나가갔다는 것을 의미함. 현재 등수와 앞사람과 위치를 어떻게 바꿀지 생각해봐야 함. 방법1맨처음에는 callings에 있는 사람의 현재 등수를 찾아 players에서 제거하고 한 등수 앞에 추가하려고 했다.function solution(players, callings) { for (const calling of callings) { con..

오늘은 React의 몇 가지 hook에 관해 정리해보려고 한다. 1. `useState`가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖게 해준다. 가장 기본적인 사용방법은 아래와 같다.const [value, setValue] = useState(initialState);// value를 nextState로 바꾸기setValue(nextState);그러면 초기에 `value`를 `initialState`로 설정하고 이후 `setValue`를 통해 `value`를 바꿔줄 수 있다. 하지만 이렇게 하면 setValue를 여러 번 수행한 경우, 마지막 setValue만 적용하게 된다. (렌더링 최적화를 위해 setState를 모아 한 번에 실행한다. batch update 방식)  함수형 업..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해재료는 1,2,3으로 제시되며 각각 빵, 야채, 고기를 의미한다.즉 문제설명에 제시된 재료는 [2,1,1,2,3,1,2,3,1]이다. 2번째 인덱스부터 1,2,3,1이 구성되니 햄버거 하나가 완성되어 재료가 [2,1,2,3,1]이 되어 1번째 인덱스부터 또 1,2,3,1이 되어 두 번째 햄버거가 완성된다.이 예시를 통해 알 수 있듯이 모든 1,2,3,1을 먼저 제거하는 것이 아니라, 제거한 후에 해당 위치에 또 다른 1,2,3,1이 만들어지면 그것을 먼저 없애야한다. 다른 예시를 살펴보자. [1,1,1,2..

이번 게시글은 개인과제 중 표에 스크롤 바를 이쁘게 적용하기 위해 찾아보다가 잘 정리된 글이 있어 정리하게 되었다. 🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이inpa.tistory.com결론은... 웨일에서 기본적으로 제공하는 스타일처럼 overlay가 되도록하고 싶었는데, 단순한 구조로는 불가능할 것 같고, 외부 라이브러리를 사용해야 할 것 같다. 웨일에서 스크롤바의 기본 스타일은 아래와 같다. 오른쪽은 마우스가 가까이 있을 때 반응이다.크롬에서 기본적으로 제공하는 스크롤바는 아래처럼 투박..

올림픽 메달 순위올림픽 경기 결과를 직접 입력하면 메달 순위에 맞게 정렬해줍니다. 처음으로  react와 vite를 사용해 구현했습니다.컴포넌트 분리 전체를 MakeTable로 분리함.전체 데이터 data에서 각 입력 정보를 가져와 하나의 행을 이룸.하단의 입력 데이터 전체를 저장, 초기화, 불러올 수 있는 버튼이 모여있는 태그를 연습을 위해 SaveData로 분리함.위 두 컴포넌트는 data와 setData를 props로 전달받음.제공하는 기능메달 순위에 따른 정렬입력된 데이터 변경 및 삭제로컬스토리지에 저장 및 불러오기기능 설명1. 메달 순위에 따른 정렬금메달, 은메달, 동메달 개수가 많을수록 상위에 위치함. 위 이미지에서 스웨덴과 금메달 개수가 같은 아일랜드 데이터를 입력하면 아래와 같다.각 에 ..