전체 글

오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다. 바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 html 마크업부터 하고, js, css 작성 및 연결하는 상황인데, 오늘의 문제는 env 사용시 마주친, "process is not defined" 였습니다... vite 혹은 react, next 프로젝트에서는 env사용시 클라이언트에서도 NEXT_PUBLIC 등을 붙여주면 접근이 가능했는데, 바닐라 환경(?)에서는 계속해서 process 에 접근하지 못하는 문제가 있었습니다. // 문제가 된 코드 const request = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${..

리액트(React)에서 useMemo와 useCallback은 성능 최적화를 위해 사용되는 훅(hooks)입니다. 이들은 불필요한 연산과 렌더링을 방지하여 애플리케이션의 효율을 높이는 데 도움을 줍니다. 각각의 훅이 어떻게 작동하는지와 사용 사례를 아래에서 자세히 살펴보겠습니다. useMemo useMemo는 메모이제이션된 값을 반환하는 훅입니다. 이 훅은 계산 비용이 많이 드는 함수의 결과값을 저장해두었다가, 의존성 배열에 있는 값이 변경되었을 때만 함수를 다시 실행하여 값을 계산합니다. 그 외의 경우에는 메모이제이션된(저장된) 값을 재사용함으로써 성능을 향상시킵니다. 사용법: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b..

네, ES6 이전의 JavaScript에서는 주로 함수를 사용하여 클래스와 비슷한 구조를 만들곤 했습니다. 이러한 방식은 주로 생성자 함수와 프로토타입을 이용하여 객체 지향 프로그래밍을 구현합니다. 이러한 패턴을 '프로토타입 기반 상속'이라고 합니다. 생성자 함수 사용 예제 생성자 함수를 사용하여 클래스와 유사하게 객체를 생성하고 메서드를 정의할 수 있습니다. 아래는 생성자 함수와 프로토타입을 이용한 예제입니다. function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greet = function() { console.log(`Hello, my name is ${this.name} and I am $..

첫 TIL 을 작성해보겠습니다. 어제 오늘, 팀원 분들과 계속 소통하면서 첫번째 프로젝트를 완성시켜 나가고 있습니다. 혼자서만 외롭게 써오던 github를 새롭게 만난 팀원분들과 함께 협업으로 사용하니 매우 신기합니다. 이 과정에서, 정확하고 매너있는 소통이 정말 중요한 덕목임을 다시 한번 배우는 시간이 되고 있습니다. 협업을 통해 자연스럽게 배우는 것이 정말 많은 것 같습니다. 오늘만 해도 git 과 github 의 여러 명령어들과 씨름하면서 branch 의 개념, stage와 commit 의 차이 pull 과 push 등에 대해 깨닫는? 시간이 되었습니다. 궁금한 것은 pull request 및 merge 에 대한 것인데, 내일 더욱 학습해보려고 합니다. 또한 내일부터는 오늘배운 TIL 작성가이드를 ..

주어진 정수 n 이하의 수에서 홀수만 배열에 담아서 리턴하면 된다. 이건 별건 아니지만 for 문에서 마지막 조건을 i++ 대신 i+=2 로 하는 방법을 미처 생각못했다.. function solution(n) { var answer = []; for(let i = 1; i

문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 0 && count < A.length){ return count; }else if(count === A.length){ return -1; } } 이렇게 풀긴했지만 function solution(A, B) { if (A===B) return 0; for (let i = 0; i < A.length; i++) { A = A.slice(..

...[1, 2, 3]은 이터러블인 배열을 펼쳐서 요소들을 개별적인 값들의 목록 1, 2, 3 으로 만든다. 이때 1 2 3은 값이 아니라 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다. 이는 스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당 할 수 없다. // 스프레드 문법의 결과는 값이 아니다. const list = ...[1, 2, 3]; 이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 *주의 스프레드 문법은 앞에서 살펴본 Rest 파라미터와 형..

push 인수로 전달받은 모든 값을 원본 배열의 마지막에 추가하고 변경된 length 값을 반환 > 원본 배열 변경 > 성능x, 다음 두가지 방법을 쓰는게 좋음 const arr = [1, 2]; // push 와 동일 arr[arr.length] = 3; // 스프레드 문법으로 원본 안건드리고 const newarr = [...arr, 3]; pop 원본배열에서 마지막 요소를 제거하고 제거한 요소를 반환 > 원본 배열 변경 unshift 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 반환 > 원본 배열 변경 shift 원본배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. > 원본 배열 변경 concat 인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마..

클로저란? const x = 1; function outer() { const x = 10; const inner = function () { console.log(x); } return inner; } // outer 함수를 호출하면 중첩함수 inner 를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트는 스택에서 팝되어 제거된다. const innerFunc = outer(); innerFunc(); 위 코드를 실행하면 콘솔에 10이 찍힌다. 이미 생명주기가 종료되어 실행 컨텍스트 스택에서 제거된 outer 함수의 지역변수 x 가 다시 부활이라도 한듯이 동작한다. 이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참..

// this 는 어디서든지 참조 가능하다 // 전역에서 this 는 전역 객체 window 를 가리킨다 console.log(this); // window function square(number){ // 일반 함수 내부에서 this 는 전역객체 window를 가리킨다. console.log(this) // window; return number * number; } square(2); // 전역 함수는 물론이고 중첩함수를 일반 함수로 호출하면 // 내부의 this에는 전역 객체가 바인딩된다. // 다만 this 는 객체의 프로퍼티나 메서드를 참조하기 위한 자기참조 변수이므로 // 객체를 생성하지 않는 일반 함수에서 this 는 의미가 없다. // strict 모드에서는 undefined가 바인딩된다...