아래 메소드들은 원본 배열을 변경하는 메소드들이다. Array.prototype.pop() 배열에서 마지막 요소를 제거하고 해당 요소를 반환한다. const array = [1, 2, 3]; const poppedElement = array.pop(); // 3 console.log(array); // [1, 2] Array.prototype.push() 배열 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환한다. const array = [1, 2]; const newLength = array.push(3, 4); // 4 console.log(array); // [1, 2, 3, 4] Array.prototype.reverse() 배열의 순서를 뒤집는다. const array = [1, 2..
스코프 스코프는 자바스크립트에서 스코프(scope)는 변수와 함수의 유효 범위를 결정한다. 즉, 변수나 함수가 어디에서부터 접근 가능한지를 결정하는 것이다. 전역 스코프(Global Scope) 전역 스코프는 어떤 함수나 블록에도 속하지 않는 최상위 스코프다. 전역 스코프에서 선언된 변수와 함수는 어디서든 접근이 가능하다. const globalVar = 'global variable'; // 전역 스코프에서 선언된 변수 function globalFunction() { // 전역 스코프에서 선언된 함수 console.log(globalVar); // 'global variable' 출력 } globalFunction(); 지역 스코프(Local Scope) 지역 스코프는 특정 함수나 블록 내부에서 선언..
문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 나의 풀이 function solution(strings, ..
센텐스유의 기능들을 개인 핸드폰으로 테스트하기에 번거로움이 있어 가상 기기를 만들기로 한다. Mac iOS 가상 기기 만들기 Xcode 설치 맥에서 iOS 가상 기기를 만들기 위해 앱스토어에서 Xcode를 설치한다. Xcode Xcode includes everything developers need to create great applications for Mac, iPhone, iPad, Apple TV, and Apple Watch. Xcode provides developers a unified workflow for user interface design, coding, testing, and debugging. The Xcode IDE combined with apps.apple.com 가..
문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을 때,..
공통 제외 예정이거나(deprecated) 제외된(obsolute) 기능, 비표준 구문은 사용하지 않는다. 항상 적용할 순 없지만 가능하면 SOLID 규칙을 따르는 것을 권장한다. SOLID (객체 지향 설계) - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. --> ko.wikipedia.org 쓰나 안 쓰나 결과에 영향을 미치지 않는 코드는 최대한 제거한다. 작성된 코드엔 항상 작성된 이유가 있는 것이 좋다. JavaScript 주석 짧은 1줄 주석(// ...)은 가능하면 변수, 함수 등의 이름에 반영하는 것을 권장한다. 다른 사람의 이해를 돕기 위해 주석을 다는 것을 권장한다. 주석엔 복잡한 로직에 대한 설명 등을 담을 수 있다. 네이밍 PascalCase : type, int..
React Query의 라이프 사이클 A 쿼리 인스턴스가 mount 된다. 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱한다. 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경된다. A 쿼리 인스턴스가 unmount 된다. 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집된다. - v4부터는 기본값이 Infinity로 변경될 예정이라고 한다. 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여준다. staleTime 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간 fresh 상태일때는 쿼리 인스..
Sass(Syntactically Awesome StyleSheets) Sass Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin..
Debouncing & Throttling 자바스크립트에서는 짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있다. 그래서 이런 경우 특별한 최적화가 필요하다. 대표적인 예가 바로 자동완성이다. 구글에 검색어를 입력하면 한 글자가 바뀔 때마다 실시간으로 업데이트하면서 추천 검색어를 띄워줘야 한다. 만약 유저 입력 한 번에 추천 검색어 업데이트 한 번이 일어난다면 불필요한 리렌더링이 초당 수 번씩 필요할 것이다. 그래서 정작 필요한 진짜 검색어 에 대한 자동완성이 느려질 수 있다. 이런 걸 방지하기 위해 Debouncing 처리를 한다. Debouncing은 특정 함수의 호출이 너무 자주 일어나지 않도록 일정 시간 동안 함수 실행을 지연시키는 것을 말한다. const useDebo..
useLayoutEffect [리액트 공식문서] 방향성은 useEffect와 동일하지만, 모든 DOM요소의 변경 후에 동기적으로 발생한다.(useEffect는 비동기) DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용해야한다. useLayoutEffect의 내부에 예약된 코드들은 브라우저가 화면을 그리기 이전에 동기적으로 수행된다. [Kent C. Dodds | Remix] 기본 동작은 React가 코드를 실행하기 전에 브라우저가 DOM를 업데이트하도록 하는 것이다. 이것은 코드가 브라우저를 차단하지 않고 사용자가 DOM을 더 빨리 볼수 있도록 한다. 그래서 대부분 useEffect를 사용한다. [stack overflow] useEffect와 어느 정도 비슷하지만 React가 DOM에 업데..
