일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- BFC
- react
- Carousel
- 함수형프로그래밍
- twoarrow
- accordian
- 서초구보건소 #무료CPR교육
- BlockFormattingContext
- transition
- useQueryClient
- ignore padding
- 부모요소의 패딩 무시
- CustomHook
- tailwindCSS
- DOM
- 리액트
- QueryClient
- ㅡ
- alias설정
- 제어컴포넌트
- vite
- 부모패딩
- 화살표2개
- debouncing
- parent padding
- 문제해결
- es6
- 조건부스타일
- ?? #null병합연산자
- createPortal
- Today
- Total
목록개발 공부 (172)
프론트엔드 첫걸음
public에서 불러오기 이미지같은 정적파일은 public 폴더에 보관해도 된다. public 폴더에 있는 이미지 사용할 때는 PUBLIC URL사용을 권장하나 단순히 /이미지경로, 이미지경로 지정해도 이미지가 잘 불러와진다. .main-bg { height: 300px; background-image: url('../public/assets/any.jpeg'); } src폴더에서 불러오기 src폴더에서 불러오면 import하여 사용할 수도 있다. 간편하게 이미지경로로도 사용가능하다. import mainImage from './assets/any.jpeg'; function App() { return ( ); } .main-bg { background-image: url('./assets/any.jpe..
a 태그가 width 100%를 차지해버려서 a 하위요소에 준 width 가 무용지물이 될 때 부트스트랩을 사용중이라면 하위요소의 width 관련 속성을 a 태그로 옮겨주고, 부트스트랩을 사용하지 않는다면 a태그를 p태그로 감싸주면 된다. 부트스트랩을 사용 할 때 하위 요소의 너비관련 class를 a 태그에 옮겨준다 안녕 See the Pen Untitled by JEONG (@cona) on CodePen. 부트스트랩 없이 CSS 사용할 때 부트스트랩을 사용하지 않는다면 a 태그를 p 태그로 감싸주면 된다. https://stackoverflow.com/questions/30586988/how-to-make-anchor-tag-fit-to-content-not-entire-width-of-page Se..
[코딩애플 JavaScript 입문과 웹 UI개발] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/javascript-jquery-ui/ 스크롤바 내린 높이 : scrollTop div 박스의 실제 높이 : scrollHeight 눈에보이는 div 박스의 높이 : clientHeight 실제 높이 = 스크롤 내린높이 + 눈에보이는 눈에보이는 div 박스의 높이 $div.scrollHeight = $div.scrollTop + $div.clientHeight 가 되면 스크롤이 전부 내려왔다는 뜻이다. 스크롤이 다 내려왔을때 alert를 띄우는 javascript 코드는 다음과 같다. ( -5는 오차를 감안한 것이다.. 완전히 스크롤 끝까지 닿지않고 스크롤..
[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/html-basics/ 1. 부트스트랩 소스 참조시키기 * codepen에서는 bootstrap 사용하려면 https://fe-j.tistory.com/entry/부트스트랩-사용하기 참조 2. 부트스트랩 사이트에 가서 navbar 맘에 드는거 긁어오기 +) 내가 쓰고싶은 navbar list도 긁어옴 3. 상단 고정 하고싶으면 부트스트랩 navbar 에 fixed-top 클래스를 추가하던가, position:fixed 를 추가한다. 4. 리스트나 본문이 navbar에 가려지는 현상은 padding , margin 을 조정하여 해결하였다. 이것도 더 좋은방법이 ..
cdn 으로 시작하기 https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template 여기에 나온 starter template 갖다가 시작하면된다. 부트스트랩 메인화면에 바로 나와있긴 하다. 다운로드 받아서 프로젝트에 파일을 넣어 참조하기 프로젝트 안에 bootstrap 파일을 넣는 것이 (더 안정적이므로) 일반적이다. https://getbootstrap.com/docs/5.1/getting-started/download/ 다운받아서 min.붙은 파일 빼고 다 지워줘도 무방하다고 봄. https://getbootstrap.com/docs/5.0/getting-started/contents/ 요기 들어가면 bundle.js..
[코딩애플 JavaScript 입문과 웹 UI개발] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/javascript-jquery-ui/ 캐러셀은 CSS가 관건이다. 사진이 들어가는 slide list는 사진크기의 3배로 두고 사진을 하나만 보여주는 slide container는 사진크기의 1배로 두고, overflow:hidden을 주면된다. img { vertical-align: bottom; } .slide-container { overflow: hidden; width: 30vw; } .slide-list { background-color: grey; width: 90vw; transition: all 1s; display: flex; } .sl..
자식컴포넌트에서 부모컴포넌트로 데이터를 보내주고 싶으면??? 부모컴포넌트에서 만든 함수를 prop으로 자식한테 넘겨준다. 자식컴포넌트에서 입력받은 데이터를 부모컴포넌트에서 받은 함수의 매개변수로 넘겨주면, (부모컴포넌트에 함수가 있으므로) 부모컴포넌트에서 데이터를 확인할 수 있다. 예) App.js > NewExpense.js > ExpenseForm.js 로 상하구조가 설정되어있을 때 ExpenseForm.js에서 받은 데이터를 App.js까지 끌어올려줘야할때는? 1. ExpenseForm에서 NewExpense로 전달 2. NewExpense에서 App으로 전달 두 단계가 같은 과정으로 이뤄진다. (반복해서 보면 기억이 잘나니까 두단계짜리 예시를 씀) 1. ExpenseForm.js에서 수정한 데이터..
첫번째 에러메시지 fatal: The current branch empty has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin empty 업스트림을 설정안해서 생긴 에러메시지군 => git push -u origin [브랜치명] 깃이 git push --set-upstream origin empty 라고 치라고 안내해줬지만.. (empty는 내 브랜치명) 그치만 난 공부했으니까 알지! 하면서 git push -u origin [브랜치명] 했지만.... 두번째 에러메시지 The requested URL returned error: 400 git ..
setState는 비동기적으로 작동한다. 이벤트 핸들러안에서 호출된 setState는 setState가 얼마나 많이 호출되었든 상관없이 이벤트가 끝날때 딱 한번 리렌더링 된다. 이는 불필요한 렌더링을 막아 리액트의 성능을 높인다. 이것을 오브젝트 컴포지션으로 설명할 수 있다. setState가 여러번 호출되면 인자로 전달된 각 객체를 추출하여 단일 객체로 merge하고, 이렇게 만들어진 단일 객체를 사용해서 상태를 업데이트 한다. // state를 합치는 merging 작업 const resultObj = Object.assign({}, {a: 10}, {b: 20},{a: 30}) 따라서 setState에 객체를 전달하여 이전상태에서 다음상태로 update하려고 하는것은 안전하지 않다. setState..
[출처] https://ko.javascript.info/script-async-defer https://www.youtube.com/watch?v=tJieVCgGzhs&feature=youtu.be 브라우저가 그림그리는 순서는 다음과 같다. 1. Render Tree만들기(parsing 및 style) 2. Layout잡기 3. Paint 4. composite 처리(transform , opacity 등) 브라우저의 페이지를 렌더링할때 DOM (Document Object Model), CSSOM(CSS Object Model)을 만들어 렌더트리를 만드는 과정을 거치는데 , 이 때 태그로 외부 자바스크립트 소스를 참조하게 되면 DOM트리 만드는 것을 중단하고 해당 javascript 코드를 파싱한다...