webpack과 babel 리액트 프로젝트 생성
Frontend/webpack & babel2022. 6. 4. 14:49webpack과 babel 리액트 프로젝트 생성

webpack? 웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리이다. 번들러(Bundler)? 번들러는 여러 개로 나뉜 모듈을 하나로 묶어주는 도구이다. 의존성이 있는 것들을 찾아서 그룹핑을 해주는 도구! 웹팩은 IIFE를 사용해서 번들링을 해서 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합한다! dependency graph를 생성하여 빌드 거대한 자바스크립트 소스코드와 대규모 의존성을 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 되었다. 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 ..

S3 설정 및 배포
리액트 기초/배포하기-S32022. 6. 3. 19:33S3 설정 및 배포

S3? S3(Simple Storage Service)는 단순 스토리지 서비스이며 이미지나 파일을 저장할 수 있다. HTML, CSS, Js와 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있다. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있다. 정적 웹사이트? 웹 사이트는 서버 측 스크립트 사용 유무를 깆누으로 동적 웹사이트와 정적 웹 사이트로 나눌 수 있다. 서버 측 스크립트는 PHP, JSP, ASP와 같은 것들을 말한다. 정적 웹 사이트는 HTML, CSS, Js처럼 정적 자원으로만 이루어진 웹 사이트다. S3 버킷 설정하기 우선 가비아에서 도메인을 하나 구입하자. https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하..

리액트 기초/Routing2022. 6. 3. 10:32SPA/라우팅

SPA and Routing Single Page Application. 서버에 넘기는 HTML이 하나뿐이 어플리케이션이다. 전통적인 웹 사이트는 페이지를 이동할 때마다 서버에서 HTML, CSS, JS (정적 자원)을 내려준다면, SPA는 딱 한번만 정적 자원을 받아온다. HTML을 하나만 주는 가장 중요한 이유는 사용성 때문이다. 페이지를 이동할 대마다 서버에서 주는 HTML로 화면을 바꾸면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오기 때문에 비효율적일 수도 있다. 하지만, 단점이 없는 것은 아니다. SPA는 딱 한 번만 정적 자원을 내려받다보니, 처음에 모든 컴포넌트를 받아온다. 즉, 사용자가 방문하지 않을 수도 있는 페이지까지 전부 가지고 온다. 더욱이, 한 번에 모든 페이지를 가지고..

플로이드-워셜
자료구조+알고리즘2022. 6. 3. 00:20플로이드-워셜

플로이드-워셜 다익스트라: 출발점을 정했을 때 다른 노드에 이르는 최단거리. 플로이드-워셜: 모든 지점에서 다른 모든 지점까지 최단거리. 시간복잡도 O(N^3) 핵심은 점화식! D_{ab} = min(D_{ab}, D_{ak} + D_{kb}) a에서 b로 가는 거리 = a에서 b로 바로 가는 경우와 a에서 k를 거쳐 b를 가는 비용의 최솟값 각 노드별로 해당 노드를 거쳐가는 경우를 고려해서 최단 경로를 갱신하면 끝! 예를 들어 1번 노드를 거쳐가는 경로는 D23 = min(D23, D21 + D13) D24 = mIn(D24, D21 + D14) D32 = min(D32, D31 + D12) D34 = min(D32, D31 + D14 D42 = min(D42, D41 + D12) D43 = min(D..

우선순위 큐 다익스트라
자료구조+알고리즘2022. 5. 31. 19:05우선순위 큐 다익스트라

우선순위 큐 heapq 라이브러리를 활용해서 우선순위 큐 사용 가능. 데이터가 리스트 형태일 경우, 0번 인덱스를 우선순위로 인지, 우선순위가 낮은 순서대로 pop 할 수 있음!! import heapq queue = [] heapq.heappush(queue, [2, 'A']) heapq.heappush(queue, [5, 'B']) heapq.heappush(queue, [1, 'C']) heapq.heappush(queue, [7, 'D']) print (queue) //[[1, 'C'], [5, 'B'], [2, 'A'], [7, 'D']] for index in range(len(queue)): print (heapq.heappop(queue)) //[1, 'C'] //[2, 'A'] //[5,..

Rest API / Rest-ful
Frontend/웹 관련 지식2022. 5. 30. 11:27Rest API / Rest-ful

Rest API? Representational State Transfer의 줄임말로, REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 의미한다. HTTP 통신에서 어떠한 자원에 대한 CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하는 방식이다! Rest API 구성 요소 자원 - URI URI (Uniform Resource Indicator) → URI(통합 자원 식별자)는 언제 어디서든 늘 같은 리소스(텍스트, 이미지, 비디오 등)를 보여줄 수 있도록 해주는 식별자이다. URI는 정보의 자원을 표현해야 한다! URI VS URL? http://duckgugong/board http://duckgugong/board/1 행위 - HTTP Met..

image