전체 글 126

Vue.js 특징

🔸Vue.js 특징 SPA 하나의 페이지로 동작하는 웹 어플리케이션 Single Page Aplication으로 한 페이지 내에서 모든 컨텐츠를 보여주는 방식이다. 이 방식을 쓰면 사용자 편의성이 증가한다. 빠르게 화면이 전환되는 느낌을 받기 때문에 쇼핑몰 등의 사이트에서 구매율이 증가하는 경향이 있다. 기존 방식 기존 방식은 웹 페이지에서 사용자가 이벤트를 발생시키면 이를 서버에 전달하고, 서버에서 처리한 로직 결과를 웹에 전달하면 새롭게 랜더링 되는 방식이다. SPA SPA는 웹에서 이벤트가 발생하면 이를 Vue로 전달하고, 데이터를 Vue에서 처리한 뒤 다시 랜더링 하는 방식이다. 이 방식은 서버가 정말 필요한 데이터 처리에만 집중할 수 있는 장점이 있다. 또한 프론트에서 사용자 환경이 매끄러워진다..

Web/Vue.js 2021.05.19

HTTP정리 - URL과 웹 브라우저 요청 흐름

URI이란? Uniform Resource Identifier로 통일된 리소스 식별자이다. 리소스 식별을 위한 방법은 구체적으로 URL과 URN 2가지가 더 있다. URL Uniform Resource Locator로 위치를 통해 Resource를 식별하는 방식이다. http://www.google.com:443/search?q=IU&hl=ko ex) scheme://host:[port]/path[?query] scheme : http, https, ftp와 같은 프로토콜을 지정한다. host : url, urn, dns와 같은 host명을 적는다. ex) www.google.com port : port 번호를 적는다. 생략 가능 path : /path로 리소스 경로를 적는다. ex) search que..

네트워크 2021.05.15

HTTP 정리 - 인터넷 통신이 이루어지는 방식

인터넷 네트워크 인터넷 통신을 이해하기 위해서는 4가지 주요 개념에 대한 이해가 필요했다. IP TCP, UDP PORT DNS 웹 프로젝트를 할 때면, 네트워크 관련 지식이 부족해 통신을 하는 과정을 명확히 이해하기가 어려웠다. 이번 기회에 통신과 관련된 기본 개념들을 정리해보았다. 📌IP PC와 PC가 통신을 하기 위해서는 각 PC의 주소가 필요하다. PC는 자신의 IP주소, 목적지 IP주소, 그리고 전송할 데이터를 인터넷 망으로 전송한다. 그럼 인터넷 망은 정해진 규칙(프로토콜)에 의해 목적지 주소로 패킷을 전달한다. 인터넷 망 안에서는 수 많은 노드(서버)들을 거쳐 목적지에 전달될 것이다. 이 구체적인 과정은 데이터 통신이나 컴퓨터 통신 시간에 배웠떤 내용들을 다시 복기할 필요가 있을 것 같다. ..

네트워크 2021.05.09

백준 9012 괄호 문제풀이

📌문제설명 📌문제접근방식 핵심은 Valid한 PS임을 검증하는 것이다. 그래야 VPS와 VPS를 결합해도 VPS가 나오기 때문이다. 문자열 중 '(' 와 ')'를 스택을 이용해 검증했다. (가 나오면 스택에 넣고, )를 만나면 (를 꺼냈다. 단, 다음과 같은 경우 NO를 출력한다. 1. 스택에 (가 없는데 )를 만났다. 2. 검증이 끝난 후 스택에 (가 남아있다. 위 과정이 끝난 후 문제가 없으면 YES를 출력한다. 즉, '(' 와 ')' 의 개수가 같아야 하며 '('가 오기 전에 ')'가 오면 안된다. 📌문제풀이 import sys n = int(sys.stdin.readline().rstrip()) exlist = [sys.stdin.readline().rstrip() for x in range(n)..

알고리즘 2021.03.25

백준 11650 좌표정렬 문제풀이

📌문제설명 📌문제접근방식 정렬 문제였고, 기존에 풀었던 문제들처럼 기준을 2개로 설정하면 되는 문제였다. x 좌표 비교 후 같다면 y 좌표를 정렬했다. 📌문제풀이 소스코드 import sys n = int(input()) locations = [list(map(int,sys.stdin.readline().rstrip().split())) for x in range(n)] locations.sort(key = lambda location : (location[0], location[1])) for x in locations: print(x[0], x[1])

알고리즘 2021.03.24

백준 11866 요세푸스 문제풀이

📌문제설명 📌문제접근방식 문제를 보자마자 들었던 생각은 원형 큐 자료구조를 이용해야겠다였다. 이유는 원을 계속해서 돌면서 k번째 사람들 제외해나가기 때문이었다. 하지만 원형큐로 구현할 경우 인덱스를 계속해서 바꿔주어야했다. 따라서 큐를 순회하며 방문한 값을 맨 뒤로 이동시켜주도록 구현했다. 📌문제풀이 소스코드 import sys from collections import deque n, target = map(int, sys.stdin.readline().rstrip().split()) data = deque() for i in range(1, n+1): data.append(i) def solution(target, data): result = [] i = 1 while data: if i==targe..

알고리즘 2021.03.23

백준 10816 카드넘버2 문제풀이

📌문제설명 📌문제접근방식 1차시도 3단계에 걸쳐 문제를 해결하려고 했다. 하지만 결과적으로 문제를 복잡하게 만들었다. 1. 입력받은 값을 정렬한다. 2. (입력받은 값, 개수)를 저장한 리스트를 생성한다. 3. 2번의 리스트에서 입력받은 값을 기준으로 이진탐색을 수행하고, 개수를 반환한다. 첫 시도는 이진 탐색을 사용했다. 이유는 숫자 카드 개수가 50만이었고, 숫자 카드의 범위가 -천만~+천만이었기 때문이다. 따라서 최악의 경우 50만 x 7log10을 계산하면 된다고 생각했다. 하지만 시간초과가 발생했다. 따라서 해쉬로 구현해야겠다는 생각이 들었다. 소스코드 import sys n = int(sys.stdin.readline().rstrip()) cards = list(map(int, sys.stdi..

알고리즘 2021.03.21

백준 10814 문제풀이

📌문제 설명 📌문제접근방식 enumerate함수를 이용해 회원별 번호를 매긴 뒤 나이순으로 정렬하면 된다고 생각했다. 만약 나이가 같다면 매겨둔 회원 번호로 정렬을 실시한다. 따라서 정렬의 기준를 2개로 설정했다. 📌문제풀이 1차 시도 실패한 이유는 다른 곳에서 발생했다. 입력받을 때 나이가 문자로 입력되었다. [(['21', 'Junkyu'], 1), (['21', 'Dohyun'], 2), (['20', 'Sunyoung'], 3)] 따라서 '21'과 '20'을 숫자로 바꿔주니 문제 없이 통과했다. 비교할 때는 반드시 비교하는 대상의 타입이 무엇인지 확인해야겠다. 소스코드 import sys n = int(sys.stdin.readline().rstrip()) input_list = [sys.stdi..

알고리즘 2021.03.20