본문 바로가기

분류 전체보기

 (107)
리액트 렌더링 최적화 출처 : 리액트 렌더링 최적화브라우저 랜더링 과정먼저 HTML을 파싱해서 DOM을 만들고 CSS를 파싱해서 CSSOM을 만든다.DOM과 CSSOM을 활용해서 렌더트리를 만든다.그리고 layout과 repaint 과정을 거쳐 화면에 웹사이트가 렌더링이 된다. 즉 사용자가 웹 사이트를 볼 수 있게 된다.리액트에서의 렌더링그렇다면 리액트에서의 렌더링은 뭘까??리액트에서의 렌더링 === 함수를 호출하는 것예를들어 APP 컴포넌트가 있을 때 이 컴포넌트가 렌더링 된다는 말의 뜻은 APP 컴포넌트가 호출이 되어서 내부 로직들이 실행이 되고 return 문을 통해 리액트 element를 반환하는 것이다.예시 코드위의 코드를 예시로 들어 렌더링을 알아보자먼저 Parent 컴포넌트 내부에 FirstChild 컴포넌트와 ..
CSS 프레임워크(Tailwind) 출처 : CSS 프레임워크CSS 프레임워크CSS 프레임워크를 이용함으로써 개발자가 얼마나 편해질 수 있는지 알아보자CSS 프레임워크란?웹 사이틀를 만들 때 쉽고 빠르게 만들 수 있도록 CSS 스타일과 규칙, 그리고 클래스를 선정해둔 모음디자인보다 사용자 경험에 집중할 수 있도록 도움을 줌CSS 프레임워크의 장점미리 작성된 UI 요소들을 제공함Header, input, button 같은 일반적인 요소를 제공함으로써 더 빠른 개발 프로세스를 제공템플릿을 제공함, 웹 디자이너와 웹 개발자 같이 전문적인 사람들이 만든 템플릿은 사용자에게 일관된 상요자 경험을 줌으로써 사용자가 더 만족할 수 있는 장점이 있음CSS 프레임워크 종류각 프레임워크 요소마다 고유한 기능과 디자인 언어들이 다름, 필요와 선호에 따라 선택..
쿠키와 웹 스토리지 참고자료파인의 쿠키와 웹 스토리지목차쿠키 등장 배경과 특징쿠키 활용 예시쿠키 단점과 해결법웹 스토리지 특징웹 스토리지 종류와 예시웹 스토리지 단점과 해결법즁요 정보를 어디에 저장할까?쿠키의 등장 배경쿠키에 앞서 먼저 우리가 자주 사용하는 HTTP를 살펴보자HTTP는 비연결성과 무상태성이라는 특징이 있다.서버에 요청을 보내고 응답을 했으면 연결이 끊기게 된다.이후 서버에 또 다시 요청시에 서버는 클라이언트가 누군지 식별을 할 수 없게된다.만약 연결이 끊겨도 기억하고싶은 정보가 있다면?이러한 요구사항을 해결하기 위해 쿠키가 등장했다.쿠키?브라우저에 저장되는 key와 value로 이루어진 작은 크기의 문자열특징4KB의 크기 제한만료 시간 설정 가능, 설정하지 않으면 브라우저 종료시 삭제HTTP 요청시 따로 설..
Flux Architecture 참고자료 : 테코톡 Flux Architecture 리액트의 상태관리 라이브러리 중 하나인 redux에 대해 공부하던 중 Flux Arithitecture에 대한 내용이 나왔고 이에 대해 정리해보려한다.Flux, 왜 필요한지?Flux?단방향 데이터 흐름을 통해 보다 예측 가능하게 상태를 관리할 수 있는 클라이언트 사이드 웹 애플리케이션 아키텍처아래는 다익스트라께서 하신 말씀이다.프로그래밍의 예술은 복잡성을 조직화하고, 다수를 제어하며, 혼돈을 가능한 효과적으로 피하는 것이다.따라서 좋은 프로그래밍은 시스템의 복잡성을 낮추고 제어를 쉽게 만듦MVC의 한계이전의 웹 애플리케이션은 우리가 흔히 알고 있는 MVC 패턴을 사용했었다.양방향 데이터 바인딩위 그림에 의하면 Controller가 Model을 조작하고,..
React-Query에 대해 알아보자 목차React Query는 무엇인가React Query와 캐싱Query의 상태 흐름도react query 사용법react query 구조React Query? TanStack Query?React Query는 v4부터 React를 제외하고도 다른 프레임워크를 지원하여 TanStack Query로 이름을 변경하였다.하지만 아직 공식 문서에도 React Query라 명시되어있으므로 여기서는 React Query라 하겠다.React Query가 뭘까?공식 문서에 의하면 React Query는 강력한 비동기 상태 관리 툴이라고 한다.상태란(State)?주어진 시간에 대한 시스템을 표현한 것문자열, 배열, 객체 등 다양한 형태로 Application에 저장된 데이터이를 프론트엔드 개발자식으로 풀어보면 다음과 같다..
백준 - 1697(숨바꼭질, 자바) 문제 https://www.acmicpc.net/problem/1697 1697번: 숨바꼭질 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ 100,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 www.acmicpc.net 문제 접근 출력할 값 : 두 위치 N과 K에서 N이 +1, -1, *2의 연산을 활용해 K에 도달하는 방법의 최소 횟수 BFS로 만들 수 있는 모든 경우를 구해가며 K와 같아지면 리턴 DFS vs BFS 만약 dfs로 모든 수를 다 만드려면 +1로 만들 수 있는 수를 모두 만들고 거기서 리턴해서 -1을 추가해 만들 수 있는 수를 모두 만들고 거기서 리턴해서 *2를 ..
백준 - 14502(연구소, 파이썬) https://www.acmicpc.net/problem/14502 14502번: 연구소 인체에 치명적인 바이러스를 연구하던 연구소에서 바이러스가 유출되었다. 다행히 바이러스는 아직 퍼지지 않았고, 바이러스의 확산을 막기 위해서 연구소에 벽을 세우려고 한다. 연구소는 크 www.acmicpc.net 문제 이해 N * M 크기의 연구소에 바이러스가 퍼진다. 이때 벽을 3개 세워 안전구역을 최대한 많이 확보할 때 안전구역의 최대값을 구하는 문제 2는 바이러스, 1은 벽, 0은 빈칸을 의미한다. 제한사항은 3 ≤ N, M ≤ 8 이다. 문제 접근 문제를 이해하고 난뒤 두 가지의 알고리즘을 떠올렸다. 먼저 바이러스를 퍼지게하고 안전 구역의 개수를 구하기 위해 bfs를 통해 바이러스를 퍼뜨리게한다. 문제 조건에서..
백준 - 15650(N과M(1), 파이썬) https://www.acmicpc.net/problem/15649 15649번: N과 M (1) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 문제 접근 백트래킹을 연습하기위해 n과 m 시리즈를 풀어보기로 했다. 함수내에서 반복문으로 이미 추가한 원소와 중복되지않을시 원소를 추가하고 재귀를 돌리는식으로 구현했다. 정답 코드 n, m = map(int, input().split()) s = [] def dfs(): if len(s) == m: print(' '.join(map(str, s))) return for i in range(1,..

티스토리툴바