즐겁게, 코드

바벨 파일 세팅과 _document.tsx만 저렇게 주어진 템플릿대로 구성하면 ServerStyleSheet 설정을 적용할 수 있는데요, 이러면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 내려받음으로써 렌더링 이전에 styled-components를 통한 스타일이 적용되지 않는 문제를 방지할 수 있습니다. 처음 보면 어려울 수도 있고, 템플릿이 외워서 칠만큼 간단하지도 않은 만큼 이번 기회에 블로그에 메모해두려 합니다. 1. 의존성 패키지 설치 npm i styled-components babel-plugin-styled-components npm i -D @types/styled-components 2. .babelrc 파일을 루트 폴더에 생성한 후, 다음과 같이 작성한다. { "presets..

[백준 온라인 저지 링크] 17086번: 아기 상어 2 첫째 줄에 공간의 크기 N과 M(2 ≤ N, M ≤ 50)이 주어진다. 둘째 줄부터 N개의 줄에 공간의 상태가 주어지며, 0은 빈 칸, 1은 아기 상어가 있는 칸이다. 빈 칸의 개수가 한 개 이상인 입력만 주어진다. www.acmicpc.net [정답 코드 - Python] from collections import deque N, M = map(int, input().split()) max_cnt = 0 queue = deque() board = [] dy = [-1, -1, 0, 1, 1, 1, 0, -1] dx = [0, 1, 1, 1, 0, -1, -1, -1] for i in range(N): board.append(list(map(int,..

Tailwind CSS가 요즘 새로운 CSS 프레임워크로 떠오르고 있습니다. Tailwind CSS는 부트스트랩처럼 클래스명을 통해 전처리된 스타일을 적용할 수 있지만, 여기에 더해 tailwind.config.js 파일을 통해 다크 모드 설정, 추가할 플러그인 등 부트스트랩보다 훨씬 광범위하고 편리한 커스텀 기능을 제공합니다. 음... 사실 이렇게 말씀드리면 잘 와닿지 않으실 수도 있어 공식 문서의 예제를 하나 빌려보겠습니다. ChitChat You have a new message! 위 UI를 구현하기 위해서는 이렇게 장황한 CSS가 필요합니다. 만약 CSS에 익숙하지 않다면 여기서 더 헤매야만 하겠죠. 그러나 테일윈드를 활용하면, 이 장황한 코드가 놀랄 만큼 줄어들게 됩니다. ChitChat You..

리덕스 사가에는 주식시장을 떠오르게 하는 콜(call)과 풋(put)이 있습니다. (물론 주식과의 연관성은 제로입니다! 😄) 이 중 사가 안에서 콜백을 호출하는 콜에 관한 궁금증이 생겼는데, 바로 코드를 통해 공유드리도록 하겠습니다. // api/getMemberList.js export const getMemberList = async () => { const res = await fetch("http://localhost:5000/member"); const data = await res.json(); return data; }; // sagas/requestSaga.js // 예외처리 및 yield all 등의 로직은 생략했습니다. const loadSuccess = (data) => ({ type..

[백준 온라인 저지 링크]

저희 산학프로젝트 팀은 깃과 깃허브를 통해 프로젝트 기록을 관리하고 있습니다. 그런데 어느 날 커밋 로그를 확인해 보니... 아뿔싸! 뭔가 엄청난 일이 일어났음을 직감했습니다. 아무래도 팀원이 작업을 하면서 수정사항이 생길 때마다 커밋을 남겼고, 이걸 그대로 푸시해 머지한 듯 했습니다. 저도 커밋 템플릿을 완벽하게 지키고 있지는 않아 평소에는 별 생각없이 넘기곤 했지만, 이번에는 약 15건의 커밋 메시지가 의미없이 중복되고 있어 개선이 필요하다고 생각했습니다. 커밋의 은탄환, 리베이스 그래서 이번 기회에 커밋도 정리할겸, 평소에 잘 활용할 기회가 없던 인터렉티브 리베이스를 연습해보기로 했습니다. 인터렉티브 리베이스 커맨드 git rebase -i HEAD~(헤드 포인터로부터의 거리) // Ex. 최근 5..

뷰를 조금씩(정말 조금씩..) 공부하고 있는데, 의아한 점이 하나 생겼습니다. 바로 컴포넌트의 데이터를 관리하는 부분에서 name 이라는 속성을 내보내고 있는데, name 속성은 있으나 없으나 에러나 경고를 출력하지 않았기 때문입니다. 찾아본 결과, name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 합니다. 컴포넌트 구조가 재귀적일 때 : 재귀 컴포넌트에 대한 내용은 리액트에서는 들어보지 못한 개념이라 생소하지만, name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다고 합니다. Vue 개발자 도구를 사용할 때 Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여줍니다. 따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 ..