분류 전체보기 (107) 썸네일형 리스트형 React(리액트): ESLint - 자바스크립트 문법 검사 도구(vscode ESLint) 이번에는 ESLint라는 도구에 대해서 알아보자. 이 도구는 자바스크립트 문법을 검사해줄 수 있는 도구인데, 기본적인 자바스크립트 문법을 검사해주는 것을 떠나서 정말 다양한 커스텀 규칙들을 설정할 수 있다. 이전에 학습했던 Prettier 같은 경우는 따옴표, 들여 쓰기, 세미콜론, 라인길이와 같은 모양만 신경 쓰고 자동으로 고쳐 주는 것에 중점이 되어있다면, ESLint는 Prettier에서도 커버하는 코드 스타일을 포함해서 정말 다양한 옵션들이 있다. 공식 홈페이지에서 규칙들을 확인해볼 수 있다. 렌치 모양이 있는 규칙들은 ESLint를 통해서 바로 고칠 수 있는 규칙이다 몇 가지 규칙들을 알아보자. max-params라는 규칙은 코드에 함수를 작성하게 될 때 파라미터의 개수를 제한시키는 작업을 한다.. React(리액트): 리액트에서 Prettier 사용하기(vscode에서 prettier사용) 리액트 개발을 조금 더 편하게 할 수 있게 해주는 도구들에 대해서 알아보자. 첫 번째로 알아볼 도구는 'Prettier'인데 자동으로 코드의 스타일을 관리해주는 도구이다. 예를 들어 문자열을 표현할 때 작은따옴표를 쓸지, 큰 따옴표를 쓸지 또는 코드의 뒤에 ;(세미콜론)을 붙일지 말지 들여 쓰기는 얼마나 할지와 같은 것들을 관리해 줄 수 있다. 이 Prettier의 특징은 코드의 스타일을 사용자의 마음대로 쉽게 커스터마이징 할 수 있다는 점이다. 오른쪽에 나와있는 옵션들을 하나하나 커스터마이징 해줄 수 있다. Prettier는 자바스크립트 뿐만 아니라 HTML, CSS 코드의 스타일도 관리할 수 있고 React, Angluar, Vue 등의 라이브러리도 지원해주기 때문에 굉장히 사용성이 좋다. Prett.. React(리액트): class형 컴포넌트(클래스형 컴포넌트), state와 setState 이번에 다루어볼 주제는 class형 컴포넌트이다. 우리가 기존에 컴포넌트를 만들 때는 함수형 컴포넌트로 만들어왔다. class형 컴포넌트는 컴포넌트를 선언하는 또 다른 방식이다. 하지만 class형 컴포넌트는 요즘 잘 사용하지 않는다. 그래도 알아보도록 하자. 잘 사용하지 않더라도 알아둘 필요가 있는 이유는 나중에 class형 컴포넌트를 사용하는 프로젝트를 유지 보수하는 일이 생길 수도 있기 때문이다. 그리고 함수형 컴포넌트 + Hooks로 못하는 작업이 두 개 정도 있긴 하다. 앞으로 새로운 컴포넌트를 만들 때에는 함수형으로 만드는 것이 맞고, class형 컴포넌트는 꼭 필요한 경우이거나, 예전 프로젝트를 유지 보수할 때 사용하는 것이 옳은 방법이다. Hello.js function Hello({ co.. React(리액트): immer 라이브러리 사용한 불변성 관리 이번에 학습할 내용은 'immer'라는 라이브러리를 사용해 더 쉽게 불변성을 지키는 방법이다. const object = { a: 1, b: 2 }; object.b = 3; 다음과 같이 object라는 객체가 있다고 가정해보자. 우리가 리액트에서 배열이나 객체를 업데이트해야 할 때에는 다음 코드처럼 값을 직접 수정하는 형태의 코드는 불변성을 깨뜨리는 형태의 코드이다. const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 } 그 대신에 새로운 객체를 만들고 spread 연산자를 사용해서 기존의 값을 집어넣고 새로운 값을 덮어쓰는 방식이 올바른 방식이다. 이렇게 해야 나중에 컴포넌트가 제대로 리 렌더링 되고 컴포넌트 최적화도 수행할 수 있.. DFS/BFS: 깊이 우선 / 너비 우선 탐색 알고리즘 DFS DFS는 Depth-First Search, 깊이 우선 탐색이라고도 부르며, 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘이다. DFS는 스택 자료구조에 기초한다는 점에서 구현이 간단하다. 실제로는 스택을 쓰지 않아도 되며 탐색을 수행함에 있어서 데이터의 개수가 N개인 경우 O(N)의 시간이 소요된다는 특징이 있다. 또한 DFS는 스택을 이용하는 알고리즘이기 때문에 실제 구현을 재귀 함수를 이용했을 때 매우 간결하게 구현할 수 있다. DFS 예제 # DFS 메서드 정의 def dfs(graph, v, visited): # 현재 노드를 방문처리 visited[v] = True print(v, end=' ') # 현재 노드와 연결된 다른 노드를 재귀적으로 방문 for i in graph[v]: .. React(리액트): Context API를 사용한 전역 값 관리 이번에는 Context API를 사용해 리액트에서 전역적인 값을 관리하는 방법에 대해 알아보자. App.js const onToggle = useCallback(id => { dispatch({ type: 'TOGGLE_USER', id }); }, []); const onRemove = useCallback(id => { dispatch({ type: 'REMOVE_USER', id }); }, []); return ( 활성 사용자 수: {count} ) 이전에 구현했던 App 컴포넌트를 살펴보면 App 컴포넌트 내부에서 'onToggle'과 'onRemove'가 구현된 다음, 이 두 가지 함수가 UserList 컴포넌트에게 전달이 되는 구조이다. UserList.js import React from .. 구현: 백준 1236 파이썬(Python) 문제: https://www.acmicpc.net/problem/1236 1236번: 성 지키기 첫째 줄에 성의 세로 크기 N과 가로 크기 M이 주어진다. N과 M은 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 성의 상태가 주어진다. 성의 상태는 .은 빈칸, X는 경비원이 있는 칸이다 www.acmicpc.net 풀이: 이 문제는 해결 아이디어를 잘 생각할 필요가 있었다. 나는 접근을 잘못했고 결국 스스로 해결하지 못했다. 모자란 경비원의 수를 세는 아이디어는 행 기준, 열 기준으로 경비원이 필요한 수를 각각 계산해 더 큰 값을 출력하는 것이다. col, row = map(int, input().split()) castle = [] for _ in range(col): castle.app.. 구현: 백준 2851 파이썬(Python) 문제: https://www.acmicpc.net/problem/2851 2851번: 슈퍼 마리오 첫째 줄에 마리오가 받는 점수를 출력한다. 만약 100에 가까운 수가 2개라면 (예: 98, 102) 마리오는 큰 값을 선택한다. www.acmicpc.net 풀이: mush = [] for _ in range(10): mush.append(int(input())) mario, i = 0, 0 while(i 100): if(abs(100-prev) >= abs(100-current)): mario = current break else: mario = prev break mario += mush[i] i .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음
