전체 글4 React Portal로 모달 생성하기 리액트 포탈 없이 모달을 개발하게 되면 모달 컴포넌트가 한 부모 요소 안에 다른 컴포넌트와 함께 위치하게 된다. 이는 z-index 사용 시 문제가 될 수 있다. z-index 1 안에 있는 요소의 z-index를 아무리 높여줘도 z-index가 2인 모달 위로 올라오지 않는 문제! React Portals Portals는 부모 컴포넌트 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 할 수 있게 해 준다. 사용방법 Container를 생성해준다. layout.jsx createPortal을 이용해 모달 컴포넌트를 만든다. const Modal = ({ isOpen, children, onClose }) => { if (!isOpen) return null; return ReactDOM.cre.. 2024. 1. 2. 기존 Next.js Javascript프로젝트에 Typescript 도입하기 취업 이후에 항상 next.js와 typescript를 사용해서 프로젝트 세팅을 바꿀 일이 없었습니다. 프론트엔드 강의를 듣다가 Javascript에서 Typescript로 마이그레이션을 할 일이 생겨 기록합니다. 생각보다 훨씬 간단합니다. 시간이 없으신 분은 아래 빨간 글씨 tsconfig.json 생성 ~ 부터 보시면 됩니다. React & Next.js 버전 업데이트(필요시) npm 패키지 사용시 npm i next@latest react@latest react-dom //eslint 사용 시 npm i -D eslint@latest eslint-config-next@latest yarn 패키지 사용 시 yarn add next@latest react@latest react-dom //eslint .. 2024. 1. 1. 운동 기록 어플 헬짱다이어리 1인 개발 MVP 제작 과정 운동을 하루라도 하지 않으면 금단현상이 오는 심각한 운동 중독 동네 헬짱입니다. 하루 일과 중 빠질 수 없는 일은 운동 기록인데요, 타 어플을 사용하며 크게 불편한 점은 없었지만 제가 원하는 기능만 쏙쏙 넣어둔 어플을 찾지 못했습니다. 또, 일단 귀여워야 자꾸 보는 특이한 사용자인 ‘나’의 니즈를 채워주고 싶었어요. 보이는 것보다 훨씬 더 운동에 매니악한 저는 참지 못하고 아이패드에 어플 상상도를 그리기 시작했어요. 기획도 배울겸 피그마로 작업하고 싶었지만, 자투리 시간을 최대한 활용해야 하는 상황이기에 작업자(=고마드)만 알아볼 와이어프레임과 프로토타입 사이에 있는 그 무언가를 그렸습니다. 그리고 난 뒤 또 다른 예비 사용자 친구의 컨펌을 받고 피드백을 반영했어요. 그렇게 저는 낮에도 개발자, 밤(새벽.. 2023. 12. 31. 한달 차 신입 풀스택개발자 회고록 나는 정말이지 알아주는 망각의 동물이다. 뭘 했고 뭘 느꼈는지 잊을게 분명하니 적어도 한 달에 한 번은 기록을 해보려고 한다. 첫째 주에는 노션 방방곡곡 탐험하며 프로젝트 프로세스를 이해하고 회사에 적응했다. 둘째 주에는 개발에 앞서 초기세팅을 하며 다음에 입사할 누군가를 위해 그 과정을 모두 문서화했다. 이후에는 개발팀의 기획으로 미니(라고 했지만 프론트엔드, 백엔드를 모두 이해해야 했던 나름의 ‘빅’) 프로젝트를 진행했다. 실제 프로젝트에 투입되어 PM, 개발자 분들과 소통하며 뚝딱뚝딱(?)은 모르겠지만 뚜또뚜뚜뚜닫딱 무엇인가를 만들어가고 있다. 아래는 한 달 동안 개발자로 일하며 느낀 점이다. 내가 짜고 있는 코드를 명확하게, 간결하게 설명하는 것은 생각보다 굉 장 히 어렵다. 회사에서 사용하는 용.. 2023. 12. 31. 이전 1 다음
