Pandaman Blog

목차 1. 마운트 생애주기 API 2. 갱신 생애주기 API 컴포넌트 생애주기는 컴포넌트가 마운트 되거나 갱신될 때 호출되는 일련의 메서드로 이루어진다. 컴포넌트 생애주기 메서드는 렌더링 전, 후로 호출된다. 컴포넌트 생애주기 메서드를 알아야 하는 이유는 우리가 React를 효과적으로 사용하기 위해서다. 왜 효과적으로 사용할 수 있는지는 설명과 예제를 통해서 이해할 수 있다. 컴포넌트 생애주기는 크게 마운트 생애주기와 갱신 생애주기로 나눌 수 있다. 마운트 생애주기 API 아래는 마운트 생애주기에 따라 호출되는 API 알아보기 위한 예제이다. import React from "react"; export default class App extends React.Component { constructor(p..

목차 1. state란? 2. setState 3. 이벤트 설정 오늘은 리액트 프로젝트를 진행하면서 필수적이고 기본적인 객체인 state와 함수 setState에 대해 알아보겠습니다. state란 state란 렌더링 결과물에 영향을 주는 정보 리액트 공식 홈페이지에서는 state에 대해 위와 같이 말합니다. 즉, state는 컴포넌트가 마운트 될 때 기본값을 갖게 되고, 우리는 이 state를 활용해 데이터를 변화시켜줄 수 있습니다. 아래의 예제를 살펴보겠습니다. 참고로 아래의 App.js는 ReactDom.render 함수에 첫 번째 인자에 전달될 컴포넌트입니다. import React from 'react'; export default class App extends React.Component { ..

목차 1. 브라우저의 구조 2. 브라우저의 동작 방식 3. Reflow란? 4. Repaint란? 5. 브라우저의 성능을 개선시키기 위한 방법 6. Virtual DOM 우리는 reflow와 repaint개념에 대해 알기 전에 브라우저의 구성요소와 동작 방식을 이해해야 한다. 브라우저의 구조 아래는 브라우저의 구조를 시각적으로 나타낸 이미지이다. User Interface는 브라우저의 주소창, 뒤로 가기, 즐겨찾기 등 웹페이지를 조작할 수 있는 인터페이스이다. Browser Engine은 User Interface와 Rendering Engine 사이의 동작을 제어한다고 한다. Rendering Engine은 여기서 가장 중요하게 생각하는 부분이다. 브라우저에서 보이는 화면을 표시하도록 하는 엔진이다. ..

재택근무는 근로 형태의 일종으로, 정보 통신 기기 등을 활용하여 시간과 장소의 제약을 받지 않고 유연하게 일할 수 있는 형태를 말한다. 최근 코로나19의 영향으로 재택근무를 시행하는 회사가 많아졌다. 물론 필자의 회사도 포함된다. 재택근무는 위에서 설명한것과 같이 노트북과 와이파이만 존재한다면 시간과 공간의 제약에서 유연하게 일할 수 있다. 아래는 1 주일 하고도 3일 동안 재택근무를 하면서 느낀 점이다. 재택근무의 장점 출퇴근에 대한 스트레스 감소 출퇴근 시간이 꽤 길다. 편도로 1시간 40분 정도 걸린다. 왕복으로 3시간이 소비된다. 사실 그 시간에 전자신문 읽어나, 영어를 듣거나 여러 가지 도움되는 일을 할 수 있다. 하지만 사람이 많아진다면 불가능하다. 편하게 서서 출퇴근하는 것만으로도 감지덕지다..

함수형 프로그래밍(functional programming)은 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 함수형 프로그래밍이란 부수 효과(side effect)를 방지하고, 조합 성을 강조하는 프로그래밍의 패러다임이다. 여기서 부수 효과(side effect)를 방지라는 말은 우리는 함수 선언할 때 순수 함수를 만들어야 한다는 말이다. 순수 함수는 들어온 인자가 같다면, 항상 동일한 값을 리턴해주는 함수이다. 그리고 함수가 받은 인자외의 상태에 영향을 끼치는 않는 함수를 말한다. 리턴 값 외에는 외부와 소통할 수 없는 함수이다. 조합 성을 강조한다는 말은 순수 함수를 통해 모듈화 수준을 높인다면 오류를 줄이고 안전성이 높아지며 그로 인해 생..

Event란 이벤트란 어떠한 사건을 의미한다. 브라우저에서의 이벤트는 예를 들어 사용자가 버튼을 클릭했을 때 스크롤했을 때 등등 다양한 이벤트가 존재한다. 브라우저가 이벤트를 감지하고, 그에 대응하는 처리를 호출해주는 방식에 대해서는 지난 포스팅인 이벤트 루프에서 학습했다. 이번 시간에는 요소에서 발생한 이벤트를 어떠한 방식으로 다른 화면 요소에 전파하는지 알아보자. DOM Event의 전파 방식 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 한마디로 이벤트 전파가 되는데 전파 방향에 따라 버블링(Bubbling)과 캡쳐링(Capture)으로 나눌 수 있다. addEventListener메소드의 세 번째 매개변수에 true를 설정하면 캡쳐링으로 전파되는 이벤트..

Javascript의 Event Loop (이벤트 루프) 자바스크립트의 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 이벤트 루프에 기반한 동시성(currency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다. MDN문서에서는 자바스크립트의 이벤트 루프를 위와 같이 말한다. 그렇다면 이벤트 루프가 이와 같은 작업들을 어떠한 방식으로 처리하는지 알아보도록 하자. 자바스크립트의 런타임 런타임(영어: runtime→실행시간)은 컴퓨터 과학에서 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다. 자바스크립트에서의 런타임이란 브라우저에서의 자바스크립트 작동 방식이라고 말할 수 있다. 우리는 이전 주제인 실행 컨텍스트을 통해 일부 작동 방식에 대해 배..

Javascript 클로저(Closures)란 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. MDN에서는 위와 같이 클로저를 정의한다. 아래 예제를 통해서 클로저가 무엇인지 확인해보고 위의 정의를 이해해보자. function handleSound() { // 1 const sound = '안녕하세요. 반갑습니다.'; // 2 function playSound() { // 3 alert(sound); } return playSound; // 4 } const myFunc = handleSound(); // 5 myFunc(); // 6 위의 예제를 순서대로 살펴보자. handleSound 함수를 선언했다. 함수 내부에는 const키워드의 sound라는 이름의 지역변수를 선언하고 문자열 '안녕하세요..