나만의 개발 일기

[Javascript] immutable Array

sort() / toSorted() 기존에 sort() 를 진행하면 기존배열은 유지되지 않고, 기존 배열 또한 변한다. - mutable toSorted() 를 사용하면 기존 배열은 유지된다. - immutable 기존값 바꾸기 / slice() / with 기존 배열의 값을 바꾸려면 const arr = [1,2,3] arr[1] = 4 // arr = [1,4,3] const arr2 = [1,2,3] const arr3 = arr2.slice() arr3[1] = 4 // arr2 = [1,2,3] // arr3 = [1,4,3] 기존 배열의 index 에 직접 변경하는 방법. - mutable slice() 를 사용하여 기존 배열을 유지하는 방법. - immutable 이 있다. 앞으로는 이렇게 ..

아직까지 console.log 만 사용한다면 주목할 것!

console.count() 함수나 코드가 실행되는 횟수를 알 수 있다. 여러개의 카운터를 사용할 수 있으며, 레이블과 함께 사용 가능하다. React 컴포넌트 안에 console.count 를 사용하면 그 컴포넌트가 몇 번 렌더링 됬는지도 알 수 있다. count 를 리셋하려면 console.countReset 을 사용하자. console.time() 하나 혹은 여러개의 작업에 걸리는 시간을 파악한다. 위와 같이 측정하려는 코드의 시간을 time() timeEnd() 로 감싸주자. console.assert() assert() 는 참이 아닌 경우에만 실행된다. console.log() 로 true , false 를 비교하지 말고, false 일 경우에만 실행되는 assert 를 사용해보자 console..

[Javascript] 프로토타입

프로토타입이란? 자바스크립트에서 기본 데이터 타입을 제외하면 모든 것이 객체인데, 이 객체가 만들어 질때는 프로토타입 객체를 이용하여 객체를 만든다. 프로토타입은 유전자라고 생각하면 이해하기 쉽다. 프로토타입에 있다면, 가져다가 자유롭게 사용 할 수 있다는 뜻이다. ( JAVA 상속과 유사한 개념 ) 우리가 자바스크립트로 개발하다보면 MDN 사이트를 자주 접하게 될텐데, 유전자라는 말이 이제는 이해가 될 것이다. 예를들면 [0,0,0,0,0].filter() 같은 함수를 자주 사용하게 될텐데, 이는 배열 유전자에 filter 라는 함수를 만들어 둔 것을 우리가 사용하게 되는 것이다. 상속이면 재사용이 되겠네? 어떤 객체의 유전자에 추가해서 사용하면 어디서든 재 사용 할 수 있다. 위의 Array.prot..

[Javascript] 실행컨텍스트

실행 컨텍스트란?자바스크립트 실행 컨텍스트는 자바스크립트 실행에 필요한 환경 정보를 모아놓은 객체이다.자바스크립트는 동일한 환경에 있는 환경 정보를 call stack 에 쌓은 후 코드를 실행하여, 코드의 환경과 순서를 보장 할 수 있다.실행 컨텍스트는 함수 안에서 실행되는 Functional Context (함수 컨텍스트) 와 함수 안에서 실행되는 코드가 아닌 경우에는 Global Context ( 전역 컨텍스트 ) 가 있다.Global Context ( 전역컨텍스트 )함수 안에서 실행되는 코드가 아닌 모든 스크립트전역컨텍스트 내의 this 는 global 객체 ( 변수 객체를 생성하지 않고 global 을 사용 )LIFO ( Last in First out ) 로 실행Functional Context..

[Garbage Collection]

1. 가비지 컬렉션이란? - 할당된 메모리를 관리하는 기능 - 사용되지 않는 메모리를 식별하고 해제하여 프로그램의 메모리 누수를 방지하고 성능을 향상시킨다. 2. 자바스크립트 가비지 컬렉션 동작 원리 - 자바스크립트 데이터 구조를 생성하면 메모리가 할당된다. - root 로 부터 도달 가능하지 않은 객체는 메모리에서 해제시킨다. 2-1) 기본적인 예시 // fruit 변수에 객체를 할당했으므로 메모리가 할당된다. let fruit = { name: "peach" } // null 값을 재할당 fruit = null // {name: "peach"} 라는 객체는 더 이상 참조되지 않는다. // 가비지 컬렉션에 의해 메모리가 해제된다. 2-2) 다른 예시 // fruit 변수에 객체를 할당했으므로 메모리가 ..

[Event] 이벤트 버블링 및 캡처링

1. 이벤트 버블링 캡처링 그건 뭔데? HTML 에서 이벤트 처리 매커니즘 중 일부인데, 버블링과 캡처링 모두 이벤트가 DOM 트리를 통해 전파되는 방식이다. 2. 이벤트 버블링이란? 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, 상위 요소로 전파되는 매커니즘이다. 말그대로 버블 방울이 위로 올라간다고 생각하면 편하다. 위와 같은 엘리먼트마다 click 이벤트가 있다고 가정하고, child 에 클릭이벤트를 실행하면, Rootparents -> second -> child 순으로 이벤트가 전파된다. 4. 두개 똑같이 생겼는데, 이벤트 전파순서가 다른데 뭐 어쩌란거야? 이벤트 버블링과 캡처링은 둘다 발생하는데, 이벤트 버블링이 먼저 발생한 후에, 이벤트 캡처링이 실행된다. 이벤트 전파를 막으려면 eve..

[Promise] 반복문에서 Promise 가 성공일 때만 반복문 진행시키기

일반적인 반복문에서 async 로 만들어진 함수가 성공했을 때 콜백 함수 같이, 다음 반복문을 실행시키는 로직을 만들어보자. 일반적인 방법으로 사용하면, 앞쪽 Promise 함수가 다 완료된 이후에 다음 Promise 가 실행되리란 보장을 못합니다 여러개가 동시에 실행이 되는 상황이 벌어지죠. 먼저 async 로 만들어진 다음과 같은 함수가 있다고 가정합시다. export const axiosFunction = async (formData: FormData) => { const response = await axios.post( 'url', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }, ) return response } 처음에 ..

[Javascript] 주석 이렇게 달아볼까?

주석을 자동완성 할때 참고 할 수 있도록 사용하자. interface LoginFormData { userId: string password: string } const handleSubmit = (params: LoginFormData) => { console.log('submit!') } handleSubmit({ userId: 'userid', password: '1234' }) 먼저 위와 같은 코드가 있다고 할 때의 함수 호출 시 나타나는 것은 다음과 같다. 만약에 JsDoc 주석 ( /** */ ) 을 달아놓으면 /** * 로그인 폼 전송 * @paramType LoginFormData * @param userId string * @param password string */ const hand..

[Javascript] 콜백함수란?

콜백함수란? 함수안에 파라미터로 들어가는 함수를 뜻하는데, 순차적으로 자바스크립트 코드를 실행하고 싶을때 사용한다. 우리가 처음에 자바스크립트를 접할때 콜백함수를 접할 수 있는데 대표적인 예시는 다음과 같다. document.querySelector('.button').addEventListener('click', function(){ // callback function }) setTimeout(function(){ // callback function }, 1000) 대부분 이런류의 코드를 많이 접했을 것이다. 순차적으로 코드를 실행하고 싶을 때 사용한다. 이 밖의 경우에도 콜백함수를 유용하게 적용할 수 있는 부분이 있는데, 일을 하다보면 협업을 하게되는데, 협업 할 때 유용하게 사용 할 수 있다. ..

[Javascript] this

Javascript의 this Javascript 에서의 this 는 우리가 흔히 처음접하게 되는 언어인 Java 의 this 와 사용법이 달라 혼동이 올 때가 있다. Java 와 같은 객체지향 언어에서 this 는 class 로 생성된 인스턴트 자신이며, class 밖에서 사용 할 수 없다. Javascript 의 this는 함수의 현재 실행 컨텍스트를 의미하는데 예제 코드를 통해 어떻게 다른지 살펴보자 1. 일반적인 함수 function defaultFunc() { console.log(this) // window or global } 이 함수의 실행 컨텍스트는 전역 객체이므로, 브라우저 환경에서는 window , Node 환경에서는 global 객체가 될 것이다. 2. strict 모드에서의 함수 ..

javascript ES 2022

Javascript ES 2022 추가된 4가지 사항 1. new Error 메시지에 이유를 추가로 작성가능 axios.post.then(res => { //something.. }.catch(err => { // someErr.. const causemessage = new Error("접근 권한이 없음" , { cause : err } ) console.log(causemessage.message) // "접근 권한이 없음" console.log(causemessage.cause) // err } 2. Array.at() 메소드 // array.at("음수값") array 끝에서부터 탐색 const arr = [1,2,3,4] arr.at(-2) // 3 arr[arr.length-2] 과 동일 co..