전체 글

[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..

[pocketBase] pocketBase 사용

유튜브 보다가 "단 하나의 파일로 백엔드 구축"이라는 타이틀로 pocketBase에 대한 내용이 올라와서 보니까 흥미가 생겨서 직접 사용해보기로 결정 ! 혼자 리액트 프로젝트 만들때 사용하기 쉬울 것 같았다 사용 전 다운로드 pocketBase Docs에 가서 운영체제에 맞춰 다운로드 다운받은 파일에서 아래 명령어 ./pocketbase serve 오류 ?! (mac) 그런데.. 'pocketbase'은(는) Apple에서 악성 소프트웨어가 있는지 확인할 수 없기 때문에 열 수 없습니다... 해결을 위해 아래 처럼 설정에 들어가서 그래도 허용을 클릭 그 뒤에 다시 쳐보니 이렇게 잘 뜬다 🥳 사용 admin http://127.0.0.1:8090/_/ 들어가면 기본적으로 유저 컬렉션이 만들어져 있는 상태에..

[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..

[style-components] props 오류

문제 Warning: React does not recognize the isVisible prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isVisible instead. If you accidentally passed it from a parent component, remove it from the DOM element. {work.workDeadline < today ? "마감날짜가 지난 todo입니다 !" : work.workDeadline === today ? "오늘까지 끝내야하는 todo입니다 !" : null} const Dead..

[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..

[react] 새로고침해야 게시물 뜨는 문제

문제 로그인 / 로그아웃을 firebase 인증을 통해 하고, user 정보에 따라 내가 쓴 글만 보여야하는데 로그인을 하면 이전 로그인을 했던 user의 게시글이 보이고 새로고침을 해야 그때부터 지금 user가 쓴 게시물이 보임 해결 그냥 .. user를 state로 관리를 안한거였음 😮‍💨 또 user가 변하는 것에 따라 게시물을 가져올 수 있게 useEffect dep에 user를 추가해줬어야했다 😨 // const user = JSON.parse(localStorage.getItem("user")); 이렇게 되어있었음 const [user, setUser] = useState(JSON.parse(localStorage.getItem("user"))); const uid = user && user...