# 블로그

🛠️ 블로그 개발해보기 - END 🛠️
블로그 링크클론코딩이나 인강도 좋지만 나만의 프로젝트를 직접 만들면서 배우는것이 확실하게 머리에 들어온다.만들어보기전에는 몰랐던 SSR과 SEO의 필요성을 느끼게 되었다. 역시 직접 겪어봐야 와닿는다.Next.js 13으로 다시 개발할것이다. 아직 Next.js를 잘

🛠️ 블로그 개발해보기 - 8 (Write) 🛠️
velog의 글작성 화면과 똑같이 만들예정MarkDown 에디터,뷰어 기능 필요Toast UI의 마크다운 에디터를 사용하고싶었지만 React 18에서는 지원하지 않기때문에.. @uiw/react-md-editor를 사용하였다. 화면 좌측에는 제목 input, edit기

🛠️ 블로그 개발해보기 - 7 (Entry - part2) 🛠️
Entry Footer 구상 🤔 Entry Footer 에선 카테고리의 다른 글들과 댓글들을 보여줄것이다. Entry page에서 가지고 있는 docId 값으로 글에 맞는 댓글들만 불러올것이다 > ### Comments 익명 작성을 위해 작성자 이름과 비밀번호를 입

Gatsby 블로그 검색기능 도입하기
정적 콘텐츠를 제공하는 블로그에서 검색 기능은 필수이다.본인도 공부하며 기록해둔 포스팅을 뒤적거릴 자주있어 검색 기능을 추가하기로 결정했다.웹 사이트에 검색을 도입하기 위해서는 아래 세 가지 컴포넌트가 필요하다.search indexsearch index는 데이터를 조

🛠️ 블로그 개발해보기 - 6 (Entry - part1) 🛠️
Entry 구상 Entry 페이지는 블로그의 글을 보여주는 페이지이다. Entry 페이지는 Home의 Post 컴포넌트나 Notes의 NoteCard컴포넌트를 눌러야만 갈수있는 페이지다. Firestore Database의 저장된 문서의 id를 :noteid로 할것이

🛠️ 블로그 개발해보기 - 5 (Notes) 🛠️
카테고리별로 보여주기(첫 마운트 될때는 all 카테고리)글을 카드 형식으로 보여줄것Firestore Database에 Categorys 컬렉션을 만들어준다.category(카테고리)createdAt(정렬을 위한 제작 시간 필드)Categorys는 Notes페이지에서 불

🛠️ 블로그 개발해보기 - 4 (Home - part2) 🛠️
Home 구상 - part2 홈화면에서는 이쁜 링크들과 글들을 불러올 예정이다. Link framer motion에는 onHoverStart와 onHoverEnd 라는 매우 유용한 props들이 있다. 카드에 커서를 올리면 show를 true로 만들어준뒤, show

🛠️ 블로그 개발해보기 - 3 (Home - part1) 🛠️
Home 구상 Home에서는 디자인 참고 블로그 와 같이 내가 좋아하는 영화,애니 사진들과 조금 오그라들수있는 감성적인 문구들을 번갈아가면서 보여줄 예정이다. 사진,문구 랜덤 설정 사진,문구 배열을 만들어 준 뒤, useEffect를 사용하여 mount 될때 한번

🛠️ 블로그 개발해보기 - 2 (Header && Footer) 🛠️
전역 상태관리를 위한 Recoil 동적 head를 위한 React-HelmetChakra UI 테마 저장createBrowserRouterHelmet은 head 제목을 설정해준다.Header와 Footer는 어떤 페이지를 라우팅하든 계속 보여야 하는 컴포넌트이다. 그

🛠️ 블로그 개발해보기 - 1 (구상) 🛠️
구성 STACK React,TypeScript를 사용할것이다. 백엔드는 Firebase의 Firestore Database를 이용할 예정이다. UI 디자인은 Chakra UI를 사용할 생각이다. 처음 써보는 거지만 공식문서를 보면서 하면 금방 늘것이다. 블로그인데
개발자 블로그 이사 준비 - 2
TIL과 WIL 자료들이 있습니다. TIL은 그날 배운 것들입니다. 프로그래밍적으로 하드스킬에 해당하는 것들 위주로 작성되어 있습니다. 엔지니어에게 당연히 중요한 자료이기 때문에 자료만 이동시키고 정제하고 보존할 것입니다.WIL은 매주 진행한 회고들입니다. 사실 회고는

2회차 마음가짐
옛날 옛적에, 한 사내는 공부 블로그를 적었답니다.그 사내는 자기가 매일매일 열심히 블로그를 적을 수 있다고 생각했습니다....
블로그 다시 시작
블로그를 다시 시작해보려고 한다. 예전에 Github 블로그를 사용해서 직접 꾸미고, 포스팅도 열심히 했었는데 회사 다니면서 바쁘다는 핑계로 블로그를 운영하지 않았다.. Velog가 깔끔하고 비교적 쉽게 시작할 수 있으며, 마크다운 형태도 지원하기 때문에 이걸로 블로그
개발자 블로그 이사 준비 - 1
이사 하는 이유 학원에서 강제성을 갖고 매일 개발자 블로그를 쓰도록 시켰습니다. 학원이 원했던 것은 SEO였습니다. 학원에서 강의보고 따라친거 올리면서 표절문제가 생겼습니다. 아마 코드가 동일해서 표절에 감지된 것 같습니다. 학원에서 매일 작성할 것을 강제해서 저질

🛠️ 블로그 개발해보기 - 0 🛠️
🤔 개발 배경? 고민하고 망설일 시간에 그냥 하자 CRA,gh-pages,파이어베이스를 사용한다고 문제가 될까?
개발자 블로그
원래 언어를 배우면서 얻은 자잘한 지식들은 간단하게 "goodNote"나 text파일에 정리 해두며 공부해왔다.나만 알아볼 수 있는 문장과 어투로 그날의 느낌을 적는 일기처럼그래도 막연히 '나도 개발자블로그를 만들어야하는데~" 생각은 해왔다.내가 배운 것들을 남이 볼
Next.js 블로그 개발 - rss-parser, content layer, custom server 적용
이번에 새로 개발하는 Next.js 블로그에 개인적인 일기와 공부 기록을 모두 옮기고 싶었다. 그러나 velog의 글을 모두 옮기기엔 시간적인 낭비가 크다고 생각했고.. 이력서에는 velog의 주소를 기재하고 있기에 velog도 계속 관리하고 싶었다.그래서 velog의
시작
tistory와 velog 중 어떤 플랫폼으로 개발 블로그를 시작할지 고민이다. 그래서 둘 다 사용해보며 더 편리한 쪽을 선택하기로 했다. 일단 velog 요 녀석은 마크다운이 매우 편리해보인다. tistory는 글감이라는 옵션을 통해 다른 컨텐츠(음악, 동영상, 사
[플러터(flutter) 입문] 블로그 웹 앱 만들기
material design & app bar 두 가지 지식을 이용하여 UI를 구성app bar : 앱 맨 위에 페이지 이름이나 앱 이름이 적혀있는 것. 이런 형태의 UI를 그려주는 위젯: 일정 작업이 완료되면 실행되는 함수 - 특정 조건이 성립될 대 실행: 프레임워크

단기간에 개발자가 되고 싶은 분들께 🙋♂️🙋♀️
지난 1년간 필자 지인들이 코딩을 시작하고 싶은데 어떻게 시작할지 그리고 부트 캠프를 이수한 사람으로서 부트 캠프에 가는 것에 대해서 어떻게 생각하는지 등 다양한 질문들을 받았다.