Frontend/기타15 [FE] 프론트엔드 기술 기본 4 (RESTFUL API) RESTFUL API rest란 자원을 이름으로 구분하여 자원의 형태를 공유하는 것을 의미한다. api란 데이터와 기능을 집약해놓은 사용하기 좋게 해놓은 것. restful api는 rest를 통해 확장성과 재사용성 즉 업무 효율을 올리는 규칙등을 적용하여 아키텍쳐를 구현하는 웹서비스를 의미한다. RESTFUL API의 메소드는 GET, POST, PUT, PATCH, DELETE가 있다. GET은 데이터 조회, POST는 데이터를 서버에 전송, PUT은 수정(업데이트), PATCH는 수정에 용이하지만 PUT과 다르게 해당 자원의 일부만을 교체, DELETE는 삭제에 용이한 메소드이다. 2023. 3. 25. [FE] 프론트엔드 기술 기본 3 (this, call, apply, bind) 1. this 전역범위에서 사용될때 this는 전역객체를 가르킨다. 함수에서 사용될때도 전역객체를 가르킨다. 객체에 속한 메서드에서 사용될때 그 메서드의 객체를 가르킨다. 객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킨다. 생성자에서 사용될때 생성자로 인해 생성된 새로운 객체를 가리킨다. 2. call, apply, bind this가 함수 호출식에 따라 객체를 가르켰다면 call apply bind는 함수가 직접 실행문맥을 결정한다. 그 중에 call, apply는 함수를 호출해 실행한다. call apply를 사용했을때의 장점은 첫번째 인자가 없더라도 에러없이 실행이 가능하다(자동으로 전역객체를 지정하여 실행) bind는 지정한 객체의 함수를 만든다. 정리하면 call apply는 함수를.. 2023. 3. 24. [FE] 프론트엔드 기술 기본 2 GET/POST 차이점? GET과 POST를 설명하려면 먼저 HTTP에 대해서 간략하게 알아야 한다. HTTP란? : 클라이언트와 서버 간에 데이터를 주고받는데 사용되는 요청/응답 프로토콜이다. GET GET이란? : 서버로부터 정보(데이터)를 조회하기 위해 사용되는 HTTP 메소드 GET 요청의 특징 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송합니다. (쿼리스트링이란? : URL의 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터, 요청 파라미터가 여러 개이면 &로 연결.) ex) www.example-url.com/resources?name1=value1&name2=value2 불필요한 요청을 제한하기 위해 요청이 캐시될 수 있다. ex) js, css, 이.. 2023. 3. 23. [FE] 프론트엔드 기술 기본 1 브라우저 렌더링 원리 렌더링이란? : HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정 과정 1. HTML, CSS를 다운로드 2. 다운받은 HTML, CSS를 각각 DOM과 CSSOM (OM = Object Model)로 만듬. 3. 만들어진 DOM, CSSOM을 사용하여 Render Tree를 생성 Render Tree의 목적 : 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적 (Render Tree에는 실제 화면에 표현되는 요소들로만 구성 됨. 4. Render Tree 배치 5. 이 Render Tree를 그리는 과정을 통해 브라우저가 서버에 요청한 내용들을 픽셀화 시키는 것을 브라우저 렌더링이라고.. 2023. 3. 20. [FE] local storage vs session storage vs cookie 모두 클라이언트 상에서 key/value 쌍을 저장할 수 있는 메커니즘으로 value는 반드시 문자열 이어야 한다. 또한 모두 동일 출처 정책(SOP) 을 따르기 때문에 다른 도메인에서 접근할 수 없다. cookielocal storagesession storage 생성자 클라이언트/서버 클라이언트 클라이언트 지속시간 설정 여부에 따름 명시적으로 지울때까지 탭 / 윈도우 닫을 때까지 용량 5KB 5MB / 10MB 5MB 서버와의 통신 O X X 취약점 XSS / CSRF 공격 XSS 공격 XSS 공격 2023. 3. 7. [FE] 표준 모드와 호환 모드 과거의 웹 페이지는 넷스케이프와 익스플로러 버전이 따로 존재했고 웹 표준이 없었다. 그러나 W3C가 웹 표준을 만들면서 브라우저가 웹사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준 모드(Standards mode)와 호환 모드(Quirks mode)로 렌더링을 할 수 있게 옵션을 제공하였다. 브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링을 한다. 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있다. 예를 들어, IE의 경우 호환 모드에서 박스 모델(Box model)을 잘못 해석하지만, 나머지 브라우.. 2023. 3. 5. 이전 1 2 3 다음