내가 보려고 쓰는 기록

서버랑 통신하는 코드를 ajax로 짜다보면 응용기능이 필요해질때가 있음 -ajax 성공시/실패시 각각 html 보여주려면? -몇초마다 자동으로 ajax 요청해서 서버에서 데이터 실시간으로 받으려면? -ajax 요청 실패시 몇초 후 요청 재시도하려면? -다음페이지 미리 가져오고 싶으면? React Query라는 라이브러리 쓰면 위의 기능 사용 가능 React Query가 유용한 분야는 실시간 sns이나 코인거래소 등 실시간 데이터를 계속 가져와야하는 사이트들 그외에는 굳이 필요 없음 React Query 1. 라이브러리 설치 2. index.js 셋팅 서버에서 유저이름 가져와 보여주기 사이트 접속 후 로그인하면 오른쪽 맨위에 유저이름 출력되는 기능 만들기 ● ajax 요청하기 ● react-query 에 ..

개발 하기 전에 배포를 먼저 해서 얻을 수 있는 이점 내가 개발을 했을 때 내 로컬에서는 잘 동작하던게 실제로 배포를 하면 제대로 동작하지 않는 경우가 많음 개발을 다 하고 나서 배포를 하면 어떤 코드때문에 배포 했을 때 문제가 생기는지 늦게 알게 됨 그런데 매일매일 개발 끝나고 바로 배포를 하여 실서버에서 확인한다면 실서버에서 문제가 되는 코드를 훨씬 빨리 파악하고 수정할 수 있음 개발이 끝날때마다 매일 배포하면 너무 번거로우니까 개발 끝나면 자동으로 배포를 할수있게 만들기 서버만들기 1. 프론트엔드, 백엔드가 있어야 하므로 client, server 폴더 만들기 2. git 레파지토리 만들기 (git init) *깃으로 관리하는 저장소 3. client 폴더에 리액트 설치하기 (npx create-r..

서버와 클라이언트 >> 서버와 클라이언트 관계 - 클라이언트가 서버로 요청(request)보냄 - 서버는 요청을 처리 - 처리 후 클라이언트에 응답(response)보냄 서버에게 주도권있어서 서버가 정해준대로 클라이언트가 따라감 클라이언트 - req(요청) 서버 - res(응답) 만약 /list 페이지로 접속했을때 DB에 저장된 데이터들을 꺼내서 보여주고 싶으면? ejs 라이브러리 사용 *ejs - html을 쓰기 쉽게 도와주는 라이브러리 ejs 1. 라이브러리 설치 npm install ejs 2. server.js 파일 상단에 코드 작성 app.set('view engine','ejs'); 3. list.html을 list.ejs로 이름 바꾸고 views 폴더를 만들어서 그 *안에 넣기 * ejs는 ..

API 소프트웨어가 다른 소프트웨어로 부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단 ex) 날씨를 알려주는 다양한 웹사이트들, 앱들은 모두 기상청 서버에 데이터를 요청하고 그 데이터를 받아감 즉 서버와 웹, 앱들 사이에 정보들 요청되고 전송되는 것 웹, 앱들이 서버에 정보를 요청할때 지정된 형식이 있는데 그 지정된 형식을 API 라고함 기상청에 date:191023|place:seoul|which:temperature 주소 입력해서 데이터를 요청하면 17deree 라고 데이터 줌 이렇게 정해진 메뉴얼이 있으면 누구든 이 메뉴얼을 참조해서 기상청 정보를 활용하는 소프트웨어를 만들 수 있음 REST API - 주소 정하는 규칙 - 자원에 어떤 조작(CRUD)을 할지 HTTP 메소드로 나타냄 - 서버..

왜 브라우저를 새로고침하면 state값이 초기값으로 돌아갈까? → html,js 처음부터 다시 읽기때문에 사이트 재접속해도 state가 남아있게 하고싶으면? → state를 서버로 보내서 데이터 베이스에 영구적으로 저장하고, 필요할때마다 데이터베이스에서 가져오면 됨 근데 서버도 모르고 데이터베이스 만드는 방법도 모른다면? → 차선책 localStorage에 저장해둬도 됨(반영구적 저장가능) localStorage : 브라우저에서 제공하는 반영구적 데이터 저장소 ● 위치 브라우저 → 개발자도구 → Application → Local Storage ● 특징 1. key : value 형태로 저장 가능 2. 최대 5MB까지 문자만 저장 가능 (숫자로 저장해도 문자로 바뀜) 3. 사이트 재접속해도 남아있음(브라..

함수 만드는 3가지 방법 1. 일반적인 방법 function f1(num1,num2){ return num1+num2 } 2. 변수에 함수 담기 const f1 = function(num1, num2){ return num1+num2 } 3. 변수에 화살표 함수 담기 const f1 = (num1,num2) => { return num1+num2 } 4. 변수에 중괄호,리턴 생략한 화살표 함수 담기 *바디안의 코드가 한줄인 경우 생략 가능 const f1 = (num1,num2) => num1+num2

state 변경함수를 store.js 안에 만들면 컴포넌트는 store.js한테 수정함수를 실행해달라고 부탁하는 개념 store state 보관하는 장소로, state를 객체형식으로 저장 store 안에 state 변경함수 만들기 reducers : { } 열고 안에 함수 만들면 됨 - 변경함수 작명은 마음대로 (useState에서 변경함수 작명시 set붙인것처럼) - 함수의 파라미터인 state는 함수의 초기값 - 변경함수안에서 return문에 state 변경값 입력하면 그 값이 state의 변경값 이제 setUser( )쓸때마다 'kim' - > 'join kim'으로 변함 다른 컴포넌트에서 쓸 수 있게 내보내기 export .actions라고 적으면 만든 변경함수 export 됨 컴포넌트에서 변경함..

🟠 리액트를 사용하는 이유 1.버츄얼 돔 사용해서 불필요한 렌더링을 최소화 2. 컴포넌트 사용하여 블럭처럼 사용가능하고 가독성이 높음 3. JSX 확장 문법 사용으로 개발자가 코드짜기 편함 4. 다른 프레임워크와 라이브러리 함께 쓰기 편함 🟠 Rest API 란 - http에 요청을 보낼때 어떤 uri를 사용할지, 어떤 메소드를 사용할지에 대한 약속 Rest API는 주소만으로도 대략 이게 뭘하는 요청인지 파악 가능 컴퓨터의 기능을 실행시키는 명령 내컴터아니고 남의 컴터 api : 컴퓨터의 기능을 실행시키기는 방법 ex) 파이선은 print('hello world'), 자바스크립트는 document.write('hello world') 기계와 기계가 웹을 통해 통신할수 있게 돕는 통신 규칙 웹의 통신규약..