개발여행의 블로그

1561. Maximum Number of Coins You Can Get https://leetcode.com/problems/maximum-number-of-coins-you-can-get/ Maximum Number of Coins You Can Get - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com [ 문제 풀이 ] 이번에도 문제 파악하는데 시간이 많이 소요되었다. 여러 숫자가 섞인 3n개의 동전 더미에서 내가 선택할 수 있는 수 중 가장 최대 합을 구..

1557. Minimum Number of Vertices to Reach All Nodes Minimum Number of Vertices to Reach All Nodes - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com [ 문제 풀이 ] 그래프의 모든 노드에 도달할 수 있는 가장 작은 vertices 집합을 찾는 문제였다. 문제를 한참동안 분석해보아도 파악이 되지 않아 고민하는데에서 시간이 많이 초과되었다. 노드의 개수(n)와 from에서 to 방향을 나타..

leetcode 1630. Arithmetic Subarrays Arithmetic Subarrays - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com [ 문제 풀이 ] 매개변수 nums, l, r가 주어질 때, 각 원소의 차이가 모두 일정한지 boolean형의 element가 담긴 list를 리턴하는 문제이다. nums는 숫자를 담고 있는 배열, l은 시작 인덱스를 담고 있는 배열, r은 끝 인덱스를 담고 있는 배열이다. 예를 들어 매개변수가 아래와 같을 때,..

leetcode1252. Cells with Odd Values in a Matrix Cells with Odd Values in a Matrix - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com [ 문제 풀이 ] m(row의 수), n(cell의 수)와 2D array(indices)가 주어질 때, m * n 행렬에서 각 indices[i] = [ri, ci]가 행렬에서 일부 증가 연산을 수행하기 위한 인덱스 위치를 나타내는 배열을 활용하여 인덱스의 모든 위치..

React Hooks는 ReactConf 2018에서 발표된 새로운 기능으로 16.8 버전부터 새로 추가되었다. Hooks를 이용하면 class 없이 state와 여러 React의 기능을 사용할 수 있다. Hooks는 왜 필요한가? Hooks의 등장 배경은 기존 Class Component를 사용할 떄의 불편함과 문제점을 해결하기 위해 개발되었다고 한다. 1. Reusing logic (컴포넌트 간 상태가 있는 logic의 재사용성이 떨어짐) Class component 기반의 React 코드를 작성할 때 어플리케이션을 구성하는 여러 컴포넌트의 재사용성을 위해 Higher-Order Conmonents와 Render props와 같은 패턴을 통해 문제를 해결하였다고 한다. 두 가지 패턴은 특정 상황에 적..

이 글은 Redux 공식 문서를 참고해서 정리한 글입니다. Actions action은 type field를 가지고 있는 plain JavaScript object이다. 단순하게 action은 어플리케이션에서 무언가 일어나는 것을 설명한 이벤트라고 생각할 수 있다. - type field type field는 action을 묘사하는 이름(feature)을 가진 string이어야 한다. 예) "todos/todoAdded" 보통 타입은 "domain/eventName"과 같은 형식으로 사용한다. 첫 번째 부분은 action이 속한 카테고리의 특징을 나타내고, 두 번째 부분은 어떤 것이 발생했는지 구체적으로 나타낸 것이다. - playload action은 무엇이 일어났는지에 대한 추가적인 정보를 담고있는 ..

styled-components에 대한 활용 react에만 집중해서 과제를 하다보니 styled-components는 단순히 컴포넌트의 스타일을 지정하는 정도로만 사용했다. 역시나 멘토님께서 해당 부분에 대해 코멘트를 남겨주셨다. 더 찾아보고 적용해보았어야 했는데라는 생각이 들었다. 글로벌 스타일 지정(createGlobalStyle), theme, styled-component의 확장 등등 활용법이 굉장히 많다는 것을 배웠다. 1) 전역 스타일 지정 구현된 코드에는 HTML 파일에 style sheet를 지정해서 전역 스타일을 지정해주었는데, styled component를 사용하면 아래와 같이 사용할 수 있다. import { createGlobalStyle } from 'styled-componen..

React project 내에서 Github API를 사용하기 위해 개인 키를 넣어주여야 하는 상황이었다. React 앱에 개인 API키를 저장하면 누구나 앱 파일을 볼 수 있기 때문에 위험하다. 환경 변수를 사용해서 키를 보안하는 방법에 대해 글을 남기고자 한다. 1) 먼저, 디렉토리의 root에 .env 파일을 생성한다. (개발용 환경변수, 테스트용 환경변수 등등 다양하지만 이번에는 .env로 사용해보겠다.) 2) 파일을 생성했다면 먼저 .gitignore에 추가해주어야 원격저장소에 저장할 때 파일이 올라가지 않는다. 3) 이제 .env에 사용할 key를 저장해주어야 한다. (주의할 점은 REACT_APP_ 을 꼭 붙여주어야 한다.) 위의 사진과 같이 key와 value를 설정해준다. 4) 실제 프로..

자리가 변경되고 나서 다른 계정의 commit이 나의 commit내역으로 올라가 파일의 내용이 모두 지워지는 상황이 발생했다! git rebase -i commit 히스토리를 수정하기 위해 검색을 해보았는데, rebase를 활용하면 해당 commit을 지울 수 있다고 해서 질문을 남긴 후 바로 commit 삭제를 진행했다. --interactive는 말 그대로 git rebase 명령어를 대화형으로 실행하는 것을 뜻한다고 하는데, 아직 와닿지가 않는다! 먼저 내가 수정하고 싶은 commit의 바로 이전 commit을 알아야 한다. 나는 gitlab에서 commit hash 값을 가지고 왔다. (수정할 commit의 hash가 아니라 바로 직전의 commit이어야 한다.) git rebase -i 위의 명..

Hooks의 등장 배경 리액트 hook의 역사는 recompose 라이브러리에서 시작되었다. recompose의 아이디어는 hook과 굉장히 흡사하다. 함수형 프로그래밍을 적용하여 개발되었으며, state를 주는 방식이다. 끝내 recompose 라이브러리는 리액트 팀에 의해 인수되었다. 2018년 10월 25일 recompose의 업데이트는 중단되었다. Andrew Clark은 facebook 팀에 합류해서 hook을 릴리즈했다. https://github.com/acdlite/recompose GitHub - acdlite/recompose: A React utility belt for function components and higher-order components. A React utility..