솔적솔적

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

마이페이지 디자인 안에 들어있는 helpbox, 공통 컴포넌트로 만들기 위해 따로 빼서 작업준비!디자이너가 원하는 디자인은 요런 형식. - 페이지가 렌더링될 때마다 helpbox는 화면에 나오도록(초기 상태값 true로)하기- close 버튼 클릭 시 helpbox는 사라지게, helpbox와 관련된 텍스트 클릭 시 다시 helpbox보이게(toggle형식으로)하기- helpbox안에 들어가는 내용은 각각 중요내용, 보충내용으로 나눠서 입력할 수 있게하기. 이 helpbox를 컴포넌트로 뺀 후 마이페이지에도 적용할 수 있도록 해보려한다. 먼저 props로 전달할 데이터론 '화살표의 위치표시'와 '핵심내용', '핵심내용'을 보충할 내용   제일 아리송가리송했던 부분, 화살표를 left1/4, right1/..

월간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는 오픈소스 자바스크립트 및 타입스크립트 코드 정적 분석 도구. 그럼 왜 사용해야하나? 왜 설정하는거야? - 코드 일관성 유..