본문 바로가기

전체 글

 (152)
1. AXIOS AXIOS 란? Axios 는 브라우저, Node.js 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드랑 프론트엔드 간의 원활한 통신을 위해 Ajax와 더불어 사용한다. 이미 JS 에는 fetch api 가 있지만, 프레임워크에서 ajax 를 구현할 땐 axios 를 쓰는 편이다. axios의 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js 의 http api 사용 Promise API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 axios fetch 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF를 보호 해줌 별도 보호 X data 속..
15. body-parser body-parser 데이터 ( client에서 post로 보내준 데이터) 들을 자동으로 파싱해주어. 필요한 부분인 body 부분을 쉽게 추출해주도록함 app.use(express.urlencoded({extended: false})) 위 코드의 의미를 아라보자 ! 우선, JS 에서 데이터를 주고받을 땐 객체 형태를 선호한다. 이 때문에, JSON을 사용하는 것이다. extended true 객체 형태로 전달된 데이터 내에서 또 다른 중첩된 객체를 허용한다. 따로 설치가 필요한 npm qs 라이브러리를 사용한다. false 중첩된 객체를 허용하지 않는다. node.js 에 기본으로 내장된 queryString 을 사용한다. queryString 과 qs 라이브러리 둘 다 url 쿼리 스트링을 파싱해주는 ..
14. CORS CORS ( Cross-Origin Resource Sharing) CORS란 자신이 속하지 않는 다른 도메인 및 포트에 있는 리소스를 요청하는 cross-origin HTTP 요청 방식. 파란색 이미지는 웹사이트가 구동중인 domain과 동일한 domain-a.com(서버 A)으로부터 자료를 요청하고 수신하지만 아래의 빨간색 이미지는 domain-b.com(서버B)이라는 다른 도메인에 자료를 요청하고 수신한다. ✅ 서버는 기본적으로 CORS 방식을 제한한다 ! 특정 서버 리소스에 다른 임의의 웹 사이트들이 request를 보낼 수 있다면 악의적으로 특정 서버의 세션을 탈취하거나 서버에 무리가 가는 행위 등 문제가 생길 수 있는 행위를 할 수 있기 때문. 해결 방안 : npm install cors 모듈..
8. useState, useRef, useContext, useReducer useState 단순한 하나의 상태를 관리하기에 적합. const [ state, setState ] = useState( initState | initFn ) state가 바뀌면, state를 사용하는 컴포넌트를 리렌더함 useEffect와 함꼐, state에 반응하는 훅을 구축 useRef 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함 즉, 상태가 UI의 변경과 관계없을 때 사용 ex) setTimeout의 timerId 저장 uncontrolled componenet의 상태를 조작하는 등, 리렌더링을 최소화하는 상태 관리에 사용됨. useContext 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용 부분적인 컴포넌트들의 상태관리, 전체 앱의 상태 관리를 모두 구현 Context Provider 안에..
13. CRUD CRUD 1. CREATE const { post } = require('./models'); async function main() { const created = await Post.create({ title: 'first title', content: 'second title', }); const multipleCreated = await Post.create([ item1, itme2, ]); } create 함수를 사용하여 Document 생성 create 함수에는 1) Document Object -> 단일 Document 생성 2) Document Object의 Array -> 복수 Document 생성 create는 생성된 Document를 반환해 줌 2. FIND ( READ ) cons..
12. MongoDB MongoDB 란? 대표적인 NoSQL, Document DB Mongo는 Humongous 에서 따온 말로, 엄청나게 큰 DB 라는 의미 -> 대용량 데이터를 처리하기 좋게 만들어짐 RDB vs. NoSQL 1. RDB ? Relational DataBase 즉, 관계형 데이터베이스. 자료들의 관계를 주요하게 다룸 SQL 질의어를 사용하기 위해 데이터를 구조화해야함. 2. NoSQL ? Non SQL 또는 Not Only SQL 구조화된 질의어를 사용하지 않는 데이터베이스 자료 간의 관계에 초점을 두지 않음 데이터를 구조화하지 않고, 유연하게 저장함 NoSQL 을 사용하는 이유 SQL을 사용하기 위해서는 데이터를 구조화하는 것이 필수 (DDL) -> 스키마에 정의된 데이터가 아니면 저장할 수 없는 제약..
* SPA, MPA, CSR, SSR Single Page Application SPA 는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 CSR(Client Side Rendering) 방식으로 렌더링한다. 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다. 즉, 첫 요청 시 딱 한페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여준다. 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다. Angular, React, Vue 등 프론트엔드 기술..
6. Hooks 💨 Hook 이란? 컴포넌트에서 데이터를 관리(State) 하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. useState 가 바로 State Hook 이다. ✅ 유의사항 constr App = () => { const [ username, setUsername ] = useState(''); return ( {username}님 환영합니다. ) } Hook 은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 'use' 로 시작한다. 💨 State Hook const App = () => { // 일반적인 useState 사용법 const [ state이름, setState이름 ] = useState(초기값); } - useState 는 컴..

티스토리툴바