진짜 개발자
본문 바로가기

Web (총 32개)

Web - 브라우저 저장소(Web Storage란) 종류 이미지 웹브라우저의 저장소에는 크게 두가지 1. 세션 스토리지 2. 로컬 스토리지가 존재합니다. 차이 두 저장소의 차이점은, 수명 과 범위 에 있습니다. 세션스토리지 의 경우 브라우저가 닫히면 저장된 값들이 모두 사라지며 탭과 브라우저간의 공유가 되지 않습니다. 로컬스토리지의 경우 이름 그대로 로컬에 저장되어 브라우저가 종료되더라도 값이 보존되고, 도메인만 같다면 탭과 브라우저간의 공유도 가능합니다. 주의점 웹 브라우저의 저장소(세션 저장소)는 JavaScript로 접근이 가능하기 대문에 XSS 공격에 매우 취약합니다. 인증 토큰등을 담지 않도록 주의해야 합니다. 쿠키와의 차이점 쿠키의 경우 저장되는 크기가 상대적으로 매우 작으며(4096kb 브라우저별 상이) 세션 스토리지의 경우 그 크기가 상대적..
Servlet  - SpringMVC을 사용하기 전 꼭 알아야 할 Servlet Servlet 이해하기. Servlet 이란? 간단히 말씀드려, 자바진영의 CGI 라고 볼 수 있습니다. 우선 CGI가 무엇인지부터 알아보아야 할것 같습니다. 1. CGI CGI란, 동적으로, 웹페이지를 생성하는 Web Server의 프로그램을 실행하기 위한 Interface를 의미합니다. 조금 더 쉽게 알려드리겠습니다. 1.1 CGI란? CGI가 없는 웹서버 CGI가 없는 웹 서버의 경우 사용자의 요청에 따라, 미리 작성된 html 사용자에게 전송이 됩니다. 어렸을때, 학교에서 보던, 반마다 있던 게시판을 떠올려보시면, 됩니다. 게시판의 내용을 누가 수정하지 않는 이상, 학생들은 항상 같은 내용의 게시판을 보게 됩니다. CGI CGI가 있는 경우, 웹서버는 사용자의 요청에 따라 동적으로 html을 작성..
javascript - [코어자바스크립트] 실행컨텍스트와 Hoisting(호이스팅) 그리고 ScopeChaning(스코프 체이닝) 호이스팅과 실행컨텍스트 이번 포스팅은 Javascript의 Execution Context(실행컨텍스트)와 `Hoisting(호이스팅) 그리고 Scope Chaining(스코프체이닝)에 대해 알아보도록 하겠습니다. 실행 컨텍스를 이해해야지만, 이 포스팅에 담기는 내용들인 Scope Chaining과 hoisting에 대한 이해가 수월합니다. 이번 포스팅역시 코어자바스크립트라는 책을 기반으로 작성되었습니다. 1. 실행 컨텍스트(Execution Context)란?javascript의 Execution Context(이하 실행컨텍스트)는 code 실행시 필요한 정보들(필요한 환경들)을 모아놓은 객체 입니다. javascript는 코드를 실행하며, 필요한 환경정보들(ex. 변수, 함수 등..)들을 모아 이를 ..
javascript - [코어자바스크립트] 불변객체와 복사(얕은복사와 깊은복사) 1. 불변객체 Javascript의 불변객체와 값 복사에 관하여 포스팅을 진행하겠습니다. 본 포스팅은 코어자바스크립트라는 책을 기반으로 작성되었습니다. 1. 불변객체1.1 불변객체란 https://galid1.tistory.com/622 우선 불변객체에 관해서 잘 모르시다면 위의 글을 먼저 읽어보시는 것을 추천드립니다. (JAVA로 작성되어 있지만, 참조형의 개념을 아신다면 크게 문제없이 읽을 수 있습니다.) 간단히 말씀드려 불변객체란 어떤 객체내부의 프로퍼티들을 변경할 수 없도록 되어있는 객체를 일컫습니다. 그렇다면 언제 이런 불변객체가 필요할까요? 1.2 불변객체의 필요성 (기본형데이터와 참조형데이터의 차이)문제상황xlet people1 = { name : "A", gender : "male", ag..
javascript - [코어자바스크립트] javascript의 메모리와 데이터할당 (데이터 할당의 자유와 효율성) 1. 메모리와 데이터 javascrip의 메모리와 데이터 그리고 데이터할당에 대해서 알아보도록 하겠습니다. 본 포스팅은 코어자바스크립트라는 책을 기반으로 작성되었습니다. 1. 메모리와 데이터1.1 데이터 단위 존재의 이유컴퓨터는 0과 1로 모든 데이터를 표현합니다. 이렇게 0과 1만 표현할 수 있는 하나의 메모리 조각을 bit라고 표현합니다. 그런데 Byte와 같은 단위들은 왜 생겨났을까요?? 화폐간단합니다. 우리 일상생활에서도 찾아볼 수 있는데요 바로 화폐입니다. 10원짜리 동전으로도 100만원 1000만원을 표현할 수 있지만, 이는 매우 비효율적입니다. 예를들어 카드가 없던시절 매우 비싼 명품을 산다고 했을때, 이를 10원짜리 동전으로 계산하고 거스름돈을 받는다고 생각을 해보면, 시간이 매우 많이 소..
React - LifeCycle 메소드 (성능개선, 업데이트 라이프 사이클 주의사항) 이번 포스팅에서는 React의 LifeCycle에 대해 알아보도록 하겠습니다 이번 포스팅에서는 React의 LifeCycle에 대해 알아보도록 하겠습니다. 본 포스팅은 리액트를 다루는 기술이라는 서적을 참고하여 작성되었습니다. 1. 라이프 사이클 메소드 종류라이프 사이클 메서드의 종류는 크게 3가지로 나뉩니다. 아래에서 조금더 자세히 보시죠. 1.1 마운트첫번째 종류는 마운트입니다. 우선, 마운트란 DOM이 생성되고 웹브라우저상에 나타나는 것을 의미합니다. 마운트시 호출되는 라이프사이클 메소드들마운트시 호출되는 라이프 사이클 메소드들은 시간순서대로 정렬하여, 아래와 같습니다.constructor : 컴포넌트 생성시 호출되는 클래스 생성자 메소드 getDerivedStateFromProps : props에..

티스토리툴바