일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- aws
- 디렉토리이동
- 인프라
- 쿠버네티스
- react
- Atomic Design 패턴으로 페이지 만들기
- 도커
- 캐시
- methodreference
- redis
- GHCR
- Atomic Design
- 배포자동화
- docker
- 배포
- 스타일 컴포넌트
- Kubernetes
- 리액트
- Infra
- yarn-berry
- 예제
- styled-components
- git-hooks
- 롱 폴링
- 소켓IO
- 개발
- backend
- 자동화
- 백엔드
- Today
- Total
목록react (2)
SLASH 기술 블로그
이번에는 Next JS로 웹사이트 만들기에 대해서 시리즈 형태로 글을 써보려고한다. 해보고 괜찮다고 판단되면 계속 해볼 예정이다. SPA의 큰 문제 React로 개발을 하다 보면 하나의 큰 문제와 직면하게된다. 그것은 바로 검색엔진 최적화이다. 각 브라우저 마다 검색엔진이 존재 하는데, 검색엔진은 검색 결과를 보여주기 위해 자료를 수집하고 내부적으로 순위를 매기는 작업을 한다. 검색 결과 상위에 노출이 되려면 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 개발 해야한다. 하지만 React로 개발을 하게 되면 자연스럽게 SPA (Single Page Application)으로 개발을 하게 된다. 이렇게 되면 개발중인 웹 페이지에 메타 태그들을 다이나믹하게 변경 하기 어려워진다. 검색엔진..
styled-component란 + 개인적인 생각이라는 글에서 나는 styled-component가 react에서 스타일을 다룰 때 좋은 것 같다고 했다. 이번 글에서는 나는 어떻게 코드를 작성하는지 보여주려고 한다. styled-component 사용법 보통 여러 styled-component 예제들은 상태의 따른 스타일 변경을 Props를 통해 아래와 같이 작성 할 것이다. 예제1. import React from 'react' import styled from 'styled-components' const Box = styled.div` ${(props) => props.hide && `display: none;`} ` const Example1 = () => { const [hide, setHid..