어제보다 더 나은 오늘

들어가기에 앞서 https://www.patterns.dev/vanilla/module-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 장점 코드를 재사용 가능하면서도 작게 나눌 수 있게 해주어 유지보수하기 쉽다. 명시적으로 export한 값들만 외부에 노출되기 때문에 명시적으로 export하지 않은 변수들은 모듈 내에서만 사용함으로써 전역 스코프의 변수들과 이름이 충돌하는 문제를 줄일 수 있다. 모듈 패턴을 사용하면 코드의 일부분을 캡슐화할 수 있다. 이는 의도치 않은 전역 변수 할당을 예방할 수 있어 여러 의존 모듈을 사용하거나 네임스페이스를 사용할 때 안전하다. 필요 조건 모든 자바스크립트 런타임에서 ES2015의 ..

키워드 super는 다음과 같을 때 사용한다. - super.method(...)는 부모 클래스에 정의된 메소드를 호출한다. - super(...)는 부모 생성자를 호출하는데, 자식 생성자 내부에서만 사용할 수 있다. 1. 메소드 오버라이딩 class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; alert(`${this.name}가 속도 ${this.speed}로 달립니다.`); } stop() { this.speed = 0; alert(`${this.name}가 멈췄습니다.`); } } class Rabbit extends Animal { hide() { alert(`${t..

달력을 보니 딱 1년 전 오늘, 2022년 10월 20일이 6개월 과정 부트캠프의 개강일이었다. 추석 연휴가 끝나고 지난 보름 가량 내내 씨름하고 있는 기능이 있다. 아직까지 해결하지 못했고, 근 시일 내에 해결할 수 있을 것 같지 않다. 뭐가 문제인지 파악하는 데에만 몇날 며칠의 시간을 보냈다. 이런 시간을 보내면서 부트캠프 과정이 끝나고 취업 준비를 하며 프론트엔드 기능 구현 챌린지를 할 때 시간이 걸릴 뿐 찾아보면 구현하지 못할 기능이 없을 것 같다고 자신만만해 하던 나 녀석이 떠올랐다. 유명한 더닝 크루거 곡선의 우매함의 봉우리를 향해 등반하고 있던 시절이었다고 할 수 있다. 그리고 두세 달이 지난 지금은 문제의 봉우리를 지나 절망의 계곡의 내리막길에 들어선 시간이라고 할 수 있다. 예전 글을 뒤..

Object.assign() 메소드는 하나 혹은 그 이상의 source 객체의 열거 가능한 모든 속성을 복사해서 target 객체에 붙여넣은 후 target 객체를 return 한다. const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // Expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget === target); // Expected output: true 복수의 source 객체도 가능하다. // syntax Object.assign(..

프론트에서 가장 많이 쓰는 JavaScript 내장 자료구조는 단연 배열과 객체일 것이다. 하지만 객체에 비해 Map이 가지는 장점이 있다. - key에 다양한 자료형을 허용한다. - map.size를 통해 map의 크기를 O(1)의 시간복잡도로 구할 수 있다. - map은 삽입 순서를 기억해 삽입된 순서대로 순회한다. - map은 그 자체가 iterable하기 때문에 내장 메소드 forEach나 for of를 써서 순회할 수 있다. (object는 먼저 key나 value를 구하고, 그것들을 통해 순회해야 한다.) 프론트 내에서만 사용하는 데이터라면 상관없지만 서버와 통신하는데 사용하는 데이터라면 JSON.stringify()를 통해 직렬화 과정을 거쳐야 한다. Map을 JSON.stringify에 넣..

1. 음수일 때 Math.floor()는 양수일 때와 마찬가지로 내림을 하는데, parseInt는 올림을 한다. parseInt는 소수점을 버리고 정수를 반환하는 메소드이기 때문이다. 2. 문자열 파싱 parseInt는 문자열을 파싱해서 정수로 변환하는 작업을 수행하기 때문에 일반적으로 Math.floor()보다 느리다. 하지만 대부분의 경우에는 성능 차이가 미미한 정도이다.

1편과 2편에 이어 최종편으로 마무리해보려 한다. 프로젝트를 하면서 만난 에러 모음 및 회고는 언제 포스팅할 수 있으려나..🥲 1. 비밀번호 유효성 검사 필요한 유효성 검사: 최소 8자, 하나 이상의 문자와 하나의 숫자 // 8~20 글자 let regExp = /^[a-zA-Z0-9]{8,20}$/ // 8 글자만 검사 통과 let regExp = /^[a-zA-Z0-9]{8}$/ // 8 글자 이상 let regExp = /^[a-zA-Z0-9]{8,}$/ 🔽 최종적으로 작성한 checkPassword 함수 2. request header의 Authorization 인증 토큰을 서버에 보낼 때 요청 헤더의 authorization에 실어서 보냈다. 여러 곳에서 post 요청을 보내야 했기에 먼저 다음..

지난 1편에 이어 이틀 전 사전 프로젝트를 마무리한 시점에서 2편을 작성해 본다. 배운게 너무 많아서 어떻게 정리를 해야할지 모르겠지만 일단 하나씩 짧게라도 기록을 남겨본다. 최종편이 몇 편이 될 지는 나도 모름...😇 서버 쪽 배포 환경 유지가 아마 내일까지 밖에 안 될 거 같지만 그래도 남겨보는 배포 링크 https://seb42-pre-025-seb42-pre-025.vercel.app/questions 뉴진스의 Ditto요 seb42-pre-025-seb42-pre-025.vercel.app 클릭하자마자 시선을 강탈하는 빨간 화면이 떠서 깜짝 놀라실 텐데요. 이에 대한 원인은 현재까지 파악하기로는 클론을 너무 똑같이 해서... 구글이 사기성 사이트로 필터링을 하고 있는 것으로 짐작 중입니다. (아..

배열을 초기화할 때 다음과 같은 두 가지 방식을 쓸 수 있다. let arr1 = new Array(5).fill([]); let arr2 = Array.from({ length: 5 }, () => []); 똑같은 배열이 생성된 것 같지만, 차이가 있다. Array.fill()의 인자로 "객체가 들어올 경우, 그 참조만 복사해서 배열을 채운다." (출처: mdn) 무슨 말인고 하니 위의 arr1의 요소는 모두 같은 주소값을 가지고 있다는 뜻이다. 그렇기 때문에 빈 배열에 push를 해보면 다음과 같은 결과가 나온다. Array.fill()에 객체가 바로 들어올 때 발생하는 문제이기 때문에 다음과 같이 fill() 메소드로 원시값을 먼저 채워준 다음에 map 메소드로 배열로 바꿔주는 경우에는 이러한 문제..

1. substring() vs. substr() 각 메소드의 두번째 인자가 의미하는 바가 다르다. - substring의 두번째 인자: 마지막 인덱스(포함하지 않음) - substr의 두번째 인자: 추출한 문자의 길이 const word = 'grapefruit' word.substring(4,7) // 'efr' word.substr(4,7) // 'efruit' 2. substring() vs. slice() substring()과 slice()의 사용법은 기본적으로 동일하다. 하지만 다음의 두 가지 경우에 차이가 있다. 1) startIndex > endIndex 일 때 substring()은 첫번째 인자(startIndex)가 두번째 인자(endIndex)보다 크면 swap을 하지만, slice..