꿈이 많은 어른 아이

블로그를 적으시는 분들이나 여기저기 찾아보면 깃허브와 연동하여 댓글 기능을 구현하는 모습들을 종종 볼 수 있다.아직 블로그 형식으로 제작하지는 않았지만, 방명록 형식을 통해 해당 기능을 추가해볼까 한다. Utterances를 이용하여 구현한다. 1. Github App에 설치한다. 2. 사용할 레파지토리를 설정한다.Utterances는 생성된 레파지토리에 이슈를 생성하여 해당 이슈에 댓글을 다는 형식으로 구성되어 있다. whosbax-dev-comment라는 새로운 레파지토리를 생성하여 설정했다. 3. [이름]/[레파지토리] 형식으로 작성한 후, 포스트랑 이슈 매핑, 라벨, 테마를 어떻게 할지 하단에서 선택한다.현재 내가 작성한 방명록의 pathname은 guestbook으로 지정해뒀다. 여기서 작성/선..

페이지의 구조가 완성되고 Netlify에 배포가 되었다면, 이제 SEO를 적용해보자. - Netlify는 SignUp 이후 깃 레파지토리만 연결하면 자동으로 main 브랜치로부터 push시 배포를 적용해준다- SEO는 Search Engine Optimization, 검색엔진 최적화의 줄임말로, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고, 검색엔진을 통해 사이트를 방문할지 여부를 결정하도록 돕는다.https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko\ SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers검색엔진 최적화의 기본사항에 관한 지..

우선 개인적으로 Tailwind의 코드 형식을 썩 좋아하지 않는다. 가독성뿐만 아니라 인라인 스타일을 먹여 놓은 듯한 기분이 들어서 아직 어색한게 아닐까 하는 생각이 든다.가장 선호하는 방식은 기존 유명한 라이브러리(Bootstrap, Material UI, AntD 등)에 scss 형식으로 직접 수정하는 방식인데, 이왕 하는거 그냥 구조를 적절히 이해하면서 코드를 작성해보자- 라는 생각으로 scss로만 진행했다. (추후 NextUI 적용을 위해 Tailwind를 어쩔 수 없이 반영한다..ㅜ) src 폴더 안에 app 폴더와 model 폴더가 나누어져 있고, 모든 페이지는 app 폴더 내부에서 움직인다. 전체적인 css의 통일성을 위해서 globals.css에 내가 사용하려는 색상을 변수로 지정하여 사용..

어설프게 만들고 싶지 않다. 하지만 할 수 있는 부분의 한계는 명확했기에 할 수 있는 부분과 하지 않은 부분을 명확하게 구분할 필요가 있었다. 1. 어느 기능까지 구현/표현할 것인가?2. 디자인은 무엇을 참고할 것인가?3. 호스팅은 무엇을 이용할 것인가? '나를 소개하는 홈페이지를 만들기'를 주제로 나를 어디까지 소개할 것인가.빠른 시간 안에 홈페이지를 완성하고 싶기 때문에 우선은 노션에 적어뒀던 개인 이력서를 옮기는 방향으로 목표를 정했다. 추후 필요하다면 기능을 추가하는 방식으로 정해도 되니, 1차부터 마무리 짓기 위한 선택이다. 노션에 적어뒀던 이력서를 보니, 세부 페이지 없이 한 페이지에 진행했던 프로젝트와 그 내용을 적어뒀었다. 세부 페이지를 뜯어서 만드는 것이 좋을까 고민 끝에 메인 페이지(..

알다시피 근본은 공식문서. https://nextjs.org/docs Docs | Next.jsWelcome to the Next.js Documentation.nextjs.org node.js 18.17 버전 이상으로 지원한다. npx create-next-app@latest 따끈따끈한 신상으로 시작해보자. What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like to use `src/` directory? No / YesWould you like to ..

오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적여볼까한다. 대단한건 없으니 그냥 참고하시고, 이상한 점은 댓글로 무자비하게 피드백 주시면 적절히 수용하겠습니다. https://whosbax.netlify.app/ 꿈이 많은 어른 아이 : 박상호하고 싶은 것도 이루고 싶은 것도 너무나 많은, 어른이지만 아이처럼 - ${utils.title}whosbax.netlify.app

this this는 JavaScript 예약어로, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. 대부분 this의 값은 함수를 호출한 방법에 의해 결정된다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다. Binding 프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것이다. 쉽게 식별자와 값을 연결하는 과정을 의미하며, this바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다. 전역..

자바스크립트에서 헷갈릴 수 있는 정의들을 정리해보자. null 빈 값 null 이라는 빈 값을 할당했을 때, 생기는 타입이다. var test; test = null; // 선언한 변수 test에 null값을 할당 console.log(test); // null console.log(typeof test); // object undefined 정의되지 않음 var 선언문의 경우, 호이스팅이 되었을 때 변수 선언과 초기화가 동시에 일어나기 때문에, 변수가 undefined 된다. (타입 결정 안됨) console.log(test); // undefined console.log(typeof test); // undefined var test; undeclared 선언되지 않음 let, const 선언문의 경..

브라우저 저장소 (Web Storage) Web Storage란 HTML5에서 추가된 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능을 의미한다. 이는 쿠키(Cookie)와 비슷한 기능이다. 브라우저 저장소는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. 또, 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다. 이는 데이터의 보안 측면에서 당연하다. LocalStorage 로컬 스토리지는 저장..

Java, Javascript 등 언어들의 개념을 찾아보면 객체 지향 언어라는 단어를 볼 수 있다. 객체 지향 이란 무엇이며, 이 전에는 어떤 언어의 형태였는지를 알아보자. 절차 지향 프로그래밍 (Procedural Programming) 절차 지향 프로그래밍이란 물이 위에서 아래로 흐르는 것처럼 순차적인 처리가 중요시 되면 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법이다. 대표적인 절차지향 언어에는 C언어가 있다. 자동차 제조를 예를 들면, 자동차는 엔진, 차체, 핸들, 의자, 바퀴 순으로 차례대로 만들어져야 한다. 서로 분리되서도 안 되고, 순서가 틀려도 안된다. 하지만 핸들이 고장났다고해서 엔진부터 바퀴까지 전부 수리해야한다면 얼마나 비효율적인가? 예전에는 하드웨어와 소프트웨어의 개..