분류 전체보기

React Hook의 도입Model-View 그리고 Controllerview(HTML): 화면에 보이는 것, 화면 (렌더링) -> return해서 우리 눈에 보이게 되는 것Model(JS): 브라우저 메모리에 있는 데이터 (데이터) -> stateController(JS): Model(값)을 변경하는 함수 (이벤트(~=데이터) 핸들러) -> `useState()`단방향 바인딩의 의미: 함수형 컴포넌트 그리고 Hook함수형 컴포넌트바인딩 = View와 Model싱크 = "화면에 보이는 것, 화면" 과 "브라우저 메모리에 있는 데이터"를 일치시키는 것React는 과거 클래스 컴포넌트를 기반으로 개발했었으나, 이젠 함수 컴포넌트를 지배적으로 사용단방향 바인딩이라는 특성에 맞춰 Model -> view를 함수..

JSX 문법주석: `{/ /}`XML이기에 명시적으로 닫는 태그 필수: `/>`JSX:(JavaScript Xml, Java Syntax eXtension): JSX는 겉으로만 보면 JS와 XML의 짬뽕HTML or XML + JS + CSS 모두 하나의 .jsx 파일 내 존재import { useState } from 'react'import './App.css'function App() { const [count, setCount] = useState(0) return ( Vite + React setCount((count) => count + 1)}>count is {count} Edit src/App.jsx and save..

✅ 객체 = 필드 + 메서드 (프로퍼티 집합)[HTML에서의 객체]HTML(DOM) 객체 명칭: 요소(Element = 객체) = 속성(Attribute = 프로퍼티) + Content요소: ``속성: ``✅ 객체 내에서 메서드 표현법[1. Default 버전]//1.var person = { name: "Aaron", sayName: function() { console.log(this.name); }};//2.class Person { name = "Aaron"; sayName = function() { console.log(this.name); }}; [2. Shorten 간략 버전]var person = { name: "Aaron", ..

자바스크립트 엔진은 자바스크립트 파일을 실행한다고 생각하지만 사실 함수를 실행하고, 파일은 main함수인격따라서 자바스크립트 엔진의 자바스크립트 파일 구동 방식은 자바스크립트 함수 구동 방식과 동일하다. 이에 자바스크립트 엔진의 자바스크립 함수 구동 방식에 대해 아래 간단히 2개의 Phase로 나누어 진행Creation(Pre-parsing) Phase: 실행에 앞서 어떤 변수와 함수가 정의되어있는지 먼저 분석Execution Phase: 그리고나서야 변수에 값을 할당하고, 함수는 실행✅자바스크립트 엔진 구성: stack + heapJS 엔진 구성 포스팅 글✅ 자바스크립트 엔진 내 함수 동작 원리JS엔진은 Stack + Head 두개만 기억 = 자바스크립트 함수 동작 원리 이해도 마찬가지로 두개만 기억함..

자바스크립트 버전: ECMAScript(ES)자바스크립트에도 여타 프로그래밍 언어와 같은 버전이 존재자바스크립트 버전: 자바스크립트도 자바나 다른 언어와 같이 ECMAScript으로 매년 새 표준이 등장자바와 달리 프로그램 실행을 위한 엔진 버전이 유저들이 쓰는 웹 브라우저마다 달라 Transpiler 필요자바스크립트 변수 선언 방법변수 선언은 자바스크립트 버전인 ECMAScript 6 (2015) 이전에는 `var` 하나의 방법으로만 선언 ECMAScript 6 버전 이후로 변수 선언은 `let` 과 `const` 로 선언할 수 있다.`let`: 가변 변수 선언 시`const`: 불변 변수 선언 시var, let, const 비교 정리 재선언재할당스코프`var`oo함수`let`x: 방어o: 가변 변수블..

자바스크립트는 함수형 프로그래밍 패러다임을 추구하며, 추가로 객체지향 프로그래밍 패러다임도 지원 자바스크립트의 핵심은 함수(함수형 프로그래밍 패러다임) 와 객체(객체지향 프로그래밍 패러다임)이다.자바스크립트 개발자가 제대로 개발하기 위해서는 함수형 프로그래밍에 대해 완전히 이해해야한다.물론 자바스크립트 개발자도 객체지향을 완전히 이해해야한다. (우테코 자바스크립트 과제에서 객체지향 강조)일급함수함수를 변수, 파라미터, 반환으로 사용될 수 있다.순수 함수Thread-Safe: No Side Effects ⊂ 참조 투명성순수 함수 특징참조 투명성(Referentially Trannsparent) : 함수가 외부 상태에 의존하지 않는다.같은 파라미터에 같은 반환값부수 효과 없음(No Side-Effects):..

CORS 등장 배경CSRF(유저 비의도적 요청) 부분 방지를 위한 웹 브라우저 정책웹 브라우저는 자바스크립트를 동작시키는 엔진을 갖고있어, 무궁무진한 작업 수행이 가능함과 동시에 해커가 자바스크립트를 통해 위험한 작업을 수행할 수 있는 무한한 가능성을 갖게 된기도 한다.보안 취약성의 거의 대부분은 웹을 통해 이루어지며, 최전선에 있는 웹 브라우저는 보안에 예민할 수 밖에 없다.해커는 유저가 웹 브라우저를 정상적으로 사용할때, 악의적인 자바스크립트 수행으로 타 서버를 공격할 수 있다.웹 브라우저는 그런 요청이 발생하더라도 웹 브라우저 자신이 최대한 방지할 수 있도록 정책들을 마련해놓았다.W3C는 가장 먼저 SOP라는 정책 표준을 도입하여 웹 브라우저에서 단단하게 방어를 하도록 했는데API호출이 사실상 필수..

✅ HTTPS웹 통신 내 요청, 응답에 대한 암호화HTTPS(HTTP Secured, TLS): 웹 통신 내 end to end 회선 보호SSL(Secure Sockets Layer) 혹은 TLS(Transport Layer Seucurity) 프로토콜을 통해 HTTP 보안 강화✅ HTTPS 목적요청을 보내고, 응답을 받는 두 주체(end to end)만 HTTP 요청 및 응답을 읽을 수 있게 암호화목적: MITM(Man In The Middle) 공격 방지심화 : MITM (Man-In-The-Middle) 공격 종류🔹스니핑(sniffing, 도청): Wireshark 를 통해 여러분의 모든 웹 서핑 패킷 도청 가능보안되지 않았다는 것은 AP;access pointer 와 연결된 컴퓨터 사이에 암호화..

Session웹 서버 내 저장 + 단, SESSION_ID는 웹 브라우저 내 저장 및 전송session은 웹 브라우저 쿠키에 저장하던 값을 웹 서버측에 저장하기 위해 별개의 저장소 DB가 필요오해하지말자! Session을 사용한다고, Cookie를 사용하지 않는건 아니다.웹 브라우저 내 Cookie에는 어떤 세션인지 알기 위한 ID값 저장 필요Session의 대표적인 예: 웹 브라우저로부터 쿠키로 SESSION_ID를 받아 해당 요청 유저의 정보 조회속도가 매우 중요: API 수천번의 호출마다 Session 조회 필요그래서 현업에서 메모리 기반 DB인 Redis를 많이 사용 -> 비용 이슈..(메모리는 언제나 비싸다), 확장성 이슈(비싼 인스턴스)Session 의 장점Cookie의 단점 = Session..