📌 목차 서론 ClientOnly 컴포넌트는 뭘까? Next 공식 문서에 나와 있는 ClientOnly 컴포넌트 Next 공식 문서에 나와 있는 ClientOnly 컴포넌트의 문제점 Nuxt 같은 ClientOnly 만들기 코드 자세하게 뜯어보기 결론 📌 서론 SSR을 사용하면 필연적으로 ClientOnly 컴포넌트를 사용해야 하는 순간이 있어요. Browser에서만 있는 정보로 rendering을 해야 하거나 의도적으로 서버에서 그려지지 않게 하는 순간 말이에요. 특히 저는 A, B 테스팅을 할 때 ClientOnly의 도움을 많이 받고 있어요. 구글 에널릭틱스의 A, B 테스팅에서 돔을 조작하게 되는데 이때 ClientOnly의 기능이 없다면 서버에서 내려주는 Dom과 Hydration 이후의 돔이 ..
📌 목차 서론 NextServerLogger 그게 뭔데? NextServerLogger 설계 NextServerLogger 간단한 구현 Logger.log NextServerProvider 결론 📌 서론 혹시 그러신 적 있나요? Next.js 프로젝트로 배포는 했는데... 분명 로컬에서는 잘 동작했는데... 수많은 유닛 테스트, e2e 테스트들도 통과했는데.. 배포를 했더니.. Next.js 프로젝트가 뻗어 버린 적 있나요? 네, 저는 있습니다! (당당😎) getInitialProps, getServerSideProps, getStaticProps 내부 코드에서 터지는거 같은데 이걸 어떻게 디버깅을 하지? 고민하신 적 있으신가요? 방법은 있습니다. docker 환경이라면 해당 container 내부에 들..
📌 목차 서론 바벨 라이브러리 설치 .babel.config.js tsconfig 캐시 리셋 📌 서론 해당 글에서는 react native + typescript에서 path alias를 설정하는 방법에 대해 기술합니다. 만약 typescript 프로젝트가 아닌, javascript 프로젝트라면 tsconfig 부분만 제외하고 따라하면 됩니다. 📌 바벨 라이브러리 설치 먼저 babel-plugin-module-resolver를 설치해야합니다. yarn add babel-plugin-module-resolver -D npm install babel-plugin-module-resolver -D 📌 babel.config.js module-resolver로 plugin을 설치해주고 path를 잡으면 됩니다...
🚨 해당 내용은 맥북 m1 환경에서 진행이 됩니다. 📌 목차 react native 설치 react native 초기 파일 설정하기 디버거 설치하기 및 디버깅 환경 설정하기 📌 react native 설치 먼저 두가지 기본 파일을 설치해줍니다. brew install node brew install watchman 📌 react native 초기 파일 설정하기 AwsomProject 명칭으로 react-native 템플릿 코드를 만들어 봅니다. npx react-native init AwesomeProject // javascript npx react-native init AwesomeProject --template react-native-template-typescript // typescript 먼..
📌 목차 서론 Visual Regression Test를 적용한 이유 Visual Regression Test란? Visual Regression Test 핵심 용어 정리 왜 Cypress를 선택하였는가? 설치 및 환경 설정 script 명령어 소개 테스트 소개 서버 데이터 mocking 결론 📌 서론 안녕하세요! 에디 입니다. 오늘은 회사에서 Visual Regression Test를 적용한 이유 그리고 과정을 한번 소개를 해보겠습니다. 그럼 출발! 🚀 📌 Visual Regression Test를 적용한 이유 기존 프로젝트에는 styled-component로 세팅이 되어있었는데 이걸 emotion으로 포팅을 하게 되었습니다. emotion의 더 다양한 기능을 사용하기 위해 변경 작업을 진행했지만 비슷..
📌 목차 서론 기존 모달 관리 기존 모달 관리의 문제점 어떻게 해결해야할까? interface 잡아보기 왜 promise를 사용했는가? 어떻게 구현을 해야할까? 그럼 composition은 어떻게 사용이 되어질까? 결론 📌 서론 안녕하세요. 에디 입니다. 오늘은 가장 많은 분들이 고민하시는 모달 혹은 다이얼로그 관리에 대해서 한번 알아보겠습니다. 오랜 고민 끝에 나온 정의니 혹시 더 좋은 방법이 있다면 댓글로 달아주세요. 그럼 시작하겠습니다. 📌 기존 모달 관리 우리 한번 모달을 띄워야한다고 생각을 해볼까요? 그럼 우리 머리속에 가장 먼저 드는 생각은 vuex를 통한 스위칭 관리 일거예요. 대략적으로 이렇게 보통 구현을 했었을거 같아요. // store.js export default createStor..
목차 서론 Hello 컴포넌트 소개 Hello 컴포넌트 테스트 결론 참고 서론 이번 포스팅에서는 간단하게 컴포넌트를 테스팅하는 방법에 대해 알아보겠습니다. Hello 컴포넌트 소개 간단하게 Hello 컴포넌트를 정의해보겠습니다. export default function Hello({ name }) { if (name) return Hello, {name}.; else return Hey, stranger!; }props로 name을 받으면 Hello, {name}, name이 없다면 Hey, stranger!를 출력합니다. Hello 컴포넌트 테스트 이제 한번 테스트 해볼까요? import React from 'react'; import { render } from '@testin..
목차 let let mut const const vs let Shadowing 참고 let 기본적인 variable의 let을 한번 살펴볼까요? fn main() { let x = 10; println!("The value x is: {}", x); x = 20; // ⭐️ 에러! println!("The value x is: {}", x); } 네 rust는 기본적으로 immutalbe을 지향하기 떄문에 에러가 나게 됩니다. 응? const도 있고 let도 있는데 그럼 어떻게...? let mut mutable을 지원하기 위해 mut 키워드를 붙여주면 됩니다. fn main() { let mut x = 10; println!("The value x is: {}", x); x = 20; println!(..
