전체 글 (42) 썸네일형 리스트형 React.memo 알아보기 (feat. React.callback) React.memo는 React 최적화할 때 사용하는 메소드이다. 사실 이것을 사용하지 않아도 React로 개발하는데 문제는 없지만, 속도를 개선하기 SPA를 위해서 사용하는 React 사용하는데 있어 React.Memo를 사용함을 통해 최적화를 한다면 좀 더 좋은 퍼포먼스를 통해 UX를 줄 수 있기에 사용을 할줄 알아야 어디가서 "React 해봤다~" 할 수 있다고 생각한다. 그리하여 이에 대해 정리해보도록 하자. React는 React.Memo와 React.Callback과 묶여서 언급된다. 둘다 메모이제이션에 대해 관련된 메소드라 그런데 조금 더 자세히 알아보면 React.memo는 렌더링 결과를 메모이징하여 불필요한 Rendering을 건너뛴다. 메모이제이션이란 계산된 값을 자료구조에 저장하고 이.. React 톺아보기를 보고 정리하기_1 1. Preview 이 글은 리액트 사용법에 대한 글이 아니다. 리액트를 통해 프로젝트를 진행한 경험이 있고 동작 방식을 어렴풋이 이해하기는 하지만 여전히 리액트가 마법처럼 느껴지고 응용 에러 디버깅 등에 어려움을 겪는 사람들을 위해 작성되었다. 시리즈의 내용은 사용자의 상호 작용으로부터 훅을 통해 컴포넌트가 업데이트되고 DOM에 마운트되기 까지의 일련의 과정을 실제 코드를 통해 분석해 나가게 될 것이다. 코드에 변형을 가하지 않고 코드 그대로 변수 하나하나 뭣을 위해 선언되었는지 A-Z 까지 알아보자. 시리즈 끝에는 아래 질문들의 답을 파악하도록 하자. Virtual DOM이 무엇인지 컴포넌트 상태가 바뀌었을 때 리액트는 어떻게 해당 컴포넌트를 리-렌더링시키는지 어떻게 변경된 부분만 DOM에 마운트 되.. Callback 비교 - 1 js는 동기적이다. ⇒ 호이스팅 이후로는 차례대로 실행이 된다. ⇒ 호이스팅은 var, function 선언한 것이 최상단으로 올라 가는 것. ⇒ let, const는 호이스팅 안되나? ⇒ 된다, 하지만 tdz에 의해 referenceError를 발생한다. ⇒ 변수는 어휘적 환겨에 포함될 때 생성되지만, 실행되기 전까지는 엑세스 할 수 없는 현상을 tdz라고 한다. 콜백함수란 ⇒ 우리가 전달해준 함수를 나중에 불러줘라는 뜻. 콜백함수는 동기, 비동기으로 사용할 수 있다. Callback Hell 콜백 지옥의 문제점 가독성이 너무 떨어진다. 비즈니스 로직을 한눈에 이해하기 어렵다. 무슨일이 일어나는지 파악하기 어렵다. 에러가 발생하거나 디버깅 시 굉장히 어렵다. Promise callback을 대체해서 깔.. React 배열에 key가 존재하는 이유 쾌락코딩님의 글을 보고 제식대로 정리한 것입니다. React를 사용하신 분이라면 map을 이용해 리스트를 표현할 때 key값을 설정안했을 때의 노란색 경고창을 본 경험이 있을 것이다. 그곳에 항상 index값을 넣고 사용하긴 했지만 정작 index값이 필수적으로 필요한지 정확히 알고 사용하진 않았다. 마침 일방적 담당 쌤인 종원쌤이 나에게 되물었다. "왜 key값이 필요한지 아나요?" 5초 고민하고 나온 답은 key값을 통해 list에 유일 키를 부여하고 변경 시에 효율적인 탐색을 통해 값을 변경하기 위해서 입니다. 거의 맞았다고 하셨지만 sibing 방식을 추가해서 설명해야 100점이라고 했다. 좀 더 자세히 알아보자. React는 VDom을 사용한다. 그래서 map을 통해 요소를 그릴 때 처음에는 렌.. CSS in JS vs CSS bono 님의 블로그 글을 공부하며 내 식대로 요약한 것으로 모든 copyright는 bono님에게 있습니다. 한동안 많이 사용하던 styled-component가 끝발이 떨어졌다. 왜 그런지에 대해 좀 알아보자. 일단 css는 Cascading Style Sheets이란 뜻으로 폭포처럼 위에서 내려가는 식으로 스타일을 입히는 문서라는 뜻으로 과거에는 신입이나 경력이 짧은 사람에게 맡기는 경우가 많았다고 한다. 당시에는 프론트엔드 영역이 명확하지 않았던 시절이다. 지금은 웹이 점점 복잡해지고 동적 요소가 많아지면서 퍼블리셔라는 직종이 생기고 html, css만으로 화면의 모든 스타일을 제어할 수 없는 세상이 펼쳐졌다. 프론트엔드 개발자들도 CSS를 전문적으로 설계하고 다루어야 한다. sass와 같은 모듈.. 이력서를 변경해보자 - 4편(직접변경하기) 작년 말에 이력서를 리뉴얼하였다. notion페이지를 이용하였고 매달 3900원씩 결제가 된다.. 아깝다.. github 호스팅으로 변경해보자. 일단 레이아웃을 잘 배치해보도록 하자. 목차를 다시 정해보면 현재는 자기소개 Skills Work experience Language Articles and Talks Education 여기서 필요없는 것은 덜어낼 필요로 보인다. Language와 Education을 간소화하고 싶다. 그리고 Articles만 필요하지 Talks는 필요없을 듯하다. 그리고 추가는 스킬 부분과 프로젝트 부분을 수정 및 내용추가 하고 싶다. 일단 현재 내 이력서에서 가장 바꾸어야할 부분은 레이아웃인것 같다. 전체 내용이 한눈에 들어오지 않는 경향이 있다. 가로 배치와 깔끔한 내용정리.. 성능최적화 [자바스크립트] 웹 사이트 최적화 라는 글을 읽고 정리하였습니다. 성능최적화 아는대로 애기하시오 이런 질문을 받는다면 나는 어떻게 답변할 수 있을까? => 웹페이지 구동속도를 빠르게 하는 방법으로 인터넷 속도를 늘리거나 서버 로직을 바꾸거나 불 필요한 자원을 낭비하지 않게 하면 됩니다. 정도? 웹 페이지의 반응시간, 속도는 웹서비스의 경쟁력 가운데 하나이다. 웹사이트의 반응 시간 0.1초 : 사용자의 동작에 해당 기능이 바로 반응한다고 느끼는 시간 1초: 불필요하게 오래 기다리지 않았다고 느끼는 시간, 0.2~1초의 시간은 컴퓨터가 동작하는 시간으로 이해될수 있는 시간. 시간이 1초 이상 걸리면 컴퓨터의 동작에 이상이 생겼다고 생각하게 된다. 10초: 사용자가 집중력을 잃지 않는 최대 시간 다양한 성능 .. 소프트웨어 개발의 기초 - OOP 1. 객체 지향 기법의 개요 객체 지향 기법의 개요 객체지향 기법은 구조적 기법의 문제점으로 인한 소프트웨어 위기의 해결책으로 사용되고 있다. 소프트웨어의 재사용 및 확장을 용이하게 함으로써 고품질 소프트웨어를 빠르게 개발할 수 있으며 유지보수가 쉽다. 복잡한 구조를 단계적, 계층적으로 표현한다. ⇒ 객체 지향 기법은 현실 세계의 개체를 기계의 부품처럼 하나의 객체로 만들어, 기계적인 부품들을 조립하여 제품을 만들듯이 소프트웨어를 개발할 때에도 객체들을 조립해서 작성할 수 있도록 하는 기법이다. 객체 ⇒ 객체는 데이터와 데이터를 처리하는 함수를 묶어놓은 하나의 소프트웨어 모듈이다. 데이터 ⇒ 객체가 가지고 있는 정보로 속성이나 상태, 분류등을 나타낸다. 속성, 상태, 변수, 상수, 자료구조라고도 한다. .. 이전 1 2 3 4 5 6 다음
