🐶🐾/frontend

[css] height 길이 늘렸을 때, 위쪽 방향으로 늘어나게 하기

문제 막대그래프(?)처럼 위쪽으로 늘어나는 사각형을 만들고자 했는데 height길이를 늘리면 아래 방향으로 늘어나서 위치를 맞추기 쉽지 않았다 (height길이가 props에 따라 달라지게 하는 것을 구현하고 있었음) 내가 체크한 개수만큼 그래프의 길이가 길어져야하기 때문에 기준이 아래쪽이 되어야했음 해결 transform: scaleY(-1); transform-origin: top; 요소의 가장자리를 기준으로 요소를 수직으로 뒤집어 방향을 바꾸면 heigth를 늘렸을때 위쪽으로 늘어나는 것을 확인할 수 있었다.

[react] div 크기 content 길이에 따라 변경

문제 {field} {date} navigate(`/edit/${date}`)} /> 📍 {title} {content} PostConatiner가 하얀색 박스일 때, content의 길이에 따라 세로길이가 길어져야했다. 해결 const textBoxRef = useRef(null); useEffect(() => { if (textBoxRef.current) { const textBoxHeight = textBoxRef.current.clientHeight + 70; const container = document.getElementById("PostsContaioner"); if (container) { container.style.height = `${textBoxHeight}px`; } } }, [..

[redux] react에서 redux-toolkit 사용

개인프로젝트를 진행할 때도 계속 props로 연결-연결해서 넘겨야하는 것에 대해 귀찮음과 .. 그렇게 계속 자식으로 넘기다보니 연관되지 않은 부모 컴포넌트들까지 리랜더링이 되어야하는 것에 대해 문제를 느끼고 있는 와중 생활코딩 리덕스 강의를 통해 새로운 상태 관리 방법을 알게 되고, 이어 리덕스 툴킷까지 알게되었다. redux - js 상태 관리 라이브러리 - store라는 하나뿐인 데이터 공간 - action을 통해서 상태 변경 - 변경은 순수 함수로만 가능 🌟 store 상태가 관리되는 하나의 공간 🌟 action store에 운반할 데이터 🌟 reducer action을 reducer가 받아 store의 상태를 업데이트 🌟 dispatch store의 내장함수 중 하나로 action을 발생시킴 ac..

[styled-components] styled-components 재사용 & props

컴포넌트 확장(재사용)하기 버튼 하나를 만들어서 그 버튼을 재사용해 글자크기가 다른 버튼을 쉽게 만들기 const SimpleBtn = syteld.button` color:white; background-color:green; `; const LargeBtn = styeld(SimpleBtn)` font-size: 50px; `; 괄호 () 안에 넣어줌으로 재사용 가능 LargeBtn은 color, background-color를 상속(?) 받게 됨 Props 에 따라 다른 컴포넌트 만들기 const ReactBtn = styled.button` color: ${(props)=> props.primary? "white" : "black"} `; // 1. Normal // 2. Primary 1은 pr..

[css] cursor 변경

cursor를 내가 원하는 이미지로 변경하기 위해 아래 코드를 넣어줬다 이미지가 로드 되지 않을경우 뒤에 auto로 실행된다 cursor: url("/public/images/cur.png"), auto; ✔️ 이미지 적용이 안될 경우 이미지의 크기가 128px이하여야 적용이 가능하다고 하니까 이거 꼭 확인 ! 경로 확인 ! 나는 이미지 크기 때문에 적용이 안되었었다 😅 💭 만들어진 커서 이용 https://www.cursors-4u.com/cursor/2009/11/11/animated-hello-kitty-wink.html Animated Hello Kitty Wink Cursor Option #1 - Universal CSS/HTML Code This CSS/HTML Code of Animated ..

[css] Animate.css 사용

https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 사이트에서 다양한 애니메이션 효과를 미리 사용해보고 원하는 애니메이션을 내 프로젝트에 적용할 수 있다 ! 설치 npm install animate.css --save 적용 애니메이션 적용을 위한 js 파일에 import 'animate.cs..

[js] localStorage에 저장 & login

localStorage ? - localStorage은 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있다. firebase를 통해 로그인 & 회원가입을 구현하고, 로그인한 사용자 정보를 localStorage에 저장하는 방식을 이용해보았다. 우선 로그인한 사용자 정보를 localStorage에 저장하기 위해서는 localStorage.setItem(key, value)를 이용한다. const handleSubmit = (e) => { e.preventDefault(); signInWithEmailAndPassword(auth, id, password) .then((userCredential) => { const user = userCre..

[html] Open Graph

Open Graph ? - sns를 통해서 사이트가 공유될 때, 사이트에 대한 메타 정보를 보여주기 위한 태그 index.html 이외 다른 property는 https://ogp.me/ 에서 확인 가능 +) 카카오에서 바로 변경이 안될 경우 카카오 개발자 사이트 > 도구 > 디버거 도구 > 공유 디버거 > URL 입력을 통해 캐시 삭제

[react] Firebase로 프로젝트 배포

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 프로젝트 생성 후 옆 카테고리에서 빌드 > 호스팅 클릭 1. Firebase CLI 설치 $ npm install -g firebase-tools 터미널에서 실행 2. 프로젝트 초기화 $ firebase login $ firebase init vscode에서 실행 (터미널에서 실행시 root폴더까지 가서 실행) firebase init (반드시 root 폴더에..