test

README.md

@@ -1,99 +1,13 @@
-<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
-<p align="center">
-  <a href="https://www.gatsbyjs.com">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby's default starter
-</h1>
+<div align=center>
 
-Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
+## Welcome Jeremy's Blog!
 
-_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
+  <img src="https://img.shields.io/badge/gatsby-663399?style=for-the-badge&logo=gatsby&logoColor=white">
+  <img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
+  <br>
 
-## 🚀 Quick start
+[![wakatime](https://wakatime.com/badge/user/654cd887-c3cd-4b8e-911e-2dccef7698d4/project/09c1c117-5b99-439d-9af0-a7a18eb8a824.svg)](https://wakatime.com/badge/user/654cd887-c3cd-4b8e-911e-2dccef7698d4/project/09c1c117-5b99-439d-9af0-a7a18eb8a824)
 
-1.  **Create a Gatsby site.**
+## 아래의 강의를 보고 만들었습니다.
 
-    Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the default starter.
-
-    ```shell
-    # create a new Gatsby site using the default starter
-    gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
-    ```
-
-1.  **Start developing.**
-
-    Navigate into your new site’s directory and start it up.
-
-    ```shell
-    cd my-default-starter/
-    gatsby develop
-    ```
-
-1.  **Open the source code and start editing!**
-
-    Your site is now running at `http://localhost:8000`!
-
-    Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries).
-
-    Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
-
-## 🚀 Quick start (Gatsby Cloud)
-
-Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
-
-[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-default)
-
-## 🧐 What's inside?
-
-A quick look at the top-level files and directories you'll see in a typical Gatsby project.
-
-    .
-    ├── node_modules
-    ├── src
-    ├── .gitignore
-    ├── gatsby-browser.js
-    ├── gatsby-config.js
-    ├── gatsby-node.js
-    ├── gatsby-ssr.js
-    ├── LICENSE
-    ├── package.json
-    └── README.md
-
-1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
-
-1.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
-
-1.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-
-1.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
-
-1.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/) for more detail).
-
-1.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-
-1.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-
-1.  **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
-
-1.  **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-1.  **`README.md`**: A text file containing useful reference information about your project.
-
-## 🎓 Learning Gatsby
-
-Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
-
-- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
-
-- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
-
-## 💫 Deploy
-
-[Build, Deploy, and Host On The Only Cloud Built For Gatsby](https://www.gatsbyjs.com/products/cloud/)
-
-Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.
-
-<!-- AUTO-GENERATED-CONTENT:END -->
+[React기반 Gatsby로 기술 블로그 개발하기](https://inf.run/8LJp)

contents/221106/WIL2244.md

@@ -0,0 +1,110 @@
+---
+date: '2022-11-06'
+title: 'WIL 22-44'
+categories: ['WIL', '프로젝트']
+summary: '첫번째 프로젝트 발표 후 회고'
+thumbnail: './WIL2244.png'
+---
+
+## 프로젝트의 끝
+
+약 4일의 짧은 기간동안 토이 프로젝트가 끝이나고 아쉬웠던점을 정리 해 보고자 한다.
+
+## 1. alert
+
+alert는 안이쁘다. 그리고 불편하다. 그래서 바꾸고자 하였다.
+
+기존 코드
+
+```js
+function editCommentSubmit() {
+  let name = $('.modal-name').val()
+  let text = $('.modal-text').val()
+  let _id = $('.edit-comment-button').attr('id')
+  $.ajax({
+    type: 'PATCH',
+    url: '/jeongik/patch',
+    data: { name: name, text: text, _id: _id },
+    success: function (response) {
+      alert(response['msg'])
+      window.location.reload()
+    },
+  })
+}
+```
+
+적당히 얼럿 날려주고 페이지를 리로드 해주었습니다.
+ajax를 사용하는 의미가 사실 없어집니다. 이쁘게 바꿨습니다.
+
+```js
+function editCommentSubmit() {
+  let name = $('.modal-name').val()
+  let text = $('.modal-text').val()
+  let _id = $('.edit-comment-button').attr('id')
+  $.ajax({
+    type: 'PATCH',
+    url: '/jeongik/patch',
+    data: { name: name, text: text, _id: _id },
+    success: function (response) {
+      commentLoading()
+      alert(response.msg, 'success')
+    },
+  })
+}
+```
+
+기존에 만들어둔 메세지를 읽어오는 get요청 함수인 commentLoading를 사용해 페이지를 로딩하는게 아니라 DOM으로 HTML내 요소만 갈아끼워주게 바꾸었습니다.
+얼럿은 부트스트랩에서 고대로 가져와 약간의 수정만 거쳐 작성했습니다.
+
+## 2. 아직 못다한 변경들
+
+### 1) 반응형 구현
+
+부트스트랩으로 반응형을 구현할거면 아예 새로 짜는게 더 빠를것 같다.
+아니면 하나하나 CSS에 미디어쿼리를 적용하는 방법도 있겠다.
+시간이 오래 걸릴 것 같아 일단 미뤄둔다.
+
+### 2) db구조 개선
+
+사실 이게 더 효율적인가? 에 대한 고민을 해봐야 할 것 같다.
+각 라우터에 상세페이지에 대한 이름이 연결되어 있으니, url에서 따와 post요청을 날릴 때 벨류값을 엮어주면 되지 않을까 싶다.
+콜렉션을 늘리는게 비효율적인지, 키-벨류 페어를 하나 늘려 로직 한줄 늘어나는게 더 비효율적인지는 비교를 해 봐야 하지 않을까 싶다.
+아무래도 구조를 개선하면,
+
+```js
+const jeongikComment = db.comments.find({ target: jeongik })
+//이후 json으로 파싱 후 클라이언트 전달
+```
+
+이 되게 될텐데, db를 한바퀴 더 돌아야되니,,, db의 양이 많아지면 오히러 비효율 적일수도 있겠다는 생각이 든다.
+
+### 3) 반복되는 코드 개선
+
+각 html 파트들을 컴포넌트화 시키면 되는데, 사실 리엑트가 아닌 상황에서 ejs등으로 처리하는게 더 효율적일까? 라는 고민이 든다. 공부를 더 해봐야 할 것 같다.
+
+## 3. 사이드 프로젝트
+
+### 진행사항
+
+약 3주전부터 친구와 함께 진행하던 사이드프로젝트를 이런 저런 이유덕에 미뤄두다, 주말에 잠깐 다시 진행을 했다.
+4시간정도 하며
+본인 -> (리엑트) 클라이언트측 로그인 구현
+친구 -> (노드) 서버측 로그인 구현
+을 진행했고, 페어프로그래밍 형태로 진행하였다.
+진행 중 가장 시간을 많이 잡아 먹었던 구문은
+
+```js
+const navigate = useNavigate()
+```
+
+왜 많이 잡아먹었는가? 훅에대한 기본이 없기 때문이였다.
+네비게이트 훅을 사용하기위해 컴포넌트를 리턴하는 함수속 네비게이트를 사용할 함수속에 훅을 정의하였는데 에러가 났다.
+리엑트 사용법이 아직 익숙하지 않아 아주 기초적인 실수를 한 것이다.
+어찌어찌 해결은 하였지만.... 찝찝하다.
+지금 진행하고 있는 커리큘럼에서 훅에 관한 강의도 듣게 될텐데, 그때 좀 더 신경써서 들을 수 있도록 노력해야겠다.
+이후 진행할 것
+
+- 로그인 클라이언트측 유효성 검사
+- 로그인 서버측 유효성 검사
+- 회원가입
+- 메인 페이지 구축

contents/221113/WIL2245.md

@@ -0,0 +1,123 @@
+---
+date: '2022-11-13'
+title: 'WIL 22-45'
+categories: ['WIL']
+summary: '22년 45주차 회고'
+thumbnail: './WIL2245.png'
+---
+
+## 1. 정신없이 지나가버린 한주
+
+### 무얼 했는가?
+
+### 1) 파이썬
+
+지난 프로젝트에서 파이썬을 꾸역꾸역 사용해가며 진행했다. 기본적인 문법을 알지도 못하고, 그저 구글 및 학습자료에 있는 코드를 해석해가며 진행한게 너무 아쉽기도하고, 앞으로 코딩테스트 준비를 위해 파이썬 학습에 대한 필요성도 느껴져 파이썬 기본 문법을 정리하였다.
+
+### 할 수 있게 된 것
+
+> 1. 포맷팅
+> 2. for문
+> 3. 기본 문자열 처리
+> 4. if문
+> 5. 논리연산자
+> 6. set
+> 7. try - except
+> 8. map
+> 9. lambda
+> 10. filter
+
+### 2) 자료구조 및 알고리즘
+
+앞으로를 위해 기본적인 자료구조와 알고리즘에 대해 공부하였다. 특히 들어만 봤던 자료구조들과 기본적인 알고리즘 형태에 대해 공부할 수 있어서 좋았다.
+
+### 알게 된 것
+
+> 1. linked list
+> 2. 재귀
+> 3. 버블정렬
+> 4. 선택정렬
+> 5. 삽입정렬
+> 6. 머지정렬
+> 7. 스택
+> 8. 큐
+
+### 앞으로 무얼 더 할 것인가?
+
+### 1) 자료구조 및 알고리즘
+
+> 1. 해쉬
+> 2. 트리
+> 3. 힙
+> 4. 그래프
+> 5. DFS
+> 6. BFS
+> 7. 다이나믹 프로그래밍
+>    그 외 기타 등등... 아직 한참 갈 길이 멀다
+
+위의 것들을 알기위해 무엇을 해야하는가?
+일단 부지런해야한다. 하루에 1시간이라도 꼭 투자를 하도록 노력해야한다.
+특히 자료구조 및 알고리즘은 이해가 중요한 영역이라 생각하기 때문에, 공부한 내용을 하루에 하나 이상 블로그에 정리하는걸 목표로 달려야겠다.
+특히나 지금 과정에서 가르쳐주는 자료구조, 알고리즘은 뭔가 나와 맞지 않는다. 일단 듣고 그에 관련된 내용들을 스스로 찾아 더 공부를 하고 이해하는 시간을 가져야 할 것 같다.
+
+### 2) CS 기초, 기본
+
+기본정도의 CS는 필수라고 생각한다. 겉할기식 말고 정말 전공1학년 이상 수준의 CS지식은 필요하다고 생각한다.
+비전공자로써 업계에 진출할 때, 물론 구현능력도 중요하고 코딩테스트 실력도 중요하겠지만. 기업들이 전공자를 뽑지 않고 나를 선택 할 이유를 만들어야한다.
+그러려면 전공자만큼의 기초지식은 아니겠지만, 적어도 그들이 1,2학년에 배우는 기초적인 지식들은 최소한 정확하게 설명은 못하더라도 이해는 하고 있어야 한다 생각한다.
+과정에서 CS특강을 진행 해 주지만, 앞으로 어떻게 공부를 할 것인가?
+
+> 과정에서 가르쳐 주는 CS특강 빠짐없이 이해하도록 노력하기.
+> CS에 관련된 책을 한권 준비하고 그 책 씹어먹는다는 생각으로 공부하기.
+
+## 2. 그와중에도 열심히 해야지
+
+### 1) 사이드 프로젝트
+
+친구와 함께 진행하는 사이드 프로젝트. 회사를 다니는 친구, 교육을 받는 나 덕분에 두명이 시간을 맞추기 여간 쉬운일이 아니다.
+주말을 통해 3~4시간 집중적으로 진행하고, 평일에는 짧게 30분~ 2시간정도 진행하려 노력중이다.
+이번주는 이런 저런 친구 사정때문에 많이 진행하진못했고, 오늘 저녁에 좀 더 진행 할 예정이다.
+
+### 사이드 프로젝트 소개
+
+생각해보니 뭘 만드는지, 왜 만드는지, 어떻게 만드는지에 대해 소개를 전혀 하지 않은 것 같아서 적어볼까 한다.
+
+- "포트폴리오를 만드는 포트폴리오"
+  - 포트폴리오로 사용하겠다! 라는 목표로 시작을 했고, 포트폴리오 및 이력서를 제작 해 주는 서비스를 만들어 보기로 했다.
+- 사용할 기술들
+  - FE
+    - React, styled-component, react-router-dom 등... 계속 필요에 따라 추가해 볼 예정이고 다양한 기술을 사용하는게 목표
+  - BE
+    - Node.js, mongoose, express, nodemon ... 상동
+  - 기타
+    - mongoDB, git, Notion, figma... 등등
+
+### 어디까지 진행되었는가?
+
+원시적인 로그인, 회원가입 패턴 및 랜딩페이지(암호화 이전)
+
+### 앞으로 해야할 것
+
+정말 많이 남았지만 당장 눈앞에 닥친 문제들을 생각해 보면
+로그인 상태 전역관리(리액트쿼리 vs nextjs vs redux), 로그인 및 회원가입 암호화, 메인페이지 퍼블리싱 정도가 급한 일이 될 것 같다.
+
+## 3. 그래도 나는 즐거워
+
+### 알고리즘과 금요일
+
+이번주는 금요일이 몹시 고비였다. 무언가 새로운것을 만드는 것이 아닌, 그를 위한 기초를 다지는 주였다. 지난주는 프로젝트를 하기 위해 일주일 내내 팀원들과 상의하고 프로젝트를 진행한 것에 비해 이번주는 혼자만의 싸움을 하다 보니 굉장히 지치고 피곤하게 느껴졌던 것 같다.
+그래도 많은 성과가 있었고, 앞으로를 위해 더 노력해야겠다는 생각을 많이 하게 되었다.
+특히 알고리즘... 정말 나를 많이 괴롭힌 것 같다. 일주일 내내 기초적인 수준에서 벗어나지 못한다는 자괴감덕분에 괴로웠지만, 어찌보면 당연한것 아닌가?
+당장 코드를 치기 시작한지 3달도 되지 않았고, 자료구조 알고리즘에 대해 겉핥기식으로만 알고있었지 제대로 배우는건 이번이 처음이다.
+컴퓨터적인 사고... 를 해야한다 라고 늘 주변에서 말했었는데 뼈저리게 느끼는 중이다. 그래도 공대생적인 의사결정 패턴을 가지고 있다 생각했는데, 그거보다 더 컴퓨터적으로 생각해야한다. 노력 해 보고 있다.
+
+### 학습환경에 대한 고찰
+
+학습환경을 변경하였다.
+기존에는 부억-거실 사이 어딘가에서 공부를 했었는데, 아내가 편히 쉬지 못하는 것 같기도 하고, 나도 집중력이 흐트러지는 것 같아 작은방으로 컴퓨터 세팅을 옮겼다.
+오늘이 되서야 옮기고 아직 컴퓨터 앞에 장시간 앉아있지 않아서 어떨지는 모르겠지만, 어째튼 조금은 더 집중하는 환경으로 되지 않을까 기대해 본다.
+
+### 아내의 생일
+
+오늘 아내의 생일이다. 사실 모아둔돈을 까먹으며 생활하는 처지라 무언가 거창한걸 못해줘서 굉장히 미안하고 안타깝다.
+내년에는 꼭 좋은 경험을 선사해 주기 위해 올해 잠시 미안함을 접어두고 더 열심히 공부해야할 것 같다.

contents/221218/WIL2250.md

@@ -0,0 +1,37 @@
+---
+date: '2022-12-18'
+title: 'WIL 22년 50주차'
+categories: ['WIL', 'Redux', 'Gatsby']
+summary: 'react-redux를 활용한 Todo List 만들기와 Gatsby를 활용한 블로그 만들기'
+thumbnail: './WIL2250.png'
+---
+
+## 한주를 마무리하며
+
+이번주는 새로운 개념들을 마구마구 배우고 적용해 본 주다.
+
+그 중 주중에 공부한 것들은 아래와 같다.
+
+### 프론트엔드 기술
+
+- redux
+- react-router-dom
+- useRef
+- useEffect
+
+### 기타
+
+- akiflow(todo 관리 어플리케이션)
+
+모두 실습해 보았고, 특히 생산성에 영햐을 주는 akiflow라는 투두 리스트를 사용해 봤는데, 정말 편리했다. 다음에 소개하는 글을 한번 작성 해 봐야할듯...
+
+## 주말동안 한 것
+
+미루고 미루고 또 미루던 블로그 만들기 드디어 했다.
+사용한 기술스택은 다음과 같다.
+
+- TypeScript
+- Gatsby React
+- GraphQL
+
+주중에 시간이 조금 날 때 마다 블로그를 제작하면서 만났던 트러블슈팅을 진행하고, 앞으로 기능을 하나씩 추가해 볼 예정이다.

contents/221225/WIL2251.md

@@ -0,0 +1,18 @@
+---
+date: '2022-12-25'
+title: 'WIL 22년 51주차'
+categories: ['WIL', 'figma', '프로젝트']
+summary: '새로운 팀 프로젝트 시작'
+thumbnail: './WIL2251.png'
+---
+
+## 새로운 프로젝트 시작
+
+이번 주 새로운 프로젝트를 시작했다.
+간단한 웹앱으로, Main Contents와 Comments로 구성된 CURD \* 2 어플리케이션이다.
+
+[SA](https://www.notion.so/jeremy-kr/5a01d6017a9f41df80d1157ac39c999d)
+
+피그마 제작 전체와 DB, Route, API 설계를 맡아서 했다.
+
+이번 프로젝트는 큰 욕심 없이, git-flow 잘 적용시키기, 코드리뷰 열심히 하기 두가지만 잘 이뤄냈으면 좋겠다... 홧팅!