IT's Time

앞서 글에서 언급한대로 React에서는 상태(State)로 데이터를 관리하고 수정한다. 이렇게 상태를 다룰 때 가장 큰 문제점은 데이터가 많아질수록 관리해야 하는 상태가 늘어나고 컴포넌트끼리 props로 불필요한 상태 전달을 해줘야 하고 그로인해 상태 관리하기 힘들다는 점이다. React를 사용할 때는 이러한 문제점을 극복하기 위해 다양한 라이브러리를 사용한다. 그 중 Redux와 Recoil을 살펴볼 예정이다. 1. Redux Redux는 리액트에서만 지원하는 라이브러리는 아니지만 리액트에 특화된 전역 상태 관리 라이브러리이다. Flux 패턴 기반으로 단방향 데이터 흐름을 지향한다. state 들을 스토어(store)에 상태를 담고 이를 참조하게 하는 방식이다. . 이 스토어에서 관리되는 상태 값은 일..

문제 유형 : heap 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/142085 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 1) n에서 enemy[i]를 빼고 난 값을 그 다음라운드로 넘겨줘서 또 적을 제거하는 방식이다. 2) 1번을 푸는 과정 중 병사 수가 부족하거나 없으면 종료, 이 과정에서 K 라는 무적권 방어를 사용해서 병사 손실 없이 적을 물리칠 수 있다. 3) 풀이법은 일단 K 즉, 무적권 횟수를 처음부터 써버리고 그 다음부터 라운드를 진행하게 해서 coun..

문제 : https://school.programmers.co.kr/learn/courses/30/lessons/169198 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 : 굉장히 어려웠다..ㅠㅠ 당구 쿠션을 칠 때 계산하는 거였는데 처음에는 직접 피타고라스의 정리로 계산해서 풀려 했다. 주어진 1,2,3번 case를 모두 손수 계산해봤고 그 결과 balls[i][0] , balls[i][1] 을 endX, endY로 맞춰서 startX, startY와 거리 계산을 해야함을 깨달았다. 그러나 직접 대각선을 일일이 계산하기엔 번거로웠고 직..

문제 : 호텔 대실 문제 유형 : heap 사용 https://school.programmers.co.kr/learn/courses/30/lessons/155651 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 이번 주차에 1번 문제였던 과제 진행하기와 비슷하게 문자로 된 시간을 숫자로 바꾸는 것이었다. 과제 진행하기 문제에서는 그 부분을 어떻게 할 지 몰라서 한참 헤맸는데 그 때의 경험으로 문자열을 숫자로 바꾸어 주었다. 그 후 시작 시간 기준으로 빠른 순서대로 정렬 해주었다. 그리고 문제 해법은 과제 진행하기를 참고 했다 먼저 들어온 ..

평소 강의나 직접 했던 상태 관리였지만 머릿속에만 있던 것을 직접 정리하는 시간이 필요했기에 본격적으로 프로젝트 전에 정리하고자 한다. 1. 상태란? State 라고도 한다. React에서 상태란 데이터이다. 특히 변할 수 있는 데이터 혹은 값이라고 보면 될 것 같다. 예를 들면 로그인 유무 혹은 관리자 유무 등으로 나눌 수 있을 것이다. import react , { useState } from 'react' const page = () => { const [isSignIn , setIsSignIn] = useState(false) const [isAdmin , setIsAdmin] = useState(false) return ( { isSignIn ? 로그인 됐어요 : 로그인 해주세요! } ) } 2..

토이프로젝트를 진행하면서 로그인 정보 등을 저장했을 때의 어려움을 겪었는데 이를 복습하고자 한다. 1. 웹 스토리지 : 웹 브라우저에서 클라이언트 측에서 데이터를 저장하고 관리하기 위한 API이다. 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 웹 스토리지를 사용하면 사용자의 로컬 브라우저에 데이터를 저장하고, 필요할 때 이 데이터를 검색하거나 수정할 수 있다. 주로 웹 어플리케이션에서 설정, 세션 상태, 캐싱 ,로컬 저장 등 다양한 용도로 활용 된다. 또한 localStorage와 sessionStorage 이 두 가지 형태로 존재 한다. 웹 스토리지는 주로 다음과 같은 용도로 활용된다. 사용자 설정 및 환경 설정 저장 임시 데이터 저장 (예: 장바구니 데이터) 세션 관리 ..

이번 토이프로젝트를 진행하면서 eslint와 prettier를 규칙을 정해서 협업을 했는데 내 개인프로젝트에 적용시켜보려고 천천히 정리해보고자 한다. 1. ESLint & Prettier 보통 하나만 사용하지 않고 두 개를 합쳐서 사용한다고 한다. 이 둘에 대해 그냥 코드를 이쁘게 해주는구나 생각하고 깔아놨는데 생각해보니 정확한 역할을 생각해보진 않았던 것 같다. 그래서 토이프로젝트를 마치고 복기하면서 프로젝트 셋팅 과정에 대해 차근차근 살펴보려고 한다. 이 둘의 역할은 다음과 같이 정리할 수 있다. ESLint : 코드 구현 방식을 일정하게 유지 시켜주는 것 Prettier : 에디터에서 코드를 작성할 때 스타일 등을 일정하게 유지 시켜주는 것 출처 : https://helloinyong.tistory..

문제 유형 : 정렬 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/42748 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 1) array = [1,5,2,6,3,7,4] 일 때 i,j,k가 무엇인지를 파악하는 것이 중요했다. i = 2 : i부터 j = 5 : j까지 k = K번째 숫자 2) commands = [ [i,j,k] [i,j,k] ] 이런 식으로 2차원 배열이기 때문에 commands를 해석해주는 것이 중요했다. commands= [ [2,5,3] , [4,4..

문제 유형 : 그리디(탐욕법) => 그 순간마다 최선의 답을 찾는 알고리즘 문제 : 체육복 https://school.programmers.co.kr/learn/courses/30/lessons/42862 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 처음 풀이 처음 LV1이라 기존 풀던 LV3 보다 쉬울 것이라 생각했는데 생각보다 까다로웠다. 아직 갈 길이 먼 것 같다. 토이프로젝트 기간이 끝나면 알고리즘과 react 를 집중적으로 배워야 할 것 같다. 처음 생각한 풀이는 다음과 같다. 1) reserve : 빌려줄 수 있는 친구들 lost : 도..

문제 유형 : 동적계획법 (DP) 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/42898 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 해결 법 미로찾기와 비슷한 문제라고 생각해서 그렇게 풀려고 했다. 그런데 몇 년전에 풀었던 DFS 미로찾기 문제 때 했던 방식이 생각이 나질 않았다...! 역시 복습을 안하면 안될 것 같다라는 생각을 했다. 먼저 생각한 풀이에서는 오른쪽으로 가면 (i+1,j) , 아래로 가면 (i,j+1)인 것을 생각했고 이 과정을 저장해가며 이어가는 방식을 ..