토이프로젝트

이번에 토이 프로젝트를 진행하며 드롭다운을 구현하던 도중드롭다운 메뉴 외부를 클릭하면 어떻게 드롭다운을 닫을지 고민하다가 작성하게 되었다!useRef를 이용해서 DropdownContainer라는 div 엘리먼트에 접근.document에 onCheckClickOutsi

지난 프로젝트 때 멘토님이 언급해주셨던 상태관리 라이브러리인 Recoil을 사용해보려고 한다!Redux 보다 훨씬 간결하고 사용하기 쉽다고 하셔서 이번 토이 프로젝트 때 적용하고자 한다.기존에 많은 사람들이 사용중인 상태관리 라이브러리 Redux, MobX는 그저 단순

<textarea>는 <input type="text">와 달리 여러 줄을 입력할 수 있지만, 줄바꿈에 따라 입력 칸 높이가 자동으로 조절되지는 않는다. 기본적으로는 내용을 두 줄 이상 입력하면 한 줄 높이의 칸에 스크롤이 생긴다. 내가 원하는 것은 두 줄

지난번 프로젝트에서 로그인을 하면 서버에서 액세스토큰만 발급해주어서 너무 아쉬웠다.감사하게도 다른 백엔드 팀원분이 사이드 프로젝트를 같이 진행해 주셔서 좀 더 제대로된 로그인 인증 처리를 하려고 한다!로그인에 JWT 방식을 사용할 것이다.JWT는 인증에 필요한 정보를

시작하며 이 시리즈의 글들은 지난번 프로젝트에 아쉬운 부분을 위해 진행한 토이 프로젝트이다! 지난번 소셜로그인 기능을 구현하지 못했던 것에 대해 미련이 남아 카카오 로그인을 통해 OAuth를 통한 로그인 방식을 시도해 보았다! 카카오 로그인 공식 문서 내 어플리케

Axios 라이브러리 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 이미 자바스크립트에는 fetch api가 있

작성중..

토이프로젝트를 진행하며 기본 textarea가 아닌 quill을 사용 해보게 되었다!quill은 rich text editor의 일종으로 마이크로소프트 등의 기업에서 후원하고 있는 텍스트 에디터이다.설치npm install react-quill아래에서 만든 Editor

토이 프로젝트를 진행해던 중 HTMLElement의 스크롤 된 총 높이를 알고 싶었다!어떻게 구하면 될 것인가?각각의 css는 위와 같다.outer는 400400inner 는 400800 으로자식 요소가 부모 요소보다 높이가 더 큰 상황이다.이때 부모 요소인 outer

지난 번 프로젝트 때 포스트 목록을 불러올 때 로딩 상태를 스피너로 구현 했었다.하지만!!!뭔가 어색한 느낌이 들었다.그래서 이번에는 대중적으로 많이 사용하는 스켈레톤 스크린이라는 로딩 방식을 사용해보고자 한다!스켈레톤 스크린은 이름에서 유추할 수 있듯이 화면의 뼈대와

토이 프로젝트를 진행하던 도중 모달에 fade-in / out 을 적용하려고 했는데 transition 이 작동하지 않아서 왜그럴까 생각하며 작성하게 되었다!코드를 살펴보자!난 현재 아래와 같이 조건부 렌더링을 하거나 modalOpen 이라는 state가 ture일 때

모달을 구현했는데 모달 외부 스크롤이 되어 불편했다!그래서 모달이 띄워져있으면 외부스크롤을 막아보려고 작성했다!(참고로 모달창 외부 클릭시 닫기 코드도 포함되어있다. )(이해하기 힘들다면 여기를 확인해 주시면 감사하겠습니다 😄)modal이 떠 있을 땐 화면 스크롤이

시작하며 토이프로젝트에서 회원가입 기능과 회원 정보 수정 기능을 만들고 있었다. 위와 같이 FormData 형식으로 각종 회원 정보와 이미지 파일을 서버에 넘겨줘야 했다. input type="file" 을 통한 파일 업로드를 받아 이미지를 넘겨주거나 asset