치춘짱베리굿나이스

CSR, SSR, SSG 이걸 설명해줄 일이 생겼었는데 나도 뭔가 횡설수설 하는 감이 있어서 정리하기로 했다 Next.JS 공부는 계속 하는데 뭔가 이론적인 면에서 공부가 너무 부족한것 같아서… CSR Client-Side Rendering 페이지의 핵심이 되는 HTML을 클라이언트에서 생성한다면 클라이언트 사이드 렌더링이라고 부른다 서버로부터는 최소한의 HTML만 전달받고, 클라이언트에서 대부분의 렌더링을 수행하면 클라이언트 사이드 렌더링이 된다 과정 클라이언트가 특정 URL로 페이지를 요청한다 서버는 최소한의 HTML만을 클라이언트에 응답한다 클라이언트는 HTML을 파싱하고, 필요한 리소스를 파악한 뒤 추가적으로 요청한다 (JS, CSS, 미디어 등) 서버는 리소스를 응답한다 (미디어의 경우, 외부 ..

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

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

Server Sent Event 개요 이번에 만들게 된 서비스의 목적은 나와 맞는 팀원 구하기 였는데, 생각해보면 팀에 합류할 지 말지 결정하기도 전에 개인 연락처 (메일 등) 를 노출시켜 연락을 취하도록 하는 것은 그다지 좋지 못한 것 같았다 이 사람이 나랑 함께 할 지 말 지도 모르는데 다짜고짜 개인 메일로 연락을 보내는 것도 이상하지만, 로그인이 되지 않은 상태에서도 프로필이 노출되는 상황에서 악의적인 사용자가 스팸 메일을 보내게 된다면…? 결국 쪽지 기능을 도입하기로 하였는데, 쪽지 송신은 HTTP로 구현하되 수신은 실시간으로 알림을 띄워주고 싶어 실시간 통신 기술을 고려하게 되었고, 보편적으로 활용되는 기술로 웹소켓, 롱 폴링, SSE를 찾았다 왜 SSE를 사용하게 되었는가? 웹소켓, 롱 폴링,..

클라이언트에서 crypto 모듈 동작 안 할때 해결책 crypto 가 않되요,,, crypto 모듈을 써서 항상 암호화를 진행해 왔는데, 클라이언트 (브라우저) 환경에서는 crypto 모듈을 찾지 못하더라 package.json을 수정해서 crypto를 억지로 끌어올 수는 있지만, 그렇게 되면 이번에는 createHash 함수가 작동을 안 한다 (못 찾는다고 나온다 🫠) 이유 https://nodejs.org/api/crypto.html crypto 모듈은 node.js 빌트인 모듈이라 그렇다 당연히 브라우저 환경에서 돌아가는 클라이언트 단은 node.js를 쓰지 않기 때문에 crypto 모듈이 존재하지 않으므로 오류가 발생한다 해결법 1. SubtleCrypto 사용 https://developer.m..

XML 파서와 XPath XML 문서를 접근하고 조작하여 읽어들이려면 XML 파서가 필요하다 XML 파서는 인자로 받아온 XML 문서가 제대로 된 XML 문서인지 (문법오류는 없는지, XML 형식이 맞는지 등) 검사하고, 해석한 결과를 반환한다 Parsing? Parser? 주어진 문자열이나 파일을 분석하거나, 정해진 문법 간 관계를 해석하는 것 문서를 읽어들일 때 필수 과정으로, 프로그램에 최적화된 형식으로 파싱하여 간편하게 해당 데이터를 사용할 수 있다 필요한 데이터의 빠른 처리가 가능하고, 설렁 XML 파일이 수정되었다고 해도 같은 파서를 사용하면 수정된 데이터를 같은 방식으로 잘라 가져올 수 있기 때문에 사용이 편리하다 XML 파서를 만드는 이유? XML 파일 (또는 HTML 파일) 을 파싱하여 ..

DOM Element replace 함수들 Element.replaceWith oldNode.replaceWith(newNode); oldNode.replaceWith(newNode1, newNode2, ...); 현재 노드를 인자로 들어온 노드 (또는 노드 여러 개) 로 교체한다 반환값은 없다 { /* 이전 노드 */ } { /* 변경된 노드 1 */ } { /* 변경된 노드 2 */ } 해당 위치가 인자로 들어온 노드들로 한번에 대체된다 Node.replaceChild parentNode.replaceChild(oldChild, newChild); 노드의 자식 노드 oldChild를 newChild으로 교체한다 다음과 같은 상황 등에서 오류 (예외) 가 발생한다 만약 oldChild 또는 newChi..

문제 .js 또는 .jsx 파일을 .tsx 파일로 변환하다가 마주한 오류 JSX 문법을 사용한 부분에 빨간 줄이 좍좍좍 쳐지면서 저 오류가 난다 원인 타입스크립트에서 JSX 문법을 사용하기 위해선 tsconfig.json에 jsx 옵션을 활성화해 주어야 한다 preserve: 타입스크립트 컴파일 시 .jsx 그대로 내보낸다 react-native: 타입스크립트 컴파일 시 내부 문법은 그대로 유지한 채 .js 파일로 내보낸다 (리액트 네이티브 용) react: 타입스크립트 컴파일 시 JSX 문법을 전부 React.createElement 호출로 변환하고, .js 파일로 내보낸다 react-jsx, react-jsxdev: 타입스크립트 컴파일 시 JSX 문법을 전부 _jsx 호출로 변환하고, .js 파일로 ..