개요 세가지 개념을 간단하게만 알고 있었는데, 실무에서 로컬스토리지와 쿠키를 이용해서 레이어 팝업등을 구현하다 보니 로컬스토리지, 세션스토리지, 쿠키 의 개념과 차이점에 대해 자세히 알아볼 필요성을 느껴 제대로 정리해보려고 한다. 쿠키, 로컬스토리지, 세션스토리지

React Hook의 종류를 알아보고 상황에 따라 어떤 Hook을 효율적으로 사용할 수 있을지, 사용시 주의할 점에 대해서도 알아보려 한다. ✅ React Hooks 란? Hooks는 React 16.8버전부터 도입된 개념으로, 클래스 컴포넌트에서만 가능했던

FOUC(Flash of Unstyled Content) FOUC란, 웹페이지에서 CSS가 로딩되기 전에 페이지 일부 또는 전체가 스타일 없이 표시되는 현상을 말한다. CSS가 적용되지 않아 일시적으로 컨텐츠가 깜빡이거나 보이지 않을 수 있으며, UX적으로 부정적인

회사 홈페이지를 개발하던 중, 레이아웃 시프트 문제를 겪게 되었다.레이아웃 시프트란 늦게 로드되는 컨텐츠들로 인해, 먼저 로딩된 컨텐츠가 밀려나는 현상을 의미한다.만약 이미지 뒤에 테이블이 나와야 할 경우, 이미지가 늦게 로드됨으로 인해 테이블이 먼저 보였다가 밀려나는

회사 랜딩페이지 개발 도중, 아래 사진과 같은 배경이 투명한 이미지를 위에 띄워놓고 뒤에서 이미지가 롤링되는 슬라이드(캐러셀)를 구현해야 했는데, (이미지는 가렸다)처음에는 이렇게 생각을 했다.일단 슬라이드가 태블릿의 앞에 있어야 유저가 직접 스와이프가 가능하다! (슬

사용자 입력 폼을 만들던중,자동으로 하이픈을 생성해주는 함수를 만들어서 입력을 받는게 나을 것 같아서 만들어봤다.확실히 UX적으로도, 입력값을 받아올때에도 훨씬 편해서 좋았음!e.target.value.replace(/-/g, '') 먼저 입력된 전화번호에서 하이픈을

회사에서 세가지 옵션 그룹이 존재하고, 하나의 옵션을 선택하면 나머지 active가 false로 변하는 버튼 그룹을 만들었다.옵션을 클릭하면 실행될 onClick 함수를 만들다가,keyof typeof 를 함께 사용해서 코드를 작성했던게 있어서 정확한 사용법과 의미를

공부 겸 개인프로젝트를 진행하면서, 간단한 컴포넌트를 만들더라도 좋은 컴포넌트를 만들고 싶었다.혼자 진행하는 프로젝트는 특히나 시니어 개발자나 멘토의 코드리뷰도 받을 수 없기 때문에 스스로 공부하고 찾아서 만들어야했다.그래서 좋은 컴포넌트를 설계하려면 어떤 사항들을 고

좀 더 나은 세상, 봉사활동 플랫폼 github 배포 링크 메인 프로젝트때는 프리때보다 모든걸 더 신경써서 했던 것 같다. 프리 회고때도 썼지만 부족했던 문서화, 소통 등을 개선하려 정말 많이 노력했다. 문서화 및 소통 기획때 나서서 강조했던 부분은 문서화와

React-hook-form React-hook-form 은 기본적으로 비제어 컴포넌트 로 동작한다. 왜 적용시켰는지, 제어 컴포넌트와 비제어 컴포넌트 방식에는 어떤 차이점이 있는지 정리해보려고 한다. 제어 컴포넌트 > 우리는 React state를 “신뢰 가능한

얼마전 링크복사 기능 구현 글을 썼었는데, 최종 제출일 하루 전날 저녁 배포된 페이지에서 링크복사 기능이 자꾸 실패한다는 것을 알게 되었다.알고보니 Clipboard API는 https 와 localhost 환경에서만 동작한다고 한다. 그것도 모르고 맘놓고 있다가, 테

팀원 한분은 봉사 취소기능 을, 다른 한분은 봉사 신청기능 을 구현하는 도중에 일어난 일이다.만들어진 api로 요청을 보내면 두분 다 똑같은 302 에러가 뜨며 자꾸 카카오 로그인으로 redirect 되는 문제가 발생했다.분명히 headers 에 accessToken을

먼저 s3에 이미지를 업로드하고, 서버의 응답으로 s3 이미지 주소를 받아 그 이미지 주소를 봉사 등록시에 보내기로 했다. 이때 문제점이, 이미지가 업로드 될때마다 s3에 등록되어야 한다는 것과 필드를 작성하는 과정에서 컴포넌트가 리렌더링 되면서 계속 s3에 같은 이

요즘 웹사이트에서 자주 보이는 버튼을 클릭하면 링크가 복사되는 기능을 구현해 보았다. 찾아보니 ClipBoard API(https://w3c.github.io/clipboard-apis/따로 무언갈 설치할 필요도 없이, 위 함수 코드만 작성해주면 끝이다.이제

자식 컴포넌트의 input 값을 입력받아 부모 컴포넌트에서 한번에 서버로 post 요청을 보내려는 과정에서, 자식 컴포넌트 값을 받아오기 위해 props 로 useState 를 넘겨줬다.그런데 넘겨주는 과정에서 { setVolunteerData: Dispatch<

메인프로젝트 진행 도중, 고객센터를 따로 만들고 질문글을 올리고 답변을 기다리는 것보다 카카오톡 톡상담 / 채널톡과 같은 서비스를 이용해보자 해서 계획했던 톡상담 기능을 구현했다.예전에 바닐라 JS 로 테스트를 만들 때 카카오 공유하기 api는 사용해본 적이 있었어서,

프리프로젝트때도 겪었는데, 메인프로젝트 마크업을 하면서도 동일한 문제를 겪으면서 기록하는 글이다.100vw 를 지정하면 이렇게 가로축 스크롤이 생기게 되는 문제 인데 이렇게 해결했다.이렇게 100vw를 지정하고 하단 컨텐츠 부분을 뿌려주는 과정에서 x 축 스크롤이 생기

myOverflow드디어 약 3주만의 프리프로젝트 기간이 끝났다. 부트캠프에서 프리프로젝트는 stackoverflow를 클론하는 방식으로 미리 정해주었지만 우리팀은 협의 끝에 hola 라는 스터디/프로젝트 모집 사이트를 참고해서 클론을 진행했다.아무래도 개발 경험도 부

게시글에 답변을 등록하는 요청을 보내던 중, 새로운 답변을 등록할 경우 새로고침이 되어서 답변이 바로 뜨도록 구현하고 싶은데 새로고침이 될 때 자꾸 에러가 발생하는 문제가 있었다. 에러메세지 e.preventDefault()로 자동 새로고침을 막고 수동으로 새로

S3으로 배포하기 클라이언트 코드는 AWS S3으로, 서버는 EC2로 배포해 보기로 하고, 배포하는 과정에서 만난 에러와 해결 과정에 대해 기록해두고자 한다. S3이란 AWS에서 제공하는 온라인 스토리지 웹 서비스로, 버킷을 생성해 빌드파일을 올려주기만 하면 간편하게