[React] CSS Gallery 의 React화 일지 - 4 (06.05 ~ 06.10)

https://css-gallery-project.vercel.app/

• 하루에 하나씩 해보려고 하다보니 36개 정도의 css를 만들어내고 있는 모습을 보니 뿌듯하기도 하고 아직 이거밖에 안되었나 싶기도하다..
• 요즘은 노마드코더 React 챌린지를 하고있다보니 시간이 매우 부족하여 CSS Gallery 작성 하면서 써보고 싶은 기술을 파고들지 못하고 있음... redux나 context 사용해서 데이터를 관리해보는 것이 현재 목표

 

작업 순서

1. 카페 도착

2. gallery, db 파일 오픈

3. 새롭게 만들어낼 css 브랜치 생성

4. 작업 완료 후 gif 촬영

5. gif를 db에 복사 및 json 파일 수정

6. main 으로 checkout 하고 pull 받은 후 Readme 수정

 

 

2022-06-06

• styled components 내부에서는 그냥 url + 링크를 이용하면 안되는 현상
• img 태그 내에서 style={{}} 을 사용해도 안되는 현상
• 2가지 문제가 있어서 3D Card 효과의 이미지가 정상적으로 출력되지 않았고
• 해당 문제를 해결하기위해 이미지 자체를 import 해온 뒤 
• styled components img 부분 url(${})로 해결
  
  

2022-06-09

• 새롭게 작성한 basket ball CSS를 styled components를 최대한 활용해보는 방법으로
• 각 컴포넌트 별 작성을 하여 class Name을 제외해보았고
• 애니메이션을 @keyframes 로 작성하는 것이 아닌 styled components keyframes을 사용하는 방식으로 제작을 해보았음

import styled, { keyframes } from 'styled-components'

const bounce = keyframes`
	100% {
		transform: translate3d(0, 100px, 0)
		scale3d(1.05, 0.95, 1);
	}
`

function EffectBasketBall() {
	return(
			<BasketContainer>
				<BasketBall />
				<Shadow />
			</BasketContainer>
	)
}

export default EffectBasketBall;

 

2022-06-10

• 툴팁을 제작하며 styled-components 사용방법에 점점 익숙해지는 중
• 다양한 선택자를 사용해보고 있음

 

 

다음 목표

노마드 React JS 마스터 클래스 챌린지가 끝나면 React에 대한 이해도가 올라갈테니

CSS Gallery를 좀 더 멋지게 꾸미고 다크모드도 만들고.. Redux 사용해서 데이터 관리도 좀 더 용이하게 하고싶다