분류 전체보기 (64) 썸네일형 리스트형 [Git&Github] 깃과 깃허브란2 Github에서 README.md는 해당 repository의 제목과 내용을 알려주는 파일이다. github desktop에서 github으로 파일을 보내기 위해선 commit 후 push origin까지 해줘야 github에서도 반영된다. Forking이란 다른 Repository의 project를 가지고 본인의 repository로 복사하는 것을 말한다. fork 이후 github desktop에서 add -> clone repository를 하면 fork한 repository를 복사하여 자신의 desktop에 있는 것을 확인할 수 있다. 해당 clone 파일을 오리지널 Repository에 업데이트를 원한다면 github에서 New pull request를 눌러주면 된다. owner에게는 Merge.. [Git&Github] 깃과 깃허브란? git은 분산 버전 관리 시스템으로 파일들을 추적하는 방식이다. - 트래킹하여 누가 언제 무엇을 변경 했는지 확인 할 수 있다. github는 사용자가 작업한 git file를 올리는 일종의 저장소이다. - 변경된 파일을 공유하는 방법 Repository git이 볼 수 있는 파일을 말한다. Commit git에 어떤 변경사항이 포착되었을 때 기록 Git은 3가지 Areas를 가지고있다. 1. Working area : 우리가 현재 작업하고 있는 폴더로 생성, 수정, 삭제한 파일들이 있는 디렉토리 2. Staging area : 변경, 수정된 사항을 commit 할 수 있도록 저장하는 곳 3. Repository&Commit area : 파일들이 commit된 곳, 파일들의 변경사항에 대한 스냅샷이 있다.. [React JS] state를 활용 해보기 지난번 배운 state기능과 input을 활용하여 분 -> 시간 변환을 만들어보았다. 변환 설정 기준을 min으로 하여 useState 변수 설정을하고, onChange함수를 이용하여 input입력 숫자가 바뀔 때 마다 자동적으로 아래 시간input의 값이 바뀌게 설정하였다. 이제 flip의 기능을 넣어서 버튼을 누르면 분 혹은 시간의 input을 disabled 하게 만든다. const [flipped, setFlipped] = React.useState(false); const onFlip = () => { //setFlipped(!flipped); setFlipped((current) => !current); } Flip 클릭 시 기능을 수행하는 onClick함수를 넣고 useState를 만들어줬다.. [React JS] setState 배열 관련해서 const x = [1,2,3] 이런 배열이 있다면 기존에는 const a = x[0] ===> 1 const b = x[1] ===> 2 ... 으로 했지만 const [a, b, c] = x; 으로도 가능하다. (코드를 짧게 만들 수 있음) React.useState(우리가 담으려는 data 값, data 값을 바꿀때 사용할 modifier) modifier(원하는 변경값, 함수) 를 넣으면 업데이트 및 자동적으로 reRender이 된다. const [a,setA] = React.useState(0); const onClick = () => { setA(a + 1); } 만약 버튼이 있고 버튼에 onclick이 적용되어 있다면 클릭 시 자동적으로 숫자가 올라가게 된다. Total cli.. [React JS] React JS, JSX 기존 바닐라 JS는 HTML을 먼저 만들고 JS를 만들어서 덧붙이는 방식이라면, React JS는 JavaScript을 먼저 만드는 방식이기 때문에 업데이트를 HTML에서 할 필요 없이 JS로만 업데이트가 가능하다. 사용하기 위해서는 script에 React JS, ReactDom을 추가해야한다. React JS는 인터렉티브의 원동력, ReactDom은 React element를 가져가다 HTML로 바꿔주는 역할을 한다. https://unpkg.com/react@17.0.2/umd/react.production.min.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js JSX는 JavaScript를 확장한 문법이다. 생긴게 HTM.. [Video app] URL Parameters URL에서 숫자등이 들어 있는 ID를 넣어 줄 때는 /:id(뒤에 id는 아무 문자나 상관 없다) 하지만 이렇게 지정하면 숫자 외에 문자가 들어가는 URL도 express가 id처럼 인식하기 때문에 다른 문자가 포함된 url을 상단에 올려줘야하는 번거로움이 있다. 따라서 Regular Expression이 필요하다 https://www.regexpal.com \w+: 모든 문자, 숫자 선택 \d+: 모든 숫자 선택 JS에서는 \를 하나 더 추가해서 (\\d+) 이렇게 작성한다. 그럼 /(\\d+) 이렇게 작성해도 되지만, /:id(\\d+) 이렇게 작성하는 이유는 id를 이용해서 req.params.id와 같은 숫자값을 찾을 수 있기 때문이다. https://kasterra.github.io/regex1.. [Video app] render, req, res, express, router, morgan req, res 관련 글 https://expressjs.com/en/api.html#req Express 4.x - API Reference Express 4.x API express() Creates an Express application. The express() function is a top-level function exported by the express module. var express = require('express') var app = express() Methods express.json([options]) This middleware is available in Ex expressjs.com 추가적으로 express, router에 대한 설명도 나와있다. express는 다른.. [Video app] make server 보통 코드와 로직을 가지고 있는 모든 파일들은 src라는 파일을 만들어서 안에 넣는다. scripts 안에서 index.js는 src/index.js로 바뀐다. 단 해당 js파일에서 import express를 할 때는 상위폴더 명을 기재하지 않아도 자동으로 찾아준다. 그 후 const app(자유롭게해도된다) = express(); 입력하면 express app를 실행 가능하게 만들어준다. app.listen() -> addeventlistener 같은 것 괄호 안에 4000(fort숫자, 집 대문같은 개념)그리고 함수명(handleListening)을 작성한다. 바닐라 JS의 click event와 비슷하다. const handleListening = () => console.log(`✅ Server.. 이전 1 2 3 4 5 6 7 8 다음
