솔적솔적

사이드 프로젝트 '같이행' 퍼블리싱 작업 중 프로필 수정 클릭 시 모달이 나오는 형태인데, 이런 에러가 나왔다. 해석하면  보통 한 요소를 다른 요소 안에 중첩하려고 할 때 발생하고. HTML은 이러한 중첩을 허용하지 않는다고 한다. 추측되기론, EditProfileModal.tsx 안에 있는 button요소가 중첩되어 에러를 내는 것같다.   혹시 이전에 만든 공통 컴포넌트에서 전달하는 props 타입이 이상한 것이 아닐까 먼저 확인해보기linkText의 타입은 이상이없는 것같고,  사실, button이 중첩된다하면 간단히 button인 태그를 다른 태그로 바꾸면된다.허나! 직접 DOM 이벤트를 사용하는 경우 TypeScript가 정적분석하기 어려워 핸들러의 타입을 추론하지 못해, 빨간줄이 팍!나올..

월간CS에서 1주차 react, next 배포, 배포 자동화 A부터 Z까지 수업을 참여하였습니다. 직접 실습하며 배웠던 내용, 실습 중 막혔던 부분과 해결과정들을 적어보려합니다. 👉 CI/CD란? 링크 클릭 👉 GitHub Flow 전략에 대한 이해 링크 클릭 👉 GitHub Action에 대한 이해 링크 클릭 🍖 CloudFront, S3 배포하기 👉 aws cli 링크 클릭 👉 terraform 링크 클릭 🍖 terraform이란? 클라우드 인프라스트럭처 자동화 도구 인프라를 구축, 변경, 버전관리위한도구로 코드로 인프라를 관리할 수 있게 한다. 🍖 Github Action github action용 폴더를 만들고 꼭! .github > workflows > .yaml 순으로 생성해야한다. deplo..

안녕하세요, 현재, 팀원들과 vue3 프로젝트에서 React18, next13버전으로 변경하여 리액트를 사용하기로했고, 프로젝트 초기셋팅 시점에 ESLint와 prettier를 통일해서 셋팅하기로했고 오늘은 제목그대로 ESLint 세팅 시 내가 어떤 설정을 적용한건지 하나씩 상세히 확인해보는 시간을 가져보려합니다. 오늘의 목표🥸 - 1. ESLint란 무엇인지 알기 - 2. ESLint 규칙 - 3. ESLint를 프로젝트에 설정하는 방법 - 4. ESLint가 제대로 작동되는지 확인해보기 입니다. 그럼 긴 말 필요 없이~ 같이 바로 쑝~ 1. ESLint란 무엇인가 - ESLint는 오픈소스 자바스크립트 및 타입스크립트 코드 정적 분석 도구. 그럼 왜 사용해야하나? 왜 설정하는거야? - 코드 일관성 유..

안녕하세요. 저는 이번에 패스트 캠퍼스로 웹퍼블리싱을 학습했었는데요, 패스트캠퍼스에 현재도 올라와있는 강의패키지 중 하나입니다. 강의 타이틀은 [패스트캠퍼스] 웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인 웹퍼블리싱 이며 사용자가 스크롤할 때, 클릭할 때와 같은 상황에서 좀 더 재미를 줄 수 있는 UI를 만들고 싶어, 강의를 듣게되었습니다. 그중에서 제일 재밌게 배웠던 것 중 하나를 같이 공유하며 학습일지를 쓰기 위해 끄적끄적해보려 해요! 학습일지의 내용으로 가져오려 했던 것은 바로 마우스 커서를 커스텀하는 방법 먼저 css의 커서는 요소위에 마우스를 올릴 때 hover 시 커서 모양을 변경합니다. 커서 속성은 요소를 가리킬 때 커서로 나타낼 타입을 정의하는 데에 사용하는 속성입니다..