https://taejinii.tistory.com/65 React - 리액트 달력(Calender) 구현하기 with "date-fns" 위 사진은 현재 진행중인 사이드 프로젝트의 디자인시스템 입니다. 위 사진은 디자인 시스템에 있는 datepicker 가 사용되고있는 디자인 시안입니다. 이제 해당 캘린더를 캘린더 라이브러리 없이 taejinii.tistory.com 컴포넌트가 짤리는 문제 발견 해당 달력을 캘린더 라이브러리 없이 직접 구현을 했었습니다. 듀얼모니터로 작업을 했었는데 듀얼모니터는 화면이 커서 문제가 없었지만 작은 맥북화면으로 옮겨보니 캘린더의 밑부분이 잘리는 현상이 발생했습니다. 이 UI 문제점은 치명적이기 때문에 바로 수정하는 작업을 진행하였습니다. 개선을 어떻게 하였나? // 기존코..
DatePicker 디자인 위 사진은 현재 진행중인 사이드 프로젝트의 디자인시스템 입니다. 위 사진은 디자인 시스템에 있는 datepicker 가 사용되고있는 디자인 시안입니다. 해당 디자인은 기존에 나와있는 캘린더 라이브로리로 구현하기에 어려움이 있었습니다. 따라서 직접 Datepicer 캘린더를 구현하기로 했습니다. Datepicker 날짜 구하기 먼저 각 날짜와 요일 계산등을 쉽게하도록 도와주는 라이브러리인 date-fns 를 설치해야합니다. yarn add date-fns 1. 캘린더에 그려줄 날짜 계산 커스텀훅 작성하기 커스텀훅으로 작성하는 이유는 첫번째로 해당 데이터의 재사용성 증가,두번째로는 화면을그리는 UI와 데이터를 분리하여 유지보수를 쉽게 할 수 있습니다. import { addDays..
들어가기 현재 진행 중인 사이드 프로젝트 기능 중 오픈채팅방을 구현기능이 있어 WebSocket이란 무엇이고 어떻게 작동하게 되는지에 대하여 기록하기 위한 글입니다. WebSocket 이란? HTTP를 통해 실시간 채팅 서비스를 구현한다면 그에 따른 수많은 요청, 응답이 필요하게 됩니다. 이는 클라이언트 측에서 매우 잦은 요청을 하여 클라이언트 측에 부담이 될 뿐 아니라 이를 처리하는 서버도 부하가 생기게 될 것입니다. 이러한 단점을 보완하기 위해 웹 소켓(Web Socket)이 등장하였습니다.웹 소켓 이란 서버와 사용자 간 연결을 "유지"한 상태로 추가 요청 없이 양방향으로 데이터를 교환할 수 있는 프로토콜 입니다.웹 소켓 연결을 만들 때는 WebSocket 생성자를 이용합니다. 이때 매개변수로 url..
프론트엔드 면접질문 1순위 클로저에 대하여 코드와 함께 알아 보겠습니다. 클로저란 외부 함수 안에 선언되어있는 내부함수가 반환될때 선언되었던 렉시컬스코프를 기억하여 외부함수의 생명주기가 종료되어도 해당환경의 변수에 접근할수 있는것을 말합니다. function 클로저카운터(initialValue=0){ let count = initialValue; return function(){ count++ console.log(count) } } const 카운트증가 = 클로저카운터() function clickHandler(){ 카운트증가() } document.querySelector('button').addEventListener('click',clickHandler) 버튼을 누를때마다 카운트가 증가하는 코드입..
