본문 바로가기

전체 글52

[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.
[WEB] HTTP / HTTPS 1. HTTP / HTTPSHTTP는 HyperText Transfer Protocol의 약자로 WWW상에서 정보를 주고 받는 프로토콜이다.쉽게 말해 HTTP는 웹 브라우저와 웹 서버가 웹 페이지와 같은 데이터나 자원을 주고 받을 때 사용하는 통신 규약이다.HTTP는 하이퍼텍스트, 즉 텍스트의 교환이기 때문에 악의적인 누군가(해커)가 네트워크에서 신호를 가로채어 본다면 내용이 노출되는 문제가 있다. HTTPS는 이러한 HTTP의 보안의 문제를 해결하기 위해 HTTP에 SSL을 추가한 것으로 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 해주고, 서버와 브라우저가 민감한 정보를 주고 받을 때 해당 정보가 도난당하는 것을 막아주는 역할을 한다.즉, HTTPS는 인터넷 상에서 정보를 암호화하는.. 2024. 1. 8.
[Web] 웹 브라우저 성능 개선 및 웹 서버 부하 완화 0. 웹 서버 부하 완화 및 웹 페이지 조회 성능 개선웹의 본질은 웹 서버가 클라이언트(웹 서버 혹은 웹 브라우저)의 요청에 따라 그에 맞는 웹페이지를 반환한다.웹 페이지 뿐 아니라 영상, 음성, 이미지 등 모두 반환 = 통칭 HTTP Resource웹의 본질에 따라웹 브라우저는 매번 웹 서버에게 요청해서 결과를 받아와야 하고웹 서버는 매번 웹 브라우저의 요청에 대해 결과를 만들어 반환해야한다.그래서 웹 브라우저와 웹 서버는 너무 힘들다.웹 브라우저 : 결과가 똑같다면 웹 브라우저는 매번 웹 서버에서 결과를 받아올 필요가 없다.이전에 받았던 결과를 저장 후, 매번 같은 요청이 오면 저장한 결과를 재사용하면 되지 않을까?웹서버 : 결과가 똑같다면, 웹 서버는 매번 웹 브라우저에게 만들어 줄 필요가 없다.이.. 2024. 1. 7.
[WEB] Cache / HTTP Cache 1. 메모리 계층 구조캐시에 대해서 이야기 하기 전 데이터를 저장하는 공간의 속도와 용량의 관계에 대해서 먼저 이야기 해보자.위의 그림으로 보면 아래쪽으로 갈수록 데이터를 저장할 수 있는 용량의 크기가 커지고 속도는 느려진다.반대로 위쪽으로 갈수록 데이터를 저장하는 용량은 작아지지만 속도가 빨라진다.이처럼 기본적이로 데이터를 저장하는 공간에서 속도와 저장용량은 반비례라고 생각할 수 있다. 사실 아래에서도 많은 이야기를 하겠지만 기본적으로 컴퓨터 공학의 발전은 효율을 굉장히 따지면서 큰 발전을 이루었던 것 같다. 속도도 빠르고 저장 용량도 크면 매우 좋겠지만 비용이 많이 들고 그러한 비용을 다른 곳에 쓰는 것이 더 큰 효율을 낼 수 있었다.2. 파레토의 법칙갑자기 파레토의 법칙을 이야기 하는 것이 이상하겠.. 2024. 1. 6.

티스토리툴바