[react-datepicker] datepicker 커스텀하기 (+ timepicker)

서론회사 프로젝트에서 datepicker가 필요했다. 라이브러리를 찾다가 커스텀하기에 용이해 보였던 react datepicker를 사용했다. 혼자 해보고 싶다면 다음 링크의 예제를 참고해서 해도 충분히 할 수 있을 것이다.https://reactdatepicker.com/목표형태가 일그러지지 않을 것날짜 범위에서 앞의 날짜보다 뒤의 날짜가 앞서지 않을 것'이전'의 범위를 할 경우엔 뒤의 날짜에서 오늘 이후의 날짜를 선택할 수 없을 것'이후'의 범위를 할 경우엔 앞의 날짜에서 오늘 이전의 날짜를 선택할 수 없을 것월, 년도를 선택할 수 있어야 할 것구현기본 Datepicker의 모습은 다음과 같다.완성된 모습은 다음과 같다. (혹시 검색을 할 때 나처럼 이미지를 보고 내가 구현하고자 하는 것과 유사한지 ..

• format_list_bulleted L/Javascript
• · 2024. 7. 18.
• textsms

[toast-ui eidtor/React/Typescript] toast-ui eidtor 커스텀하기 (+ 이미지 저장, youtube/vimeo 링크 변환)

🤔 서론회사 프로젝트에서 사용할 에디터가 필요했다. 이전에 CK에디터를 사용해본 적이 있는데, 이상하게도 버전 문제인지 CK에디터가 작동하지 않았고, 차선책으로 quill을 사용해봤으나 구현 후 빌드를 해보니 import에러가 발생해 사용할 수 없었다. 그래서 최종적으로는 toast-ui editor를 사용했고, 직접 툴바의 아이템을 자유롭게 커스텀할 수 있는 만큼 없는 기능이 많아 고생을 했기에 이 과정을 글로 남긴다.🥅 목표이미지 저장, youtube/viemo 노출(iframe)이 가능한 toast-ui editor로 커스텀하기👩🏻‍💻 구현* {{}} 이렇게 감싼 부분은 직접 넣어야 한다.결과전체 코드(에디터)import React, { useEffect, useRef, useState }..

• format_list_bulleted L/Javascript
• · 2024. 7. 18.
• textsms

어느 프론트엔드 개발자의 수습이 끝난 후의 회고

안주하지 말고 성장하기올해 1월부터 시작해서 벌써 입사한지 5개월이 다 되어간다. 수습기간은 한참 전에 지났지만 느꼈던 바를 회고로 작성한다.#퍼블리싱과의 사투프론트엔드 개발자로서 퍼블리싱을 못하진 않지만 자신있는 편은 아니었다. 퍼블리셔가 있는 회사도 많으니 퍼블리싱을 많이 할 일은 없겠지하며 안일하게 생각했었다. 기본적으로 디자인을 옮기는 건 어렵지 않았지만 문제는 반응형이었다. (몇 년전까지만 해도 반응형이 취준 때 프론트엔드 개발자의 필수 소양은 아니었던 것 같은데 이젠 필수 소양이 된 것 같다.) 반응형 디자인을 한 번도 해본 적 없고 media query가 뭔지 정도 알았던 내가 웹앱을 만들게 되면서 퍼블리싱과의 사투가 시작되었다.그저 피그마의 코드를 붙여넣기에는 부족했고, 구조에 대해 미리 ..

• format_list_bulleted 회고 및 다짐
• · 2024. 7. 18.
• textsms

[Junction Asia 2023] 3일만에 서비스 배포하기(완) + JAKA 트랙 3rd winner

신청일정이 정리가 되고 이것저것 알아보던 중 내 눈에 들어온 정션! 해커톤은 여러번 나가봤지만 오프라인, 무박 해커톤은 해본 적이 없었기에 바로 신청했다. 사이트에서 본 모습이 내가 상상했던 해커톤의 모습과 비슷해서 설렜다.신청을 하고 얼마 기다리니까 결과가 나왔다! 바로 KTX를 예매하고, 디스코드에 팀원을 구한다는 글을 올렸다. 팀 빌딩글을 올리자마자 연락이 왔고, 그렇게 수월하게 팀에 들어가나 싶었지만 공지를 잘못 이해하셔서 무산이 됐다. 그렇게 며칠이 지나고 프론트엔드가 부족했다는 작년 후기와는 다르게 올라오는 글이 다 프론트엔드 개발자였다. 이러다가 팀을 못 구하겠다는 생각에 프론트엔드 개발자를 구한다는 글이 올라오자마자 먼저 연락을 했다. 그렇게 5명의 팀원이 완성됐다!그렇게 또 수월하게 진행..

• format_list_bulleted 회고 및 다짐
• · 2024. 7. 17.
• textsms

[SW사관학교 정글 6기] 수료식을 마치고

정글 끝 🌴초안 발표가 끝나고 블로그 쓸 시간도 없이 수료식 후기를 쓰게 됐다. 정말 몰아치는 한 주였다. 나만무 시작하고 좀 루즈하다 싶은 나날들이 종종 이어졌는데 마지막 주는 정말 쏜살같이 지나갔다. 마무리 발표가 끝나고 눈 감았다 뜨니까 일주일이 지나 리허설이 되었다. 리허설이 끝나고 순식간에 3일이 지나 발표를 했다. 당일도 정말 빠르게 흘러 나름 길고 길던 5개월의 끝이 보이기 시작했다.#insightLINK정말 애정했던 프로젝트 insightLINK. 잘 흘러가다가 리허설을 앞두고 전날에 갑자기 수많은 문제가 발생하기 시작했다. 크게는 두 가지였다.DB가 망가졌다... 급하게 추가한 테이블 때문에 테이블들이 꼬여서 여러 기능이 우리가 원하는 대로 작동하지 않았다.갑자기 그래프 관련 에러가 계..

• format_list_bulleted 회고 및 다짐
• · 2024. 7. 17.
• textsms

TailwindCSS 시작하기

서론프로젝트를 진행하기 전 어떤 스택을 사용할지 정하는데 팀원이 TailwindCSS를 사용하자고 했다. Bootstrap과 같이 사전 정의된 컴포넌트가 있어서 커스텀하는 게 더 불편한 CSS 프레임워크를 생각했기에 처음에는 무한히 길어지는 className이 불편하다고 느꼈지만 프로젝트가 끝난 지금은 Styled-Components가 더 번거롭게 느껴진다.TailwindCSS란 무엇인가?Tailwind CSS는 사용자 정의 인터페이스를 신속하게 구축하기 위한 유틸리티 기반의 CSS 프레임워크다. 맞춤 설정 가능한 저수준의 CSS 프레임워크로, 원하는 대로 디자인을 구축할 수 있는 모든 구성 요소를 제공한다.위의 gif를 보면 어떻게 사용하는지 간단하게 알 수 있다.Tailwind CSS는 기존의 CSS..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms

[React/CSS] 모달 창 바깥을 클릭했을 때 모달창 꺼지게 하기

🤔 서론보통 모바일에서 많이 쓰이지만 한 번도 구현해본적 없는 기능을 구현해보려 했다. 항상 모달창에 x버튼을 두고 클릭하면 꺼지게 했는데 모바일에서 사용할 것을 대비하여 버튼 없이 기능이 작동하게 하려 한다.🥅 목표모달 창 바깥 배경을 클릭했을 때 모달 창 꺼지기👩🏻‍💻 구현전체 코드// 모달 창import React from "react";import { FiThumbsDown, FiThumbsUp } from "react-icons/fi";interface propsType { modalRef: React.ForwardedRef; modalOutsideClicked: (e: any) => void; cardId?: string; userId?: string;}export defaul..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms

[React/CSS] instagram 스토리처럼 드래그로 요소 넘기기

🤔 서론현재 나만무 프로젝트를 진행 중인데, 최근 게시물을 어떻게 보여줄 수 있을까 고민을 하다가 인스타그램의 스토리 기능이 생각났고 해당 부분의 인터랙션을 차용하려 한다.🥅 목표인스타그램 상단에는 최근 스토리를 올린 사람의 프로필이 뜬다. 터치해서 좌우를 자유롭게 움직일 수 있다.(모바일 기준) 해당 인터랙션처럼 드래그로 프로필을 움직이는 것을 구현하려 했다.👩🏻‍💻 구현전체 코드const getFriends = async () => { ... const [isMouseDown, setIsMouseDown] = useState(false); const [startX, setStartX] = useState(0); const [scrollLeft, setScrollLeft] = useSt..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms