Node.js vs 브라우저 환경

• Node.js vs 브라우저 Node.js - Node.js 공식 사이트에서는 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 라고 설명되어 있다. (런타임? -> 프로그래밍 언어가 실행되고 있는 환경) 쉽게 다른 버전의 JavaScript 또는 JavaScript 실행환경이라고 생각하자! 브라우저 - 우리가 일상생활에서 검색을 하는 사이트에 접속할 수 있는 도구 - HTML 문서, 이미지 등 여러 콘텐츠를 우리에게 화면으로 표현해줌 - 웹 정보를 화면에 표시하는 소프트웨어 • 둘 다 JavaScript를 실행시키는데, Node.js가 왜 나왔나? 구글이 크롬 웹 브라우저의 베타 버전을 발표 -> V8 엔진 탑재 V8 엔진은 이전의 개발되었던 다른 엔진..

• format_list_bulleted WEB
• · 2023. 5. 8.
• textsms

Vue vs React

• 라이브러리 vs 프레임워크 Framework Library 공통점 다른 사람이 만들어 둔 코드 차이점 다른 사람이 만든 틀(Frame)안으로 들어가서 작업 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것 Vue는 Framework임 프레임워크는 모든 환경과 도구를 제공해주지만 그것들만 사용해야 함 해당 기술을 새롭게 배워야 함 React는 JavaScript 라이브러리임 라이브러리는 하나의 도구를 제공받는 것으로 우리가 원하는 내용 선택할 수 있음 다른 도구들을 기본적으로 제공하지 않아서 개발자가 스스로 선택해서 조합해야 함 • 코드 스타일 조건에 따라 Button의 visibility 유뮤를 변경해주는 예제가 있다고 하자. React //&&연산자 사용 {isVisible && 조건에..

• format_list_bulleted Vue.js
• · 2023. 5. 7.
• textsms

Rest API, RESTFUL API

• REST란? ∘ REpresentational State Transfer 약자 => 자원을 이름으로 구분해 해당 자원의 상태를 주고 받는 모든 것 즉, 자원의 표현에 의한 상태 전달! 자원의 표현? 자원 = 해당 SW가 관리하는 모든 것(문서, 그림, 데이터 ...) 자원의 표현 = 그 자원을 표현하기 위한 이름 ex) DB의 학생 정보가 자원 -> 'students'가 자원의 표현 상태(정보) 전달 데이터가 요청되는 시점에 자원의 상태 전달 JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적임 ∘ 개념 HTTP URI를 통해 자원을 명시하고, HTTP Method를 통해 해당 자원에 대한 CRUD 연산을 적용하는 것을 의미함 웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 고유한..

• format_list_bulleted WEB
• · 2023. 5. 6.
• textsms

쿠키 vs 세션 vs 웹 스토리지

HTTP 프로토콜은 비연결지향(Connectionless), 무상태(Stateless)라는 특성을 가짐 -> 연결을 끊는 순간 클라이언트와 서버의 통신 끝나며 상태 정보 유지 X 따라서 서버는 클라이언트의 상태를 알 수 없으므로 쿠키와 세션을 사용함 • 쿠키(Cookie)란? 클라이언트(브라우저)에 저장되는 작은 데이터 파일 유효 기간이 있음 -> 유효 기간동안은 브라우저에 데이터 저장 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Resquest Header에 넣어서 자동으로 서버로 전송 4KB로 용량이 제한 동작방식 클라이언트가 서버에 HTTP 요청 서버에서 쿠키 생성 후, HTTP 헤더에 쿠키를 포함시켜서 응답 클라이언트는 이제부터 HTTP 요청시마다 HTTP Header에 쿠키 담아서..

• format_list_bulleted WEB
• · 2023. 5. 5.
• textsms

JavaScript 비동기 처리 방법(Promise, async, await)

• 콜백(Callback)이란? 다른 함수를 파라미터로 받아서, 그것을 내부에서 호출하는 함수 function A(callback){ callback(); } function B(){ console.log("콜백이지롱"); } A(B); 함수 자체를 연결하는 것(함수 실행을 연결하는 것 아님) 함수의 실행이 끝나면 지정한 콜백함수를 실행해 주도록 함수에 요청할 때 사용 위의 사진처럼 콜백함수 여러 개를 중첩한다면? -> 가독성이 너무 안좋아짐.. 이런 걸 콜백 지옥이라고 부름 콜백지옥을 어떻게 해결하는지 알아보자! • Promise - Promise는 비동기 작업의 단위 - 미래에 어떤 종류의 결과가 반한됨을 약속(Promise)해주는 Object! const promise1 = new Promise((..

• format_list_bulleted JavaScript
• · 2023. 5. 3.
• textsms

JavaScript 동기/비동기(동작 원리)

• 동기(Synchronous) vs 비동기(Asynchronous) 일단 JavaScript는 동기식 언어(=단일 스레드)이다. 그렇다면 동기식, 비동기식이 뭔지 알아보자. - 동기식 순차적으로 태스크를 수행 어떤 작업이 수행중이라면 뒤의 작업은 앞의 작업이 끝날때 까지 대기해야 함 블로킹이 발생 동시에 여러 작업 수행 X, 흐름 예측 쉬움 - 비동기식 병렬적으로 태스크를 수행 현재 작업의 종료 여부와 무관하게 다음 작업을 실행 동기 방식과는 달리 완료 순서가 보장되지 않음 블로킹이 발생하지 않음(non-blocking) 동시에 여러 작업 수행 O, 흐름 예측 어려움(무엇이 먼저 완료될 지 보장 X) 동기식.. 너무 비효율적인데? 그리고 브라우저는 여러 작업이 동시에 실행되지 않나? -> 위의 의문에 ..

• format_list_bulleted JavaScript
• · 2023. 5. 3.
• textsms