분류 전체보기

Html button의 type 속성

button의 type 기본 값은 submit 입니다. form tag 외부에서 사용시 button의 type에 button을 명시해주는 것이 좋습니다. form tag 외부에서 button tag를 사용할 때는 기본값이 submit이지만 클릭했을때 아무일도 일어나지 않습니다. button의 type 속성에는 3개의 값이 들어갈 수 있습니다. submit, reset, button submit: 서버로 데이터를 전송합니다. form tag 내부에 button 태그가 존재할 때 유효합니다. default 값입니다! reset: 모든 값을 초기값으로 되돌려 줍니다. button: 클릭했을때 아무일도 일어나지 않습니다. 클라이언트의 스크립트와 연결시킬 수 있습니다. 이번에 처음 알게 되었습니다. button의..

SPA(Single Page Application)

SPA란 페이지가 하나인 앱입니다. 기존의 웹 사이트들에서는 사이트를 이동시마다 서버에서 html 파일을 컴파일 해서 보내주었고 브라우저에서는 새로고침과 함께 변경된 html을 렌더링 해주었습니다. 비교적 간단하게 구성된 옛날의 페이지들은 이러한 과정에 크게 문제가 없었습니다. 그러나 점점 웹 페이지의 용량은 커졌고 이를 서버에서 매번 감당하기에는 어려움이 생겼습니다. 그래서 spa가 등장하게 됩니다.(두둥) spa에서는 최초 요청시 서버로부터 html을 전달받습니다. 이후의 요청은 ajax를 통해 사용자에게 보여주기 위한 데이터들을 json 형식으로 받아오고 이를 동적으로 사용자에게 보여줍니다. 필요한 부분만 요청 & 응답을 받게되고 이를 사용자에게 보여줍니다. 이제 서버는 수고를 덜었습니다. spa에..

CSR vs SSR

CSR(Client Side Rendering) vs SSR(Server Side Rendering) CSR은 클라이언트 측에서 렌더링을 하는 것이고 아래 이미지들은 csr의 단계를 그림으로 나타낸것입니다. 1. 사용자는 웹사이트를 요청합니다. 2. CDN(Cloud Development Network)에서 html과 js의 링크를 같이 전달해줍니다. 3. 브라우저에서는 html을 다운받고 js를 다운로드 받습니다. 다운로드 받는 와중에는 사이트가 나타나지 않습니다. 4. 브라우저에서 javascript를 다운로드 완료합니다. 5. js가 브라우저에서 실행되고 api를 통해 필요한 자원들을 불러옵니다. 이때 사용자에게 placeholder를 보여줄수 있습니다. 6. 서버는 api 요청의 응답을 보내줍니다..

Javascript debounce, throttle

debounce와 throttle은 이벤트가 연속적으로 발생했을때 제어하기 위해 사용을 합니다. 간략히만 제 언어로 먼저 설명해보자면 debounce는 연속된 이벤트를 계속 뒤로 미루어 제일 나중의 이벤트를 실행시켜주고 throttle는 일정한 간격으로 연속으로 발생되는 이벤트를 실행시켜 줍니다. 예를들어 버튼을 클릭할때마다 이벤트가 발생한다고 가정해봅시다. 그러면 이벤트는 아래와 같이 발생될겁니다. 버튼 클릭 20 debounce 1 throttle 6 번 정도의 횟수로 이벤트가 발생될겁니다. 이는 물론 시간을 어떻게 설정하느냐에 따라 달라질것 입니다. 이제 상세히 코드와 함께 살펴보겠습니다. debounce debounce가 사용되는 대표적인 예시중 하나입니다. 검색어가 변경될 때마다 api를 날리면..

동전 1 [백준 2293] - python

import sys input = sys.stdin.readline def BOJ2293() : n, k = map(int, input().split()) l = [] for _ in range(n) : l.append(int(input())) dp = [0 for _ in range(k+1)] dp[0] = 1 for i in l : for j in range(1, k+1) : if j - i >= 0 : dp[j] += dp[j-i] print(dp[-1]) BOJ2293() 접근방법 : 1. dp 배열은 가치별 경우의 수를 나타낸다 ex) dp[10]은 주어진 동전들을 이용하여 10을 만들 수 있는 경우의 수 1, 2, 5을 예로 들면 6의 가치를 만드는 방법은 5를 구성했던 경우의 수에서 1을 하..

양팔저울 [백준 2629] - python

import sys input = sys.stdin.readline def BOJ2629() : n = int(input()) weight = list(map(int, input().split())) input() need_check = list(map(int, input().split())) dp = [[0 for _ in range(40001)] for _ in range(n)] dp[0][weight[0]] = 1 for i in range(1, n) : dp[i][weight[i]] = 1 for j in range(40001) : if dp[i-1][j] == 1 : dp[i][j] = 1 dp[i][j + weight[i]] = 1 dp[i][abs(j - weight[i])] = 1 for ..

전깃줄 [백준 2565] - python

import sys input = sys.stdin.readline def BOJ2565() : n = int(input()) l = [] for _ in range(n) : l.append(list(map(int, input().split()))) l.sort() dp = [1 for _ in range(n)] for i in range(n) : for j in range(i) : if l[j][1] < l[i][1] : dp[i] = max(dp[i], dp[j] + 1) print(n - max(dp)) BOJ2565() 접근방법 : 1. A 배열을 기준으로 정렬을 해준다. 예시입력에서는 1 8 2 2 3 9 4 1 6 4 7 6 9 7 10 10 과 같이 정렬이 될것이다. 2. B 배열을 기준으로..

enumerate, zip

python에서 배열을 순회할때 인덱스와 값을 같이 가져올 수 있습니다. javascript에서 forEach, map 과 같이 순회하는 함수에서 또한 value, index를 같이 가져올수 있습니다. enumerate 내장함수를 이용하면 됩니다. l = [1,2,3] for index, val in enumerate(l) : print(index, val) # 0 1 # 1 2 # 2 3 두개의 배열을 같이 순회하면서 같은 인덱스의 값을 비교하고 싶을때도 있을수 있습니다. 그때는 zip 내장함수를 이용하면 됩니다. a = [1,1,1] b = [2,2,2] for i,j in zip(a, b) : print(i,j) # 1 2 # 1 2 # 1 2

가장 긴 바이토닉 부분 수열 [백준 11054] - python

import sys input = sys.stdin.readline def BOJ11054() : n = int(input()) l = list(map(int, input().split())) dp_up = [1 for _ in range(n)] dp_down = [1 for _ in range(n)] for i in range(n) : for j in range(i) : if l[i] > l[j] : dp_up[i] = max(dp_up[i], dp_up[j]+1) for i in range(n-1, -1, -1): for j in range(n-1, i-1, -1): if l[i] > l[j]: dp_down[i] = max(dp_down[i], dp_down[j]+1) dp = [] for up, ..

팰린드롬? [백준 10942] - python

import sys input = sys.stdin.readline def BOJ10942() : n = int(input()) l = list(map(int, input().split())) m = int(input()) dp = [[0 for _ in range(n)] for _ in range(n)] for diff in range(n) : for start in range(n - diff) : end = start + diff if start == end : dp[start][end] = 1 continue if start + 1 == end : if l[start] == l[end] : dp[start][end] = 1 else : dp[start][end] = 0 continue if l[st..