본문 바로가기

분류 전체보기443

[React] Routing의 개념과 React Router에 대해 알아보자 React Router를 사용하면 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가지기 때문에 불필요한 렌더링을 막을수 있다. 1) 라우팅(Routing)이란 ? 웹을 사용할 때 전통적인 링크 연결방식은 HTML에서 태그를 사용하여 href 속성에 연결할 링크를 넣어주는 방식입니다. 이러한 방식은 웹사이트의 규모가 크지 않을 때는 사용하는데 크게 불편함이 없지만 로드되는 컨텐츠나 페이지의 용량자체가 크다면 불편함을 초래할 수 있습니다. 애초에 링크로 연결되는 방식은 각각의 HTML 파일을 로드하는 것이기 때문에 새로운 페이지로 이동할 때마다 새로고침이 발생할 것이며 해당 페이지 자체 또는 로드할 컨텐츠의 용량이 크다면 사용자 입장에서는 불만이 생길 수 밖에 없을 것입.. 2023. 2. 13.
SPA(Single Page Application)의 개념과 장단점 1) SPA의 등장 배경 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받아와야 했습니다. 현재 페이지와 중복되는 부분이 존재함에도 불구하고, 전체 페이지를 로딩해야 하는 '비효율적인 방법'으로 페이지를 렌더링하고 있었던 것입니다. 이런 비효율적인 통신은 매번 같은 페이지를 로딩하면서 사용자의 대기시간은 늘어나게 되고, 서버의 부담도 클 수 밖에 없습니다. 즉, 서버와 클라이언트의 상호작용이 늘어나면서 자연스럽게 트래픽 과부화로 이어지게 되는 것입니다. 이러한 문제를 해결하기 위해 Javascript의 AJAX 기술이 도입됩니다. JS에서 동적으로 페이지를 요청하고 받아오는 방식으로 애플리케이션이 대체되기 시작하였고, 현재의 SPA의 토대가 마.. 2023. 2. 13.
[백준 1012번] 유기농 배추 # 테스트케이스 수 t = int(input()) count_list = [] def dfs(x,y): if x = n or y = m: return False if area[x][y] == 1 and not visited[x][y]: visited[x][y] = True nx = [-1,1,0,0] ny = [0,0,-1,1] for i in range(4): temp_x = x + nx[i] temp_y = y + ny[i] dfs(temp_x,temp_y) return True return False for _ in range(t): # 세로(n), 가로(m), 배추 개수(k) m, n, k = map(int,input().split()) area = [[0]*m.. 2023. 2. 13.
[백준 2667번] 단지번호붙이기 n = int(input()) # 2차원 배열 지도 arr = [] # 방문 여부 확인용 2차원 배열 visited =[[False]*n for _ in range(n)] # 단지 내 가구 수 count = 0 # 단지 내 가구 수 리스트 count_list = [] for i in range(n): arr.append(list(map(int,list(input())))) # dfs 함수 def dfs(x,y): global count # 집이 존재한지 / 방문한 적 있는지 여부 확인 if arr[x][y] == 1 and not visited[x][y]: # 방문 처리 visited[x][y] = True # 단지 내 가구 수 증가 count += 1 # 상-하-좌-우로 이동하기 위한 값 nx = [-.. 2023. 2. 13.
[JS] Array.prototype.map() 함수 알아보기 map() 함수의 역할 const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // Expected output: Array [2, 8, 18, 32] 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다. 이 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공하는 Array.map() 메소드를 사용하면 됩니다. 이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다. 즉, map() 메.. 2023. 2. 13.
[백준 2178번] 미로 탐색 from collections import deque n,m = map(int,input().split()) # n x m 크기의 미로 maze = [] # 방문 여부 확인용 2차원 배열 visited = [[False]*m for _ in range(n)] # 미로 입력받고 저장 for _ in range(n): maze.append(list(map(int,input()))) # bfs 함수 def bfs(x,y): # 방문 처리 visited[x][y] = True # queue 자료구조 선언 queue = deque([(x,y)]) while queue: v = queue.popleft() vx = v[0] vy = v[1] nx = [-1,1,0,0] ny = [0,0,-1,1] # 상-하-좌-우.. 2023. 2. 12.

티스토리툴바