profile
FrontEnd Developer
post-thumbnail

(번역) React는 컴포넌트를 언제 다시 리렌더링 할까요?

여러분은 개발하시면서 렌더링 최적화에 대해 고민해 보신 적 있으신가요? 이 글에서는 리액트의 렌더링에 대한 주요 개념과 리렌더링이 발생하는 시점, 마지막으로 리렌더링을 최적화하는 방법에 대해 소개를 해주고 있습니다.

2022년 8월 18일
·
10개의 댓글
·
post-thumbnail

생성자 함수 vs 클래스 ⚖️

# 생성자 함수란? 🧐 ## 정의 📋 - 이름 그대로 객체(인스턴스)를 생성하는 함수 ## 특징 🙌 - 일반 함수와 동일한 방법으로 생성자 함수를 정의 - `new` 연산자와 함께 호출해야만 `생성자 함수`로 동작 - `new` 연산자 없이 호출하게 될 경우,

2021년 8월 23일
·
2개의 댓글
·
post-thumbnail

가볍게 알아보는 브라우저와 자바스크립트의 역사 😉

팀 버너스리가 최초의 브라우저를 개발넷 스케이프가 네비게이터를 출시하면서 최초의 상용 브라우저가 등장1995년 즈음, 네비게이터는 큰 인기를 얻어 빠르게 시장 점유율 90%를 차지이때의 웹은 HTML로만 이루어져 정적인 기능만 제공하여 링크만 존재하는 워드 문서와 별

2021년 8월 14일
·
1개의 댓글
·
post-thumbnail

[JavaScript ] JavaScript 함수 다시보기 정리

JavaScript 함수 JavaScript의 함수는 일급 객체이며 private 변수 또는 메소드 뿐만 아니라 함수의 특징을 이용하여 public 속성과 메소드를 제공하며 JavaScript 모듈을 작성하는 좋은 도구이다. 또한 JavaScript의 가장 큰 문제점

2020년 2월 5일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 문제 풀어보기 #4 - 표현식

다음 중 a, b의 값은? 문제의 요점 표현식에 대한 이해 ,연산자에 따른 차이 문제의 정답 a : 5 b : 4 문제 풀이 위의 문제의 경우, a()와 b()의 차이점은 반복문 안의 ,연산자 유무 차이이다. a()의 경우, i--이기 때문에 처음 loop를 실행할때의 i의 초기값은 5가 되며 반복문과 마찬가지로 5 → 4 → 3 → 2 → 1 으...

2020년 1월 21일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 문제 풀어보기 #3 - this

다음 중 this값은? 문제의 요점 this의 이해 문제의 정답 ① window ② obj ③ window 문제 풀이 obj.a()는 obj.a = console.log(this)와 같다. (① window) obj.fn()의 this는 전역에서 obj로 바인딩

2020년 1월 21일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 문제 풀어보기 #2 - Hoisting

연습문제 #1. 보기 중 정답인 것을 고르시오 ① 오류가 발생한다. ② 정상적으로 실행되고 undefined가 출력된다. ③ 정상적으로 실행되고 2가 출력된다. 연습문제 #1 풀이 var a = 2;를 하게 되면 JavaScript는 아래와 같이 동작한다. var a 인터프리터가 변수를 선언 a = 2 a라는 변수를 찾는다. 없다 → ...

2020년 1월 20일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 문제 풀어보기 #1 - 동등 연산자와 일치 연산자

if(2 == _ ) 중, 밑줄에 값이 들어올때 true가 아닌 경우를 고르시오. ① Number(2) ② Number(2).valueOf() ③ Number(2).toString() ④ 2.valueOf() ⑤ 2 .toString() 문제의 요점 ==와 ===는

2020년 1월 16일
·
0개의 댓글
·
post-thumbnail

[JavaScript] JavaScript와 FrontEnd의 변화

JavaScript역할의 변화 과거의 역할 간단한 유효성 검사 간단한 AJAX 통신 현재의 역할 애플리케이션 (SPA, 메일, 지도 등) 서버 사이드인 JSP를 이용해서 동적으로 html을 만들었으며 JavaScript는 그 일부안에 존재했었다. (form요

2020년 1월 16일
·
0개의 댓글
·
post-thumbnail

JavaScript - ECMA 2015 (ES6)에 대해 알아보자

ECMAScript란? JavaScript 언어의 표준이며 ES6라고도 칭한다. ECMAScript가 필요한 이유 라이브러리들이 최신 언어 명세들을 이용해서 작성된다. (Ex. React.js, 특히 React는 JSX문법을 사용하기 때문에 Babel도 필요하다.) 표준을 따라간다. 편안하다. ECMAScript의 사용방법 브라우저에서 사용한다. (최신...

2020년 1월 2일
·
0개의 댓글
·
post-thumbnail

웹을 움직이는 근육, JavaScript란 무엇인가?

image.png HTML : 웹페이지의 구조를 만들어준다. (마크업 언어) CSS : 웹페이지에 디자인을 입혀준다. (스타일 규칙 언어) JavaScript : 웹페이지가 동적으로 움직이도록 만들어준다. (스크립트 언어) JavaScript란? JavaScript는 웹을 위한 인터프리터 언어이자 객체기반의 스크립트 프로그래밍 언어이며 HTML의 특정...

2019년 12월 31일
·
0개의 댓글
·
post-thumbnail

AJAX란 무엇인가?

AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequ

2019년 10월 28일
·
14개의 댓글
·
post-thumbnail

JSON이란 무엇인가?

JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 X...

2019년 10월 28일
·
6개의 댓글
·
post-thumbnail

JavaScript - prototype (프로토타입)에 대해 알아보자

Prototype (프로토타입) JavaScript는 class라는 개념이 없기 때문에 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이며 이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내고 이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다. JavaScript의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되...

2019년 10월 17일
·
0개의 댓글
·
post-thumbnail

JavaScript - this에 대해 알아보자

this javascript에서의 this라는 키워드는 거의 모든 상황에서 객체이며 문법적으로는 '나'와는 단어와 비슷하다. this의 값은 this를 사용하는 해당 함수를 어떻게 실행하느냐에 따라 값(의미)이 바뀐다. this를 실행하는 방식 this는 크게 4가지 방식으로 실행을 하며 각각의 방식에 따라 가리키는 주체가 달라진다. 1. Regular ...

2019년 10월 15일
·
0개의 댓글
·
post-thumbnail

JavaScript - callback (콜백)에 대해 알아보자

비동기 처리와 콜백 함수 콜백에 관하여 검색하면 항상 비동기 처리라는 말과 같이 나오는 것을 볼 수 있다. 그 이유는 바로 콜백함수를 쓰는 이유가 비동기 처리를 위해서 사용하기 때문이다. 1. 비동기처리 자바스크립트의 비동기처리란 특정 코드가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 코드를 실행하는 자바스크립트의 특성 (병렬적 실행)을 의미한다....

2019년 10월 15일
·
0개의 댓글
·
post-thumbnail

JavaScript - Recursive Function (재귀함수)에 대해 알아보자

Recursive Function (재귀함수) 재귀함수란, 함수 내부에서 함수 자기 자신을 다시 호출하는 것이다. 1. Factorial을 통한 예시 1.1 반복문을 사용하는 경우 1.2 재귀함수를 이용하는 경우 위의 예제에서 if구문이 없다면 해당 코드는 무한루프에 빠지게 된다. 재귀함수를 사용하는 경우 반드시 Base Case가 존재해야 한다. ...

2019년 9월 21일
·
0개의 댓글
·
post-thumbnail

JavaScript - Closure(클로저)에 대해 알아보자

Closure (클로저) 함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 뜻한다. (함수가 실행되는 위치가 어디인지는 관계가 없다. ) 렉시컬 스코프 스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정이 된다. 이를 렉시컬 스코핑이라고 한다. 언...

2019년 9월 21일
·
0개의 댓글
·
post-thumbnail

JavaScript - Primitive Type(원시 타입) vs Reference Type (참조 타입)에 대해 알아보자

JavaScript는 원시 타입과 참조 타입이라는 두가지 자료형을 제공하며 Object를 제외한 모든것들은 Primitive한 성격을 갖고 있다. Primitive Type : 데이터의 실제 값 할당 Reference Type : 데이터의 위치 값만 할당 1. Primitive Type (원시타입) 원시 타입의 데이터는 변수에 할당이 될 때 메모리 상에 ...

2019년 9월 18일
·
0개의 댓글
·
post-thumbnail

JavaScript - Hoisting(호이스팅)에 대해 알아보자

호이스팅 (Hoisting) 사전적 정의 : 끌어 올리기 JavaScript에서의 Hoisting : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 즉, 변수가 함수 내에서 정의되었을 경우, 선언부분만 함수의 최상위로, 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경이 된다. 선언되지 않은 변수를 참조할 경우, 보통...

2019년 9월 18일
·
0개의 댓글
·