안녕하세요, 이번에는 제가 작업하던 캘린더 라이브러리에 대한 이야기를 해볼까 합니다. 이 라이브러리는 처음에는 리액트, 타입스크립트, 스타일드 컴포넌트, 그리고 Vite를 이용하여 구현되었습니다. 하지만 라이브러리를 개선하고 커스터마이징하는 과정에서 몇 가지 변화를 주

package.json | tsconfig.json | vite.config.ts

optional 어떤점을 생각하고 했는지!style 적용, 모바일 환경 대응접근성 개선

즉, context를 사용함으로써, 리액트 내장된 전역상태관리를 할 수 있었고, 캘린더 라이브러리 특성 상 하나의 컴포넌트를 전역에서 관리하기에 consumer와 provider가 사용자 입력으로 받은 Props를 관리 하기에 적절하였다고 판단하였다.

index.ts: 라이브러리를 외부에 제공하는 역할이 파일에서는 App 컴포넌트를 Calendar라는 이름으로 export 하고 있다. 이렇게 하면, 이 캘린더 라이브러리를 사용하는 다른 애플리케이션에서 import { Calendar } from '해당 라이브러리 경

트립비토즈라는 여행사이트를 클론하는 과제를 수행한 적이 있다. 당시 팀프로젝트로 진행을 하였는데, 캘린더 부분을 라이브러리 없이 구현을 했었다. 되게 부족하지만 3개의 큰 컴포넌트로 구현되었었기에, 이부분을 가져와서 언제든지 import해서 사용할 수 있으면 나만의 라

공통 구현사항 간단하게 구현해보기 구현사항 빈 사각형 9개가 (3 \* 3) 존재한다. 빈 사각형을 클릭하면 “O” 나 “X”가 표시된다. 한 번 클릭한 표시는 변할 수 없다. 처음 클릭은 “X”가 표시된다. 클릭을 하여 “O” 또는 “X” 가 표시되었다면 그 다음 표

개발을 공부하며 혼자서 해보는 경험이 부족했어서, 강의의 도움없이 혼자 생각하고 페어프로그래밍으로 같이 생각하며 생각의 틀을 넓혀나가고자, 작은것부터 소소하게 확실한 행복을 느끼며 자기만족감을 높여나가기 위한 스터디입니다.개발을 공부한지 21.11월 부터 시작하였으니

23.04.22 진행한 걸스인텍/원티드의 앞서가는 개발자들의 3가지 비밀을 들으러 다녀왔습니다 🤗소중한 인연도 많이 알게되고 좋은 이야기도 많이 들어 너무 좋았던 경험이여서 공유하고자 합니다!회사가 찾는 개발자 ?좋은 소프트웨어 개발자 소프트웨어 개발자 = 깔끔한 코

리액트 공식문서를 읽는중, ... 스프레드연산자는 얕은복사이다!Note that the ... spread syntax is “shallow”—it only copies things one level deep. This makes it fast, but it also

모달 작업중, background를 클릭하면 closeModal 이 작동하여 모달을 닫아주는 동작이 되도록 하였다.하지만, 원래 생각과는 다르게, 모달내의 클릭이 되어도 모달이 닫혀버리는 현상이 발생하였다.코드를 먼저 보자면?이련 형태인데, 여기서 하위 modal-co

체크 버튼을 클릭시, 모달이 나온다.먼저 모달컴포넌트는 type Variant = "code" | "certification"에 따라 2가지 다른 모달을 보여준다.현재 하고 있는 형태는 인증과 관련된 certification Modal 부분을 구현할 것이다.newDon

이프로젝트는, 일단 todolist의 확장판이라 할 수 있다. 기본적으로 기능을 붙여야한다 생각하였을때, todolist의 crud 가 선행되어야하고, 이후 다른 데이터바인딩이 필요하며, 그 이후 세부적인 다른 멤버를 클릭시 다른 멤버의 데이터가 보여야한다던지, 스케쥴

Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.여기서 수정사항이 생

api axios instance 생성 index.ts 파일 생성 axios 인스턴스 생성 백엔드 접속정보로 create instance intercept if(error){ retrun response.data } throw error export get해오는 f

전체적인 UI 자체가 구획으로 나뉘어져 있다는 생각이 들어, grid layout이 제일 먼저 떠올랐다. 처음 적용해보는 것이라 어려웠지만.... 일단 해보고 수정해야지!처음엔 이렇게 시작했다.이제 각각을 컴포넌트로 수정해주고크게는 container, grid로 감싸주

재사용 가능한 UI component를 만들어보자!처음 UI대로 생각을 해보자면, outlined, fill, text 이렇게 3가지의 유형이 필요할 것 같았다.각각의 size와 color는 optional로!💡 return 문이 많은것은 전형적인 안티패턴이다……그렇

왜 이프로젝트에서 SCSS를 사용하나?그전까지 프로젝트를 진행하면서는 styled-components를 많이 사용하였다. 많이 사용했던 이유 또한 제일 처음 배울 때에 styled-components로 작업을 많이해서 익숙했었다. 하지만 익숙함에서 벗어나 이번 프로젝

UI퍼블리싱 버튼 컴포넌트 2시간텍스트 컴포넌트 2시간 //월home 페이지 레이아웃 2시간 입력 폼 4시간 - 입장코드입력폼, todo 입력폼, todo인증 입력폼 // 화studyroom 페이지 레이아웃 - 8시간 PC + mobile //수스터디 멤버 컴포넌