즐겁게, 코드

Next.js에는 두 가지 중요한 기본 페이지가 있는데요, 바로 _document와 _app 입니다. _document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. 📝 App 페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 🎯 주요 사용 목적 모든 컴포넌트에 공통으로 적용할 속성 관리 function MyApp({ Component, pageProps }) { return } export default MyApp ⚙️ 규칙 1. Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex. http://localhost..

바벨 파일 세팅과 _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..