- 전체보기(80)
- JavaScript(33)
- Korean FE Article(11)
- webpack(10)
- 번역(10)
- React(8)
- 데브코스(8)
- programmers(7)
- KDT(7)
- 프로그래머스(7)
- typescript(7)
- 프론트엔드개발자(6)
- jquery(5)
- vanilla(5)
- component(5)
- 부트캠프(4)
- 바닐라 타입스크립트(4)
- vue.js(4)
- programming(2)
- 클론코딩(2)
- next.js(2)
- 그렙(2)
- 브라우저(2)
- CSS(2)
- 회고(2)
- 토이프로젝트(2)
- testing(1)
- 자바스크립트(1)
- cli(1)
- 프로그래머스 국비 지원 후기(1)
- 프로그래머스 데브코스 후기(1)
- 코딩 교육(1)
- K-디지털 트레이닝(1)
- DOM(1)
- html(1)
- 개발자책추천(1)
- CSR(1)
- SSR(1)
- 렌더링(1)
- pacakage(1)
- monitoring(1)
- react.js(1)
- babel(1)
- rendering(1)
- Map(1)
- 프런트엔드책추천(1)
- 개발자면접(1)
- User Interface(1)
- 프론트엔드개발자가하는일(1)
- git(1)
- FinalizationRegistry(1)
- sentry(1)
- object(1)
- web(1)
- unit test(1)
- blog(1)
- npm(1)
- 코딩 부트 캠프(1)
- 개발독후감(1)
- 리액트(1)
- garbage collector(1)
- 바닐라타입스크립트(1)
- 프론트엔드 개발자(1)
- 내일배움카드(1)
- 프론트엔드(1)
- 프로그래머스 데브코스(1)
- server component(1)
- 후기(1)
- 프론트엔드개발책추천(1)
[번역] 지난 3년간의 모든 자바스크립트 및 타입스크립트 기능
이 글에서는 지난 3년 동안(일부 변경 사항은 더 이전의) 자바스크립트/ECMAScript와 타입스크립트의 대부분의 변경 사항을 살펴봅니다.
[번역] 자바스크립트 가비지 컬렉터 실험
개발을 할 때 메모리에 대해서 생각해 보신 적 있으신가요? 이 글에서는 자바스크립트에서 객체가 가비지 컬렉터에 수집되는 시점을 프로그래밍 방식으로 감지할 수 있는 `FinalizationRegistry`라는 클래스로 가비지가 컬렉터에 수집되는 시점을 실험하고 있습니다.
(번역) React는 컴포넌트를 언제 다시 리렌더링 할까요?
여러분은 개발하시면서 렌더링 최적화에 대해 고민해 보신 적 있으신가요? 이 글에서는 리액트의 렌더링에 대한 주요 개념과 리렌더링이 발생하는 시점, 마지막으로 리렌더링을 최적화하는 방법에 대해 소개를 해주고 있습니다.
.png)
생성자 함수 vs 클래스 ⚖️
# 생성자 함수란? 🧐 ## 정의 📋 - 이름 그대로 객체(인스턴스)를 생성하는 함수 ## 특징 🙌 - 일반 함수와 동일한 방법으로 생성자 함수를 정의 - `new` 연산자와 함께 호출해야만 `생성자 함수`로 동작 - `new` 연산자 없이 호출하게 될 경우,
가볍게 알아보는 브라우저와 자바스크립트의 역사 😉
팀 버너스리가 최초의 브라우저를 개발넷 스케이프가 네비게이터를 출시하면서 최초의 상용 브라우저가 등장1995년 즈음, 네비게이터는 큰 인기를 얻어 빠르게 시장 점유율 90%를 차지이때의 웹은 HTML로만 이루어져 정적인 기능만 제공하여 링크만 존재하는 워드 문서와 별
[JavaScript ] JavaScript 함수 다시보기 정리
JavaScript 함수 JavaScript의 함수는 일급 객체이며 private 변수 또는 메소드 뿐만 아니라 함수의 특징을 이용하여 public 속성과 메소드를 제공하며 JavaScript 모듈을 작성하는 좋은 도구이다. 또한 JavaScript의 가장 큰 문제점
[JavaScript] 문제 풀어보기 #4 - 표현식
다음 중 a, b의 값은? 문제의 요점 표현식에 대한 이해 ,연산자에 따른 차이 문제의 정답 a : 5 b : 4 문제 풀이 위의 문제의 경우, a()와 b()의 차이점은 반복문 안의 ,연산자 유무 차이이다. a()의 경우, i--이기 때문에 처음 loop를 실행할때의 i의 초기값은 5가 되며 반복문과 마찬가지로 5 → 4 → 3 → 2 → 1 으...
[JavaScript] 문제 풀어보기 #3 - this
다음 중 this값은? 문제의 요점 this의 이해 문제의 정답 ① window ② obj ③ window 문제 풀이 obj.a()는 obj.a = console.log(this)와 같다. (① window) obj.fn()의 this는 전역에서 obj로 바인딩
[JavaScript] 문제 풀어보기 #2 - Hoisting
연습문제 #1. 보기 중 정답인 것을 고르시오 ① 오류가 발생한다. ② 정상적으로 실행되고 undefined가 출력된다. ③ 정상적으로 실행되고 2가 출력된다. 연습문제 #1 풀이 var a = 2;를 하게 되면 JavaScript는 아래와 같이 동작한다. var a 인터프리터가 변수를 선언 a = 2 a라는 변수를 찾는다. 없다 → ...
[JavaScript] 문제 풀어보기 #1 - 동등 연산자와 일치 연산자
if(2 == _ ) 중, 밑줄에 값이 들어올때 true가 아닌 경우를 고르시오. ① Number(2) ② Number(2).valueOf() ③ Number(2).toString() ④ 2.valueOf() ⑤ 2 .toString() 문제의 요점 ==와 ===는
[JavaScript] JavaScript와 FrontEnd의 변화
JavaScript역할의 변화 과거의 역할 간단한 유효성 검사 간단한 AJAX 통신 현재의 역할 애플리케이션 (SPA, 메일, 지도 등) 서버 사이드인 JSP를 이용해서 동적으로 html을 만들었으며 JavaScript는 그 일부안에 존재했었다. (form요
JavaScript - ECMA 2015 (ES6)에 대해 알아보자
ECMAScript란? JavaScript 언어의 표준이며 ES6라고도 칭한다. ECMAScript가 필요한 이유 라이브러리들이 최신 언어 명세들을 이용해서 작성된다. (Ex. React.js, 특히 React는 JSX문법을 사용하기 때문에 Babel도 필요하다.) 표준을 따라간다. 편안하다. ECMAScript의 사용방법 브라우저에서 사용한다. (최신...
웹을 움직이는 근육, JavaScript란 무엇인가?
image.png HTML : 웹페이지의 구조를 만들어준다. (마크업 언어) CSS : 웹페이지에 디자인을 입혀준다. (스타일 규칙 언어) JavaScript : 웹페이지가 동적으로 움직이도록 만들어준다. (스크립트 언어) JavaScript란? JavaScript는 웹을 위한 인터프리터 언어이자 객체기반의 스크립트 프로그래밍 언어이며 HTML의 특정...
AJAX란 무엇인가?
AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequ
JSON이란 무엇인가?
JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
JavaScript - prototype (프로토타입)에 대해 알아보자
Prototype (프로토타입) JavaScript는 class라는 개념이 없기 때문에 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이며 이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내고 이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다. JavaScript의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되...
JavaScript - this에 대해 알아보자
this javascript에서의 this라는 키워드는 거의 모든 상황에서 객체이며 문법적으로는 '나'와는 단어와 비슷하다. this의 값은 this를 사용하는 해당 함수를 어떻게 실행하느냐에 따라 값(의미)이 바뀐다. this를 실행하는 방식 this는 크게 4가지 방식으로 실행을 하며 각각의 방식에 따라 가리키는 주체가 달라진다. 1. Regular ...
JavaScript - callback (콜백)에 대해 알아보자
비동기 처리와 콜백 함수 콜백에 관하여 검색하면 항상 비동기 처리라는 말과 같이 나오는 것을 볼 수 있다. 그 이유는 바로 콜백함수를 쓰는 이유가 비동기 처리를 위해서 사용하기 때문이다. 1. 비동기처리 자바스크립트의 비동기처리란 특정 코드가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 코드를 실행하는 자바스크립트의 특성 (병렬적 실행)을 의미한다....
JavaScript - Recursive Function (재귀함수)에 대해 알아보자
Recursive Function (재귀함수) 재귀함수란, 함수 내부에서 함수 자기 자신을 다시 호출하는 것이다. 1. Factorial을 통한 예시 1.1 반복문을 사용하는 경우 1.2 재귀함수를 이용하는 경우 위의 예제에서 if구문이 없다면 해당 코드는 무한루프에 빠지게 된다. 재귀함수를 사용하는 경우 반드시 Base Case가 존재해야 한다. ...