Under the Sign of Saturn

문제 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..

useState 기본 Hook에 속하는 useState. 상태 유지 값과 그 값을 갱신하는 함수를 비구조화 할당을 통해 반환한다. 처음 렌더링이 된 시점에 반환된 state 값은 useState이 두 번째 인자 값과 같다. 코드 상단에 useState를 import해준 뒤, 함수형 컴포넌트 내부에 const \[value, setValue\] = useState(0); 로 value의 초기 상태값을 useState의 파라미터를 통해 0으로 초기화해준다. 이후, +1, -1이라는 버튼을 클릭했을 때는 setValue 함수를 통해 기존 value에 1을 더한 값을 파라미터로, 상태를 업데이트해준다. setValue 함수는 새로운 state 값을 인자로 받아 컴포넌트 Re-rendering을 시킨다. 이후 렌..

2021/02/21 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #4 Window.scrollY/window.pageYOffset 2021/02/16 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Hea..

기존 || 연산자의 한계점 function isEnabled(options) { return console.log(options.enabled || true) } isEnabled({}); // true isEnabled({enabled: null}); // true isEnabled({enabled: false}); // true 속성 값인 false를 인식하지 못하고 true를 반환하고 있다. || 연산자는 좌항이 falsy한 경우 무조건 우항을 택한다. 하지만, 자바스크립트에서는 null, undefined뿐 아니라 false, 0, "", NaN 등 다양한 값을 falsy하게 여긴다. 또한 || 연산자는 첫 번째 truthy 값을 반환한다면(존재할 경우), ??는 첫 번째 defined value..

WebStorage의 API - 두 객체 모두 동일한 메서드와 프로퍼티를 갖는다. setItem(key, value) // 키-쌍을 보관 getItem(key) // 키에 해당하는 값을 받아온다. removeItem(key) // 키와 해당 값을 삭제한다. clear() // 모든 것을 삭제한다. key(index) // 인덱스에 해당하는 키를 받아온다. length // 저장된 항목의 개수를 받아온다. - 두 스토리지 객체는 setItem/getItem/removeItem 메서드를 지원하는 것으로 보아 Map과 유사하지만, 인덱스를 사용해 키에 접근하는 방식은 다르다고 볼 수 있다. - 웹 스토리지 객체는 origin(domain/port/protocol)에 묶여 있다. (프로토콜과 서브 도메인이 다르..

Vuex를 사용해서 로그인 정보를 state에 저장하고, 페이지가 전환되어도 그대로 유지되도록 하는 방법을 찾다가, vuex의 state를 localStorage로 자동으로 동기화해주는 라이브러리 vuex-persistedState를 사용해봤다. 이전 프로젝트에서도 사이드바에 유저 정보가 바로바로 반영이 안 되거나, 렌더링이 원하는 타이밍에 제대로 되지 않는 이슈가 있었는데, Vue.js가 아무래도 SPA를 기반으로 하다보니, 이런 상황이 앞으로도 자주 발생할 것 같다는 생각이 들었다. 브라우저에 데이터를 저장하는 대표적인 방법은 HTML5에 포함된 자료 구조인 Web Storage의 localStorage, sessionStorage가 있다. 쿠키와 개념이 비슷하지만, 쿠키에서 조금 더 개선점을 가지는..