본문 바로가기

전체 글

 (215)
React learning #5create react app,css Modules,useEffect,cleanUp create react app https://ko.reactjs.org/docs/create-a-new-react-app.html 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org npx create-react-app my-app cd my-app npm start index.js에서 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); 만 남겨두고 나머진 삭제 src 폴더 안에 index.js app...
React learning #4 prop,React.memo(),btn.propTypes={} props: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 첫 번째 인자이자, 유일한 인자 오브젝트 형식 컴포넌트: JSX를 반환하는 함수 부모에서 데이터를 보내서 컴포넌트 하나로 두 가지 만듦 ㄴshortcut // bracket 안에 프로퍼티 function Btn(props {banana, big}) { return ( {props.banana} {banana} ); } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); 주의점!!! function App() { const [value, setValue] = React.useState("Save..
React learning #3 disabled, Invert, today's learning point: 사용자의 input을 어떻게 얻어오는지 form을 만들었을 때 state가 어떻게 작용하는지 state를 세팅하는 데는 2가지 방법이 있다. 1) 직접 할당 :setState(state +1) 2)함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다) 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1), 현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2) setCounter()에 값으로 넣을지 함수로 넣어줄지가 헷갈리신다면, onClick 함수안에 여러번 넣어서 테스트해보시면 이해가 빠를 것 같습니다. 1. 값으로 여러번 function onCli..
React learning #2 State, 리렌더링 하기 배열에 각각 할당하는 shortcut const x = [a,b,c] --> const ["tomato","potato","kiwi"] = x const x = React.useState();를 console.log 해보면 [undefined, modifer function] 두개의 배열이 나온다 React.useState(0); 안에 숫자를 넣어줌으로 초기 값을 할당 할 수 있다. function으로 값을 변경하고 렌더링 해 준다. const root = document.getElementById("root"); let counter = 0; function countUp() {} function App() { const [counter, setCounter] = React.useState(0); //..
React learning #1 기초 react : JS앱이 interactive하게 만들어주는 library react-dom : library 또는 package, react element를 html body에 둘 수 있도록 해줌 리액트 JS의 핵심 포인트 REACT에서 생성도하고 사용자에게 보여질 내용도 컨트롤 할 수 있음 JSX:자바스크립트를 확장한 문법 컴포넌트 : jsx를 반환하는 function const Container =()=> ( ); 컴포넌트 안에 직접만든 컴포넌트를 넣을 땐 첫 문자는 대문자이여야한다. 과 은 다름 리액트 작성할때 컨포넌트는 함수나, 클래스로 만들어져서 이렇게불러와야하구요, 컴포넌트안에서 사용되는 변수나, 자바스크립트 문법은 중괄호를 써서 나타내야해요 state: 데이터가 저장되는 곳 reactjs는 ..
미루는 습관을 이기는 작은 책 할 일을 미루는 것과 휴식을 취하는 걸 혼동하면 안 된다. 휴식은 에너지를 충전해주지만 미루기는 에너지를 소모한다. 에너지가 부족하면 할 일을 미루게되고 결국 아무 것도 성취 할 수 없다. 로마의 철학자 세네카도 "망설이고 미루면서 시간을 낭비하는 동안 삶은 우리 곁에서 도망친다"라고 경고했다. 최근의 연구들을 보면 자신이 한 일보다 하지 않은 일에 대해 더 후회한다는 걸 알 수 있다. 삶의 기회를 놓쳤다는 후회와 자책감을 오랫동안 품고 사는 것이다. 걱정만 하면서 할 일을 미루면 의미 있는 일에 투자할 시간을 낭비하고만다. 할 일을 미루게되는 강력한 적과 싸워서 이겨야 삶의 가능성을 더 많이 이끌어내고 더 많은 일을 성취 할 수 있다. 생산성은 깨어 있는 시간 중에서 개인의 비전을 성취하는데 필요한 활..
Zoom 클론코딩 #5 버그 카메라 바꿀 때 화면 반영안됨 // RTC Code function makeConnection(){ myPeerConnection = new RTCPeerConnection(); //crate peer to peer connection myPeerConnection.addEventListener("icecandidate", handleIce); //after making peerConnection , listen ice candidate myPeerConnection.addEventListener("track", handleAddStream); myStream.getTracks().forEach(track => myPeerConnection.addTrack(track, myStream)); //pu..
3.3목 내 컴퓨터에서 작업한다면 multer s3 x heroku에서 작업할 때만 multers3 사용하고 싶음 process.env.NODE_ENV ===heorku의 "production"; const isHeroku = process.env.NODE_ENV === "production"; const s3ImageUploader = multerS3({ s3: s3, bucket: "youtube-cloning-site/images", acl: "public-read", }) const s3VideoUploader = multerS3({ s3: s3, bucket: "youtube-cloning-site/videos", acl: "public-read", }) export const avatarUpload =..

티스토리툴바