JavaScript 익히기

Front-End 직군으로 뛰어든 상황에서, JavaScript에 대한 이해와 활용도를 높이고 코딩테스트에 유용하게 사용될만한 문법들을 정리하는 시리즈로 활용되는 공간이 될거같다.물론 실제로 사용하는 기능 위주로 익힐 수도있겠지만, 효율성을 올리거나 코딩테스트 문제접근

Set 객체는 중복되지 않는 유일한 데이터를 수집하여 활용하기 위한 객체다.데이터 값의 단순 집합(Set)으로 간주하며, 외부에서 키를 사용하여 데이터 값을 추가하거나, 삭제, 검색이 가능하다.값이 가지는 데이터 타입에 따로 제한을 두지 않으며, 객체나 원시 타입 사용

indexOf()와 lastIndexof()는 배열 안에서 인수로 지정된 값을 검색해서 가장 먼저 찾은 요소의 인덱스를 반환한다.찾지 못했을때는 -1을 반환한다. indexOf는 인덱스가 작은 쪽부터 순서대로 검색하고, 반대로 lastindexOf는 인덱스가 큰 쪽부터

object 객체

Javascript 작성을 진행하고, 해당 코드가 브라우저에 보여지는 공간인 HTML에 적용하는 방식에 대해 살펴보고자 한다.inline은 태그에 직접 자바스크립트를 기술하는 방식으로태그에 연관된 스크립트가 분명하게 드러난다.inline에 JS코드 넣기inline에 s

forEach 반복 메서드

이번에는 현업에서 실무적으로 많이 쓰이는 문법을 데려와봤다. 퍼블리셔가 가져온 디자인 파일들을 프론트 개발할때 불러오는 과정중 기본적인 것들을 작성해보려한다. 우선 가장 많이 쓰는 일반적인 getElementby 이다.👉 결과$btn에 id값을 불러와 event를 발

저번 요소를 호출하는 법에 이어 이번에도 실무에서 많이 사용하는 이벤트 핸들러를 같이 다루려 한다. 우선 addEventListener를 다루기 전에 이벤트 핸들러에 대해 알아보자. 브라우저는 처리할 특정 사건이 발생시 이를 감지해서 이벤트를 발생시킨다. 크게 예를

반복하는 일은 변하지 않고 공통적으로 수행하지만, 반복하면서 하는 일의 내용은 다르다.이와 같이 함수의 일부분만이 다르기 때문에 매번 함수를 새롭게 정의해야한다.다음과 같은 문제를 함수를 합성하는 것으로 해결할 수 있다.함수의 변하지 않는 공통 로직을 미리 정의해 두고

reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달 하면서 콜백 함수를 호출하여 하나의 결과 값을 만들어 반환한다. 첫번째 인수로 콜백 함

input maxlength 처리

JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.JavaScript에 종속되지 않는 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있다.실제로 실무에서 데이터를 전송받을때 (ajax, axios 등) 제일 보편적으로

스코프(scope - 유효범위)의 이해가 필요한 경우가 실무에서 꽤나 있었다. 자바스크립트에서 스코프는 다른 언어의 스코프랑 구별되는 특징을 가지고 있다. var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작하며, 변수 그

스코프의 종류를 볼때, 크게 코드를 전역과 지역으로 구분짓는다.전역은 코드의 가장 바깥 영역을 해당하고, 지역은 함수 몸체 내부에 해당한다.이때 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정된다.전역에 변수를 선언하면 전역 스코프를 갖는 전역변수

실무 웹 개발에서 날짜는 꽤나 자주 등장하는 케이스다.날짜를 단순히 띄우기 뿐만 아니라 시간을 계산하거나, 필요한 시간단위만 띄워야하는 경우가 종종 있는 편인데, 이를 정리해두면 좋을거 같다는 생각이 들었다. 표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를

destucturing assginment 구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructing(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한단계 까지만 복사하는 것을 말한다.깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는것을 말한다.얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다.즉 원본과 복사본은 참조 값이 다른 별개의 객체다.

호출 스케쥴링은 함수를 명시적으로 호출하면 함수가 즉시 실행 되는데, 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다.JavaScript에서는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 set

every는 배열의 모든 원소가 조건에 맞는지 검사하기 유용한 함수다. 즉 모든 조건이 만족할때만 true를 뽑아준다. 꽤 쓸만한 일이 있을거 같아 따로 작성하게 되었다.소스코드

앞서 Scope(링크참조)에서 다룬 부분이지만, 자주 나오는 질문이기도 하고 확실하게 알고가는 느낌이기도 하면서,면접 단골질문인 var let const를 명확히 정리해놓고 가고자 따로 작성해보았다.var는 function-scoped let,const 는 block-

this는 실행컨텍스트 문맥에 직결되는 부분이기도 하다.실제 함수를 작성할때 꽤나 자주 사용하지만, this가 환경에 따라 참조값이 달라지는 부분이 있어 짚고 넘어가려 작성해본다.this에 대하여,this는 JavaScript 예약어다.this는 자신이 속한 객체 또는

기존 JavaScript Package Manager를 빠르고 효율적이게 사용하는 Performent Manager다.pnpm은 특징적으로 빠르고 효율적으로 설치가 수행되도록 병렬적으로 이루어지며,node_modules 폴더의 패키지가 중복으로 저장되지 않는다.pnpm

프로젝트를 진행하다가 생기던 문제였는데이러한 오류가 발생하여, package.json에 타입을 명시해서 해결을 하려했다. 또다른 오류로는해당 에러는 mjs파일로 변경해서 해결했다.근데 js랑 mjs 차이가 뭔지 궁금해져서 따로 결과를 찾아보았다.Node.js의 모듈 시