post-thumbnail

[JS] jsx with diff (3-성공)

어제 만들었던 컴포넌트에서는 상위 컴포넌트(App)이 리렌더링될때 자식 컴포넌트(Todo)의 state 값들이 초기화 되는 현상이 있었다. 아직 정확한 원인을 찾지못했지만 componentCompare함수 내부에서 컴포넌트를 새로 만들고 render()함수를 호출하여

약 4시간 전
·
0개의 댓글
post-thumbnail

[JS] jsx with diff (2-실패)

이전 포스팅에 이어서 jsx에 diff를 적용해보는 과정으로 이번에는 컴포넌트 타입에 대한 처리를 해주려고 한다.그전에 테스트를 위한 예시코드의 수정이 필요하며 테스트해볼 상황은 크게 두가지이다.루트 컴포넌트 리렌더링시 자식 컴포넌트도 리렌더링 (추가적인 최적화가 필요

어제
·
0개의 댓글
post-thumbnail

[JS] jsx with diff (1)

이전 작업에서 JS에서도 jsx를 사용할 수 있게함으로써 기존의 코드를 가독성 좋게 변경하고 유지/보수를 용이하게 할 수 있었다. 하지만 상태가 변경될때마다 매번 모든 Node를 새로 생성하기 때문에 불필요한 렌더링을 하고 있는 문제점이 있었다.그래서 이번에는 성능을

2일 전
·
0개의 댓글

20220522(일)

diff 알고리즘 구현 (수정해야할 부분 존재)https://reactjs.org/docs/reconciliation.html기존 노드만 존재시새로운 노드만 존재시노드 타입이 다른 경우컴포넌트 타입의 경우텍스트 타입의 경우타입이 같은 경우휴식

3일 전
·
0개의 댓글
post-thumbnail

[Webpack] hash, chunkhash 그리고 contenthash (캐싱전략)

개발환경에서는 style 태그에 삽입,배포환경에서는 css를 분리하여 배포하고 있다.하지만 재배포하는 과정에서 css의 캐싱문제로 올바르게 적용되지 않았던 문제점이 발생하였다. 문제의 원인은 빌드시마다 css파일의 내용이 수정되어도 항상 동일한 파일명(main.css)

4일 전
·
0개의 댓글
post-thumbnail

[JS] callback 그리고 Promise를 사용하는 이유(2)

이전 포스팅에서 비동기성을 표현하고 동시성을 관리하기 위해 콜백을 사용하는 것과 관련하여 두 가지 주요 범주의 결함을 확인했었다. (순서와 믿음의 결여)가장 먼저 제어의 역전(신뢰성)을 생각해보자.이전에는 서드파티 라이브러리함수와 같은 다른 파트에게 콜백함수를 전달해주

5일 전
·
0개의 댓글
post-thumbnail

[JS] callback 그리고 Promise를 사용하는 이유 (1)

과거에는 callback만을 사용하여 거대한 파일을 읽고 응답이 나올 때까지 기다리는 방식(비동기 처리)으로 코드를 작성할 수 있었다. 그러나 callback만을 사용하여 비동기 처리를 한다면 소위 말하는 콜백 지옥(callback hell)에 빠지게 되는 문제점이 생

6일 전
·
0개의 댓글
post-thumbnail

[Webpack] optimization

Webpack5에서는 기본적으로 Production 모드일 때 내장 최적화(built-in optimizations)를 진행해주는데 그 중에 TerserPlugin이 포함되어 있다.TerserPlugin는 자바스크립트 코드를 압축화하고 난독화해주는 플러그인product

2022년 5월 18일
·
0개의 댓글
post-thumbnail

[Webpack] Devtool

Devtool는 sourcemap스타일 설정과 생성여부를 결정할 수 있는 옵션으로 sourcemap을 사용하여 원본 소스와 난독화된 소스를 매핑해줌으로서 디버깅시 유용하게 사용할 수 있다.이전의 개발환경에서는 개발을 하다가 오류가 발생했을 때 오류를 찾다보면 이렇게 기

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[Webpack] Resolve

폴더의 경로가 깊어질수록 유틸성 함수, assets 파일들에 대해 상대경로를 지정해줄 때 다음과 같이 일일이 경로를 작성해줘야하는 불편함이 있어 해결방법을 찾게되었다.Resolve는 모듈이 해결되는 방식을 지정하는 옵션으로 기본값이 있긴하지만 세부적으로 설정(모듈의 별

2022년 5월 16일
·
0개의 댓글

20220515(일)

\[ProPro] Navbar 관련 코드 jsx 내에서 이벤트 등록방식으로 변경\[ProPro] Navbar 관련 코드 함수명 읽기 쉽게 변경 및 관련된 코드끼리 합치도록 변경\[ProPro] resolve alias 사용 및 동작방식 이해resolve는 모듈이 해결되

2022년 5월 15일
·
0개의 댓글
post-thumbnail

[성능] Opacity의 최적화

CSS 최적화 관련하여 면접을 준비하는 과정에서 opacity는 reflow repaint 과정이 일어나는지의 물음에 대해 확신을 가지지 못해 테스트해보게 되었다.내가 기억하기로는 opacity 속성은 repaint는 발생하지만 reflow는 발생하지 않는걸로 기억하고

2022년 5월 14일
·
0개의 댓글
post-thumbnail

[ProPro] axios 비동기처리 이슈

VanillaJS로 만든 ProPro 서비스에서 고려하지 못한 문제점이 생겼다.서비스에는 여러 페이지가 존재하고 특정 페이지에서는 서버로부터 필요한 데이터를 받아오는 과정이 있는데 이 시점에 다른 페이지로 이동하면 이후에 비동기처리 동작이 완료되면서 이전의 페이지를 화

2022년 5월 13일
·
0개의 댓글
post-thumbnail

[JS] JS에 JSX 적용해보기 - 이벤트 등록

지금까지는 HTML elements의 Attributes만을 적용시킬 수 있게 구현했었는데 React를 사용하면 다음과 같이 이벤트도 등록시킬 수 있다. 그래서 React와 비슷하게 오늘은 Element에 이벤트 등록을 하여 이벤트가 발생했을 때 등록한 함수가 호출되도

2022년 5월 12일
·
0개의 댓글
post-thumbnail

[JS] JS에 JSX 적용해보기 - 컴포넌트 기능 추가(2)

다음과 같이 class를 jsx 문법에 적용시키면 반환되는 vDOM 객체의 형태를 확인해보면 반환되는 type이 함수형태인것을 볼 수 있는데 사실 자바스크립트에서 class는 새로 생긴 개념이 아니라 특별한 함수이기 때문에 타입이 함수냐 아니냐로 컴포넌트를 판별할 수

2022년 5월 11일
·
0개의 댓글
post-thumbnail

[JS] JS에 JSX 적용해보기 - 컴포넌트 기능 추가(1)

React에서 jsx문법을 사용하다보면 위와 같이 Component도 렌더링된다. 그래서 일반노드들뿐만 아니라 Component도 렌더링 할 수 있는 기능도 구현해보고자 한다.우선, 기존의 jsx함수는 jsx(jsx(jsx())) 재귀함수를 반복하며 node를 생성하여

2022년 5월 10일
·
0개의 댓글
post-thumbnail

[CSS] BEM을 적용해보는 과정

지금까지 css modules나 css-in-js방식 위주로 사용해오면서 클래스 작명에 큰 고민을 하지 않았다가 최근에 scss을 사용하면서 클래스 작명에 대한 중요성을 느끼게 되었다.그러다가 BEM 방법론을 알게 되었고 이를 토대로 기존의 클래스명들을 수정하는 작업을

2022년 5월 9일
·
0개의 댓글

20220508(일)

오전에 \[ProPro] Navbar 이벤트위임방식 변경target을 이용해 이벤트가 특정 요소의 안쪽에서 발생했는지 알기 위해서 Node.contains() 또는 Element.closest() 메서드를 활용부모님과 휴식❗️

2022년 5월 8일
·
0개의 댓글

[ProPro] Routing 리팩토링

route 메서드는 현재 브라우저의 url을 이용해서 적절한 Component를 화면에 렌더링해주는 메서드로 현재는 route 메서드 내부에서 다음과 같이 지정해둔 경로들을 반복하며 match되는 컴포넌트를 찾는 과정이 포함되어있다.그런데 match되는 컴포넌트를 찾는

2022년 5월 7일
·
0개의 댓글
post-thumbnail

[CSS] 네이밍 컨벤션 BEM

styled-components와 같은 css-in-js에서는 클래스 네이밍을 자동으로 생성해주어 겹칠 가능성이 없었지만 css로만 사용하다보니 모든 스타일을 global에 선언하기 때문에 중복되는 경우가 많아 스타일시트가 엉망이 되는 경우가 생겼다. 그리고 네이밍 부

2022년 5월 6일
·
0개의 댓글