목록javascript (3)
Hayden's Archive

1편에서 웹사이트를 처음 만들게 된 계기, 그리고 다국어 콘텐츠 구성이나 MDX 기반의 콘텐츠 설계 이야기를 했다면, 이번 2편에서는 조금 더 동적인 영역에 대한 이야기를 해보려고 한다.이번 편의 주제는 크게 두 가지다.하나는 내가 운영 중인 블로그(Medium & Tistory)에서 자동으로 최신 글을 불러오는 시스템을 어떻게 만들었는지,또 하나는 사용자와의 연결을 위해 만든 보안이 강화된 연락 폼 이야기다. 여러 플랫폼의 블로그 글을 언어 설정에 따라 자동으로 가져오기내 웹사이트에서는 프로젝트 문서 같은 콘텐츠는 직접 MDX 파일로 관리한다. 반면, 블로그 글은 Medium이나 티스토리 같은 외부 플랫폼에서 작성하고 RSS 피드를 통해 자동으로 불러오는 방식을 선택했다.이렇게 두 가지 방식을 병행하는..

개발자 웹사이트 제작을 결심한 이유 개발자인 나에게는 늘 머릿속 한 켠에 남아 있던 생각이 있었다. 내 자신을 제대로 표현하는 웹사이트가 없다는 것.내 블로그 글, 포트폴리오, 이력서 등이 여러 플랫폼에 흩어져 있었다. 단순히 이것들을 한곳에 모으는 것을 넘어서, 내 커리어와 철학, 그리고 작업물을 하나의 일관된 흐름으로 엮고 싶었다.내가 직접 만들고 다듬을 수 있는 공간이 필요했다. 내 정체성과 방향성을 정의하고 표현할 수 있는 장소 말이다.그러다 짧은 휴식 기간 동안 드디어 여유가 생겼고, 가장 먼저 떠오른 프로젝트가 바로 이것이었다.“지금 하지 않으면 아마 평생 못 할 거야.”그래서 결심했다. 그리고 바로 만들기 시작했다.기획, 콘텐츠 구조, 디자인, 프론트엔드와 백엔드 개발, 배포까지. 모든 걸 ..

리액트 디버깅 툴은 React Developer Tools를 설치해보자! 먼저 크롬 웹 스토어로 이동한다. https://chrome.google.com/webstore Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com React Developer Tools 를 검색하고 크롬에 확장 프로그램을 추가한다. 이렇게 크롬 브라우저 우측 상단에 아이콘이 추가된 것을 확인할 수 있다. 리액트가 사용된 페이지에서는 이렇게 빨갛게 활성화된다. F12를 눌러 크롬 개발자 도구를 실행시켜보자. 크롬 개발자 도구의 Elements에서는 실제 브라우저가 이해하는 일반적인 HTML 코드만 나타나고 리액트의 자바스크립트 코드 자체는 나타나지 않..