글을 시작하자마자 우선, 프론트엔드 앱에 테스트를 적용해보고 느낀 점은, 프론트엔드는 테스트하기가 까다롭다 - 였다. 어떤 테스트를 해야할까? 단위 테스트 개념을 프론트엔드에 적용하게 되면 ui에 대한 테스트일 것이고, 이 UI 테스트는 사실 상 변경사항이 많기 때

이번에 초대권 이벤트가 있어 초대코드를 복사하는 기능을 구현하고 그 페이지를 주로 카카오톡을 통해 공유하는 기획이 있었다. 그런데 안드로이드폰 카카오톡 브라우저에서만 복사하기가 실패하는 것이다. (ios는 되고, aos도 네이버브라우저도 되는데 ㅠ ... 카톡 브라우저

Image 개선 profiler를 돌린 결과이다. 무려 26.8초나... 소요되는 이 문제는 일반 img태그를 사용하여, 이미지 사이즈가 매우 큰 것, 또 http1 서버를 통해 이미지를 내려받아 최적화가 진행되지 못했다. use Next image Next.js

여러개의 카드들을 선택하고 선택을 취소하는 로직이다.x표를 누르면 해당 카드의 인덱스를 받아 splice를 통해 제거하려고 한다.그러나 자꾸 내가 선택한 카드가 삭제되는 것이 아니라 마지막 카드가 삭제되는 이슈였다.무엇이 잘못되었는지 알고보니까 매우 거슬리는 코드라는

컴포넌트에 전달되는 state, props들이 변경되면 재렌더링이 발생한다. props는 어떤 데이터이기도, onClick과 같은 함수가 될 수도 있다. 컴포넌트에 전해지는 모든 props들은 특별한 조치를 취하지 않으면 참조형 데이터로서 부모 컴포넌트가 실행될 때,

NEXT DOCS > React Hydration Error(https://nextjs.org/docs/messages/react-hydration-error로그인을 한 경우 로그아웃 버튼을 노출하고,로그인하지 않은 경우에는 로그아웃 버튼을 보여주지 않는 헤더

DRY(Don’t Repeat Yourself)코딩을 시작한지 얼마안됬을 때,코드의 재사용성을 높이는 일이 굉장히 효율적임을 알게되면서 여기에 중독되었던 것 같다.특히 컴포넌트화를 하며 중복되는 ui들은 재작업할 필요가 없어 view를 빠르게 작업할 수 있었고, 로직에

getInitialProps, getServerSideProps, getStaticProps를 포함해 data fetching 없이 url을 변경할 수 있는 route 옵션당연히 페이지가 변경되면 data fetching이 발생되어 이 경우는 shallow옵션이 큰 의

\-0105 : Next.js 하위요소(부모의 자식요소)부터 마운팅을 시작함개발자도구 source 에서 상위부터 하위까지 브레이크포인트를 걸어 확인해보았음관련 문제 > 마케팅툴을 적용하는데 braze는 페이지 앱의 상단에서 호출하고 있기 때문에 페이지 하위에서는 bra

이번엔 젭알 꼬박꼬박 읽고 좀 남기자 😊🎏\-"프레젠테이션/ 컨테이너 컴포넌트 패턴" Presentational and Container ComponentsBuilding Your Own Hooks용어를 우연히 듣게 되어 검색해보았다. 특별한건 아니었다. 대개의 프

각 센터 및 클래스에 대한 메타태그를 달리 보여줄 계획og 타이틀og 이미지이 두가지를 공유 시에 다른 데이터로 보여주려고 한다.기존 방식데이터가 고정적이고 변경될 일이 거의 없었다보니 클라이언트 상에서 하드코딩, 데이터를 관리하고 있었다. 때문에 대대적인 개편이 있었

화살표 함수에서의 this는 전역객체 window를 바라본다. 익명함수로서 전역환경에서 선언된 것과 같고 선언 시점의 this로 설정되기 때문에 전역객체를 바라보게 되는 것이다. 일반함수에서의 this는 함수가 실행되는 시점에 따라 달라진다. 그렇기 때문에 일반함수에

for...in / for...of for...in 은 모든 객체의 열거가능한 속성에 대해 반복, 키에 접근한다. for...of 는 모든 객체가 아닌 컬렉션 전용! [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다. 값을

한 문장안에서 특정문구 및 단어를 강조하기 위해 마크업을 달리 표기하는 스타일링 작업이 많다. 이런 경우 PartialBoldText라는 컴포넌트를 사용해서 강조할 부분만 <b>로 따로 표기해주는 방식으로 작성했다.지금은 모종의 이유로... 컴포넌트를 사용하지 못

에서 null값이 children으로 인식되어 들어왔다.물론 유효한 엘리먼트는 아니다. (!React.isValidElement(child))

현재 회사에서 리액트로 작업 중인 프로젝트는 타입스크립트를 사용하고 있고 컴포넌트를 React.FC로 타입을 선언해 사용하고 있다. 거의 최근까지는 그냥 다른 사람이 사용하길래 컨벤션을 맞추기 위해 사용한 경향이 있었고, children을 prop으로 선언하지 않아도

미리 내용을 요약하자면타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다.클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다.

A+B=>A'상속을 통해 중복되는 타입 name과 age의 중복을 피할 수 있다.상속받고자 하는 타입을 extends로 받아올 수 있다.상속받고자 하는 타입을 선언하고 &연산자를 표기한 후 자신의 타입을 지정한다.A+B=>C이미 존재하는 타입 여러개를 하나의 타입으로

배열요소에 비동기 작업을 실행할 때 순차처리와 병렬처리로 나눌 수 있다. <⭐순차처리>는 배열의 순서대로 비동기 작업을 실행하며 실행순서를 보장하는 경우이다. 시간이 다소 소요되는 작업에 대해서는 끝날 때까지 대기하므로 시간이 소요되는 특징이 있고,<⭐병렬처

결과물 : 1초마다 0,1,,2,3이 출력되게 만들자 var가 전역변수로서 위치하고 있다. setTimeout 함수는 비동기 함수로써 1초 뒤 태스크 큐에 담기게 된다. for문을 모두 돌고나서 태스크큐의 작업 내용이 콜스택으로 이동하여 콜백함수(()=>consol