개발자 퉁이리

반복문 자바스크립트에서 여러 데이터 값을 관리할 때 배열이나 객체를 많이 사용한다. 이러한 데이터를 관리할 때, 유용하게 쓰이는 반복문인 map, filter, reduce에 대해 정리해보자! map, filter, reduce에 대해 알아보기 전에 기본적인 for문을 가볍게 짚고 넘어가 봅시다! for문 const practice = [ { name: "개발자", value: 150, active: false }, { name: "퉁이리", value: 200, active: true }, { name: "프론트엔드", value: 110, active: true }, { name: "티스토리", value: 300, active: true }, { name: "깃허브", value: 250, acti..

https://www.acmicpc.net/problem/18108 18108번: 1998년생인 내가 태국에서는 2541년생?! ICPC Bangkok Regional에 참가하기 위해 수완나품 국제공항에 막 도착한 팀 레드시프트 일행은 눈을 믿을 수 없었다. 공항의 대형 스크린에 올해가 2562년이라고 적혀 있던 것이었다. 불교 국가인 태국 www.acmicpc.net ⊙ 문제 ⊙ 입력 ⊙ 출력 ⊙ 예제 입출력 ⊙ 알고리즘 분류 수학 사칙연산 ⊙ 문제 접근 과정 불기 연도 = 서기 +543년 543을 상수 const IMMORTALITY로 등록했다. 그냥 바로 543을 빼도 된다. 그렇지만 상수는 const로 선언해놓는 습관을 만들면 좋다! 그리고 입력받은 값을 input에 저장해주고 console.lo..

자바스크립트 패키지 매니저 자바스크립트 패키지 매니저는 프로젝트에서 사용할 패키지에 대해 설치, 수정, 삭제 등을 도와주는 도구다. 최고의 오픈 소스 생태계를 가진 자바스크립트에서 패키지 매니저는 정말 중요한 존재이다. 최근에는 오픈 소스를 사용하지 않으면, 개발 진행이 안 될 정도로 유용하고 좋은 자료들이 너무 많이 개발되어있다. 그리고 서로서로 의존성이 높아서 하나를 받으면 다른 것을 받아야 하는 상황도 연출된다. 패키지 매니저를 통해 오픈 소스를 다운로드하게 되면 프로젝트 안에서 package.json에 목록이 저장되고, 후에 install 명령어를 통해 package.json 안에 있는 정보들을 손쉽게 다시 다운로드할 수도 있다. 그렇다면 패키지 매니저의 종류로는 무엇이 있을까? npm과 yarn..

인터페이스 인터페이스는 타입을 정의하는 강력한 방법으로 변수, 함수, 클래스의 타입을 정의할 수 있게 도와준다. 인터페이스는 변수, 함수, 클래스의 타입을 정의함으로써 일관성을 유지시켜주는데 크게 기여한다. 인터페이스가 어떻게 작동하는지 다음 예시를 통해 확인하자. interface Items { id: string category_id: string category_name: string name: string price: number } 위 예시를 보면 Items라는 인터페이스 안에 여러 변수가 들어있다. 그리고 각각 타입이 지정되어 있는 것을 확인할 수 있다. interface 형식 interface 이름 { 키: 타입 key : type } interface를 선언한 후 이름을 지정해준다. 그리고..

타입스크립트 타입스크립트는 자바스크립트에 타입이 추가된 언어다. 타입스크립트는 자바스크립트의 슈퍼셋으로 ECMA 스크립트의 최신 표준을 지원한다. 타입스크립트를 사용하는 가장 큰 이유로는 강력한 타입을 제공하는 것도 있지만, 컴파일 시간에 검사를 통해 오류를 검출함으로써 개발 시간을 줄일 수 있다. 그러면 TS로 HelloWorld를 출력해보자. TypeScript 컴파일러 설치 VSC를 사용한다면 설치하지 않아도 된다. VSC는 TS 언어를 지원한다. 그렇지만 TS를 JS로 변환하고 싶다면 다음과 같이 설치를 진행하자. npm install -g typescript HelloWorld.ts 파일 생성 코드 작성 HelloWorld.ts 파일에 아래 코드를 작성해준다. let message: string..

WEBPACK 웹팩은 모듈 번들러다. 모듈(module)이란? 모듈은 특정 기능을 가지는 작은 코드 단위를 말한다. const sum = (a,b) => a+b; 번들러(bundler)란? 기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다. 코드가 길어짐에 따라 여러 문제가 발생하였다. 코드 양이 많아 로딩이 느려짐 중복되는 코드 이름 (에러 발생) 스코프 문제 번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다. 여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다. 다시 한번 정리하자면 웹팩은 모듈 번들러다. 🤨 모듈 번들러인 웹팩은 장점만 존재할까? 웹팩(webpack)의 단점으로는 러닝 커브가 높다. 또한 ..

타이머 함수 타이머 함수는 일정 시간이 지난 후 특정 코드를 실행해주는 함수를 말한다. 타이머 함수 종류 setTimeout setInterval setTimeout setTimeout은 코드를 설정한 시간이 지난 후 실행시켜준다. 문법 setTimeout( 코드, 지연 시간, 함수에 전달할 인수 ); setTimeout을 사용하여 5초 뒤에 console log에 특정 문장을 찍어보자. 예제 코드 1 setTimeout(function () { console.log('개발자 퉁이리'); }, 5000); 예제 코드 2 setTimeout(() => {console.log('개발자 퉁이리')}, 5000); 여기서 지연시간은 밀리세컨드 단위로 설정, 만약 5초로 설정하고 싶다면 지연시간은 5000. 5초..

javascript:void(0) javascript:void(0)은 undefined를 반환해주는 함수다. undefined를 반환해주는 함수, javascript:void(0)를 왜 사용할까? 대부분 javascript:void(0)를 검색해서 들어온 분들이라면 앵커 태그 안에서 왜 사용되는지가 궁금할 거다. 개발자 퉁이리 다음과 같은 하이퍼링크를 WEB에서 클릭하면 어떻게 될까? 결론부터 말하면 아무일도 일어나지 않는다. 🤔 아무일도 일어나지 않는 javascript:void(0)를 왜 사용할까? 1️⃣ 개발자 퉁이리 2️⃣ 개발자 퉁이리 위 1️⃣과 2️⃣ 코드의 차이점이 무엇일까? 당연히 생긴 것부터 다르다. 그거 빼고. 1️⃣번은 하이퍼링크 클릭 이벤트 발생 시 해당 페이지의 최상단으로 스크롤..

브라우저의 렌더링 과정 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정 브라우저가 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받음 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더트리 생성 JS를 파싱하여 AST를 생성하고 바이트 코드로 변환하여 실행. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경 가능. 변경된 DOM과 C..

Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X const set = new Set(); console.log(set); // Set(0) {} Set 객체는 Set 생성자 함수로 생성하고, 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값을 Set 객체에 요소에 저장되지 않는다. Set 객체의 요수 개수 -> Set.prototype.size 프로퍼티를 사용 Set 객체의 요수 추가 -> Set.prototype.add 메서드를 사용 Set 객체의 요수 존재 여..