'TIL/개념정리' 카테고리의 글 목록 (3 Page)

2023. 3. 13. 22:52 TIL/개념정리

네트워크 관련 기본적으로 도커 컨테이너는 격리되어 있다. 컨테이너간 통신을 하기 위해 네트워크를 정의해줘야하는데 compose를 활용해서 묶거나 새로 네트워크를 만들어서 만든 네트워크에 등록해준다. Compose networks: server-connection: driver: bridge db-connection: driver: bridge 개별 컨테이너 # 네트워크 만들기 docker network create # 네트워크에 연결하기 docker run --name --network # 예시 docker network create server-network docker run --name mysql-container --network server-network -v mysql-data:/var/lib..

GCP 인증서, 로드밸런서와 도메인 연결하기

2023. 2. 28. 21:19 TIL/개념정리

Https 적용하기 구글 클라우드 플랫폼(GCP) Compute Engine에 HTTPS 적용하기 GCP에서 로드밸런서를 이용한 HTTPS적용기 keyhyuk-kim.medium.com GCP로 배포를 끝내고 도메인을 등록하고자 했다. 49,000원인데 할인해서 1900원에 1년 제공하는 것을 구매하였다 도메인을 가비아에서 구입하고 설정하려고보니 도메인 설정하는 부분이랑 ssl 인증서 관련하는 설정이 조금 겹치는거같아 같이 설정하기로 했고 위와 같은 자료를 참고해서 쉽게 설정할 수 있었다. 처음엔 프론트, 백이 왜 필요한건지 이해하지 못했는데 부하분산기와 보안적인 측면에서 이해할 수 있었고 이미지만 보더라도 쉽게 알 수 있었다. 모르는 부분은 세세하게 검색하면 금방 찾을 수 있었고 이 외로는 chatGP..

vanilla js로 간단하게 spa 구현

2023. 1. 8. 20:43 TIL/개념정리

Vanilla JS로 SPA 구현 유튜브를 참고해서 바닐라 js로 간단하게 spa 구조를 잡는 것을 실습해보았다. 기존의 history 방식으로 구현된다는 것은 대충 알고 있었는데 실제로 구현해보니 잘 이해할 수 있었다. 조금 헷갈렸던 부분이 이벤트 리스너를 달아주는 부분이었는데 찾아보니 다양한 이벤트를 감지할 수 있었다는 것을 알았다. import Home from "./Home.js"; import Posts from "./Posts.js"; import Settings from "./Setting.js"; import NotFound from "./NotFound.js"; function navigateTo(url) { history.pushState(null, null, url); router()..

WebPack을 사용하는 이유와 정리

2023. 1. 7. 23:03 TIL/개념정리

Webpack이란 우선 웹팩을 간단히 설명하자면 여러 파일을 합쳐 정적인 하나의 파일로 만들어주는 tool을 웹팩이라고 한다. 아래 이미지를 보면 여러 경로로 엮인 파일들이 단순화 된다. 왜 Webpack을 사용해야할까? 이건 웹 개발의 역사를 알아보면 쉽다. 2000년대 초반 웹페이지는 각 페이지마다 새로운 html을 요청하면서 화면을 매번 다시 그리는 방식이었습니다. 이때 js도 마찬가지로 간단하게 DOM을 조작하는 역할 뿐이고 기능적으로 많은 역할이 필요하지 않지만 인터넷의 규모가 커지고 프론트/백의 구조로 구분되고, 이러한 아키텍쳐에서 SPA의 개념이 발전하며 수백가지의 js 파일이 포함되어 더 이상 이전의 방식으로 유지될 수 없었습니다. 따라서 웹팩이 등장하기 시작했고 총 3가지 이유로 정리할 ..

SQL Injection이란?

2022. 11. 13. 19:07 TIL/개념정리

SQL Injection이란? SQL 인젝션(SQL 삽입 공격)은 악의적인 사용자가 데이터베이스와 연동된 웹 애플리케이션에서 조작된 질의(쿼리)문을 주입하여 웹 서비스에 대한 DB정보를 열람또는 조작할 수 있는 하나의 취약점입니다. 인젝션 공격은 OWASP Top10 중 첫 번째에 속해 있었으며, 공격이 비교적 쉬운 편이고 공격에 성공할 경우 큰 피해를 입힐 수 있는 공격입니다. OWASP : 웹에 관한 정보노출, 악성 파일 및 스크립트, 보안 취약점 등을 연구하는 회사로 보안에 큰 영향을 줄 수 있는 보안 취약점목록을 발표합니다. OWASP에서 발표한 10가지의 웹 보안위협 OWASP Top Ten | OWASP Foundation The OWASP Top 10 is the reference stand..

this란

2022. 11. 2. 11:44 TIL/개념정리

js에서 this란? 일반적으로 js에서의 this는 다른 언어들과는 조금 다르다(C++, Java 등..) 브라우저 개발자 도구에서 콘솔로그로 this를 찍어보면 기본적으로 window 객체가 나온다. 함수에서 this를 호출해도 window지만 nodejs환경에서 this는 global 객체로 나온다. 하지만 최근에는 global this로 합쳐졌다고 한다 + strict모드 상에서는 this를 찍어보면 undefined가 된다. 이러한 부분은 단순히 console.log만 찍어봐도 알 수 있다(참고). 이렇게 나오는 이유 일반적으로 this는 호출될 때 결정된다. 현재 브라우저상에서 콘솔 로그를 찍어보면 전역 범위에서 호출되는데 이때 this는 브라우저 최상단에 window라는 전역객체를 가리키고 ..

호이스팅이란?

2022. 10. 31. 22:53 TIL/개념정리

개요 요즘 호이스팅에 관한 문제는 크게 없다. 왜냐하면 EsLint같은 곳들의 옵션 속에서 자동적으로 에러를 뿜어내서 변수를 항상 최상단에 선언할 수 있도록 만드는 하나의 장치가 마련되어있기도 하고 코드를 읽기 쉽게 만드는 여러 방식들 중에서 변수 위치는 상당히 중요한 부분이기 때문에 이론적인 지식들만 확인해보고 넘어가려고 한다. 호이스팅 호이스팅 - 용어 사전 | MDN JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 var로 선언한 경우 호이스팅 시 undefined로 변수를 초기화하는 반면 let 과 const 로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않습니다 js의 모든 선언에는 호이스팅이 발생하게 ..

실행 컨텍스트란?

2022. 10. 31. 22:20 TIL/개념정리

실행 컨텍스트 실행 컨텍스트는 상당히 중요함 lexical scoping과 이것만 이해하면 자바스크립트를 이해하는데 필수적인 개념인 호이스팅, 클로저를 모두 분석할 수 있습니다. 컨텍스트는 한국말로 문맥인데 쉽게 코드의 실행 환경이라고 이해하면 된다 var name = 'zero'; // (1)변수 선언 (6)변수 대입 function wow(word) { // (2)변수 선언 (3)변수 대입 console.log(word + ' ' + name); // (11) } function say () { // (4)변수 선언 (5)변수 대입 var name = 'nero'; // (8) console.log(name); // (9) wow('hello'); // (10) } say(); // (7) 코드를 처..

스코프 체인

2022. 10. 27. 23:10 TIL/개념정리

스코프 체인이란 한마디로 정리하면 블록에서 어떤 값에 접근이 가능하고 어떤 값에는 접근이 불가능한지를 확인해주는 것이다. 이때 블록은 { }로 표현되는 if, while, for, try-catch... 등이 있고 그냥 { }만 작성해도 블록으로 처리된다. 아래 코드는 함수 b를 선언했지만 실제로 실행시키게 되면 b는 선언되지 않았다고 나온다. 왜일까? const x = "x1"; function c() { const y = "y"; console.log("C"); function b() { const z = "z"; console.log(b); c(); } } function a() { const x = "x2"; console.log("a"); b(); } a(); c(); 함수의 선언위치를 살펴보면..

Call stack (호출 스택)

2022. 10. 24. 22:33 TIL/개념정리

Call stack이란? 콜스택은 말 그대로 콜을 관리하는 스택이다. 여기서 call(호출)이란 함수의 호출이라고 생각하면되는데 이것을 스택으로 관리하는 이유는 자바스크립트가 싱글 스레드 언어이기 때문이다. 싱글 스레드란 말은 한번에 하나의 작업만 실행시킬 수 있게 되는데 우리가 함수를 호출하는 코드를 작성하게되면 스레드가 호출된 함수가 있는 곳으로 이동해서 거기서부터 다시 코드를 실행시킨다. 이것을 분기라고도 하고 제어권 이동이라고도 한다. 그런데 이렇게 함수를 호출한 곳으로 이동하게 됐을 때 이미 실행되던 함수의 정보를 저장해야만 새로 호출해서 실행된 함수가 종료되었을 때 다시 작업하던 위치부터 실행을 이어나갈 수 있다. 이때 실행시키던 함수의 정보를 저장하기 위해 사용하는 곳을 콜 스택이라고 한다...

티스토리툴바