보호글 입니다.

1. 문법적 차이: 화살표 함수: javascriptCopy code const add = (a, b) => a + b; 일반 함수 표현식: javascriptCopy code const add = function(a, b) { return a + b; }; 화살표 함수는 간결한 문법을 가지고 있으며, 함수 몸체가 한 줄인 경우 중괄호({})와 return 키워드를 생략할 수 있습니다. 2. this의 동작: 화살표 함수: 화살표 함수는 자신만의 this를 생성하지 않고, 외부 스코프의 this를 그대로 사용합니다. 따라서 화살표 함수 내에서 this는 선언 시점에 결정되며 변경되지 않습니다. 일반 함수 표현식: 일반 함수는 자신만의 this를 가지며, 함수가 호출될 때마다 동적으로 바인딩됩니다. 3. ..

데이터 전송 위치: URL에 담는 경우(GET 요청): 데이터가 URL에 포함되어 전송됩니다. 이는 주로 쿼리 매개변수(Query Parameters)를 사용하여 이루어집니다. Body에 담는 경우(POST 요청): 데이터가 HTTP 요청의 본문(body)에 담겨져 전송됩니다. 데이터 양과 보안: URL에 담는 경우(GET 요청): 보통 작은 양의 데이터를 전송할 때 사용하며, URL에 노출되므로 보안에 취약할 수 있습니다. Body에 담는 경우(POST 요청): POST 요청은 일반적으로 더 많은 양의 데이터를 전송하는 데 사용되며, 데이터가 URL에 노출되지 않기 때문에 상대적으로 안전합니다. 용도: URL에 담는 경우(GET 요청): 주로 데이터를 검색하거나 조회할 때 사용됩니다. Body에 담는 ..

Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. onClick = {함수} (X) onClick = {()=>{함수}} (O)

** 서버통신일 때 경로 오류일 경우가 많음 백엔드랑 연결하는 경로가 옳게 되어있는지 확인 map 돌리는데 자료가 배열로 되어있는지 안되어있는지 확인하기

# 오픈 API Corona, 날씨 정보 API https://www.data.go.kr/ Naver 지도, papago, Clova API https://developers.naver.com/ Google 검색엔진, Translate API https://developers.google.com/ Kakaotalk, Kakaomap API https://developers.kakao.com/

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:arrow_downward:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=arrow ** 사용법 1. 원하는 아이콘 검색 (ex. arrow) **영어로 해야한다 2. 위에있는 link 태그 복사해서 헤더에 붙여넣고(여러 모양을 붙여 넣어도 1개만 있으면 된다) 3. span태그 복사해서 원하는 곳에 넣으면 된다(폰트처럼 사용가능. css는 font-size, color등으로 적용가능, span안에 있는 글자 다른걸로 바꾸면 다른 아이콘으로 변경 가능함. 안에 있는 텍스트 지우지 말 것)

1. 오류 코드 정리 (https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml) 100번대 (정보제공) 임시응답. 현재 요청까지는 처리 되었음 200번대 (성공) 클라이언트의 요청이 서버에서 성공적으로 처리됨 300번대 (리다이엑션) 완전한 처리를 위해서 추가 동작이 필요함. 주로 서버의 주소 또는 요청한 URL의 웹 문서가 이동되었으니 그 주소로 다시 시도하라는 의미 400번대 (클라이언트 에러) 없는 페이지는 요청하는 등 클라이언트의 요청 메세지 내용이 잘못된 경우 500번대 (서버 에러) 서버 사정으로 메세지 처리에 문제가 발생한 경우 서버 부하, DB처리 과정 오류, 서버에서 익셉션이 발생하는 경우 자세한 내용 http..

서버 통신 과정 (프론트) : 데이터 입력 (백엔드) : 서버에 저장 (DB) : 서버에 저장된 값 저장 (DB) : DB에 저장된 값 서버로 전송 (백엔드) : 전송된 값 프론트로 보냄 (프론트) : 불러온 값 보여줌 프론트 : 사용자에게 화면을 보여줌 백엔드 : 프론트 - 서버 데이터 통신 DB : 정보 저장 1. CRUD 정의 Create - 만들기 Read - 읽기 Update - 수정 Delete - 삭제 2. Http method 종류 GET : 조회 // DB에서 데이터를 얻어오기 POST : 등록 // DB에 데이터를 추가, 작성 PUT : 수정 // DB의 데이터를 갱신, 수정 DELETE : 삭제 // DB의 데이터를 삭제 이외에 HEAD, OPTIONS, PATCH, CONNECT 가있다

npm install -g nodemon node환경에서 작업할때 node server.js를 껐다 켰다 하지 않아도 새로고침 해주는 기능 ** vscode liveserver랑 비슷

vscode에서 terminal열기 (터미널 여는 법 ctrl + ~ 혹은 상단에 터미널버튼) npm init -y 이거하면 package.json 추가됨 (기본 세팅) ++ npm init >> npm 은 node package manager 의 약자이다. package.json에서 node에 사용된 정보들을 담고있다. npm install express 이거하면 express 설치됨 (라이브러리 사용을 위한 세팅) server.js에 const express = require('express') const app = express() app.listen(8080, ()=>{ console.log('http://localhost:8080') }) app.get('/',( aa, bb )=>{ bb.se..

input() 함수의 입력자료형은 항상 문자열이다. 그래서 입력받은 문자들을 숫자형태로 바꿔주어야 숫자 연산에 쓸 수 있다. 이것을 영어로 cast라고 한다. (+여기에서 말하는 문자열은 문자열로 받아온 숫자들을 의미한다.) int() : 문자열을 int 자료형으로 변환하는 함수. int는 정수형을 의미한다. float() : 문자열을 float 자료형으로 변환하는 함수. float는 실수형 또는 부동 소수점을 의미한다.