https://developer.mozilla.org/ko/docs/Web/CSS/background-size background-size - CSS: Cascading Style Sheets | MDN 배경 이미지로 덮이지 않은 공간은 background-color 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다. developer.mozilla.org 프로젝트 메인페이지 제작하다가 알게된속성, 튜토리얼이나 설명은 MDN문서에 잘 나와있다. 이와같이 특정 div 같은곳에 꽉차게 나타낼것인지 이렇게 한번나오게하고, 좌우 혹은 가운데 배열할지 mui react에 적용하다가 배경 적용하다가 알게되었다. 아래와 같이 배치하고싶어서!! 물론 좌우, 가득차게도 가능하다.

1)from 어디서 만들건지 선택하고! 만들어주기 2)여기서 나만의 작업시작!여기에서 New branch 나는 kimjiwon만들었다. 아래는 branch참고 개념 https://backlog.com/git-tutorial/kr/stepup/stepup2_2.html 누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog 누구나 쉽게 알 수 있는 Git에 입문하신 것을 환영합니다. Git을 사용해 버전 관리를 할 수 있도록 함께 공부해봅시다! backlog.com $ git remote update Fetching origin From https://lab.ssafy.com/s06-webmobile1-sub2/S06P12C202 * [new branch] jongju..

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object Invalid options object. Dev Server has been initialized using an options object that does not match the A..

프로젝트하면서 쌩 쿠렌토랑, socket.io로 구현한 채팅으로 작업을 진행하다가 그저 뼈대만 만들어지게됨 그래서 이대로는 시간에 맞추지 못할거같아서 노선을 변경해 openvidu를 이용해서 진행해 보도록했고, 프론트를 담당했지만 그래도 다같이 각자 튜토리얼 한번씩은 해야겠다고 생각해서 나름 튜토리얼만 딱 진행해봤다. 로컬에서한번! aws에서한번! 우선 기록만 해본다. https://docs.openvidu.io/en/stable/ OpenVidu Docs From here you can search these documents. Enter your search terms below. docs.openvidu.io https://docs.openvidu.io/en/stable/tutorials/openv..

현재 프로젝트 진행중인데 메인페이지에 아무래도 심심해서 애니메이션 효과를 주고싶다. 근데 CSS공부하기엔? 아니 공부는 이미했지만 하나하나 세세하게 효과를 주기엔 너무 시간이 없어서 급한대로 찾아보니 편하게 애니메이션 효과를 줄 수 있는 라이브러리가 있었다. 쉽게 설치해서 사용할 수 있게 라이브러리화 되어있어 기록해본다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 여기 들어오면 사용법도 매우쉽게 되어있다. yarn add aos npm install aos --save 둘중하나 골라서 설치해주고 download받아서 d..

현재 작업중인 프로젝트가 이런식으로 나뉘어져있다. - Main 1)Study 2)Front ㄱ.메인컴포넌트 ㄴ.기타등등 ㄷ.기타등등.. 3)Back 즉 Main아래 3개의 브랜치 그리고 각 브랜치안에 또 브랜치... 현재 주로 Front브랜치만 사용하고싶지만 제대로된 브랜치 사용법을 익혀야 하겠다고 생각이 들었다. 이런식으로 튜토리얼 같은것도 있는데 결국이거다. 1.git branch 이렇게 하면 branch를 만들 수 있다. 2.git checkout 해당 브랜치로 이동을한다. 그리고 동시에 해당 브랜치의 파일까지 복구한다. 3.git switch 해당브랜치로 이동만한다. checkout: Switch branches or restore working tree files switch: Switch br..

React 내가 다시볼 쿡북 기본설치 node.js설치 -https://nodejs.org/ko/ vscode설치 -https://code.visualstudio.com/ yarn설치 -https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable `npm install --global yarn` `yarn --version` 1.프로젝트생성 `npx create-react-app 프로젝트명` 2.프로젝트실행 `npm start` `yarn start` 3.터미널에 뜨는 warning 없애기 `*/\* eslint-disable \*/*` 상단에 넣어주기 4.useState사용 `import {useState} from 'react'` let [a,b..

Redux사용의 현재로써 최종형태 기존의 1,2,3,4의 방식도 좋지만 좀더 짧은코드를 사용해 redux store의 state를 꺼내올 수 있다. useSelector Hook에대해 알아본다. // store에있던 데이터를 가져와서 props로 변환해주는 함수 // 즉 return에 있는애들이 props 라고 볼 수 있음 // function state를props화(state){ // console.log(state) // return { // 상품명 : state.reducer[0].name, // state:state.reducer, // alert열렸니:state.reducer2 // } // } // export default connect(state를props화)(Cart) export def..