![]()
오늘은 Object.is 에 대해 정리해 보려고 합니다.Object.is의 개념Object.is는 두 값이 같은지를 판별하는 메서드입니다.이 메서드는 === (엄격한 동등 연산자)와 비슷하게 작동하지만, 몇 가지 특별한 경우에서 다르게 동작합니다.Object.is는 다음과 같은 경우에 true를 반환합니다:두 값이 정확히 같은 경우 (예: 같은 객체를 참조하거나, 두 변수가 같은 기본값을 갖는 경우).두 값이 모두 NaN인 경우 (NaN === NaN은 false이지만, Object.is(NaN, NaN)은 true).두 값이 0과 -0인 경우 서로 다르다고 판단 (0 === -0은 true이지만, Object.is(0, -0)은 false).사용법Object.is 메서드는 두 개의 인자를 받으며, 이 ..
![]()
벌써 3주차가 지나갔습니다. 이번 주는 팀 과제를 수행하면서 주로 실전적인 개발지식들을 좀 더 쌓을 수 있었습니다. HTMLcollection 과 NodeList, DOMcontentLoaded,js모듈에서의 변수 export import 등 다양한 상황에 필요한 내용들을 익혔습니다. 이번 WIL 에서는 이번주에 새롭게 익힌 내용 중 query parameter 에 대한 내용을 살짝 정리해보려고 합니다.쿼리파라미터는 path가 끝난 후 ? 로 시작하여 & 로 연결되는데, 테스트 중 &가 아닌 ? 로 연결했을 때도 작동하는 경우가 있었습니다.왜 이런 것인지는 잘 모르겠지만 아마도 서버가 관대한 부분이 있어서(?) 였던 것 같습니다. 그래서 이 규칙이 갑자기 헷갈렸었는데, 다시 정리해보면 'https://p..
![]()
오늘은 기초적인 내용이지만 헷갈려서 정확히 알지 못했던 변수 사용법에 대해 정리해 보려고 합니다. 상황자바스크립트 모듈 a.js, b.js, data.js 가 있습니다.a.js 와 b.js 는 무언가 기능을 하는 친구고data.js 에는 let fruit = "delicious"; 라는 변수가 export 되었습니다.각 모듈은 html 에서 type="module" 이 적용된 script 입니다. 궁금증은,"a.js 에서 import 한 fruit 변수를 재할당 할 경우 그 변동된 값이 b.js 에서도 반영되는가?"였습니다. 해답자바스크립트 ES6 모듈(commonJS 는 안된다고 합니다)에서 export로 내보낸 변수는,라이브 바인딩(live binding)이 적용되기 때문에, 한 모듈에서 변수의 값을..
![]()
오늘은 바닐라 자바스크립트로 코딩할때 으레 사용하게 되는 domContentLoaded 이벤트에 대해 궁금증이 생겼습니다. 처럼 defer 속성을 주거나 의 최하단에 를 적용하거나 하면dom 요소가 모두 로드되고 실행되어서 domContentLoaded 는 사용하지 않아도 되는 줄 알았는데,확실히 보장하려면 사용하는게 좋다는 결론을 얻었습니다. 사용 여부는 script 태그의 속성이 어떤지에 따라 달라질 수 있으므로, 먼저 script 태그의 속성부터 정리해보겠습니다. script - defer- 로딩 시점: 스크립트는 HTML 파싱 동안에 백그라운드에서 다운로드됩니다.- 실행 시점: HTML 문서의 파싱이 완전히 끝난 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됩니다.- 순서 보장:..
![]()
오늘은 AbortController 라는 새로운 객체에 대해 알게되어 정리해보려고 합니다. AbortControllerAbortController는 하나 이상의 웹 요청을 취소할 수 있게 해주는 인터페이스 입니다. 기본동작1. 생성AbortController 객체는 생성자를 통해 호출합니다.const controller = new AbortController(); 2. 속성AbortController 객체는 signal 이라는 속성을 가지고 있으며, 이 신호는 여러 요청에 사용될 수 있습니다.const { signal } = controller; 3. 요청 취소signal 을 fetch 의 옵션으로 사용하여 나중에 요청을 취소 할 수 있습니다.fetch(url, { signal }) .then(r..
![]()
오늘은 HTMLCollection, NodeList에 대해서 알아보았습니다. querySelectorAll 이나 getElementsByClassName 등으로 dom 유사배열객체를 찾아왔을 경우배열이라고 생각해서 배열메서드를 사용했는데 안되는 경우가 있었습니다. HTMLCollectionHTMLCollection은 getElementsBy~ 와 같은 메서드에 의해 찾아진 유사배열객체입니다.HTMLCollection의 경우 Array.prototype 에 정의된 메서드들을 바로 쓸 수 없습니다.사용하려면 간단히 배열로 변환해서 쓰면 됩니다.//Array.from 사용하기let collection = document.getElementsByClassName('some-class');let elementsA..
![]()
오늘은 자바스크립트의 비동기와 관련된 이벤트 루프와 태스크 큐에 대해 공부했습니다.자바스크립트는 싱글스레드 언어인 것으로 알고 있는데, 태스크 큐는 또 다른 스레드를 쓴다고 합니다.그렇다면 사실 멀티스레드인 걸까요? 그리고 태스크 큐는 비동기 함수나 콜백을 실행할 때만 사용되는 것인가요?자바스크립트의 싱글 스레드 동작자바스크립트 엔진은 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 태스크만 실행할 수 있습니다. 하지만 자바스크립트 환경(주로 브라우저나 Node.js)은 싱글 스레드인 자바스크립트 엔진 외에도 여러 개의 백그라운드 스레드를 사용하여 비동기 작업을 처리할 수 있게 해줍니다.이벤트 루프와 태스크 큐이벤트 루프는 자바스크립트가 멀티 스레드 같이 동작할 수 있게 하는 메커니즘입니다. 이벤트 루프..
![]()
이번 주는 개인학습 주차였습니다.그동안 안다고 생각했지만 다시 생각해보니 정확히 모르고있었던실행컨텍스트, this바인딩, 클로저 등의 개념에 대해 공부하였고, 이해할 수 있었습니다.이번 주차에 공부한 내용을 정리해보려고 합니다.실행 컨텍스트JavaScript에서 "실행 컨텍스트(Execution Context)"는 코드가 실행되기 위한 환경이나 상태를 말합니다. 실행 컨텍스트는 JavaScript 엔진이 코드를 실행할 때 관련 정보를 담고 있는 내부 데이터 구조입니다. 실행 컨텍스트에는 변수, 객체, 함수 호출 등 코드의 실행에 필요한 모든 정보가 포함되어 있습니다.실행 컨텍스트의 구성 요소실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가지고 있습니다:변수 환경(Variable Environment):..
![]()
드디어 제가 클로저에 대해 조금 이해한 것 같습니다..! 그동안 여러번 공부했지만 이해하지 못했던 것 같은데이제야 드디어 약간(?) 알겠어서 정리해봅니다.공식 정의(?)가 아닌 제가 이해한 바를 정리해보려고 합니다. 클로저란?상태를 안전하게 변경하고 유지하기 위해(은닉화) 사용하는 JS의 기능으로중첩된 함수에서, 외부함수의 생명주기가 종료했음에도 여전히 상태가 참조되고 있는 것! 일반적인 상황// 함수가 호출될때다 증가해야하는 상태변수let num = 0;// 상태 변경 함수const increase = () => { return ++num}console.log(increase()); // 1// 만약 여기서 num = 100; // 이런식으로 변경해버리면console.log(increase());..
![]()
다음과 같은 this 바인딩에 대해 생각해볼 수 있는 코드를 실행해보는 과정에서 예상하지 못한 동작이 발생했습니다. var fullname = 'Ciryl Gane'var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; ..
![]()
오늘은 바닐라 자바스크립트로 DOM에 요소를 추가하는 상황에서documentFragment 객체에 대해 알게 되었습니다.react를 사용하면 볼 일이 많이 없을 수도 있지만 새로운 개념을 알게되어 정리합니다! Document Fragment 의 정의DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어 브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능합니다. 용도와 효과-메인 DOM의 조작(manipulation)이 필요할때 페이지 reflow 등 성능적 영향을 최소한으로 줄이기 위해 사용합니다.-Document Fr..
![]()
오늘은 화살표함수와 일반함수에서의 this 바인딩이 너무 헷갈려서 다시 공부했습니다.안녕하세요! 자바스크립트에서 일반 함수와 화살표 함수의 this 바인딩 차이를 이해하는 것은 중요한 부분입니다. 두 함수 유형의 this 바인딩 방식의 차이는 다음과 같습니다:1. 일반 함수일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정됩니다. 즉, 누가 함수를 호출하느냐에 따라 this가 결정됩니다. 다음은 몇 가지 일반적인 경우입니다:객체의 메소드로 호출될 때: this는 메소드를 호출한 객체를 가리킵니다.단독 함수로 호출될 때: 엄격 모드(strict mode)에서는 this가 undefined가 되고, 비엄격 모드(non-strict mode)에서는 this가 전역 객체(global object)를..
![]()
오늘은 전 팀원님과 지난 팀프로젝트 코드 리뷰를 진행했습니다! 꽤나 시간이 걸렸지만 한 줄 한 줄 이야기 나누면서 이해도도 높아지고 함께 코딩한다는 것이 어떤 느낌인지도 확실히 알 수 있었습니다. 그 과정에서 내 코드를 돌아보며, ' 좋은 함수' 란 무엇인지에 대해 되새겨 보았습니다. 특히, 함수 보다 상위 스코프에서 정의된 변수를 사용할 경우, 함수 실행시 해당 상위 변수를 파라미터에 넣어서 쓰는게 좋은지, 아니면 그냥 상위 변수를 참조해도 되는지가 명확하지 않았습니다. 그래서 '좋은 함수'에 대해 다시한번 되짚어 보았습니다. 1. 순수 함수 (Pure Functions): 가능하면 순수 함수를 사용하는 것이 좋습니다. 순수 함수는 동일한 입력에 대해 항상 동일한 결과를 반환하며, 외부 상태를 변경하지..
![]()
첫 WIL 을 작성해보려고 합니다. 캠프 첫 주차를 무사히 통과했고, 배운 것이 참 많은 한 주 였습니다. (사전캠프 때부터 함께하긴 했지만)새롭게 만난 팀원들과 함께프로젝트를 진행하는 것이 쉽지많은 않았던 것 같습니다. 전공자 분들이 계셨지만, 프론트엔드 팀프로젝트는 모두 처음이셔서 하나하나 찾아보고 배우면서 진행해야 했기 때문입니다. 하지만 우리 팀은 케미(?)가 잘 맞았고, 금요일 쯤에는 흩어지는게 아쉬워서수업 종료 이후에도 모두가 남아 계속 이야기를 이어갈 정도로 팀워크가 좋았습니다. [github]1주일을 돌아보면, 우리가 가장 어려워했던 것은 github을 이용한 협업과정 이었습니다.명령어와 동작을 하나하나 이해하고, 알아가게 된 뒤에도 병합상황 등에서 뜻대로 되지..
![]()
오늘 첫 팀 프로젝트를 완료하고 발표까지 마쳤습니다! KPT 에 의거하여 회고를 작성해보려고 하니다. 먼저 K(Keep - 현재 만족하고 있는 부분) 로는, 1. 팀원 분들과의 협업 프로세스가 안정적으로 잘 진행되었다고 생각합니다. 2. 역할 분담 역시 자연스럽게 효율적으로 잘 이루어 진 것 같습니다. 다음으로 P(Problem - 문제라고 생각되는 부분) 로는, 1. 다른 팀의 발표를 보며, 디자인의 중요성을 다시한번 느꼈습니다. 2. readme 작성도 중요한 부분임을 배웠습니다. 3. crud 에서 auth 는 반드시 필요한 것임을 배웠습니다. 마지막으로 T(Try - 해결책) 로는, 1. 프론트엔드에서 디자인이 차지하는 부분이 정말 크다는 것을 체감했고, 디자인을 직접 해야하는 상황이라면, 전체 ..
![]()
오늘은 팀원분들과의 팀프로젝트 마지막 날이었습니다. 거의 하루종일 git & github 때문에 어려웠던 날이었습니다. ㅜ. ㅜ 우리는 각각 branch 를 나눠 작업하고 main 에 병합하는 방법으로 진행해보기로 했는데, 아직 익숙하지 않다보니 계속 에러와 마주쳤습니다. 특히 pull, merge 등 병합 상황에서 conflict가 발생했을 때 충돌 부분을 수정하는 것이 무언가 아직은 부담스럽고 어렵게 느껴졌습니다. 그러나 어려움 끝에 각각 작업한 결과들을 main에 성공적으로 병합할 수 있었고 시간 내에 프로젝트를 완성하였습니다. 물론 여러가지 부족한 점이 많지만 첫 팀프로젝트를 무사히 완료한 것에 뿌듯함을 느낍니다. 마지막으로 오늘 겪었던 git 문제 해결 상황을 정리합니다. ■ 개인branch 에..
![]()
오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다. 바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 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가 바인딩된다...
![]()
주어진 배열중에서 가장 많이 나오는 '값'을 찾아 리턴하면 된다!!! 만약에 자주나오는 값이 두개이상 겹치면 -1 리턴하면 된다!!! 또 만약에 주어진 배열 길이가 1이면 그냥 그 값 리턴하면 된다!!! 여기서 또 이렇게 고생하다니... 대충 막 풀었던 답 1 아무튼 배열에서 값끼리 비교해서 중복이면 임시배열에 담고 set으로 중복제거 해서 풀어보려했지만 점수는 43.8 점 이었다... function solution(array) { let answer = 0; let temp; let arr = []; for(let i = 0; i 0 && array[i] === temp){ arr.push(temp); arr.push(array[i]); } temp..
![]()
이건 쉬운거였는데 수 sort하는 법이 순간 생각 안났어서 적어둔다... function solution(array) { var answer = 0; // 간단한 수 정렬은 아래와 같이 array.sort((a, b) => a - b); // 중앙수 찾기... answer = array[Math.floor(array.length / 2)]; return answer; }
![]()
머쓱이네 피자가게는 피자를 두 조각에서 열 조각까지 원하는 조각 수로 잘라줍니다. 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 매개변수로 주어질 때, n명의 사람이 최소 한 조각 이상 피자를 먹으려면 최소 몇 판의 피자를 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. function solution(slice, n) { var answer = 0; // 짝수면 걍 나누기 홀수면 나누고 버리고 + 1 answer = n % slice === 0 ? n / slice : Math.floor(n / slice) + 1; return answer; } 이렇게 하였지만 그냥 버림하면 되는 거였다.... function solution(slice, n) { return Math..
![]()
뭐지 이건 수학인가 아닌가?!? 큰 종이를 1 x 1 크기로 자르려고 합니다. 예를 들어 2 x 2 크기의 종이를 1 x 1 크기로 자르려면 최소 가위질 세 번이 필요합니다. 정수 M, N이 매개변수로 주어질 때, M x N 크기의 종이를 최소로 가위질 해야하는 횟수를 return 하도록 solution 함수를 완성해보세요. 뭐지???? 잘모르겠어서 그냥 곱하고 1 뺐는데 되었다?? function solution(M, N) { var answer = 0; answer = M * N - 1; return answer; }
