profile
CDD - Coffee Driven Development
post-thumbnail

재사용성을 고려한 UI 컴포넌트

만들어가는 서비스가 커져감에 따라 모든 UI 컴포넌트를 직접 작성하는 것은 상당히 비효율적인 일이고 유지 보수성이 매우 떨어집니다. 가장 우리가 자주 사용하는 button의 예시를 보면 버튼의 목적에 따라 primary, secondary, teritary, dange

6일 전
·
2개의 댓글
·
post-thumbnail

원티드 프리온보딩 챌린지 10월 (CSR / SSR with Next.js)

csr과 ssr은 이름에서 알 수 있듯이 렌더링이 일어나는 위치에 따라 구분할 수 있습니다. 이로 인해 많은 차이점이 생기는데 각각의 개념과 어떤 장단점을 가지고 있는지 자세하게 살펴보겠습니다.csr이란 빈 html와 html에 연결된 자바스크립트 파일을 서버로부터 받

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

React Query 어떻게 사용하는 것이 좋을까?

React query를 프로젝트에 도입하며 사용기와 동작 방식에 대해서 살펴보겠습니다.

2022년 9월 20일
·
0개의 댓글
·
post-thumbnail

Redux toolkit을 이용한 효율적인 모달창 관리

여러 서비스에 modal 창을 기본적으로 사용하게 되는데요, 지금 진행하고 있는 Escapers 프로젝트 규모가 커지면서 모달 창을 사용하는 페이지들이 많아졌습니다. 이 때 모달 창을 유지 관리하기 위해 많은 코드가 중복되고 비슷한 로직들이 반복되었는데요, 이러한 불

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

3. 도커를 이용한 beanstalk 배포하기 with Github Actions

이번 포스팅에서는 지금까지 docker이미지 생성, aws Elastic Beanstalk에 이미지를 업로드한 과정 등을 Github Actions를 이용해 자동화시켜보겠습니다.기존에 Jenkins, Circle ci에서 ci/cd를 제공하는 것과 동일하게 github

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

2. 도커를 이용한 beanstalk 배포하기 with Github Actions

지난 번 포스팅에 이어 이번 포스팅에서는 Docker hub에 올린 이미지를 이용해서 docker-compose.ymal을 작성 후, elastic beanstalk에 올려보겠습니다!docker 실행환경을 정의하여 어플리케이션을 생성, 시작할 수 있는 서비스입니다. 멀

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

1. 도커를 이용한 beanstalk 배포하기 with Github Actions

백엔드, 프론트엔드 영역에 관계없이 운영툴들에 대한 지식과 이해가 필요해짐에 따라서, 이번 시리즈에서는 도커를 통해서 aws beanstalk에 배포 후, 이를 github Actions을 통해 자동화하는 과정을 알아보겠습니다. 이러한 Devops 툴들에 대해서 유용

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

React Query를 이용해서 데이터 필터링하기

진행하고 있는 프로젝트에서 React Query를 사용하고 있는데 데이터를 어떻게 필터링을 적용했는지 이번 포스팅을 통해서 공유하려 합니다.🙌React query document에서는 데이터 fetching, caching, synchronizing and updat

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

[React] Immutability

React는 Rerender 과정에서 현재의 props, state와 nextProps, nextState 를 비교할 때, 얕은 비교(shallow comparison)에 의존한다. 따라서, state를 변경할때 불변성을 지켜주는 것이 성능 뿐만 아니라 에러 방지에도

2022년 3월 29일
·
0개의 댓글
·
post-thumbnail

[React] Reconciliation와 key

React를 이루는 근간에는 Virtual DOM이 있다. React는 "어떻게 웹이 바뀌는지" 보다 "웹이 어떤 모습이여야 하는지" 선언적 방식을 제공하고 있다. 따라서, 웹을 변경할때 이전 버전과의 비교를 통해 재조정(Reconciliation)하는데, 가장 빠르다

2022년 3월 28일
·
0개의 댓글
·

[오브젝트] 유연한 설계

확장 가능하고 변화에 유연한 설계를 위해 확장에 열려 있어야하고, 수정에 대해서 닫혀 있어야 한다.이를 위해서는 구현에 의존하지 않고, 역할(인터페이스)에 의존해야 한다. 즉, 런타임 의존성을 확장할 수 있으면서 컴파일 타임의 의존성은 유지해야 한다. 이는 추상화에 의

2022년 1월 27일
·
0개의 댓글
·

[오브젝트] 메세지와 인터페이스

앞선 장에서 역할과 객체에 대해서 자세하게 살펴보았다. 메세지를 호출할때, 적합한 역할을 먼저 찾고, 역할에 해당하는 객체를 찾았다. 이와 비슷하게 책임에 대해서도 메세지 인터페이스( 오퍼레이션 )와 런타임에 결정되는 메서드로 나눌 수 있다. 추상화 된 관점에서 메세지

2022년 1월 17일
·
0개의 댓글
·

[오브젝트] 역할, 책임, 협력

2장에서 저자는 객체지향 관점에서 상속보다 합성이 더 나은 선택이라고 하고 있다. 이것은 자명해보이는데, 예를 들어, 2장에서 살펴보았던 Movie를 PercentDiscountMovie와 AmountDiscountMovie로 상속하여 구현한다면 아래와 같다.하지만,

2022년 1월 3일
·
0개의 댓글
·

[오브젝트] 2장 객체지향 프로그래밍

객체 지향의 본질은 단순히 클래스가 아닌 객체에 초점을 맞추어야 한다. 실제 비즈니스가 어떤 객체가 필요한지, 그 객체가 어떤 상태와 행동을 가져야 하는지 정의하는 것이 먼저다.객체는 독립적인 존재가 아닌 협력하는 공동체의 일원이다. 객체는 메세지를 통해 다른 객체와

2021년 12월 30일
·
0개의 댓글
·

[오브젝트] 1장 객체, 설계

제대로 실행되어야 함변경이 용이이해하기 쉬워야함위의 코드는 실행이 가능하지만, Theater는 TicketSeller와 Audience에 강하게 의존하고 있어 변경이 취약하고 유지보수를 힘들게 만든다. 또, 개발자는 기억력을 자신의 훌륭한 기억력을 뽐내는 직업이 아니다

2021년 12월 26일
·
0개의 댓글
·
post-thumbnail

알고리즘 -Queue

Queue는 stack 과 다르게 FIFO 방식으로 동작합니다. 아래 그림에서 볼 수 있듯이 가장 처음에 들어간 요소가 가장 처음으로 나오게 됩니다.단독으로 Queue 문제가 나오는 경우는 stack 보다 적지만 대표적으로 bfs에서 자주 활용되니 원리를 잘 알아놓는

2021년 10월 12일
·
0개의 댓글
·
post-thumbnail

Stack 스택

스택은 기본 자료구조 중 하나로 First in, Last out 방식으로 동작합니다. 즉, 가장 먼저 들어간 원소가 가장 마지막에 나오게 됩니다.위의 이미지와 같은 방식으로 동작하는데, 맨 처음 빈 list에서 push 3, push 7, push 6을 하면 3 위에

2021년 10월 5일
·
0개의 댓글
·
post-thumbnail

Spring security - csrf란?

모든 코드는 github에 있습니다.최근에 Spring security를 한창 공부하고 있는데 (조만간 블로그에 security 관련 글이 여러개 올라갈것 같다) 한 가지 궁금하게 한 코드가 있었다.http.csrf().disable()에서 csrf은 무엇이고, dis

2021년 9월 23일
·
0개의 댓글
·
post-thumbnail

Spring devtools을 이용한 live-reloading

spring 으로 개발하시는 많은 분들이 devtools를 이용해서 편리하게 개발하고 계실텐데 devtools 설정이 기존과 달라 글을 작성합니다. (바뀐 설정만 궁금하신 분들은 2번 항목을 바로 참조하면 됩니다.) 1\. 이 사용하고 있는 빌드 도구에 맞게 devto

2021년 9월 7일
·
0개의 댓글
·

플로이드 와샬

내일이 벌써 학과 알고리즘 대회여서 잠시 우선순위가 밀렸던 알고리즘을 다시 보고 있으니 벌써 망각곡선이 도졌나보다.. 내 망각곡선은 남들보다 가파른듯..^오늘 정리할 알고리즘은 플로이드 와샬 알고리즘이다. 플로이드 와샬 알고리즘은 3중 for문으로 구현하는 알고리즘으로

2021년 9월 2일
·
0개의 댓글
·