블로그 블로그

cmd cd Desktop mkdir bolier-plate cd bolier-plate bolier-plate>npm init 입력 후 엔터로 기본설정해준다 C:\Users\user\Desktop\bolier-plate>code . vscode열기 index.js파일 생성후 nodejs의 프레임워크인 expressjs를 설치해준다 vscode 터미널에서 npm install express --save (--save package.json에 표시) https://expressjs.com/ko/starter/hello-world.html Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하..

1번방법 해당 repository 클릭 후 settings클 pages클릭 branch를 선택하고 save를 누른 후 몇 분 뒤에 새로고침하면 주소가 나온다 2 package.json 파일에서 맨 밑에 homepage 추가한다 "homepage":"https://깃헙사용자이름.github.io/폴더이름" 터미널에서 설치 npm i ph-pages package.json에서 scripts부분에 추가 deploy는 predeploy를 호출 웹사이트를 build해준다 "predeploy": "npm run build", "deploy": "gh-pages -d build" 터미널에서 실행 실행하면 설정한 hompage로 업로드된다 설정한 hompage링크로 접속하면 만든 페이지가 나온다 npm run depl..

한글 변경 확장아이콘에서 korean 검색 후 microsoft 나오는 변경팩 설치 html 기본코드 작성 ! + tab 키 누르면 vscode의 기본 코드가 자동 완성된다 (html) //언어관련 기본 언어 ko로 변경 모든 명령 표시 windows = ctrl + shift + p macOS = cm + shift + p 입력 후 settings.json 입력하면 기본설정: 사용자 설정 열기(JSON) 선택 필요한 옵션 추가 입력되어있는 코드 옆에 쉼표 입력해준 후 추가한다 "emmet.variables": { "lang": "ko" }, 들여쓰기 2칸 설정 ctrl + shift + p 를 눌러 기본 명령창을 실행 후 settings.json 입력, 기본설정: 사용자 설정 열기(JSON) 선택 "e..

처음 실행시 git먼저 설치한다(설치가 안 되어있을 경우) https://git-scm.com/ Git git-scm.com Downloads 에서 최신 버전 다운 처음 시작, 연동시 사용자 입력 git config --global user.email "user@gmail.com" git config --global user.name "user" vscode와 연동 위해 터미널에서 git init 입력 후 github 폴더 주소와 연결해준다 git remote add origin 깃헙주소 git add . (파일 수정 후 staged상태로 만든다 업데이트 위해) git status (파일상태 확인) 입력 후 git commit -m "commit message" git push main master (입..

firebase에 실시간 데이터베이스에서 데이터 입력 데이터 가져오기 fetch , useEffect사용 firebase주소 입력 후 meals.json추가(입력해놓은 데이터) fetch는 promise를 반환한다 const AvailableMeals = () => { useEffect(() => { fetch('https://react-app-ba5b1-default-rtdb.firebaseio.com/meals.json'); }, []); then추가 async await사용 useEffect로 입력한 함수는 promise를 반환해서는 안된다 useEffect대신 async await을 사용하고 싶다면 fetchMeals와 같은 함수를 새로 만든다 그 다음 useEffect의 일부로 실행해준다 con..

양식form 제출 처리 및 사용자 입력값 가져오기 import { useRef, useState } from "react"; const SimpleInput = (props) => { //useRef로 사용하는법 const nameInputRef = useRef(); const [enteredName, setEnteredName] = useState(''); //사용자 입력 가져오기(useState나, useRef로 가져올 수 있다) const nameInputChangeHandler = event => { setEnteredName(event.target.value) } //폼이 제출될 때 작동하는 함수 const formSubmissionHandler = event => { event.preventD..

Custom hooks 커스텀 혹은 커스텀 훅을 포함한 다른 리엑트 훅을 사용할 수 있다 따라서 useState나 useReducer를 통해 관리하는 리엑트 상태를 활용할 수 있다 useEffect등에도 접근할 수 있다 프로그래밍 중 코드가 중복될 때 중복되는 코드를 갖는 함수를 만드는데 이것을 커스텀 훅으로 하려는 것 커스텀 훅 만들기 모든 훅을 독립된 파일에 저장하면 된다 hooks라는 폴더를 먼저 만들고 components 폴더 옆에 둔다 이 안에 use-counter.js 파일 생성 파일명은 사용자 설정 상수로 만들고 함수 이름은 use로 시작해야한다 import { useState, useEffect } from 'react'; const useCountr = () => { //재사용하려는 로직..

리엑트 앱은 일반적으로 해당 백엔드서버 또는 백엔드API로 불리는 서로 다른 URL로의 요청을 전송하는 서버와 통신하게 된다 이제 인증 정보는 백엔드 앱에 저장되고 다른 서버에 있으므로 사용자가 이 코드를 볼 수 없다 백엔드 앱과의 통신은 보안에 관련된 세부 사항이 필요 없으므로 데이터베이스와 안전하게 통신을 주고받을 수 있다 영화가 있는 데이터베이스로부터 데이터를 가져오기 swapi.dev 사이트에서 사용 API-Application Programming Interface API는 매우 넓은 개념으로 단순히 리엑트나 HTTP요청만 있는 것이 아니다 코드를 통해 명확하게 정의된 인터페이스를 다루며 또 어떤 결과를 얻기 위한, 작업에 대한 규칙이 명확하게 정의된 것을 다루고 있다는 뜻 HTTP 요청에 대한..