치춘짱베리굿나이스

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

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

Suspense와 Error Boundary를 이용한 로딩과 예외처리 기존의 구현 방식 export const DetailPage = ({ isMine = false }: Props) => { const { id } = useParams(); const nav = useNavigate(); const [data, setData] = useState({ username: '', code: '', language: '', interest: '', techStack: [], worktime: '', worktype: '', email: '', requirements: [], liked: false, // useState 초기화 }); useEffect(() => { fetchUserData(id) .then(..

Semantic하게~ 개요 Semantic? 사전적으로는 ‘의미론적인, 의미의’ 라는 뜻이다 그렇다면 Semantic HTML 이라는 건 의미론적 HTML 이라는 뜻이 되겠다 단어만 보면 괜히 어렵고 뭔 말인지 모르겠고 그렇다 의미론적 HTML? 이런 페이지를 HTML로 한번 구성해 보자 페이지 제목 로그아웃 소제목 본문 본문 본문 리스트1 리스트2 리스트3 copyright by chichoon 박스는 div로, 문자열은 span으로 처리하다 보면 위와 같은 문서가 나올 것이다 완전 div 투성이다! 물론 div로 모든 코드를 구성할 수는 있지만, 내용물을 보기 전까진 각각이 무슨 역할을 하는지 알기도 힘들다 글자가 들어가는 곳도 전부 span으로 처리해 놓았다? 제목, 소제목, 본문 전부 span이다..

클라이언트에서 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..

HTML과 XML 비교하기 익숙한 HTML과 조금 생소한 (사실 안드로이드 할 때 조금 했었던…) XML을 비교하며 각각의 특성을 알아볼라구 한다 HTML 하이? 이것은 테스트이다 작은 프론트엔드 개발자들아 Hyper Text Markup Language 가장 최신 버전은 HTML5이다 데이터의 표현에 주 목적을 두고 있다 웹 페이지 및 웹 응용 프로그램의 구조를 손쉽게 정의하기 위한 마크업 언어이다 어느 데이터가 어느 위치에 들어갈지를 정의했다고 생각하면 쉽다 페이지를 표현하기 위해 사전 정의된 태그 세트가 있고, 각 태그별로 의미도 이미 정의되어 있다 (정적) 따라서 이미 정의된 태그 내에서만 사용해야 한다 브라우저들은 이 태그들을 읽어 해독하고, 이에 맞춰서 페이지를 표현한다 간단한 작성 오류 (태..

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

React를 클론코딩 #1 React를 사용해서 클론코딩은 이제 흔하다 React를 클론코딩해보자 물론 정말 심도있는 .. 마치 리액트의 심연같은 .. 그런 기능까진 놓칠 수 있지만 대략적이고 큼직큼직한 내용을 한번 클론코딩해서 익혀보려 한다 https://github.com/chichoon/Raect GitHub - chichoon/Raect: 리액트 및 자바스크립트 객체들 짝퉁 만들어보기 리액트 및 자바스크립트 객체들 짝퉁 만들어보기. Contribute to chichoon/Raect development by creating an account on GitHub. github.com 참고로 레포지토리 이름은 리액트 짝퉁이라 Raect이다 (래익트 ㅋㅋ) 가상 DOM https://blog.chic..