post-thumbnail

중복클릭 방지 로직과 useRef

요가나라 작업중에 글쓰기 버튼을 여러번 눌렀을 때 여러번 게시글이 등록되는 중복 클릭이 발생되는 현상이 있었다. 프론트엔드 개발자분을 통해 버튼을 여러번 눌러도 한 번만 API가 호출될 수 있게 중복 클릭 방지 로직이 필요하단 것을 알았다.사용자의 동작으로(ex.버튼클

2022년 7월 20일
·
0개의 댓글
·

브라우저 저장소

키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회할 수 있다. 쿠키와 웹 스토리지가 있으며, 둘은 거의 비슷한 역할을 하지만 웹 스토리지가 쿠키의 몇 가지 단점을 개선했다.트래픽 비용 절감웹 사이트에서 쿠키를 설정하면 매번 요청 마다 쿠키정보를 포함하여 서버

2022년 7월 19일
·
0개의 댓글
·
post-thumbnail

브라우저의 렌더링 원리

브라우저의 주요 기능은 사용자가 원하는 데이터를 브라우저에 표시하는 것이다. 표시하기 위해 브라우저는 일련의 과정을 거친다.브라우저는 사용자가 원하는 데이터를 서버에 요청하고(HTTP Request) 서버는 브라우저에게 데이터를 보내주고 브라우저는 이를 넘겨받는다. (

2022년 7월 8일
·
0개의 댓글
·
post-thumbnail

CSR(Client Side Rednering) 과 SSR(Server Side Rendering)

CSR과 SSR에 대해 정리하기 전에 SPA와 MPA에 대해 정리가 필요하다. 보통 우리는 웹 어플리케이션을 개발할 때 보통 react, angluar, view 등의 프레임워크를 이용해서 SPA를 개발하게 된다.하나의 페이지로 구성된 웹 어플리케이션이다. 헤더가 고정

2022년 6월 21일
·
0개의 댓글
·
post-thumbnail

[요가나라] 우리지역 요행지 지도 만들기 (2)

마우스를 호버하면 색상이 바뀌는 것까지 적용했다. 이번에는 마우스 호버 시 진행 중인 구인 구직이 몇 건인지 알려줄 차례다. 툴팁을 띄우기 위해 react-tooltip 라이브러리를 설치했다.react-tooltip을 활성화 하기 위해서는 호버된 path에 data-t

2022년 6월 14일
·
0개의 댓글
·
post-thumbnail

[요가나라] 우리지역 요행지 지도 만들기 (1)

요가나라 메인 화면에 시군구 기준 지도를 그리고 해당 시군구에 마우스를 호버하면 그 지역에 해당하는 구인 글과 구직 글이 몇 건 올라왔는지 보여주는 기능을 추가하려고 한다.(출처: react-simple-maps)react-simple-maps, react-datama

2022년 6월 13일
·
0개의 댓글
·
post-thumbnail

FLUX 패턴

redux에 대해 좀 더 공부해보고자 FLUX 패턴을 정리해본다.FLUX 패턴에 대해 정리하기 전에 알아둬야 할 것이 MVC 패턴이다.MVC 패턴에서는 데이터를 가지고 있는 MODEL이 렌더링을 위해 VIEW로 데이터를 보낸다. 실제 서비스를 사용하는 사용자들의 상호작

2022년 6월 13일
·
0개의 댓글
·

[다독다독] Throttling과 Debouncing

연이어 발생하는 이벤트에 의한 리소스 방지를 막기 위한 방법이다. 다독다독에서 무한스크롤을 사용하고 있는데 브라우저에서는 스크롤이 하단에 닿았을 때 한 번만 실행이 됐는데 모바일에선 두 세번씩 호출되는 현상이 발생했다.(1) 스크롤이 바닥에 닿음(2) 파라미터의 pag

2022년 6월 10일
·
0개의 댓글
·
post-thumbnail

[다독다독] fontawesome 리렌더링이 되지 않는 현상

내 서재에서 메뉴를 바꿀 때마다 책의 상단바에 있는 폰트 어썸의 아이콘이 함께 바뀌어야 되는데, 바뀌지 않는 현상이 발생했다. 아이콘을 제외한 나머지 정보들은 메뉴가 바뀔 때마다 함께 정상적으로 바뀌는 걸 보니 svg의 문제로 보인다.전체에서 읽은 책으로 탭을 바꿨지만

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

[다독다독] 평점 추가하기

읽은 책에 한정하여 평점을 매길 수 있도록 만점이 5점짜리인 별점을 추가했다. 초기 state값은 props로 전달한 책과 stars(평점)이 있다면 해당 값을 차용(기존에 추가한 책을 조회하는 경우)없는 경우 false 배열로 초기화(새로 책을 추가하는 경우)클릭한

2022년 6월 7일
·
0개의 댓글
·
post-thumbnail

[다독다독] Redux 적용해보기

사용 이유 요가나라와 개인프로젝트를 진행하면서 props 지옥에 빠졌다. 목표 컴포넌트에서 state를 사용하려면 부모 컴포넌트부터 목표 컴포넌트까지 props를 계속 전달해야하고, 하위 컴포넌트에서 부모 컴포넌트를 조작하려면 부모 컴포넌트에 도달할 때까지 콜백함수를

2022년 6월 6일
·
0개의 댓글
·

[다독다독] 무한 스크롤 구현하기

현재 다독다독의 도서 검색 기능은 API에 파라미터로 책의 개수 받아 일정 개수의 도서만 검색이 가능하기 때문에 책 탐색에 한계가 있다.원하는 책을 찾을 때까지 스크롤을 내리다 뷰포트의 최하단에 닿는 순간 다음 책들을 불러오기 위해 인피니트 스크롤이 필요하다.useEf

2022년 5월 28일
·
0개의 댓글
·
post-thumbnail

[다독다독] Lottie 적용해보기

웹페이지를 좀 더 재미있게 만들기 위해 로티 애니메이션을 추가하기로 했다.https://lottiefiles.com/로티 홈페이지에서 원하는 애니메이션을 json으로 다운로드 받아 프로젝트 폴더에 넣어준다.여러 페이지에서 로티를 사용할 수 있기 때문에 재사용할

2022년 5월 25일
·
0개의 댓글
·
post-thumbnail

[다독다독] react-chartjs-2로 월별 완독 차트 만들기

react-chartjs2로 독서 기록 웹 애플리케이션에 연도-월별로 완독한 책이 몇 권인지 확인할 수 있는 기능을 추가하려고 한다. 몇 월에 몇 권을 읽었는지 나타내기 위해 가시성이 좋은 막대그래프를 사용하기로 했다. react-chartjs-2 공식 홈페이지의 ex

2022년 5월 25일
·
0개의 댓글
·

[다독다독] react-calendar로 달력 만들기

독서 기록 웹 애플리케이션에 책을 완독한 날짜에 하이라이팅이 되는 달력을 추가하려고 한다. 상단 2022년 5월 선택 시 월 선택으로 바뀜마찬가지로 연도 선택 시 일 선택으로 바뀌면서 뎁스가 내려감기본 css import 시 캘린더가 예쁘게 바뀐다추후 css 작업 시

2022년 5월 25일
·
1개의 댓글
·
post-thumbnail

[개인 프로젝트] 독서 기록 웹 애플리케이션

카카오 책 검색 오픈 APIhttps://developers.kakao.com/docs/latest/ko/daum-search/dev-guide!\[](https://velog.velcdn.com/images/kina/post/eb8566b3-8f51

2022년 5월 23일
·
0개의 댓글
·

[그리드 컴포넌트]

데이터를 마음껏 자유자재로 만지고 변경하고 렌더링 하기 위해서 JSON에 대한 완벽한 이해와 핸들링 연습이 필요하다고 느끼고 있다. 그리드 컴포넌트를 만들어 보려고 한다. API를 통해 JSON을 불러와서 열과 행을 가진 테이블로 화면에 뿌리고 검색과

2022년 5월 15일
·
0개의 댓글
·
post-thumbnail

[프로그래머스 과제테스트] 고양이 사진 검색 사이트

시맨틱(symantic)한 코드란 무엇인가? 시맨틱은 '의미의'라는 뜻을 가지고 있는 단어다. 코드에 적용하게 되면 말 그대로 Div 태그를 남발하지 않고 의미있는 코드를 작성하라는 정도로 이해하면 될 것 같다.위의 코드보다 아래의 코드가 무엇을 의미하는지 보다 쉽게

2022년 5월 14일
·
0개의 댓글
·
post-thumbnail

[프로그래머스 과제테스트] 고양이 사진첩 애플리케이션

📷 구현 과정 선행지식 컴포넌트 추상화

2022년 5월 12일
·
0개의 댓글
·