본문 바로가기

전체 글64

[JavaScript] 호이스팅(Hoisting) 1. 호이스팅(Hoisting)호이스팅(Hoisting)이란 함수내의 변수 및 함수의 선언들을 모두 유효 범위의 최상단으로 끌어올려 주는 JavaScript의 기능 중 하나이다. 실제 코드가 끌어올려 코드의 변화가 있는 것이 아니라 자바 스크립트 parser가 내부적으로 끌어올려 처리한다. 컴파일 단계에서 코드 실행 전 함수와 변수의 선언들을 스캔하여, 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다.// 개발자가 작성한 코드 // console.log(a); // undefinedvar a = "A"; // var 변수 // 자바스크립트에서 호이스팅 된 코드 var a; console.log(a);a = "A"; a가 상단으로 호이스팅이 되었기 때문에 .. 2024. 1. 24.
[JavaScript] 깊은 복사 / 얕은 복사 들어가기에 앞서 얕은 복사의 경우 주소 값을 복사하고, 깊은 복사의 경우 실제 값을 복사한다고 생각하자. 깊은 복사와 얕은 복사에 대해 알아보기 전 주소 값, 실제 값의 의미를 파악하기 위해 JavaScript의 데이터 타입에 대해 알아보자.JavaScrpit의 데이터 타입의 경우 크게 기본형(원시형, Primitive) 타입, 참조형(Reference) 타입 2종류로 분류할 수 있다. 1. 데이터 타입기본형(원시형, Primitive type) 타입 NumberStringBooleannullundefinedSymbol(ES 6에서 추가)참조형(Reference) 타입 → Object(객체)ArrayFunctionDateRegExpMap, WeakMapSet, WeakSet기본형과 참조형을 구분하는 방법.. 2024. 1. 24.
[Docker] Docker의 기본 개념 Docker 사용 이유 : Consistency(일관성)와 Multiple Containers(다중 컨테이너)어플리케이션 동작의 일관성을 갖기위해 (어느 서버나 컴퓨터에서 동작해도 정상적으로 동일한 동작으로 하기 위해)어플리케이션 버전설정 명령어 존재 여부환경변수설정파일 누락 여부실행 환경하나의 서버임에도 다중 컨테이너를 동작시키면 다양한 어플리케이션들을 조합하여 원하는 서버를  구동 가능하다.Docker 개념도커(Docker)는 컨테이너 기반 가상화 플랫폼으로, 응용 프로그램과 그 종속성을 격리된 환경인 컨테이너로 패키징하여 실행하는 기술이다. 이를 통해 응용 프로그램을 서로 다른 환경에서도 일관되게 실행할 수 있고, 개발 환경과 운영 환경 사이의 차이로 인한 문제를 줄일 수 있다. 도커 컨테이너는 가.. 2024. 1. 23.
[Git] Git 개념 및 명령어와 브랜치 전략 및 배포 프로세스 0. 로컬 코드 및 협업 시 문제 관리우리는 여러가지 파일을 생성하고 변경한다.이때, 최종, 최최종, 찐최종, 찐찐최종... 등 다양한 이름으로 파일을 구분하면서 계속해서 변경하고는 한다.이러한 파일(코드)를 관리하는 과정과 어떤 방법으로 파일을 수정하고 저장하고 관리하는지 아래의 그림을 통해 확인해보자로컬 코드 관리다양한 버전 : 하나의 코드(파일)에서 다양한 케이스의 구현을 테스트 해볼 때히스토리 추적 : 작업 시 문제 발생했을 때 직전 버전으로 롤백안전히 원격 저장 : 만약 내 노트북(or usb 등)이 도난 당한다면?협업 관리 : 하나의 프로젝트(파일)에 참여하는 사람이 많아진다면 어떻게 관리해야 할까?만약 내가 어떤 변경사항이 있는데 다른 사람도 그것에 대해서 다르게 바꿨다면???? 1. 로컬 .. 2024. 1. 17.
[Git] Git 구조와 용어 1. Git과 Github는 무엇일까?Git은 SVN 이후로 가장 많이 사용되는 형상관리 툴이다. 기본적인 개발자가 되기 위해서는 꼭 깃을 써보고 잘 다룰 수 있어야 한다는 밈이 있을 정도로 개발자들에게 Git이란 빼놓을 수 없는 존재다. 이러한 깃은 컴퓨터 파일의 변경사항을 추적하고 여러명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 어떤 파일이든 변경사항을 지속적으로 추적하기 위해 사용한다. Git을 활용하여 로컬에서 자신의 개발 소스에 대한 섬세한 관리가 가능하고, Remote Repository(원격 저장소)에 영구적인 백업과 다양한 협업이 가능하도록 지원하는 기능을 가리킨다. 그렇다면 Git과 Github의.. 2024. 1. 17.
[JavaScript/CSS] CSS Selector 정리 CSS(Cscading Style Sheets)는 HTML요소의 style을 정의한다. 그렇기 위해서는 먼저 HTML이 존재해야 하고 style을 적용하고자 하는 HTML 요소를 특정해야 한다.이렇게 꾸미기 위한 HTML 요소를 특정하는 것이 셀렉터(Selector)이다.  이제부터 아래에 나오는 HTML 예시들을 직접 실행해보며 결과를 확인하면서 보면 더 이해가 빠를 것이다.HTML 실행 사이트 W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your browserwww.w3schools.com   Hello World! This paragraph is s.. 2024. 1. 16.
[Web] Cookie / Session 1. Cookie의 개념쿠키의 개념을 확인하기 전 쿠키의 등장 배경부터 알아보자. 기존의 HTTP 통신은 Stateless(비연결성, 무상태성)의 속성을 가지고 있었다. 이것은 동일한 웹 브라우저가 동일한 웹 서버에 보낼 때 자신의 정보를 매번 보내야 했으므로 효율적이지 못했다.이러한 HTTP 통신의 Stateless한 속성을 더 효율적인 Stateful한 통신을 위해 등장하였다.쉽게 말해 쿠키는 웹 사이트 재방문 시 효율적으로 서비스를 제공하기 위해 등장하였다.쿠키 : 웹 브라우저와 웹 서버의 상태성을 표시할 수 있는 브라우저에 저장되는 로 이루어진 작은 데이터 파일 그렇다면 Stateless와 Stateful의 차이와 정의를 웹 통신을 예시로 간단하게 알아보자.Stateless : 무상태성웹 서버가 .. 2024. 1. 15.
[Web] HTTP Stateless 해결을 위한 웹 저장소 및 웹 보안 0. HTTP는 Stateless하다.Stateless : 불연속성 - 웹 서버 입장에서는 매 요청이 어떤 웹 브라우저가 보낸 것인지 알 수 없다.Stateful : 연속성 - 웹 서버가 이전에 요청받았던 웹 브라우저와 현재 요청의 웹 브라우저를 구별할 수 있다.어떤 유저(어떤 웹브라우저)의 요청인지 알 수 있다면, 요청마다 별개의 작업 수행 혹은 결과 반환이 가능하다.  1. Stateful HTTP : Cookie & Session웹 서버는 웹 브라우저의 요청이 어떤 유저에 의해 요청된 것인지 알기 위해 응답 반환시 특정 정보를 함께 반환한다.웹 브라우저는 응답을 받아, 응답 헤더에 붙어있던 특정 정보를 웹 브라우저 쿠키에 저장한다.웹 브라우저는 이후 요청부터 웹 서버에게 특정 정보를 함께 전달하면 .. 2024. 1. 11.
[Web] Forward Proxy / Reverse Proxy 1. 프록시(Proxy) 란?기본적으로 프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용프로그램을 가리킨다.즉, 프록시(Proxy)는 클라이언트와 서버 사이에 위치하여 중계기 역할을 하며 통신을 '대리'로 수행하는 것이다.그렇다면 이러한 대리 역할을 하는 프록시를 사용하는 이유는 무엇일까?그 이유는 보안상의 이유로 직접 통신할 수 없는 두 점 사이에서 대리로 통신을 수행하여 보안성, 성능, 안정성을 향상시키기 위해 사용한다. 보통 클라이언트(웹 브라우저)와 서버(웹 서버)와 통신을 주고 받을 때 데이터 형태로 주고 받는다.이때, 통신을 반복적으로 진행할 때, 중복되는 데이터를 반복하여 전달한다면 효율적이지 못하고 리소스, 네트워크 트.. 2024. 1. 10.

티스토리툴바