즐겁게, 코드

제너레이터를 활용하면 함수의 실행을 중간에 멈췄다가 재개할 수 있습니다. // 화살표 함수 형태로는 제너레이터를 생성할 수 없습니다. function* f1() { yield 10; yield 20; return "완료"; } const gen = f1(); 보시면 function 키워드 뒤에 * 이 붙어있는 것을 확인할 수 있는데요, function* 키워드는 제너레이터를 정의하는 문법입니다. (따라서 화살표 함수 형태로는 제너레이터 함수를 생성할 수 없습니다.) 함수 내에 존재하는 yield는 함수의 실행을 잠깐 멈출 수 있는 분기이며, 제너레이터 함수를 실행하면 제너레이터 객체를 반환합니다. yield 키워드 yield 키워드에 대해 조금 자세히 다루자면 yield는 제너레이터 내부의 값을 외부로 ..

리액트 어플리케이션에서는 상태와 속성을 통해 컴포넌트끼리 값을 주고받는다는 것을 알고 계실 것입니다. 그런데 컴포넌트 계층이 아래 이미지와 같다고 할 때, App에서 TodoItem까지 값을 전달해야 한다면 어떨까요? 맞습니다. App에서 TodoItem 컴포넌트까지 값을 전달하기 위해 TodoContainer, TodoList 컴포넌트에도 상태를 넘겨줘야 합니다. 물론 전달할 상태값이 단순하고 컴포넌트의 중첩 깊이가 깊지 않다면 이렇게 해도 큰 문제는 없습니다. 다만 큰 문제가 없을 뿐이지 분명히 더 나은 방법이 있는데요, 바로 오늘 소개할 리덕스를 활용하는 방법입니다. 🛠 리덕스(Redux) 리덕스는 데이터를 저장하는 거대한 창고(Store)와, 창고에 진입할 수 있는 함수들을 제공하는 라이브러리입니..

변수명을 잘 짓는 것이 좋은 코드와 나쁜 코드를 판가름하는 중요한 요소라는 점에는 이견이 없을 것입니다! const a = "chanmin"; // BAD const userName = "chanmin"; // GOOD 그런데 CSS를 적용하기 위해 클래스명을 지을 때도 좋은 이름을 붙이고 계신가요? 저는 최근까지 그러지 못하고 있었다고 느껴서, 이번 기회에 CSS 클래스명 컨벤션을 정리해보고자 합니다. 😄 🙆🏻‍♂️ BEM (Block - Element - Modifier) 회사와 팀에 따라 컨벤션이 다를 수 있겠지만 가장 범용적으로 사용되는 규칙 중 하나가 바로 BEM으로, BEM의 Block, Element, Modifier는 각각 다음과 같은 의미를 가집니다. Block : 재사용 가능한 컴포넌트..

이 글은 Nathan Sebhastian 님의 How and Why You Should Use React Query 를 번역한 글입니다. 요즘은 axios 와 더불어 react query 역시 많이 쓴다는 말을 들어서... 큰 개념만 정리해보고자 번역을 진행해 봤습니다. 시작하기 전에 이 글은 react query 버전 2 를 기준으로 작성된 글로, 21년 4월 기준 가장 최근에 출시된 버전 3에서는 꽤나 굵직한 변경점들이 있으니 최신 버전의 사용 방법은 공식 문서와 유튜브 튜토리얼을 참조하는 것을 추천드립니다. 📝 요약 : 기존의 데이터 페칭에는 로딩 상태 관리 및 페칭한 데이터 관리 등을 위해 여러 훅을 사용해야 했으나, 리액트 쿼리를 사용하면 훨씬 간결하게 페칭 로직을 작성할 수 있다. // ❌ :..

[백준 온라인 저지 링크] 2178번: 미로 탐색 첫째 줄에 두 정수 N, M(2 ≤ N, M ≤ 100)이 주어진다. 다음 N개의 줄에는 M개의 정수로 미로가 주어진다. 각각의 수들은 붙어서 입력으로 주어진다. www.acmicpc.net 문제 분류가 BFS로 되어있어 별 생각없이 BFS로 탐색을 구현했지만, DFS를 사용하면 시간 초과가 난다고 한다. DFS를 사용하는 코드는 약간 백트래킹? 하듯이 분기별로 값을 저장해둔 뒤 저장한 값들 중 최솟값을 구하면 될 듯 한데... 나보다 잘 짜는 사람들이 안된다는 데에는 이유가 있을 것이다. (_ _) 아무튼 최단거리를 구하는 문제는 BFS 방식을 사용하는 것이 정석이라고 한다. 앞으로 비슷한 유형은 BFS를 열심히 우려먹자. (예전에 얼핏 어떤 문제 유형..

제작중인 앱에서 사용할 컬러 팔레트 패키지를 살펴보던 중, 의아한 점이 하나 생겼습니다. Controlled 컴포넌트에서 selectedColor 라는 변수를 갖는 것만 제외하면 둘은 거의 동일해 보이는데, 왜 Controlled - Uncontrolled 라는 이름으로 컴포넌트를 분리한 걸까요? 실제 사용할 때는 Uncontrolled 컴포넌트를 사용해도 아무 문제가 없었지만, 애매한건 확실히 짚고 넘어가야겠다는 생각에 시간을 내어 둘의 차이를 찾아보게 되었습니다. Controlled Component (제어 컴포넌트) 제어 컴포넌트는 컴포넌트의 상태나 속성(props)으로 주어진 값을 활용하는 컴포넌트입니다. 태그를 제어 컴포넌트로 사용하는 예를 들어보면, value 값을 useState로 관리하는 ..

[백준 온라인 저지 링크] 2667번: 단지번호붙이기 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여 www.acmicpc.net 분명 테케는 통과했고 코드에도 문제가 없는데 계속 틀려 의아했다. 원인은 바로 탐색을 시작하는 첫 번째 노드를 방문했다고 체크하지 않아서였는데, 다행히도 금방 실수를 캐치할 수 있었다. 탐색을 시작하는 첫 번째 노드도 방문했음을 체크해주는걸 잊지 말고... 타입 캐스팅을 좀 더 세련되게 하는 방법이나 찾아봐야겠다 @__@ [정답 코드 - Python] from collections import deque T = int(input()) b..