Under the Sign of Saturn

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가 있다. 쿠키와 개념이 비슷하지만, 쿠키에서 조금 더 개선점을 가지는..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 2021/02/16 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기 이슈 작업물의 Preview 이미지를 클릭하면 확대되는 기능을 구현했는데, 이미지를 닫고 원래 페이지로 돌아오면, 브라우저 상단으로 올라가는 이슈가 있었..

문제 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한 조건 n은 2이상 1000000이하의 자연수입니다. 코드 풀이 주어진 숫자가 배열 형태가 아니므로, 첫 번째로 반복문을 등장시켜서 소수를 찾기 위한 숫자 집합을 만들어준다. 1은 자연스럽게 제외가 되니 2부터 시작해 n까지 배열에 넣어준다. 이때 arr[0], arr[1]은 채워지지 않아서 undefined이 될 것이지만, 구하는 것은 소수의 개수이므로 filter 메서드를 통해서 지워나갈 수 있다. 만들어진 배열을 순회하면서 소수가 아닌 수들을 제거해줄 목적으로 0을 넣어준다. i = 2일 때, i번째에 위치..

문제 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한 사항 str은 길이 1 이상인 문자열입니다. 입출력 예 ZbcdefggfedcbZ 코드 풀이 JavaScript의 sort() 메소드는 문자열의 유니코드 코드 포인트를 따른다. 유니코드에서는 대문자가 소문자보다 크므로, 주어진 문자열에 sort() 메소드를 적용하면 abcdef...ABCD... 순으로 정렬될 것이다. 이를 reverse() 메서드를 이용해 뒤집으면 ZYXW... fedcba 순으로 정렬될 것이다. 대문자가 소문자보다 작은 것으로 간주되므로 reverse() 메서드로 끝이 ..

문제 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자 위쪽에는 크레인이 있고 오른쪽에는 바구니가 존재한다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지한다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올리고, 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 칸부터 인형이 순서대로 쌓인다. 제한 사항 board 배열은 2차원 배열로 크기는 5 x 5 이상 30 x 30 이하입니다. board의 각 칸에는 0 이상 100 이하인 정수가 담겨있습니다. 0은 빈 칸을 나타냅니다. 1 ~ 100의 각 숫자는 각기 다른 인형의 모양을 의미하며 같은 숫자는 같은 모양의 인형을 나타냅니다. moves 배열의 크기는 1 이상 ..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 Github Pages에 배포된 기존 portfolio를 대체하기 위해서 second 라는 이름의 브랜치를 생성하고, 작업이 어느 정도 끝나서 second 브랜치를 master 브랜치로 아예 덮어쓰기를 진행하기로 했다. git checkout second git merge -s ours master git checkout ..