우당탕탕 개발기록

보호되어 있는 글입니다.

- 비율을 맞춰서 넣으려면 background-size: contain, div 에 꽉차게 넣으려면 background-size: cover - div 사이즈보다 이미지가 작은 경우, 이미지가 반복되므로 한 장만 보여주기 위해 background-repeat: no-repeat 📍 참고 https://multifidus.tistory.com/182 일정한 사이즈 div 안에 이미지 넣기 (잘리면서 꽉차게, 잘리지 않고 축소) +) 이번 프로젝트를 진행하면서 퍼블리싱 부분에서 가장 애를 먹었던 부분. 혹시 제가 놓친 점이나 더 좋은 방법, 다른 방법이 있다면 얼마든지 알려주시기 바랍니다. 1. 잘리면서 꽉차게 * 상위 d multifidus.tistory.com

요새 cs 스터디에서 면접 예상 질문 내용으로 스터디를 진행하다보니, 낯익은 것들이 많이 나온다. 공부 초반에 그냥 쓰라고 하니까 썼던 것들이 정체가 무엇인지, 어떤 역할을 하는지 점차 알아가고 있는 기분! 오늘은 GET, POST에 대해서 알게 되었다. 읽으면서 `그래서 이게 뭐지?`싶은 것들도 설명해주신 친절한 글! 📍참고 https://velog.io/@songyouhyun/Get%EA%B3%BC-Post%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%A5%BC-%EC%95%84%EC%8B%9C%EB%82%98%EC%9A%94 Get과 Post의 차이를 아시나요? 제 질문에 답을 하지 못하겠다면, 이 글을 읽어보시는 걸 적극적으로 추천합니다. velog.io

정말 많이 만난 오류,,,^^ import 또는 export 오류이니, 콘솔창이 친절하게 짚어주는 위치로 달려가 import와 export를 뜯어볼 것! 나는 1️⃣ export 쪽에 default 안붙어있었거나, 2️⃣ import에 {} 넣거나 빼거나, 3️⃣ 오타가 있거나 (제일 화남🔥 ) 중에 하나였다. 2️⃣같은 경우는 컴포넌트를 잘게 쪼개면서 일어났는데, 내가 정확히 뭘 import 해오고 싶은 지를 생각해봐야할 듯! 📍 참고 https://im-designloper.tistory.com/40 [ Vue Error ] export 'default' (imported as '...') was not found in ... export 'default' (imported as 'router') w..

= 컴포넌트 파일명이 대문자로 시작하지 않아서! 리액트 훅을 사용하려면 꼭!! 대문자로 시작해야한다! 📍 참고 https://medium.com/@umioh1109/%EB%B2%88%EC%97%AD-js-bites-react-hook-is-called-in-a-function-which-is-neither-a-react-function-or-a-custom-33369d62ac84 [번역] JS Bites: React hook is called in a function which is neither a React function or a custom… 본 글은… medium.com

import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; firebase의 버전에 따라 import 오류가 뜨기도 했다. compat을 붙여주면 v9에서 사용하는 import가 된다

회원가입 페이지에 들어가자마자 나오는 alert들.. 분명 회원가입하기 버튼을 눌렀을 때 나와야하는 애들이 우르르 나오길래 확인해보니 onClick에 넣은 함수 뒤에 ()를 붙여서 그런 것이었다! 알고 있었는데 습관성으로 넣다가 이렇게 되어버렸다. 일정한 조건 하에 실행되는 함수들은 꼭 뒤에 ()를 빼자! (+) 22.11.11

📓 fixed와 sticky 차이 📍 https://ordinary-code.tistory.com/106 [css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기 스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오 ordinary-code.tistory.com 📓 relative와 absolute의 차이 - 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top, right, bottom, left 속성을 사용해 위치 조절이 가능. 각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, r..

1_ text-align: center; vertical-align: middle; 2_ display: flex; align-items: center; justify-content: center; 간단한 추가 버튼을 만들 때 두 개과 동일한 효과를 내는 것 확인. padding 값 주의!

라이프사이클 https://ljh86029926.gitbook.io/coding-apple-react/2/undefined-1/what-is-life-cycle 라이프 사이클이 뭔데? - React 컴포넌트의 변경이 완료되었을 때에 수행되는 메소드 입니다. 이 메소드는 조금 복잡한 작업을 수행하기에 최적화 되어있는 메소드 인데요, render메소드가 실행되어 업데이트 된 state, props와 업 ljh86029926.gitbook.io 클래스의 문법이 어렵다, 축소가 어렵다 등의 이유로 클래스형에서 함수형 컴포넌트로 변경되는 추세다. 리랙트 훅이란 함수형태의 컴포넌트에서 사용되는 몇가지 기술들을 훅(Hook)이라 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 ..