일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 백엔드
- deployment
- 자동화
- 리액트
- backend
- 디렉토리이동
- styled-components
- Atomic Design 패턴으로 페이지 만들기
- react
- Kubernetes
- docker
- aws
- 스타일 컴포넌트
- 배포자동화
- 캐시
- 도커
- redis
- 인프라
- 예제
- yarn-berry
- methodreference
- Atomic Design
- GHCR
- Infra
- 배포
- 쿠버네티스
- 롱 폴링
- git-hooks
- 개발
- 소켓IO
- Today
- Total
목록전체 글 (26)
SLASH 기술 블로그
Atomic Design이란 Atomic Design이란 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성하는 방식을 말한다. 이러한 방식은 컴포넌트 단위로 개발하는 React프로젝트와 잘 어울리는데 어떻게 구성하는 디자인 패턴인지 같이 알아보자. 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성한다는 말은 화학시간에 배웠던 원자 구조와 연관이 있다. 모든 물체는 원자로 구성되어 있다. 이러한 원자들이 결합하여 분자를 형성하고 차례대로 더 복잡한 유기체로 결합하여 하나의 물질을 구성하게 된다. 이 관점으로 하나의 페이지도 마찬가지로 여러가지 작은 컴포넌트들이 존재하고 컴포넌트들끼리 결합하여 하나의 페이지를 구성하게 된다는 것이 Atomic Design이 ..
요즘 백엔드 개발을 한다면 피해갈 수 없는 주제가 바로 도커와 쿠버네티스일 것이다. 보통 어떤 기술에는 장점과 단점이 혼재하기 마련인데, 도커와 쿠버네티스가 제공하는 강력한 기능들은 그 단점이 무색해질 정도로 좋아서, 서버 개발의 패러다임을 완전히 바꿔버렸다. 내가 처음 일을 시작한 2017년만 해도, 회사에서 도커에 대해 아시는 분들이 적었고, 쿠버네티스는 당연히 모르는 분위기였는데, 몇 년 사이 도커를 쓰지 않고 배포하는 경우를 찾아보기 힘들 정도로 널리 퍼지고 대중화가 되었다. (물론 내가 일을 시작한 회사가 새로운 기술에 둔감했던 것도 한 몫 했던 것 같다) 이번 글에서는 쿠버네티스가 다루는 컨테이너에 대한 이해를 위해 도커를 간단히 살펴보고, 쿠버네티스의 기본적인 요소들 - Pod, Replic..
목적 이글은 웹에서 자주쓰이는 레이아웃을 Display Flex가지고 정리 해놓은 글이다. - 가로 정렬 - 세로 정렬 - 자동 줄바꿈 정렬 - 일정 크기로 줄어듬 - 응용 레이아웃1 - 응용 레이아웃2 가로 정렬 1 2 3 결과 화면 세로 정렬 1 2 3 결과 화면 자동 줄바꿈 정렬 1 2 3 결과 화면 일정 크기로 줄어듬 1 2 3 결과 화면 응용 레이아웃 응용 레이아웃은 화면 사이즈에 따라 레이아웃이 달라지거나 조금 더 복잡한 레이아웃이다. 응용 레이아웃1 1 2 3 4 5 6 결과 화면 응용 레이아웃2 1 2 3 4 5 6 결과 화면 @JJoGeon
AWS EC2에서는 다양한 인스턴스 타입을 제공한다. 가장 기본적인 t로 시작하는 범용 인스턴스부터, R로 시작하는 메모리 최적화 인스턴스, 컴퓨팅에 최적화된 C로 시작하는 인스턴스들까지, 처음 인스턴스를 띄울 때는 이렇게 다양한 타입 중에 어떤 것을 선택해야 하는지도 꽤나 고민이 될 것이다. 처음 서비스를 만들고 인프라를 만지면서 했던 실수 중 하나는 인스턴스의 특성을 제대로 고려하지 않고 vCPU, 메모리만 보고 인스턴스를 골랐던 것. 같은 스펙을 가지고 있더라도, 인스턴스의 특성에 따라서 특화된 기능이나 비용은 천차만별이다. 오늘은 다양한 인스턴스 타입을 파헤쳐보고, 상황에 따라 어떤 인스턴스를 선택하는 게 좋을지 알아보도록 하자. 뭘 해야할지 모르겠을 때는? 범용 인스턴스 처음 인스턴스를 만들 때..
시작하기 Styled Component는 CSS-in-JS를 선호하는 나에게 있어 굉장히 좋은 라이브러리이다. 또한 누군가가 React 프로젝트에서 Style을 선언하는 방식에 대해 고민을 하고 있다면 Styled Component를 소개 해 줄 것이다. 이번 글에서는 Styled Component가 어떤 원리로 CSS-in-JS를 구현 할 수 있는지 간단하게 구현해보면서 이해해보자. CSS-in-JS 핵심 문법 Styled-Components는 styled.{tagName}`` 이런식으로 선언하여 사용하게된다. 이때 ``안에다가 CSS코드를 작성하게 되는데 ``안에 있는 값을 파싱할 수 있게 해주는 것이 Tagged Template Literals 이다. Tagged Template Literals 이..