Under the Sign of Saturn

문제 상황 useEffect를 쓰면서 자주 만나는 에러 핸들링을 해보자. 문제 원인 및 해결 useEffect는 클래스 컴포넌트에서 componentDidMount()와 componentDidUpdate() 라이프 사이클 메소드 두 개를 합친 역할을 한다고 배웠다. 따라서, useEffect 함수의 두 번째 인자에 빈 배열을 넣거나, 업데이트 하고자 하는 state를 넣어주어 렌더링의 횟수를 제한해주어야 하는데, 위 에러는 해당 state가 빠졌거나, 잘못 들어갔거나 해서 나오는 에러이다. 문제의 원인이 된 코드는 App.js와 Snackbar.js 컴포넌트에서였다. App.js에서는 Redux를 통해 반응형 컴포넌트 빌딩을 위해 size를 store에 등록해주기 위해 리팩토링을 하다가 생겼다. func..

시작하며 1편에서 다루었던 글에서는 redux-actions를 사용하는데, redux와 react-redux 모듈로도 충분하지 않을까 싶었다. 패턴 역시 좀 더 직관적으로 이해할 수 있으면 좋을 것 같아서 즐겨보는 유튜버의 Redux 강의를 한 번 들어봤다. 디렉토리 구성 store └modules └ index.js └ test.js └config.js └index.js 기존에는 위 같은 구성이었다. 이를 간단하게 actions와 reducers로 구분했다. 기본 설정 1 step reducer 생성 reducers 폴더 내에 counter와 로그인 여부를 확인하는 isLoggedIn reducer를 만들어보기로 한다. // src/reducers/counter.js const counterReduce..

시작하며 App이 점점 규모가 커지면서 상태 관리할 필요를 계속 느끼고 있었는데, 이번에야 도입했다. 필요한 모듈을 설치하고, 간단하게 +/- 버튼을 통해 카운트되는 기능을 만들어보면서 Redux에 접근해봤다. 필요 모듈 다운로드 yarn add react-redux redux redux-actions yarn을 통해 위 dependencies를 받았다. 폴더 구성 최종 폴더 구성은 사진처럼 되어 있다. src/store 내 config.js, index.js 파일을 가지며, modules 폴더를 따로 두었다. store 1. config.js 파일 생성 해당 파일은 여러 store를 모아 외부 컴포넌트와 연결하기 위함이다. store는 state를 관리하는 일종의 보관처. // src/config.js..

문제 상황 버튼을 클릭하면 바로 위의 문단이 fade out 되면서 사라져야 하는데, 해당 부분을 드래그하면 draggable 하고, 복사까지 된다. 코드 .fade { animation: fade ease 1s forwards; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } 해결 방법 위 코드를 아래처럼 바꾼다. @keyframes fade { from { opacity: 1; pointer-events: all; } to { opacity: 0; pointer-events: none; } } 더 이상 Clickable 하지 않다. pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 ..

속성을 이용한 CSS 셀렉터는 거의 사용하지 않아서 잊어버렸는데, CSS Diner라는 귀여운 게임을 찾은 김에 Attribute만을 통해 셀렉트하는 방법을 정리해두면 좋을 것 같았다. A[attribute] a[href] input[disabled] input[type='checkbox'] 태그 네임, 클래스 네임, ID 등등 다른 CSS 선택자와 Attribute Selector를 함께 쓰는 방식이다. 위 예시는 href='anything'인 a 태그를 선택하거나 disabled 속성을 가진 input을 선택한다. [Attribute] [value] { .. } value라는 attribute를 가진 요소를 선택한다. ^, $, * [attribute^='value'] .toy[category^='S..

문제 1, 2, 3번 학생이 있다. 매개변수로 정답지가 배열로 주어지고, 각 학생은 나름의 찍는 패턴을 갖고 있다. 이때 가장 많이 맞춘 학생들을 오름차순으로 반환한다. programmers.co.kr/learn/challenges 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 코드 풀이 첫 번째 함수 solution(answers)는 padEnd로 시작했다. 신규 아이디 추천 문제에서 padEnd를 처음 알게 돼서 연습 겸 사용해봤다. 우선 각 학생들의 찍는 패턴을 students 변수에 담는다. map을 돌며 매개변수로 주어진 answer의 length만큼, student라는 각 학생들의 찍는 패턴을 반복해서 넣어주었다. 만일 문제가 8문제라 하면 1..

programmers.co.kr/learn/challenges 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 문제 자연수 n이 주어질 때, n을 3진법으로 바꾸고, 이를 앞뒤로 뒤집는다. 이를 다시 10진법으로 변환한다. 코드 풀이 10진법을 2진법으로 바꾸는 로직과 동일하다. 2로 나눈 나머지 대신 3으로 나눈 나머지를 num에 담는 식이다. n이 3보다 작은 경우를 고려해 num += n을 잊지 말고 추가해준다. 10진법을 3진법으로만 바꾸는 데 그치지 않고 이를 뒤집기 때문에 위 같은 코드를 썼다. parseInt()는 문자열 인자를 구문분석해 특정 진수의 정수를 반환한다. 인자가 문자열이 아니라면 문자열로 변환한다. 뒤집힌 3진법은 문자열이고, 이..

programmers.co.kr/learn/courses/ 프로그래밍 강의 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 탐욕법 알고리즘 개요 탐욕법 알고리즘을 활용하는 문제. 탐욕법(Greedy Algorithm)은 동적 프로그래밍(또는 동적 계획법, Dynmaic Programming) 사용 시 지나치게 많은 일을 한다는 것에서 고안된 알고리즘이라고 한다. 두 방법은 서로 차이점이 존재하며, 보완하는 방식으로 활용이 된다고 한다. 동적 계획법은 전체 문제를 여러 개의 하위 문제로 쪼개어 풀고, 하위 문제의 해결 방법을 결합해 최종 문제를 해결한다. 피보나치의 수열이 대표적인 예이다. 이런 프로그래밍 방식은 효율을 위해 함수 결과 값을 저장하며 최종 결과물을 찾는다. ..

문제 대문자, 소문자가 구분 없이 주어지는 문자열 s에서 p와 y의 개수를 구하고, 개수가 동일하면 true, 아니면 false를 반환한다. 이때 p와 y가 모두 하나도 없다면 항상 true를 반환한다. (개수 비교 시 대소문자 구분 X) programmers.co.kr/learn/challenges 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 코드 풀이 str.match(정규식) 메서드는 일치하는 정규식 문자가 있을 때 이를 배열로 반환한다. 없으면 null을 반환한다. 문제에서 p나 y가 하나도 존재하지 않을 경우엔 항상 true를 반환하므로, 함수의 첫 번째 분기에는 str.match([p|y]/gi) === null 조건으로 분기해준다. 하나라도..

programmers.co.kr/learn/challenges 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 알파벳을 일정한 거리만큼 밀어서 새로운 문자를 만드는 시저 암호. 암호화 해야 할 문자열이 주어지고, 밀어야 하는 거리 n이 주어질 때 변환된 시저 암호를 반환하는 문제이다. (단, 공백은 아무리 밀어도 공백이다. 문자열은 알파벳 소문자, 대문자, 공백으로만 이루어져 있다.) 코드 문자열은 iterable한 객체이므로 for of 문법으로 문자 하나 하나를 검사했다. 공백일 경우에는 빈 공백을 반환되어야 할 새로운 문자열인 newStr에 더해주고, continue로 다음 반복문 프로세스를 진행한다. String.prototype.charCodeAt..