본문 바로가기

만족스러운 개발38

FullCalendar 라이브러리 more Popup 커스텀 하기 (antd) 캘린더 라이브러리로 FullCalendar 라이브러리를 사용하면서 이벤트들이 숨김 표시될 때 more 버튼이 생기는데 이 more 버튼을 클릭하면 전체 일정을 볼 수 있는 popup창이 뜬다. 기본으로 제공해주는 popup 컴포넌트 말고 새로 디자인 된 컴포넌트를 사용하기 위해 커스텀해야 할 일이 생겼다. 먼저 기본적으로 제공하는 것 이외에 필요한 것을 나열해보자면 1. 이벤트 타이틀만 표시되는 것이 아니라 start부터 end까지 표시되길 원함. 2. 그 이외의 추가적인 디자인 3. 이벤트 클릭 시에 작동은 동일해야 함. 처음에는 커스텀으로 만드는게 싫어서 기존에 있는걸 최대한 쓰려고 했지만 이벤트들이 묶여있어서 캘린더에서부터 날짜가 나오게 하는 방법 말고는 찾지 못했다. 그래서 아예 새로 만들기로 했.. 2024. 4. 16.
원티드 프리온보딩 프론트엔드 리뷰 프론트엔드 개발자 2년차가 되어 가면서 직장에 사수가 있어본 적 없이 혼자 개발을 하고 있다. 혼자 개발을 하면서 내가 만들고 있는 코드의 질에 대해 고민하게 됐다. 누구와 함께 같이 고민하지 못하고 혼자 만들기만 하니 내 실력이 정체되어 있는 것 같고 길을 잃은 느낌이었다. 그러던 중 원티드에서 눈에 띄는 주제가 보이길래 바로 신청하게 되었다. 그 주제는 바로 비즈니스 로직 완정 정복하기! 커리큘럼은 아래와 같다. 오종택님의 비즈니스 로직 완전 정복하기 1. 컴포넌트가 복잡해지는 원인에 대해 고찰해보기 2. 비즈니스 로직을 제압하는 개발자가 퇴근을 한다 3. SOLID한 컴포넌트 만들기 4. Logic First, React Later 강의이다 보니 강의의 내용을 블로그에 적을 수 없다. 강의를 들으면.. 2023. 12. 16.
Next.js 13버전 라우팅 기초적이지만 몰랐던 사실이 있다. dev로 페이지를 보게 되면 변경한 내용이 바로 화면에 보여져야하기 때문에 SSR로 렌더링이 된다. 그래서 저장을 할 때마다 터미널에 보게 되면 아래 문구를 볼 수 있다. 요청할 때 컴파일했다는 것이다. wait - compiling /products/[pants]/page (client and server)... event - compiled client and server successfully in 819 ms (508 modules) build를 하게 되면 친절하게 어떤 페이지가 SSR인지, SSG인지를 알려준다. start는 빌드 된 파일을 실행 시킬 때 쓰면 된다. 위에서 build한 내용을 보면 about은 static으로 만든 페이지다. 빌드할 때 HTML.. 2023. 4. 27.
Next.js 왜 쓰는거야? React는 UI를 편리하게 해주는 라이브러리다. Next.js는 React를 사용하여 Web을 만드는 프레임워크이다. 라이브러리란? 특정한 문제를 해결하기 위한 툴 프레임워크란? 큰 단위의 솔리션을 위한 골격을 제공해준다. 여기에는 특정한 문제를 해결하는 툴도 포함되어 있다. Next.js Full Stack을 가능하게 해준다. 파일을 베이스로 한 Routing을 해준다. SEO, Image, Font 최적화를 해준다. Server Side Render, Static Site Generation을 가능하게 해준다. 하이브리드 렌더링을 기능하게 해준다. Next.js는 2016년에 gitHub 오픈소스로 공개되었다. Vercel이란 회사에서 만들었는데 Vercel은 미국의 클라우드 플랫폼 (PaaS 서비.. 2023. 4. 21.

티스토리툴바