본문 바로가기

Today I Learn/프론트엔드

 (26)
[Nextjs] 맨날 햇갈리는 Data Fetching 정리 2021. 8. 7. 01:16 Nextjs를 하면서 맨날 햇갈리는 ㅠㅠ Data Fetching 부분을 정리하였다. (번역투 다수) Prerequisite 정리 전에 Nextjs의 pre-rendering을 알고 가야한다. Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.) 생성된 각 HTML은 최소한의 자바스크립트 코드와 함께 생성되고, 그 js코드는 페이지가 완전히 인터렉티브하도록 한다..
cypress를 써보자! (3) 2021. 7. 11. 16:55 < cypress를 써보자! (2) < cypress를 써보자! (1) E2E 테스트를 계속 작성하다보니 사소하지만 고치고 나면 편한 불편한 점들을 개선하였다. 1. supports/setup.js 테스트들마다 공통으로 intercept해야 하는 api들은 supports/setup.js 로 이동하였다. 2. fixture path 명명 mock 데이터인 fixture 경로에서 데이터를 가져올 때 파일명만으로는 명확하지 않다고 느껴졌다. 동료 개발자분이 api 경로와 똑같이 구조를 설정하는 아이디어를 제안주셨는데 좋은거 같다. 예를 들어, api 경로가 /api/login/user 라면 처럼 구성한다. cy.intercept('POST', '/api/login/user', { fixture: `fixtu..
react-spring으로 구현해본 애니메이션 정리 2021. 6. 29. 00:26 리액트에서 웹 UI 애니메이션을 구현하는데 유명한 라이브러리인 react-spring으로 구현해본 기능들을 정리한다. 1. Page Transition 참고 예시 SIMPLE TRANSITION peaceful-almeida-t7puq - CodeSandbox peaceful-almeida-t7puq by yujeongJeon using lodash, react, react-dom, react-router-dom, react-scripts, react-spring codesandbox.io history.location이 바뀔때마다 슬라이딩되어 넘어가는 애니메이션을 useTransition을 사용하여 구현하였다. 예시와 다른 점은 1 -> 2로 갈 때는 오른쪽으로, 2 -> 1로 backward될 때에는..
cypress를 써보자! (2) 2021. 5. 23. 16:32 cypress를 써보자! (3) 목차 1. Webpack resolve.alias 2. Settig up CI 3. One intercept, multiple responses 1. Webpack resolve.alias 1주차에서 jsconfig.json에 alias 설정을 추가했다. 그러나 cypress:open 시 절대 경로를 못찾는 에러가 발생했다. cypress 웹팩 설정에서 resolve.alias를 해주지 않아 발생한 이슈였다. 따라서 cypress/plugins/index.js에 webpack resolve.alias 또한 추가했다. // ./cypress/plugins/index.js // ... 중략 ... module.exports = (on, ..
cypress를 써보자! (1) 2021. 5. 16. 00:23 cypress를 써보자! (2) > cypress를 써보자! (3) > 프로젝트를 쭉 담당하면서 단위테스트만으로는 부족하다고 생각될 때가 왔다. 저번주에 운영환경을 체크하는 로직을 라우터 페이지에 넣어버리는 실수로 인해 리얼환경에서 잘 동작하는지 반드시 확인해야 할 필요가 생겼다. 또한 QA 과정(혹은 단위테스트)에서 발견이 어려웠던 이슈들이 속속들이 나오고 있었다. 따라서 새 서비스 개발에 착수하기 전에 작년부터 해보고 싶었던 cypress를 도입하여 통합 테스트를 작성하고자 했다. 이번주에는 cypress 첫 설치와 실행 그리고 간단한 테스트 코드 작성으로 사용하는 것까지 공부하면서 기록했다. 1. cypress 설치 글쓴이는 외부와 차단된 private 망에서 개발을 하고 있다. 따라서 외부 깃헙에..
TDD로 서비스 개발하기 2021. 4. 18. 14:19 지금까지 내가 어떤 서비스 개발에 참여하고, 기획서와 디자인 시안을 받으면 가장 먼저했던 것이 있다. 바로 기획서와 전체 스펙을 보고 FE에서 개발해야 할 기능 리스트를 정리하고 각 기능에 대해 머릿속이나 간단한 코드로 설계를 해보는 것이다. 테스트 코드는 개발이 완료되면 리팩터링을 시작하기 전에 작성하고는 했다. 그러나 항상 결정과 피드백* 사이의 차이점을 인식하지 못하는 경우가 발생하는데 이는 주로 QA에서 기획서 스펙과 다른 사항을 피드백받고 나서야 해결하고는 했다. 결정과 피드백* '결정'은 개발자가 목표를 구현하기 위해 설계하는 과정을 말하고, '피드백'은 기능이 정상적으로 동작하는지에 대한 성공/실패를 말한다. TDD는 개발자가 기능을 설계하는 과정에서 목표를 잃어버리지 않게 도움을 준다. 그..
[MobX, mobx-react-lite] Observable 다양하게 활용하기 2021. 4. 13. 19:23 현재 다니고 있는 회사에서는 MobX와 mobx-react-lite*을 활용하여 상태를 관리하고 있다. 크게 아래 세 과정에 의해 스토어를 생성하고 사용한다. 과정 자세히보기 1. 'create~Store' 네이밍 룰로 옵저버블로 만들고자 하는 객체를 생성한다. const createAccountStore = () => { return { id: '', password: '', setId(value) { this.id = value } get isValidId() { return this.id.length > 5 } } } export {createAccountStore} 2. mobx-react-lite의 useLocalStore*로 만든 옵저버블을 컨텍스트에 등록한다. const rootContext..
/** IGNORE*/ 주석 2021. 4. 9. 12:20 팀원분께서 axios 코드를 뜯어보시다가 /** IGNORE*/ 주석을 소개해주셨다. 예를 들어 어떤 비동기 함수를 이렇게 작성하면 const asyncFunc = async () => { try { const res = await axios.get('/something') return res } catch { /** IGNORE*/ } } asyncFunc에서 에러가 발생해도 catch문에서는 어떠한 처리를 하지 않고 리턴할 것이다. 즉 /** IGNORE*/ 주석의 의미는 ‘내(여기서는 asyncFunc입장)가 낸 에러는 스스로 잡을게. 대신 다른 처리를 하진 않을게’ 라는 약속인 것이다. const asyncFunc = async ()=>{ try{ const res = await new Promi..
[리액트] Compound Component 활용하기 2020. 9. 27. 21:28 DEV 커뮤니티에서 React Component Patterns에 관한 글에서 Compound 컴포넌트 패턴을 소개하는 글을 읽고 실무에 적용해보았다. 글에서 소개하는 Compound Component에 대해 간단하게 설명하자면 내부 state를 공유하며 서로 상호작용하는 컴포넌트들을 내부 static 컴포넌트로 두어 사용자에게 내부 로직은 추상화하고, 이외의 로직 작성을 독립적으로 작성할 수 있게 해주는 패턴이다. "Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the backg..
[리액트] useAsync Hook with Suspense 2020. 8. 22. 01:41 요즘 게을러져서 글을 쓸 의욕이 사라진 거 같다...(반성ㅠㅠ) 요즘 코로나 때문에 계속 재택근무를 하고 있어서 집에 있지만 있는거 같지 않다ㅠ 퇴근하고 나서도 매번 계속 프로젝트 고민하고 있으니 더욱 여유가 없는 기분이다 (구차한 변명이다) you don't know js 시리즈도 다시 읽으면서 정리하고 싶었는데 힘내야지 2주 전인가 팀 동료분께서 생각해내신 아이디어와 프로토타입을 들은 적이 있다. 현 프로젝트에서는 mobx local store에 비동기 함수가 함께 있는 부분으로 인해 코드가 엄청 길어졌다. 물론 잘못된 것도 아니고 모든 로직이 State와 함께 있어서 가독성면에서 좋았던 점도 있다. 팀원분이 생각해내신 아이디어는 비동기함수가 쓰이는 컴포넌트에 마치 동기함수를 호출하듯이 비동기 함수를..
브라우저 동작 원리와 VSync 2020. 8. 18. 12:08 (출처) The Anatomy of a Frame 본 포스팅은 사내 기술 교육 '브라우저 동작 원리' 강의 영상을 수강 후 정리한 글입니다. 1. 브라우저 동작 원리 (Chrome DevTool 기반) * 중간중간 음영 색상이 들어간 표시는 위의 그림에서 마킹된 색상처럼 크롬 개발자 도구에서 확인할 수 있는 과정을 말한다. 1.1 HTML, CSS 파싱 위의 개발자도구 화면에서 Parse HTML에 해당하는 부분이다. - HTML 파싱하는 이유? : DOM 을 생성하여 엘리먼트를 가공 및 관리하는 표준을 구성하기 위해 - DOM 트리를 만드는 이유 : 자바스크립트 등에 의해 동적으로 변하는 엘리먼트를 쉽게 수정하고 관리하기 위해 파싱하는 과정 바이트 => 문자열 => tokenizing(태깅) => no..
[리액트] react-virtualized을 활용한 무한 스크롤 구현 2020. 8. 6. 22:18 이전에 리액트 무한 스크롤 라이브러리를 하나 뜯어보고 간소화한 버전으로 구현해보았다. 바로 이 글이다. [리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅� coffeeandcakeandnewjeong.tistory.com 그런데 회사에서 무한 스크롤과 관련하여 이슈가 나온 것이 있었는데 무한스크롤되는 요소가 극단적으로 10만개 이상이 되고, 일정 개수만큼 추가로 로드해와도 렌더링 속도가 느려 화면에 요소가 그려지는 것이 지연되는 문제였다. 그래서 데이터를 로드한 것이 완료되었어도 잠시 빈 공간..

티스토리툴바