치춘짱베리굿나이스

useContext 개요 이번에 쪼끄만 자기소개 페이지를 SSR과 SSG를 섞어서 만들어보고 있는데 아무래도 외부 라이브러리를 가져다가 쓸 만큼 프로젝트 규모가 크지 않다 보니… 라이브러리 설치가 조금 꺼려지는 상황에서 상태값을 자식의 자식의 자식한테 내려줘야 하는 일이 생겼다 3~4 depth 정도이니 아예 Prop Drilling 으로 처리할까 했는데, 그보다 먼저 useContext 를 이용하여 상태값의 활동 범위를 넓혀줄 수 있겠다는 생각이 들어서 여태껏 한번도 써 보지 않은 useContext를 써 보기로 했다 useContext란? 각 컴포넌트에서 context를 읽고 구독할 수 있도록 도와주는 React Hook 이라고 한다 쉽게 말해 어떠한 상태값을 context 형태로 감싼 뒤, 이를 다..

로그인 유지 작년 부스트캠프 자료로 작성했던 것인데 블로그에 옮겨오는 것을 잊어버린듯 이슈 사용자 경험 측면에서, 페이지를 이동할 때마다 로그인이 해제되어 재로그인을 해야 한다면 사용자에게 불편을 초래할 수 있음 단순히 로그인 정보 (id - 다른 사람이 열람해도 상관없는 값) 를 전역 상태값으로 관리하면 해결되긴 하지만, 만약 유저가 페이지 내부의 상호작용 (버튼, 링크 등) 을 거치지 않고 url로 직접 접근하거나, 새로고침을 할 경우 웹 페이지 전체가 리로드되면서 로그인 상태값이 날아간다 해결 방안 CheckLogin 컴포넌트 export const CheckLogin = ({ children }: Props) => { const [currentUser, setCurrentUser] = useRec..

Axios instance 트랜센던스를 하면서 axios 호출부를 싹 개편할 일이 있었는데 팀원이 Axios instance에 관해 공부하고 트센에 도입하는 게 좋을 것 같다는 의견을 주었다 (gosu) 근데 이전 프로젝트는 fetch 를 썼었고 Axios 는 정말 오랜만에 쓰는 데다가 instance 기능은 안 써봤기 때문에 정리할 필요가 좀 생겼음 Axios 관련해서도 한번 글로 쭉 엮고 가야하는데 귀찮으즘이 아주… instance 쓰기 전의 axios 함수 구성 axios Wrappers export async function axiosGet(uri: string): Promise { return axios .get(`${process.env.REACT_APP_SERVER}${uri}`) .then..

Cypress JavaScript Web Testing and Component Testing Framework | cypress.io JavaScript Web Testing and Component Testing Framework | cypress.io Test. Automate. Accelerate. With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds. www.cypress.io 설치 npm npm: cypress npm install cypress --save-d..

Next.js Next.js by Vercel - The React Framework Next.js by Vercel - The React Framework for the Web Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds. nextjs.org 를 시작해 보자 이미 만들어져 있는 노션 포트폴리오가 있긴 하지만, 너무 흔해 보여서 Next.js 프로젝트로 S..

Vercel ↔ GoDaddy 도메인 연결 개요 최근에 Next.js 공부 를! 시작하면서 Next.js 앱을 만들어보고 있는데, 이게 Vercel 에서 만든 프레임워크인 만큼 Vercel 로 배포하는 게 착 잘 붙는다 현재 블로그와 몇몇 내가 만든 앱에 붙어있는 chichoon.com 도메인은 GoDaddy에서 구매했기 때문에 도메인을 연결하려면 고대디 관리 툴을 사용해 주어야 한다 사실 GitHub Pages 나 Vercel이나 Netlify나 다 연결 방식이 고만고만하긴 하지만 조금씩 달라서 정리를 해줬어야 하는데 버셀만 이제 겨우 정리하게 됐다 (게으름) 과정 1. GoDaddy에서 도메인 구매 이미샀지롱 여기서 구매를 한 이유는… 그냥 한국 사이트보다 외국 사이트에서 사는 게 더 쌀줄 알았음 2..

SFINAE Substitution Failure Is Not An Error 의 줄임말이다 Substitution (치환) Failure (실패) is Not An Error (는 오류 아님) 뭐 이런 두루뭉술한 말이 다 있지? 단어 뜻만 봐서는 도대체 무슨 말인지 모르겠다 그러므로 공부가 필요하다… cppreference says: SFINAE "Substitution Failure Is Not An Error" This rule applies during overload resolution of function templates: When substituting the explicitly specified or deduced type for the template parameter fails, th..

stack 는 무엇인가 #include int main(void) { std::stack stack1; // 정수형 컨테이너, 용량 0으로 초기화 std::stack stack2(5); // 문자열 컨테이너, 용량 5로 초기화 } 보통 자료구조를 배우다 보면 배열과 연결 리스트를 배운 뒤 스택, 큐를 필수적으로 다루게 된다 그 때 배운 그 스택이 맞다! 입출구가 단 하나인, LIFO (Last in First Out) 속성의 그 스택이다 LIFO 에서 알 수 있듯이, 스택은 요소를 넣을 수 있는 입구가 제한적이고, 그 말인 즉슨 스택을 구현할 때는 원소를 중간에 끼워넣거나 중간의 원소를 삭제하는 등의 연산을 고려할 필요가 없다는 뜻이다 벡터의 구현에 비하면 굉장히 짧은 구현량을 가지고 있다 (아싸) 눈여..