post-thumbnail

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

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

4일 전
·
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일
·
0개의 댓글
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개의 댓글
post-thumbnail

[우아한 테크캠프] 1차 코딩테스트 후기

합격했다!문제는 총 네 문제였는데 1번과 2번은 레벨 1~1.5 단계 정도로 느껴졌고 3번과 4번은 레벨 2~3정도였던 것 같다.부랴부랴 시작한 탓에 준비 기간은 약 일주일 정도였고 생애 첫 코딩테스트라 긴장을 많이 했는데 합격해서 기분이 아주 좋다.일주일 동안 프로그

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

우아한 테크캠프

포트폴리오와 취업 준비로 정신없던 와중에 우아한 테크캠프가 열린다는 소식을 조금 늦게 접했다.4월 28일부터 모집한다고 하는데 문제는 코딩테스트가 무조건 '자바스크립트'로 봐야한다는 점이었다. 기존 데이터 분석 회사에서 일하면서 파이썬을 주로 사용하고 있어 파이썬 패키

2022년 4월 22일
·
0개의 댓글
post-thumbnail

[개인 프로젝트] 게시판 만들기 (6) - 댓글 달기

오늘은 댓글쪽까지 마무리했다. 지난 글에서 댓글 테이블을 게시물 테이블과 분리할지, 아니면 게시물 테이블 내에 삽입할지를 고민했는데 분리하기로 결정했다.지금이야 혼자 사용하고 있는 작은 프로젝트라 상관은 없지만 실제 서비스에서 게시글 테이블 내에 댓글이 있는 경우 댓글

2022년 4월 19일
·
0개의 댓글