본문 바로가기

Today I Learn/프론트엔드

 (26)
[리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 2020. 7. 25. 22:54 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅되어 페이지 전환 후 뒤로가기 등을 통해 이전 페이지로 돌아왔을 때 스크롤을 복원하는 기능 [이슈] 스크롤 복원 시 스크롤이 움직이는게 눈에 보임, 혹시나 싶어서 사내 프로젝트에서도 같은 기능을 테스트해보았는데 크롬 브라우저 웹뷰로 테스트, 디버깅 시에는 느끼지 못함 [기억하기] "0" || 0 은 "0"이 truthy한 값이기 때문에 "0"이다. 따라서 if (!val) {} 과 같은 falsy한 값일 시 실행하는 조건문에서 의도한대로 동작하지 않을 수 있습니다. 0일 시 string인지 number..
[리액트] mobx-react-lite로 todoList 작성하기 2020. 7. 15. 19:41 오랜만에 리액트! 리덕스만 써보다가 mobx-react-lite 상태관리 라이브러리의 예제 코드를 작성해보았다. mobX란 리액티브 프로그래밍 기반으로 리액트에서 상태관리를 가능하게 해주는 라이브러리로 앵귤러를 미리 해서 그런가 크게 어렵게 느껴지진 않았다. 참고했던 링크들 MobX를 React Hooks (TypeScript) 와 함께 사용하는방법 heros-mobx-react-lite example React에서 Mobx 경험기 (Redux와 비교기) mobx-react v6 마이그레이션하기 MobX 내부 살펴보기 mobx-react-lite 짧막 정리 이번주부터 살펴보기 시작해서 아직 내부 로직까지 완벽하게 이해하진 못했지만 mobx-react-lite가 뭔지에 대해 지금까지 이해한 바는 다음과 같..
[프론트엔드] 성능 최적화 정리 2020. 5. 22. 00:37 목차 0. 개요 1. 브라우저 동작 원리 2. 성능 최적화 2.1 페이지 로드 최적화 2.2 페이지 렌더링 최적화 3. 성능 측정 기준 3.1 브라우저 내부 이벤트 기준 3.2 사용자 기준 성능 지표 3.3 사용자 기준 성능 최적화 4. 정리 0. 개요 프론트엔드의 성능 최적화는 화면을 설계하는 당시에는 사실 고려하기 힘든 경우가 많았다. 회사의 납기를 준수하여야 하는 경우도 있고, 우선적으로 기능 구현을 해서 테스트를 진행하는게 중요했던 상황도 많았기 때문이다. 하지만 프로젝트가 끝나고 유지보수를 하거나, 다음 프로젝트를 하기 전 시간이 나는 경우에 틈틈히 프론트엔드 성능 최적화에 대해 학습하면서 적용해나가다보니, 다음 프로젝트를 착수하게 되었을 땐, "아, 이 부분을 이렇게 설계하면 성능이 더 좋겠구..
[자바스크립트]프론트엔드 질문 모음 2020. 5. 6. 14:43 선배님들께 듣거나 기술 면접 때 나올만한(나왔던) 지식 정리용입니다. 주기적으로 업데이트 치는 중입니다. 목차 1. function () {} 표현식과 화살표 함수(_ => {})의 차이점은? 2. 리액트가 DOM을 업데이트하는 과정 3. 3/24에 봤던 탈탈 털린 면접 질문들 (코어 자바스크립트 + 비동기 등) 4. Javascript에서 OOP 구현하기 5. 리액트 redux 6. 이벤트 위임이란? 7. Map과 Set, 객체와의 차이점 8. 5/4 오답노트 1. function () {} 표현식과 화살표 함수(_ => {})의 차이점은? 더보기 - thisBinding 유무: function (){} 은 실행 컨텍스트에 thisBinding 존재, 화살표 함수는 thisBinding이 없어서 호이스..
[리액트] 컴포넌트와 Hook 2020. 4. 23. 15:04 "리액트에서 hook이 왜 등장했을까요?" "클래스 컴포넌트와 hook의 관계는 뭐라고 생각하세요?" 최근 받았던 이 질문들에 대한 답변을 잘 하지 못했다. React 사용자가 아니라 React 개발자가 되기 위해서는 컴포넌트를 제대로 알 필요가 있었다. 2021.02.11. 업데이트 (다시 읽어보니 좀 빈약해서 ^^;) 리액트 16.8 이전까지는 상태 관련 로직을 재사용하기 위해서는 render props, HOC를 사용하였으나 이는 많은 Wrapper컴포넌트 구조를 가지게 되어 코드 구조를 파악하기 어렵게 만듭니다. Hook은 리액트에서 상태관련 로직을 더 쉽게 공유하고 재사용하기 위해 고안되었습니다. React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토..
[리액트] Hook 렌더링 최적화 실무 적용기 2020. 4. 9. 16:47 최근에 Daily DevBlog에서 useCallback과 React.memo을 통한 렌더링 최적화에 관한 글을 읽었다. 글을 읽고 깨달은 것은 내가 지금까지 useCallback을 잘못 사용하고 있었다는 점이었다. 마침 챗봇 빌더의 설정 페이지를 시작으로 점차 렌더링 최적화를 적용해나갈 계획이었기 때문에 이를 수정하고자 한다. 더불어 리액트 훅 기반 프론트엔드 개발 시 주의할 점에서 state는 독립적으로 설정해야 하는 점 또한 적용할 것이다. 1. useCallback과 React.memo와의 관계성 우선 공식문서를 꼼꼼히 읽으면서 useCallback의 올바른 쓰임새부터 파악했다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의..
[리액트] Toast 알람 구현 (2) 2020. 4. 7. 16:20 3/31일에 Toast 알람을 custom hook으로 한 파일 내에서 구현을 하였다. 그러다 보니 해당 컴포넌트를 함수 실행으로 가져온다거나, 컴포넌트 업데이트를 위한 별도의 state를 두는 등의 좋지 않은 패턴을 썼었다. 저번 포스팅에서의 개선점들을 다시 열거하자면, 1. ToastContainer를 함수로 쓰는게 거슬린다! 로 쓰고 싶다 ㅠㅠ 2. setInterval()이 성능에 영향을 줄 거 같다. 따라서 시각적인 변화는 requestAnimationFrame의 콜백함수에서 해결하고 싶은데 가능할까? 3. trigger state말고 ToastBox 업데이트를 할 수 있는 방법을 찾아보자. 등의 고려 사항이 있었다. 따라서 오픈 소스 라이브러리인 react-toastify 소스 코드를 분석해보..
TDZ (Temporal Dead Zone)이란? 2020. 4. 6. 11:45 본 내용은 Don't Use Javascript Variables Without Knowing Temporal Dead Zone을 번역한 'TDZ를 모른 채 자바스크립트 변수를 사용하지 말라' 글을 기반으로 요약한 글입니다. [출처] TDZ를 모른 채 자바스크립트 변수를 사용하지 말라 TDZ을 모른 채 자바스크립트 변수를 사용하지 말라 간단한 질문을 하나 하겠다. 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다. ui.toast.com 1. TDZ란? 변수 선언 이전에 변수를 참조하는 영역. 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다. 즉, TDZ에 영향을 받는 변수는 선언 이전에 참조하는 것을 금지하고 있다. TDZ가 자바스크립트에서 ..
[리액트]크로스 브라우징 이슈 해결 경험기 2020. 4. 3. 00:44 처음 챗봇 빌더 서비스를 기획할 때 IE10, 11, Edge까지 지원하는걸 목표로 잡았다 따라서 polyfill을 맞춰주는 babel 로더를 웹팩 로더에 추가하여 기본 크로스 브라우징은 설정하였으나 그럼에도 레이아웃이 틀어지거나 원하는 대로 기능이 동작하지 않는 등의 이슈가 있어 정리해서 다음에도 유의해야 겠다. 가장 예전에 했던 크로스 브라우징 이슈부터 정리하였다. [목차] 1. input focus를 잃는 현상 2. IE10에서 z-index 어긋나는 현상 3. flex 속성 미적용 4. css var() 미지원 5. 기타 이슈 1. input focus를 잃는 현상 원인: 리액트 컴포넌트 라이프 사이클로 인한 rerendering 2019년 6월 1차 고도화가 끝나고 첫 리팩토링 때 발생했던 이슈..
[리액트] Toast 알람 구현 (1) 2020. 3. 31. 21:50 현재 챗봇 빌더에 구현되어있는 Toast 메세지는 직접 구현한 부분이다. 다만 단점은 여느 라이브러리처럼 여러 개가 뜨는 형식이 아닌 하나만 뜰 수 있는 구조로 구현된 상태였다. 그리고 컴포넌트와 기능 부분을 나눈다고 뷰와 컨트롤러 부분이 각각 /components 와 /helpers에 구현했는데 따로 불러와서 쓰는게 어색했다. 따라서 이번에 Toast 알람을 개선하는 것을 Task로 잡고 시도했었다. 마침 최근에 본 기술 인터뷰 때 받은 테스트에서 유사한 요구사항을 가지고 있어 이것을 집에서 다시 풀면서 어느정도 아이디어를 얻을 수 있었다. (정작 테스트볼 때는 이렇게 못풀었어서 아쉽다...ㅠ 함수형 프로그래밍에 익숙해져 있던 탓인지 OOP로 풀 생각을 못함..U_U) [요구 사항] 1. 여러 개의 T..
비동기와 Promise 2020. 3. 29. 16:54 현업에서 웹 개발자로 일한지 어느덧 2년이 다 되가는 시점에서 비동기라는 개념을 애매하게 이해하고 있다고 생각되었습니다. 최근 봤던 저의 지식 밑천이 탈탈 털린(...) 면접에서 비동기에 대해 물었을 때 정말 자신없게 대답해서 너무 부끄러웠습니다ㅠ 이제는 비동기에 대한 개념을 제 것으로 확실하게 만들고 싶습니다. 1. 비동기/동기의 차이점 코어 자바스크립트에서 설명한 '비동기'는 A함수에서 B함수로 제어권을 넘겨 A함수는 B함수를 실행하고 바로 다음 작업을 처리하는 동시에 B함수에서 작업이 완료되면 A함수로 그 결과값을 리턴합니다. A함수는 그동안 신나게 B와 관련없는 작업들을 하고 있다가 B함수로부터 결과값을 받으면 그제서야 B함수 다음으로 해야 할 작업을 실행합니다. 스타벅스 온 김에 real wor..
[리액트] 리액트 훅 기반 프론트엔드 개발 시 주의할 점 2020. 3. 21. 00:14 1년 넘게 react.js 로 챗봇 빌더 프론트엔드 작업을 하면서 다양한 과정을 거쳐왔었다. 2018년, 제일 처음 React.js로 챗봇 빌더 PoC를 할 때는 필수적인 불변성도 준수하지 못했을 정도로 어리석게 프로그래밍을 했었는데 2019년 정식 서비스 개발에 들어가고 리팩토링(이라 쓰고 실상은 갈아엎음;)을 진행하면서 현재 꽤 올바른 방향으로 프로그래밍을 해오고 있다. 하지만 아직 갈 길이 엄~~~청 멀어서 늘 새롭게 배우는 부분이 많아 충격과 자극을 받으며 하고 있는 만큼, 다음에 또 React.js 개발을 하게 된다면 다음고 같은 점들은 꼭 유의하면서 진행하고 싶어 미리 되짚어보면서 꼭 지키고 싶다. 1, 2차 고도화가 끝난 2019년 10월부터 클래스 컴포넌트를 리액트 16.08버전부터 새로 ..

티스토리툴바