치춘짱베리굿나이스

두 태그를 묶은 이유는 내가 헷갈려서 white-space 공백 문자를 어떻게 처리할지에 대한 속성이다 '안녕하세요. 이것은 치춘 블로그 (blog.chichoon.com) 입니다.\n만나서 반갑습니다. 이것은 white-space 처리용 예문입니다.\n이것은 white-space 처리용 예문입니다.' 예문은 다음과 같다 normal white-space: normal; 연속으로 나타나는 공백 (여러 개의 공백) 을 하나로 합친다 개행 문자도 다른 공백 문자와 동일하게 처리한다 줄이 너무 길어 넘칠 경우, 자동으로 줄바꿈한다 nowrap white-space: nowrap; 연속으로 나타나는 공백을 하나로 합친다 줄 바꿈은 에서만 이루어진다 자동 줄바꿈이 이루어지지 않는다 pre white-space: ..

헐 https://stackoverflow.com/questions/72148525/tailwindcss-3-classes-doesnt-override-previous-classes 위와 같은 경우에 px-0과 px-3은 같은 priority를 갖기 때문에 px-3이 px-0을 덮어씌우지 않는다 당연히 클래스명은 오른쪽에 있는 것이 왼쪽에 있는 것을 덮어씌우는 줄 알았는데! 전혀 아니었다 디자인 시스템에서 테일윈드를 쓰면서 클래스명을 덮어씌워야 하는 경우가 종종 생기는데, 당연히 우측에 배치된 클래스명이 좌측의 클래스명을 덮어씌울 줄 알았지만 형제 관계의 클래스는 서로 우선순위가 동일하기 때문에 스타일시트 상의 순서에만 영향을 받는다고 한다 이것 때문에 팀원이랑 씨름을 했는데 위와 같은 사실을 알게 되고..

App 라우터, Pages 라우터 Pages 에서 App으로 넘어가기 내가 Next.js 공부를 시작한지도 어언 1달 정도가 되었는데… 5월 초쯤 (5월 5일?) v13.4.0 릴리즈부터 갑자기 앱 라우터가 stable 해 지면서 권장사항으로 바뀌었다 진행하던 미니 프로젝트 레포 초기화 할 때만 해도 App 라우터는 experimental이라 pages로 가는 것을 추천했었는데 이런 대격변이 아닐 수 없다 이렇게 갑작스럽게 바뀔 줄 알았으면 진작에 App 라우터로 초기화했지!… Next.js 공식문서엔 Next 13버전으로 업데이트되면서 변경된 사항들 몇몇개를 같이 소개하고 있지만 여기서는 App 라우터로만 변경하는 것을 적어보기로 한다 (사실상 번역만 하는 수준) 패키지 업데이트 npm install ..

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..