프론트엔드 첫걸음

리액트 라우터 사용하기 세팅 터미널에 npm install react-router-dom@6 입력 index.js 코드 추가 //브라우저라우터로 앱을 감싸줌 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Routes function App(){ return ( ) } export default App; export default App; 컴포넌트는 페이지 주소에 상관없이 보이고, /main 접속시에는 페이지만, /detail 접속시에는 페이지만 보임 path="*" 으로 하면 404 페이지 보여준다.(..

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