lerna를 이용해 모노레포로 eslint-config 파일 npm에 배포하기 ❓상황프로젝트를 진행하면서 반복적으로 eslint 구성파일을 작업했던 것이 너무 귀찮았다.eslint 구성파일을 보일러플레이트가 아닌 npm으로 설치하여 사용할 수 있도록 npm을 배포해보았다.  npm 배포를 하기로 마음먹은 이유이번에 eslint 구성파일을 npm으로 배포하기 전까지 단 한번도 npm으로 배포해보지를 않았다.내가 다녔던 부트캠프에서도, 인턴십을 했을 때도, 혼자서 공부했을 때도 npm 배포하는 방법 대신 자바스크립트 또는 타입스크립트로 리액트를 어떻게 잘 구성하는지를 배우는게 주 목적이었다. 시간이 흘러 회사를 다니게 되면서 리액트로 작업했던 작업물들을 공통으로 많이 쓰였던 것들을 깃허브에 유틸함수, 훅, ..

Tailwindcss를 더 효과적으로 활용하기  ❓상황tailwindcss를 사용하여 신규 프로젝트를 개발을 하던 도중 동료분께서 내가 작성한 코드를 보고 패키지들을 추천해줬다.그래서 해당 패키지들을 알게되었고, 이를 프로젝트에 적용시키려고 한다. 기(起) 나는 가독성을 높이기 위해 코드를 줄이는 것을 좋아한다. 그래서 단축평가를 모든 코드에 녹아내려고 노력을 한다. tailwindcss에서 제공해주는 스타일을 적용해주기 위해 클래스를 적어야한다.조건부로 클래스를 적을 때는 단축평가를 사용할 수 없는데 그 이유는, Boolean 값이 클래스에 적혀져 나오기 때문이다. 예를들어 isOpen 이라는 변수의 Boolean 값이 true라면 'opened-modal' 이라는 클래스..

CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. ❓상황 원티드 프리온보딩 챌린지 7월 참가하여 주어진 사전과제가 있었다. 사전과제를 못했는데, 강의 이후에 다시한번 과제를 내주셨다. 두번째 과제인 history API를 이용한 react-router-dom의 간단한 기능을 구현했고, 첫..

자바스크립트로 HTML 요소 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는다. ❓상황 자바스크립트로 HTML 요소를 innerHTML로 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는 상황 🔎 원인 파악 오류가 아니라, innerHTML로 HTML 요소를 추가하면, 형제 노드와 하위 노드에 등록된 addEventListener가 없어진다고 한다. [javascript] 자손의 이벤트 리스너를 파괴하지 않고 innerHTML에 추가 할 수 있습니까? - 리뷰나라 다음 예제 코드에서는 onclick“foo”라는 텍스트가 포함 된 범위에 이벤트 핸들러를 연결합니다 . 핸들러는 alert(). 그러나 부모 노드의에 할당하면 innerH..

단일 행과 다중 행에서 글자가 많을 경우 말줄임(...) 스타일 적용하기 ❓상황 단일 행과 다중 행 말줄임을 강의 수강했을때 처음 접하게 되었고, 이를 학습하여 정리하게 되었음. 📖 말 줄임이란? 글자의 길이가 긴 경우, 특정 구간을 넘어가면 ...을 표시하여 텍스트의 길이를 제한할 수 있다. 흔히 쇼핑몰에서 텍스트가 많은 상품명이 있는 경우가 많다. 의식하진 않았겠지만, 텍스트가 많다고해서 디자인이 뒤틀리거나 하지 않다. 그 이유는 말 줄임 스타일을 적용함으로써 디자인을 변화시키는 것을 감소하기 때문이다. 🧮 정리 말 줄임 : 단일 행 텍스트의 양이 많아서, 한 줄로 표현되지 않고 여러줄로 표현되었다고 가정해보자 Lorem Ipsum is simply dummy text of the printing a..