안녕하세요. 이번 포스팅에서는 진행 중인 트위터 클론 코딩 프로젝트에서 모달 창을 구현하다 애를 먹었던 게 너무 아까워서 구현 방법을 작성해보려 해요 👊 저는 모달창을 구현하기 전에 details태그를 이용하여 서브 메뉴들을 작성했는데 다시 해당 태그를 클릭해야지만 메뉴가 닫히는 게 꼴 보기 싫더라고요..ㅎ 그래서 이것저것 알아봤는데 이렇게 특정 영역 외의 부분을 클릭하면 창이 닫히는 것을 모달 창이라고 하더라고요 react에서 modal라이브러리가 있기는 한데.. 제가 원하는 느낌은 아니라 제가 구현하는 쪽으로 선택했어요 모달 창을 위한 컴포넌트를 만들어서 코드를 작성했고, 구현 페이지에서 컴포넌트를 불러와서 작성했습니다. 먼저 구현된 화면을 보여드릴게요. Modal.js파일을 생성하여 컴포넌트 코드를..

이번 포스팅에서는 간단하게 로그인 회원가입에서 아이디 중복확인을 해주는 기능을 한번 작성해보려 합니다. 저는 서버리스식으로 firebase를 이용해서 작업하고 있어요. 공부하면서 느끼지만 firebase.. 최고입니다.. 저는 displayName (사용자 닉네임)의 중복 확인을 구현했습니다. 먼저 제가 구현한 화면입니다. 입력받은 문자열이 DB에 있는 사용자 정보중에 동일한 displayName이 존재한다면 "이미 다른 사용자가 사용 중입니다."라는 메시지를 띄웁니다. + 무시하고 회원가입 버튼을 누를 경우 "DisplayName을 확인해주세요"라는 error를 띄워줍니다. 코드로 바로 설명하겠습니다. 먼저 동일한 ID가 있는지 확인하는 부분의 코드입니다. const [dpNameCheck, setDp..

데이터 분석 처리 웹사이트 프로젝트에 참여해보면서 데이터 시각화를 위해 d3를 사용해보게 되었어요. 이번 포스팅에서는 csv파일의 내용을 table형식으로 웹에 나타내는 것에 대해 적어보겠습니다 : ) 아래 사이트에서 보시면 다양하고 좀 있어보이는(?) 그래프들과 예시 코드들도 있어서 참고해보시면 좋을 것 같아요. www.d3-graph-gallery.com/ The D3 Graph Gallery – Simple charts made in d3.js The D3 graph gallery displays hundreds of charts made with D3.js, always providing the reproducible code. www.d3-graph-gallery.com 위의 csv파일(exam..