From 008d0d05c86c46ab2b56874f2021fc3d75c7298b Mon Sep 17 00:00:00 2001 From: 1ilsang <1ilsang@naver.com> Date: Thu, 12 Oct 2023 00:46:30 +0900 Subject: [PATCH] fix(docs): Check spelling --- apps/blog/_posts/activity/geultto8-seminar.md | 48 +++++++++---------- apps/blog/_posts/activity/geultto8-start.md | 20 ++++---- apps/blog/_posts/activity/jeju-remote.md | 34 ++++++------- apps/blog/_posts/activity/junction2023.md | 48 +++++++++---------- apps/blog/_posts/algorithm/goorm/195687.md | 12 ++--- apps/blog/_posts/algorithm/goorm/195692.md | 10 ++-- apps/blog/_posts/algorithm/goorm/195693.md | 14 +++--- apps/blog/_posts/algorithm/goorm/195696.md | 12 ++--- apps/blog/_posts/algorithm/goorm/195698.md | 30 ++++++------ .../_posts/algorithm/leetcode/easy/2727.md | 12 ++--- .../_posts/algorithm/leetcode/medium/238.md | 24 +++++----- apps/blog/_posts/js/eslint-plugin.md | 32 ++++++------- apps/blog/_posts/js/implicit-coercion.md | 18 +++---- apps/blog/_posts/js/renovate.md | 6 +-- apps/blog/_posts/js/storybook7.md | 6 +-- 15 files changed, 163 insertions(+), 163 deletions(-) diff --git a/apps/blog/_posts/activity/geultto8-seminar.md b/apps/blog/_posts/activity/geultto8-seminar.md index 5b7541c3..25a58a4c 100644 --- a/apps/blog/_posts/activity/geultto8-seminar.md +++ b/apps/blog/_posts/activity/geultto8-seminar.md @@ -10,7 +10,7 @@ ogImage: cover -> [발표자료 PDF 다운로드](https://github.com/1ilsang/dev/files/12504345/_1ilsang.pdf) +> [발표 자료 PDF 다운로드](https://github.com/1ilsang/dev/files/12504345/_1ilsang.pdf) [글또](https://www.notion.so/ac5b18a482fb4df497d4e8257ad4d516)에서 프론트엔드 반상회를 하게 되었고 발표자를 구하여서 지원하게 되었다. @@ -18,11 +18,11 @@ ogImage: ## 주제 선정 -프론트엔드 반상회인만큼 *프론트엔드 개발자에게 도움이 되는 내용*을 발표하고 싶었다. +프론트엔드 반상회인 만큼 *프론트엔드 개발자에게 도움이 되는 내용*을 발표하고 싶었다. -그래서 주제를 선정하는 도중 "내가 신입일때 가장 듣고 싶었던 세션이 무엇일까?" 고민하게 되었고 결론은 "오픈소스 분석방법"이였다. +그래서 주제를 선정하는 도중 "내가 신입일 때 가장 듣고 싶었던 세션이 무엇일까?" 고민하게 되었고 결론은 "오픈소스 분석 방법"이였다. -라인에서 처음으로 프론트엔드 커리어를 쌓을때 받은 미션은 사내 동영상 라이브러리의 유지보수였다. `package.json`이 뭐 하는건지도 잘 몰랐기 때문에 `UMD`, `CJS` 등은 너무나 생소했고 트리쉐이킹과 다양한 디바이스의 지원은 당시 나에겐 상당히 어려웠다. +라인에서 처음으로 프론트엔드 커리어를 쌓을 때 받은 미션은 사내 동영상 라이브러리의 유지보수였다. `package.json`이 뭐 하는 건지도 잘 몰랐기 때문에 `UMD`, `CJS` 등은 너무나 생소했고 트리쉐이킹과 다양한 디바이스의 지원은 당시 나에겐 상당히 어려웠다. 어쨋건 라이브러리였기 때문에 다른 오픈소스 라이브러리들은 어떻게 개발하고 있는지 틈틈히 분석하면서 늘 이런 오픈소스에 나도 기여하고 싶다고 생각했던것 같다. @@ -35,13 +35,13 @@ ogImage: 1. 오픈소스 기여 가이드 2. 핵심 코드 진입 방법 -위의 내용을 통해 오픈소스 코드의 첫 진입점을 찾고 기여할수 있도록 가이드를 주고자 했다. +위의 내용을 통해 오픈소스 코드의 첫 진입점을 찾고 기여할 수 있도록 가이드를 주고자 했다. -기여 방식을 설명하는 자리인만큼 초보 개발자를 위해 익숙하면서도 흥미를 불러올만한 내용으로 AtZ 친절하게 설명하고자 했다. +기여 방식을 설명하는 자리인 만큼 초보 개발자를 위해 익숙하면서도 흥미를 불러올 만한 내용으로 AtZ 친절하게 설명하고자 했다. ![open source list](https://github.com/1ilsang/dev/assets/23524849/cc1d815d-f8a0-44e2-ac8c-cdad3406b71d) -수많은 오픈소스에서 어떤것을 목표로 할까 고민을 했고 역시 내가 기여해 봤고 자주 사용하는 오픈소스 중에서 고르게 되었다. +수많은 오픈소스에서 어떤것을 목표로 할까 고민을했고 역시 내가 기여해 봤고 자주 사용하는 오픈소스 중에서 고르게 되었다. 전체적인 구성은 기여 방법을 기준으로 3단계로 나눠 생각했다. @@ -49,17 +49,17 @@ ogImage: 2. [Medium] ESLint와 같은 도구의 CLI 진입 코드와 플러그인 구성 방법. 3. [Hard] Jotai와 같이 코드에서 사용되는 코어 라이브러리의 엔트리 진입 방법. -세 단계를 구분한 이유는 Hard로 갈수록 핵심 코드의 동작 방식을 잘 이해해야하기 때문이다. +세 단계를 구분한 이유는 Hard로 갈수록 핵심 코드의 동작 방식을 잘 이해해야 하기 때문이다. -- 번역/문서화 기여는 라이브러리 코드에 진입하지 않기 때문에 비교적 쉽게 기여할수 있다고 생각한다. 이 단계에서 포크나 PR 방법, 오픈소스 생태계 등을 설명할 예정이다. -- ESLint와 같은 개발 도구는 ESLint 자체보단 플러그인에 대한 분석을 하고자 한다. 코어 로직 주변에서 전반적인 코드 구조/방식을 이해할수 있어 핵심 코어 기여보단 쉽다고 생각한다. 라이브러리의 확장과 플러그인 구조, CLI 등을 설명하고자 한다. -- Jotai와 같은 코어 라이브러리는 라이브러리도 잘 알아야하고 같이 사용되는(React, Next 등) 코드와의 관계도 이해하고 있어야 하기 때문에 어렵다고 생각한다. 여기는 가볍게 코드 진입과 빌드, 배포에 대해 설명하려고 한다. +- 번역/문서화 기여는 라이브러리 코드에 진입하지 않기 때문에 비교적 쉽게 기여할 수 있다고 생각한다. 이 단계에서 포크나 PR 방법, 오픈소스 생태계 등을 설명할 예정이다. +- ESLint와 같은 개발 도구는 ESLint 자체보단 플러그인에 대해 분석하고자 한다. 코어 로직 주변에서 전반적인 코드 구조/방식을 이해할 수 있어 핵심 코어 기여보단 쉽다고 생각한다. 라이브러리의 확장과 플러그인 구조, CLI 등을 설명하고자 한다. +- Jotai와 같은 코어 라이브러리는 라이브러리도 잘 알아야 하고 같이 사용되는(React, Next 등) 코드와의 관계도 이해하고 있어야 하므로 어렵다고 생각한다. 여기는 가볍게 코드 진입과 빌드, 배포에 관해 설명하려고 한다. -어느정도 틀이 갖춰진 다음에는 빠르게 PPT 작업을 할수 있었다. +어느 정도 틀이 갖춰진 다음에는 빠르게 PPT 작업을 할 수 있었다. 20분 발표이고 청중이 초보 개발자인만큼 가볍게 다양한 기여 예제를 보여주고자 했다. -장표의 마지막에는 오픈소스에 지속적으로 노출되는 방법을 추가하며 마무리 했다. +장표의 마지막에는 오픈소스에 지속해서 노출되는 방법을 추가하며 마무리했다. ## 발표 당일 @@ -67,7 +67,7 @@ ogImage: ![booth](https://github.com/1ilsang/dev/assets/23524849/fde40b79-9c4a-43ba-8c73-828023e3be15) -타임테이블이나 스티커의 디자인이 깔끔하게 잘 뽑혔다. 운영진 분들의 노고가 느껴졌다. +타임테이블이나 스티커의 디자인이 깔끔하게 잘 뽑혔다. 운영진분들의 노고가 느껴졌다. > 압도적 감사..! @@ -77,15 +77,15 @@ ogImage: ![start](https://github.com/1ilsang/dev/assets/23524849/0d163917-eb6d-4d9b-919b-30aa8e7cff5e) -발표는 크게 떨리진 않았던것 같다. +발표는 크게 떨리진 않았던 것 같다. 스무스한 행사 진행에 힘입어 청중들도 잘 호응해 주셨다. -혼자 떠드는 발표를 하고싶지 않아서 청중과 눈을 마주친다거나 질문을 한다거나 여유있게 행동하고 싶었는데 매우 쉽지 않았다.ㅋ +혼자 떠드는 발표를 하고 싶지 않아서 청중과 눈을 마주친다거나 질문을 한다거나 여유 있게 행동하고 싶었는데 매우 쉽지 않았다.ㅋ -장표를 넘기기 전에 다들 어떻게 듣고 계신지 궁금해서 종종 청중들을 바라봤는데 다들 엄청 집중해 주셔서 압도적 감사함을 느꼈다. 그래서인지 자신감을 가지고 더 여유롭게 떨지않으면서 발표 할수 있었다. +장표를 넘기기 전에 다들 어떻게 듣고 계시는지 궁금해서 종종 청중들을 바라봤는데 다들 엄청나게 집중해 주셔서 압도적 감사함을 느꼈다. 그래서인지 자신감을 가지고 더 여유롭게 떨지 않으면서 발표할 수 있었다. -확실히 열의있는 분들과 함께 현장에서 발표하는게 훨씬 좋고 인상적이라 느꼈다. [영상으로 발표](https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook)할때는 오히려 엄청 힘들었다. +확실히 열의 있는 분들과 함께 현장에서 발표하 는게 훨씬 좋고 인상적이라 느꼈다. [영상으로 발표](https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook)할때는 오히려 힘들었다.
@@ -93,24 +93,24 @@ ogImage: 20분 정말 짧았다. 마이크 들자마자 끝난 느낌이었다. -10분간 QnA도 진행되었는데 생각보다 질문을 많이 해주셔서 조금 기뻣다. +10분간 QnA도 진행되었는데 생각보다 질문을 많이 해주셔서 조금 기뻤다. -특히 인상깊었던 질문중 하나는 기여하고 싶은 라이브러리의 조건에 대한 질문이었는데 내가 회사에서 라이브러리를 개발하면서 중요하게 생각했던 부분을 말할수 있었다. +특히 인상 깊었던 질문 중 하나는 기여하고 싶은 라이브러리의 조건에 대한 질문이었는데 내가 회사에서 라이브러리를 개발하면서 중요하게 생각했던 부분을 말할 수 있었다. 아무리 좋은 라이브러리라도 결국은 다른 개발자가 사용하기에 "편해야"한다. 나는 라이브러리는 DX가 무엇보다 중요하다고 생각한다. 따라서 문서화를 비롯해 IDE 단계에서의 편리함(코드의 간결함이나 타입 추론과 주석 등)이 기여하고 싶은 라이브러리의 조건이 되지 않을까 생각한다. -소신것 준비한만큼 후회없이 발표했다. +소신것 준비한 만큼 후회 없이 발표했다. ## 마치며 ![flower](https://github.com/1ilsang/dev/assets/23524849/cb11a457-109a-443b-ace8-359b92a8fa97) -연사자들에게 꽃을 나눠주셨는데 매우민망(ㅋㅋ) 감사합니다. +연사자들에게 꽃을 나눠주셨는데 매우 민망(ㅋㅋ) 감사합니다. 발표를 준비하면서 스스로 공부가 많이 되었다. -앞으로도 꾸준히 공부해서 좋은 내용으로 다른 분들에게 공유할수 있도록 노력하고자 한다. +앞으로도 꾸준히 공부해서 좋은 내용으로 다른 분들에게 공유할 수 있도록 노력하고자 한다. 열정이 솟아난 8월이었다. -> [발표자료 PDF 다운로드](https://github.com/1ilsang/dev/files/12504345/_1ilsang.pdf) +> [발표 자료 PDF 다운로드](https://github.com/1ilsang/dev/files/12504345/_1ilsang.pdf) diff --git a/apps/blog/_posts/activity/geultto8-start.md b/apps/blog/_posts/activity/geultto8-start.md index 4f760f89..cb8a519b 100644 --- a/apps/blog/_posts/activity/geultto8-start.md +++ b/apps/blog/_posts/activity/geultto8-start.md @@ -14,15 +14,15 @@ ogImage: 글또는 글쓰는 또라이의 줄임말로, 개발자들이 서로 글을 쓰고 피드백/공유하는 커뮤니티다. 기수당 반년씩 진행되니 어느덧 2년을 함께하게 되었다(...) -아무래도 글을 쓰는것이 목적이기 때문에 10만원의 예치금을 걸고 글을 못쓸때마다 차감되는 형식으로 진행되는데, 저번 기수(7기)에는 막판에 글을 거의 못썻기 때문에 예치금을 꽤나 많이 잃었다ㅠㅠ. +아무래도 글을 쓰는 것이 목적이기 때문에 10만 원의 예치금을 걸고 글을 못 쓸 때마다 차감되는 형식으로 진행되는데, 저번 기수(7기)에는 막판에 글을 거의 못 썼기 때문에 예치금을 꽤 많이 잃었다. ㅠㅠ 이번에는 개인적인 목표도 있기 때문에 열심히 참여해 보려고 한다. -먼저 글또8기를 시작하게 된 계기는 블로그를 활성화 하기 위해서가 크다. +먼저 글또8기를 시작하게 된 계기는 블로그를 활성화하기 위해서가 크다. -블로그 글을 안쓰게 된지 굉장히 오래 되었다. 매번 블로그를 다시 살리겠다고 생각했으나 쉽게 되지 않았다. 다양한 이유가 있었지만 [블로그 리빌딩](./blog-renewal)이 끝나지 않은점이 컸었던것 같다. +블로그 글을 안쓰게 된지 굉장히 오래되었다. 매번 블로그를 다시 살리겠다고 생각했으나 쉽게 되지 않았다. 다양한 이유가 있었지만 [블로그 리빌딩](./blog-renewal)이 끝나지 않은 점이 컸었던 것 같다. -블로그에 글을 안쓰다보니 기술 정리도 안하고, 그러다보니 두서 없이 정리되어 분명 아는 개념인데 설명을 하기가 어려웠다. 즉 제대로 몰랐다. +블로그에 글을 안쓰다 보니 기술 정리도 안하고, 그러다 보니 두서없이 정리되어 분명 아는 개념인데 설명하기가 어려웠다. 즉 제대로 몰랐다. 따라서 이번 글또 8기를 하면서 지키고 싶은, 하고 싶은 것들은 아래와 같다. @@ -30,14 +30,14 @@ ogImage: 2. 네트워킹 3. 블로그 리빌딩 -기술 정리를 열심히 해서 나중에 내가 검색이 아닌 내 블로그를 찾아오도록 만들고 싶다. 분명 고생해서 공부/작업한 내용인데 되돌아보면 기억이 하나도 나지 않아 코드를 직접 뜯었던 기억이 꽤나 있다. 요약 정리하고 공유할수 있도록 하고싶다. +기술 정리를 열심히 해서 나중에 내가 검색이 아닌 내 블로그를 찾아오도록 만들고 싶다. 분명 고생해서 공부/작업한 내용인데 되돌아보면 기억이 하나도 나지 않아 코드를 직접 뜯었던 기억이 꽤 있다. 요약 정리하고 공유할수 있도록 하고 싶다. -그렇기 때문에 글감은 첫 주동안 고민해 목차를 구성하고 남은 한주는 구성된 글을 완성시키는게 목표다. 매번 마지막주 주말에 몰아서 쓰다보니 내용도 부실하고 두서도 맞지 않았다. 이번에는 루틴을 좀 지키고 싶다. +그렇기 때문에 글감은 첫 주동안 고민해 목차를 구성하고 남은 한주는 구성된 글을 완성시키는게 목표다. 매번 마지막 주 주말에 몰아서 쓰다 보니 내용도 부실하고 두서도 맞지 않았다. 이번에는 루틴을 좀 지키고 싶다. -네트워킹의 경우 저번 기수의 영향이 크다. 저번 기수 글또 내에서 진행된 북클럽에 참여하고 있는데 너무 좋은 경험이었다. 매번 개발 서적만 읽어서 인문학적 소양이나 상식이 굉장히 부족하다고 느꼈었는데 북또를 통해 크게 해소되었다. 혼자서는 진짜 한권도 못읽었을것 같다. +네트워킹의 경우 저번 기수의 영향이 크다. 저번 기수 글또 내에서 진행된 북클럽에 참여하고 있는데 너무 좋은 경험이었다. 매번 개발 서적만 읽어서 인문학적 소양이나 상식이 굉장히 부족하다고 느꼈었는데 북또를 통해 크게 해소되었다. 혼자서는 진짜 한 권도 못 읽었을 것 같다. -이번 글또는 오프라인 모임도 많을것 같아 더욱 설렌다. 다양한 네트워킹을 통해 시각을 넓히고 싶다. +이번 글또는 오프라인 모임도 많을 것 같아 더욱 설렌다. 다양한 네트워킹을 통해 시각을 넓히고 싶다. -또한 이번에는 반드시... 블로그 리빌딩을 마무리 하고싶다. 양질의 글에 블로그 리빌딩이 녹아들수 있도록 노력해야겠다. +또한 이번에는 반드시... 블로그 리빌딩을 마무리 하고 싶다. 양질의 글에 블로그 리빌딩이 녹아들 수 있도록 노력해야겠다. -그럼 이만! +그럼, 이만! diff --git a/apps/blog/_posts/activity/jeju-remote.md b/apps/blog/_posts/activity/jeju-remote.md index 85dca18b..33572763 100644 --- a/apps/blog/_posts/activity/jeju-remote.md +++ b/apps/blog/_posts/activity/jeju-remote.md @@ -12,17 +12,17 @@ ogImage: > 제주 섭지코지 -최근에 해외 리모트로 한달간 발리를 갔다왔다. +최근에 해외 리모트로 한 달간 발리를 갔다 왔다. -해외 리모트 소감을 쓰려던 중 작년 중순(2022.05) 제주도에서 보낸 한달간의 리모트가 떠올랐다. 시간 순서대로 적어보고자 하여 기억을 더듬어 그때의 기록을 남기고자 한다. +해외 리모트 소감을 쓰려던 중 작년 중순(2022.05) 제주도에서 보낸 한 달간의 리모트가 떠올랐다. 시간 순서대로 적어보고자 하여 기억을 더듬어 그때의 기록을 남기고자 한다. ## 시작 계기 -재택 근무가 지속되던 어느날 회사에서 국내 리모트도 거주지의 확보만 된다면 가능하다고 공지가 나왔다. +재택근무가 지속되던 어느날 회사에서 국내 리모트도 거주지의 확보만 된다면 가능하다고 공지가 나왔다. 평소 해외에서 근무해 보고 싶다고 생각을 자주 했었다. 마침 리모트도 되니 이번 기회에 연고지가 없는 곳으로 이동해 워케이션을 해보면서 나는 워케이션이 잘 맞는 사람인지 알고 싶었다. -바로 제주도가 떠올랐고 한달 제주살이를 해보자 마음먹었다. +바로 제주도가 떠올랐고 한 달 제주살이를 해보자 마음먹었다. ## 첫 일주일 @@ -30,11 +30,11 @@ ogImage: 나는 사람이 많은 곳을 피하고 싶었다. 고민하던 도중 [성산일출봉](https://naver.me/GEAuu260) 근처에 관광할 곳이 하나도 없는 지역 근처의 숙소를 구했다. -오죽했으면 근처에 카페도 거의 없어서 걸어서 20분 가야했다. 9\_- +오죽했으면 근처에 카페도 거의 없어서 걸어서 20분 가야 했다. 9\_- 성산일출봉이 어느 위치에서도 보였기 때문에 나침반 역할을 했다. 평소 서울에서 거의 벗어나질 않았기 때문에 어딜가도 바다와 대자연이 펼쳐진 제주도는 설레기에 충분한 장소였다. -주변을 더 자세히 보고자 많이 걸어다녔고 혼자 사색하는 시간도 많이 가졌었다. +주변을 더 자세히 보고자 많이 걸어 다녔고 혼자 사색하는 시간도 많이 가졌었다.
@@ -44,7 +44,7 @@ ogImage: 집을 벗어나 일하는게 익숙하지 않았던 나는 큰 실수를 하나 저지르는데 바로 "책상"을 제대로 알아보지 않았다는 점이었다. -숙소의 가격이나 주변 환경이나 인터넷 등은 확인을 했는데 책상은 여부만 확인하고 제대로 알아보지 않았던 점이 큰 실수였다. +숙소의 가격이나 주변 환경이나 인터넷 등은 확인했는데 책상은 여부만 확인하고 제대로 알아보지 않았던 점이 큰 실수였다. 의자가 제대로 되어있지 않은 책상에서 장시간 코딩은 허리에 무리가 많이 갔다. 퇴근하고 나서는 아예 누워서 했다. @@ -56,15 +56,15 @@ ogImage: ![green-tea-cave](https://github.com/1ilsang/dev/assets/23524849/5fe84b29-18bf-4852-8f16-2a256a2d5d5c) -하지만 퇴근후 혹은 주말에 제주 여러 지역을 돌아다니며 주위를 환기하는 과정은 워케이션을 후회하지 않게 해주기에 충분했다. +하지만 퇴근 후 혹은 주말에 제주 여러 지역을 돌아다니며 주위를 환기하는 과정은 워케이션을 후회하지 않게 해주기에 충분했다. -특히 카페에서 공부하는걸 좋아하던 나는, 제주의 이색적인 카페에서 아름다운 풍경을 뒤로하고 여유롭게 책을 읽는게 상당히 좋았다. +특히 카페에서 공부하는 걸 좋아하던 나는, 제주의 이색적인 카페에서 아름다운 풍경을 뒤로하고 여유롭게 책을 읽는게 상당히 좋았다. -제주에서 몇가지 목표가 있었는데, 그중 하나가 [완성된 웹사이트로 배우는 HTML&CSS 웹 디자인 책 리뷰](https://blog.naver.com/1ilsang/222771871391)였다. +제주에서 몇 가지 목표가 있었는데, 그중 하나가 [완성된 웹사이트로 배우는 HTML&CSS 웹 디자인 책 리뷰](https://blog.naver.com/1ilsang/222771871391)였다. -지금도 CSS가 어렵지만 이때는 정말 `flex`의 존재도 모를때였기 때문에 CSS를 꼭 공부해 보고자 생각했었는데 흥미롭게 읽을수 있었다. +지금도 CSS가 어렵지만 이때는 정말 `flex`의 존재도 모를 때였기 때문에 CSS를 꼭 공부해 보고자 생각했었는데 흥미롭게 읽을 수 있었다. -그 외에도 지금의 블로그의 토대를 만들고 두루뭉실했던 계획을 세분화 하는등 바쁘다며 미뤄뒀던 여러 작업들을 마칠수 있었다. +그 외에도 지금의 블로그의 토대를 만들고 두루뭉실했던 계획을 세분화하는 등 바쁘다며 미뤄뒀던 여러 작업들을 마칠 수 있었다. ## 벌써 마지막 주 @@ -74,13 +74,13 @@ ogImage: 당시에 시간이 정말 빠르게 간다고 느꼈다. 하루하루 많은 일이 있었는데 어느덧 마지막 주였던 기억이 난다. -중간에 배포가 있어서 야근을 엄청 하기도 했는데 당시 이런 생각이 들었다. 내가 개발을 조금 더 잘했으면 더 빨리 끝내고 편하게 쉬었을까? 물론 그랬겠지만 여유가 있었다면 그 여유만큼 뭔가 더 일을 만들었을것 같다. 서울에서는 스터디라던가 커피챗이라던가 다양한 활동/모임에 참여하느라 저녁의 여유를 잘 못느꼈는데 여기에서 거의 반 강제로 집에 있으면서 삶을 바라보는 방향이 많이 바뀔수 있었다. +중간에 배포가 있어서 야근을 엄청 하기도 했는데 당시 이런 생각이 들었다. 내가 개발을 조금 더 잘했으면 더 빨리 끝내고 편하게 쉬었을까? 물론 그랬겠지만, 여유가 있었다면 그 여유만큼 뭔가 더 일을 만들었을 것 같다. 서울에서는 스터디라던가 커피챗이라던가 다양한 활동/모임에 참여하느라 저녁의 여유를 잘 못 느꼈는데 여기에서 거의 반강제로 집에 있으면서 삶을 바라보는 방향이 많이 바뀔 수 있었다. 나는 왜 공부하는가? -다양한 답변이 속에서 나왔지만 결국 나는 누군가에게 도움이 되고 싶어서 공부한다는 결론이 나왔었다. 정보 공유를 한다거나 가르쳐줄때 큰 재미를 느꼈고 그 재미가 내 행동 기반이라는 것을 깨닫게 되었다. 회사에서만 보더라도 다양한 정보 혹은 개발기를 공유하고 싶어서 열심히 일을 하게 되었던것 같다. +다양한 답변이 속에서 나왔지만 결국 나는 누군가에게 도움이 되고 싶어서 공부한다는 결론이 나왔었다. 정보 공유를 한다거나 가르쳐줄 때 큰 재미를 느꼈고 그 재미가 내 행동 기반이라는 것을 깨닫게 되었다. 회사에서만 보더라도 다양한 정보 혹은 개발기를 공유하고 싶어서 열심히 일을 하게 되었던 것 같다. -이처럼 제주에서 나는 중간중간 스스로에게 질문을 많이 던지면서 천천히 생각해보는 시간을 많이 가졌다. 이것이 제주에서 느꼈던 가장 좋았던 점이었다. 맨날 퇴근후 다음 작업을 하느라 스스로에게 질문을 하지 못했는데 이번 기회에 삶의 방향을 한번 돌아보게 되었다. +이처럼 제주에서 나는 중간중간 스스로에게 질문을 많이 던지면서 천천히 생각해 보는 시간을 많이 가졌다. 이것이 제주에서 느꼈던 가장 좋았던 점이었다. 맨날 퇴근 후 다음 작업을 하느라 스스로에게 질문을 하지 못했는데 이번 기회에 삶의 방향을 한번 돌아보게 되었다. ![pony](https://github.com/1ilsang/dev/assets/23524849/da21b5d7-dc08-48d1-915c-f7738f7341cd) @@ -91,8 +91,8 @@ ogImage: 워케이션 기간동안 많은 것을 느꼈다. -새로운 환경에서 작업하면서 주위를 환기하는 과정은 상당히 즐거웠다. 무엇보다 나 자신과 스스로 마주할수 있었기에 조금 더 자신을 알게 되었다. 또한 나는 "서울에서의 바쁜 일상을 즐겼다"는 결론을 가지게 되었다. 제주 생활도 좋았지만 "서울에 올라가면 꼭 ~ 해야지"라고 서울에서의 일정이 마구 생기는 모습을 보면서 나에게 워케이션은 한번씩의 환기 이벤트라고 생각하게 되었다. 워케이션을 통해 평범했던 일상을 더욱 좋아하게 되었고 긍정적으로 삶을 바라볼수 있게 되었다. +새로운 환경에서 작업하면서 주위를 환기하는 과정은 상당히 즐거웠다. 무엇보다 나 자신과 스스로 마주할 수 있었기에 조금 더 자신을 알게 되었다. 또한 나는 "서울에서의 바쁜 일상을 즐겼다"는 결론을 가지게 되었다. 제주 생활도 좋았지만 "서울에 올라가면 꼭 ~ 해야지"라고 서울에서의 일정이 마구 생기는 모습을 보면서 나에게 워케이션은 한번씩의 환기 이벤트라고 생각하게 되었다. 워케이션을 통해 평범했던 일상을 더욱 좋아하게 되었고 긍정적으로 삶을 바라볼 수 있게 되었다. -이제 다시 평범한 일상으로 돌아가게 되겠지만 새로운 환경이 필요하다고 생각하면 주저없이 워케이션을 선택할것 같다. +이제 다시 평범한 일상으로 돌아가게 되겠지만 새로운 환경이 필요하다고 생각하면 주저 없이 워케이션을 선택할 것 같다. 좋은 경험이었다. diff --git a/apps/blog/_posts/activity/junction2023.md b/apps/blog/_posts/activity/junction2023.md index c0cbf5dc..4ef414b3 100644 --- a/apps/blog/_posts/activity/junction2023.md +++ b/apps/blog/_posts/activity/junction2023.md @@ -10,17 +10,17 @@ ogImage: cover -작년 2022 정션에 참여했던 친구들의 피드백이 상당히 좋았기 때문에 올해는 꼭 참여해보고 싶었던 해커톤이다. +작년 2022 정션에 참여했던 친구들의 피드백이 상당히 좋았기 때문에 올해는 꼭 참여해 보고 싶었던 해커톤이다. -모집 포스터가 올라오자마자 일정 확인후 바로 휴가 썻다ㅋ. 가보자고! +모집 포스터가 올라오자마자 일정 확인 후 바로 휴가 썻다ㅋ. 가보자고! ## 지원 과정 -나는 사전에 팀을 구성해서 지원했는데 개인으로도 지원할수 있다. +나는 사전에 팀을 구성해서 지원했는데 개인으로도 지원할 수 있다. 팀으로 지원할 경우 디자이너, 개발자, 기획자가 각각 최소 한명 이상 5인으로 구성되어야 한다. -선발 과정은 서류전형 한번으로 이루어져 있다. +선발 과정은 서류전형 한 번으로 이루어져 있다. 간단한 자소서와 티셔츠 사이즈 등의 설문을 완료하면 지원이 끝난다. @@ -34,45 +34,45 @@ ogImage: 작년에는 숙소 제공도 있었는데 이번엔 없었다. 파트너사도 작년과는 많이 달라져서 조금 아쉬웠다. -그래도 해커톤 자체가 거의 3년만에 참여하는거라 상당히 들뜬 마음으로 부산에 갈수 있었다. +그래도 해커톤 자체가 거의 3년 만에 참여하는 거라 상당히 들뜬 마음으로 부산에 갈 수 있었다. -해커톤은 금~일 2박3일간 진행되었고 접수는 오후 6시부터였다. 접수전에 스폰서와의 사전 미팅 시간도 있는데 간단한 네트워킹 자리다. +해커톤은 금~일 2박 3일간 진행되었고 접수는 오후 6시부터였다. 접수 전에 스폰서와의 사전 미팅 시간도 있는데 간단한 네트워킹 자리다. 공식 언어가 영어이기 때문에 겁을 많이 먹었는데 대부분이 한국인이라 큰 어려움은 없었다. -## 첫째날: 아이데이션 +## 첫날: 아이데이션 ![start](https://github.com/1ilsang/dev/assets/23524849/8a9fa7e1-e5af-4523-b45c-588ab03f0a38) -첫째날에는 트랙 공개 및 첫 번재 미션이 주어졌다. +첫날에는 트랙 공개 및 첫 번쨰 미션이 주어졌다. -트랙은 아래의 5가지였는데 잘 기억이 안나서 핵심 주제는 다를수 있다. 뉘앙스만 봐주시길 +트랙은 아래의 5가지였는데 잘 기억이 안 나서 핵심 주제는 다를 수 있다. 뉘앙스만 봐주시길 1. 공공/빅데이터를 활용한 사회문제 해결 2. 로봇이 만드는 음식의 인식 개선 3. 전자 라벨 솔루션 4. 관광 이동 수단 개선? 관광의 재미 솔루션 -5. 배달음식 생태계? 구조 개선 +5. 배달 음식 생태계? 구조 개선 -미션은 트랙을 선정하고 어떤 것을 개발 할지 기획해 제출하면 됐다. +미션은 트랙을 선정하고 어떤 것을 개발할지 기획해서 제출하면 됐다. -우리는 3번 전자 라벨을 선택했고 상품에만 사용되는 전자라벨을 사원증에도 사용할수 있도록하여 시장을 넓히는 것을 목표로 기획했다. +우리는 3번 전자 라벨을 선택했고 상품에만 사용되는 전자 라벨을 사원증에도 사용할 수 있도록 하여 시장을 넓히는 것을 목표로 기획했다. ![event](https://github.com/1ilsang/dev/assets/23524849/c2e87507-3ec1-4fdf-99e0-5c55a2dd2153) -해커톤의 또다른 재미는 사이드부스인데 정션은 부스 컨셉들이 재밌었다. 빙고 채우는 재미가 있었음. +해커톤의 또 다른 재미는 사이드부스인데 정션은 부스 컨셉들이 재밌었다. 빙고 채우는 재미가 있었음. -구석 한켠에 빈백을 쭉 설치해놔서 피곤할때 리차지하고 올수 있었다. +구석 한켠에 빈백을 쭉 설치해 놓아서 피곤할 때 리차지하고 올 수 있었다. 다들 여기서 떨면서 잠들었는데 매우 슬픔이었다. -## 둘째날: 개발 +## 둘째 날: 개발 ![web](https://github.com/1ilsang/dev/assets/23524849/593eddcf-6435-4504-814c-290b1efbe95b) -우리는 전자 라벨을 사원증으로 확장하는 것을 목표로 기획을 잡았기 때문에 전자 라벨에서 회사의 다양한 정보를 얻을수 있도록 하고자 하였다. +우리는 전자 라벨을 사원증으로 확장하는 것을 목표로 기획을 잡았기 때문에 전자 라벨에서 회사의 다양한 정보를 얻을 수 있도록 하고자 하였다. -따라서 전자 라벨과 연동된 CMS 페이지를 개발하고 페이지에서 라벨의 색, 이미지, 문구 등을 수정할수 있게 하고 회의 스케줄을 받을수 있도록 하였다. +따라서 전자 라벨과 연동된 CMS 페이지를 개발하고 페이지에서 라벨의 색, 이미지, 문구 등을 수정할 수 있게 하고 회의 스케줄을 받을 수 있도록 하였다. > @@ -84,11 +84,11 @@ ogImage: 밤에는 정션에서 제공해준 센텀 스파권으로 찜질방에 갔는데 진짜 너무 좋아서 그대로 쭉 있고 싶었다. -## 셋째날: 발표 +## 셋째 날: 발표 ![production](https://github.com/1ilsang/dev/assets/23524849/72613a5d-883b-4438-836c-c1d65faf644f) -위의 CMS 페이지에서 문구나 이미지 등을 설정해 저장하면 전자 라벨에 업데이트가 되게 개발했다. 찌그러지지않고 잘 나와서 참 다행이었다. +위의 CMS 페이지에서 문구나 이미지 등을 설정해 저장하면 전자 라벨에 업데이트가 되게 개발했다. 찌그러지지 않고 잘 나와서 참 다행이었다. 역시 갓자이너 @@ -96,16 +96,16 @@ ogImage: ![presentation](https://github.com/1ilsang/dev/assets/23524849/2041f4cb-4c1b-43ec-bbc0-8f1bccc28e74) -해당 주제의 스폰서 분들 앞에서 구현된걸 기준으로 시현하는데 영어로 말해야해서 진짜 지옥이었다. 가장 힘든 순간이었다(-\_-). +해당 주제의 스폰서분들 앞에서 구현된 걸 기준으로 시현하는데 영어로 말해야 해서 진짜 지옥이었다. 가장 힘든 순간이었다(-\_-). -발표 이후 여유 시간동안 옆팀 외국인들이랑 친해졌는데 이부분이 좀 인상적이었다. 카이스트 재학중인 외국인 5명이었는데 엄청 긱한 느낌이었다. 대화에 왜?라고 의문을 많이 가지는데 나도 다시 한번 생각해볼수 있어서 흥미롭게 대화할 수 있었다. +발표 이후 여유 시간 동안 옆 팀 외국인들이랑 친해졌는데 이 부분이 좀 인상적이었다. 카이스트 재학 중인 외국인 5명이었는데 엄청 긱한 느낌이었다. 대화에 왜?라고 의문을 많이 가지는데 나도 다시 한번 생각해 볼 수 있어서 흥미롭게 대화할 수 있었다. ## 마무리 -오랜만에 밤새면서 빠르게 작업하니까 재밌었다. 긴 재택근무간에 떨어진 열정을 다시 채운 느낌이었다. +오랜만에 밤새면서 빠르게 작업하니까 재밌었다. 긴 재택근무 간에 떨어진 열정을 다시 채운 느낌이었다. 기회가 된다면 계속 꾸준히 해커톤에 참여하고 싶다. -아 참 침낭이랑 후드 챙겨갔는데 이거 없었으면 진짜 고통스러울뻔 했다. 진짜 에어컨이 계속 나오기 때문에 너무 추웠다. +아참 침낭이랑 후드 챙겨갔는데 이거 없었으면 진짜 고통스러울 뻔했다. 진짜 에어컨이 계속 나오기 때문에 너무 추웠다. -좋은 경험이었다. 그럼 이만! +좋은 경험이었다. 그럼, 이만! diff --git a/apps/blog/_posts/algorithm/goorm/195687.md b/apps/blog/_posts/algorithm/goorm/195687.md index b08f3746..ae0747a4 100644 --- a/apps/blog/_posts/algorithm/goorm/195687.md +++ b/apps/blog/_posts/algorithm/goorm/195687.md @@ -21,12 +21,12 @@ N을 순회하면서 각각 2진수로 변환하고 그 값을 저장해 나간 따라서 우리는 메모를 사용해 이전 값을 활용해 다음 값을 구해 나갈 것이다. 이 방법을 사용하면 `O(N)`으로 처리가 가능하다. ```js -// 숫자별 1의 개수를 정리해본다. +// 숫자별 1의 개수를 정리해 본다. // Index: [0,1,2,3,4,5,6,7,8,9]; // Count: [0,1,1,2,1,2,2,3,1,2]; ``` -9까지의 수를 2진수의 개수로 표현하면 위의 표와 같아진다. 여기서 우리는 두가지 패턴을 찾을수 있다. +9까지의 수를 2진수의 개수로 표현하면 위의 표와 같아진다. 여기서 우리는 두 가지 패턴을 찾을 수 있다. 1. 2의 지수승(2^n)은 무조건 1이다(1, 2, 4, 8은 2진수에서 무조건 1이다). 2. **현재 값에서 2를 나눈 값의 1의 개수와 현재 값을 2로 나눈 나머지를 더하면 현재 값의 1의 개수가 된다.** @@ -41,15 +41,15 @@ _7을 기준으로 해보자._ - 7을 2로 나누면 3이 된다. 위의 표에서 3의 1 개수는 2이다. - 7을 2로 나눈 나머지는 1이다. -- 2 + 1 = 3이므로 7은 3이된다. +- 2 + 1 = 3이므로 7은 3이 된다. -이전 값을 알면 현재 값을 손쉽게 구할수 있게 되었다. +이전 값을 알면 현재 값을 손쉽게 구할 수 있게 되었다. -그러므로 2부터 포문을 돌리면서 메모 배열을 만들고 최대값을 찾아나가면 된다. +그러므로 2부터 포문을 돌리면서 메모 배열을 만들고 최댓값을 찾아나가면 된다. ## 정리 -1. 메모이제이션을 활용해 들어올수 있는 숫자의 최대 값 `2^20`(1048576)까지 이진수의 개수를 구한다. +1. 메모이제이션을 활용해 들어올 수 있는 숫자의 최댓값 `2^20`(1048576)까지 이진수의 개수를 구한다. 2. N을 메모이제이션 배열로 정렬한다. 3. K 번 인덱스의 값을 출력한다. diff --git a/apps/blog/_posts/algorithm/goorm/195692.md b/apps/blog/_posts/algorithm/goorm/195692.md index 2fc2ba6d..bf2572b7 100644 --- a/apps/blog/_posts/algorithm/goorm/195692.md +++ b/apps/blog/_posts/algorithm/goorm/195692.md @@ -1,6 +1,6 @@ --- title: '[구름톤 챌린지] GameJam' -description: '시뮬레이션 단계화 하기' +description: '시뮬레이션 단계화하기' tags: ['algorithm', 'goorm', 'simulation', 'brute-force'] coverImage: 'https://github.com/1ilsang/dev/assets/23524849/904bc3d3-7662-4a68-add4-e4fb6349ff08' date: '2023-08-27T14:35:41.009Z' @@ -14,13 +14,13 @@ ogImage: 끔찍한 시뮬레이션 문제이다. -별다른 특이사항 없이 문제에서 제시한대로 구현하면 된다. +별다른 특이 사항 없이 문제에서 제시한 대로 구현하면 된다. ## 접근법 -구름과 플레이어 두 명이 각각 게임을 진행한다. 따라서 우리는 동일한 게임을 2번 실행해야 한다는 것을 알수있다. +구름과 플레이어 두 명이 각각 게임을 진행한다. 따라서 우리는 동일한 게임을 2번 실행해야 한다는 것을 알 수 있다. -즉 **초기화를 잘 하던가, 똑같은 코드를 두번 실행해야한다**. +즉 **초기화를 잘하던가, 똑같은 코드를 두 번 실행해야 한다**. 게임 보드 칸에는 이동 횟수와 방향이 적혀있으며 게이머가 놓은 위치에서부터 칸의 명령을 따라 쭉 실행하면 된다. @@ -34,7 +34,7 @@ ogImage: 1. 유저의 위치를 받아 점수를 반환하는 함수를 만든다(내부 변수 사용으로 초기화 용이). 2. 이동 거리만큼 이동한다. - 1. 보드 이탈시 좌표를 반대쪽 첫칸으로 재설정 해준다. + 1. 보드 이탈시 좌표를 반대쪽 첫 칸으로 재설정해 준다. 2. 이동할 때마다 메모를 한다. 3. 점수 값을 비교 출력한다. diff --git a/apps/blog/_posts/algorithm/goorm/195693.md b/apps/blog/_posts/algorithm/goorm/195693.md index 6339c54e..efa594e8 100644 --- a/apps/blog/_posts/algorithm/goorm/195693.md +++ b/apps/blog/_posts/algorithm/goorm/195693.md @@ -12,22 +12,22 @@ ogImage: > [문제 링크](https://level.goorm.io/exam/195693/%ED%86%B5%EC%A6%9D-2/quiz/1) -아이템 A, B를 최소한으로 사용하여 통증을 0으로 맞출수 있는지 확인하는 문제이다. 불가능하다면 -1을 출력한다. +아이템 A, B를 최소한으로 사용하여 통증을 0으로 맞출 수 있는지 확인하는 문제이다. 불가능하다면 -1을 출력한다. ## 접근법 -### 1. 완전탐색 +### 1. 완전 탐색 -A와 B의 합이 N이 될때까지 전체 조합을 탐색한다. +A와 B의 합이 N이 될 때까지 전체 조합을 탐색한다. -A가 0...I개 일때 B가 0...J개로 가능한지 확인할수 있다. 이때 개수로 확인하게 되면 A가 I번만큼 순회할때마다 B가 J번만큼 순회하게 되므로 **시간초과**가 발생한다. +A가 0...I개 일때 B가 0...J개로 가능한지 확인할 수 있다. 이때 개수로 확인하게 되면 A가 I번 만큼 순회할 때마다 B가 J번 만큼 순회하게 되므로 **시간초과**가 발생한다. A가 0...I개 일때 B는 0부터 하나씩 올려가며 찾지 않고 N-A가 B로 나누어지는지를 확인하면 `O(N)`만에 해결이 가능해진다. ```js let answer = Infinity; for (let aCost = 0; aCost <= n; aCost += a) { - // N에 A를 뺀 값이 B로 나누어 떨어지지 않는다면 패스한다. + // N에 A를 뺀 값이 B로 나누어떨어지지 않는다면 패스한다. if ((n - aCost) % b !== 0) continue; const aCount = Math.floor(aCost / a); const bCount = Math.floor((n - aCost) / b); @@ -46,9 +46,9 @@ console.log(answer); ### 2. DP -개수가 기준이 아닌 통증의 값 N을 기준으로 생각해보자. +개수가 기준이 아닌 통증의 값 N을 기준으로 생각해 보자. -통증 N은 `[N - A] + 1` 혹은 `[N - B] + 1`이 될수 있다. 현재 N값이 되기 위해선 A혹은 B를 더했으므로 역산으로 A 혹은 B를 뺀 개수에 현재 카운트 1을 추가하면 된다. +통증 N은 `[N - A] + 1` 혹은 `[N - B] + 1`이 될 수 있다. 현재 N값이 되기 위해선 A혹은 B를 더했으므로 역산으로 A 혹은 B를 뺀 개수에 현재 카운트 1을 추가하면 된다. 따라서 통증 0부터 N까지 순회하며 dp 테이블을 채워나가면 `O(N)`으로 처리가 가능해진다. diff --git a/apps/blog/_posts/algorithm/goorm/195696.md b/apps/blog/_posts/algorithm/goorm/195696.md index af819623..4fd5ec18 100644 --- a/apps/blog/_posts/algorithm/goorm/195696.md +++ b/apps/blog/_posts/algorithm/goorm/195696.md @@ -12,7 +12,7 @@ ogImage: > [문제 링크](https://level.goorm.io/exam/195696/%EC%9E%91%EC%9D%80-%EB%85%B8%EB%93%9C/quiz/1) -양방향 그래프에서 시작 점으로부터 더이상 갈수 없을때까지 이동한 뒤 출력하면 되는 문제다. +양방향 그래프에서 시작 점으로부터 더 이상 갈 수 없을 때까지 이동한 뒤 출력하면 되는 문제다. ## 접근법 @@ -24,7 +24,7 @@ console.log(map); // { i: [j, ...], j: [i, ...] } ``` -양방향 그래프이기 때문에 그래프를 만들때 좌우 둘다 추가해 준다. +양방향 그래프이기 때문에 그래프를 만들 때 좌우 둘 다 추가해 준다. 각 정점에서 방문하지 않았던 번호가 낮은 노드로 이동하기 때문에 각 **정점의 값은 정렬**되어 있어야 한다. @@ -51,7 +51,7 @@ console.log(map); // [200, 100, 30] ``` -따라서 비교함수 콜백을 통해 정렬의 우선순위를 먼저 지정해야한다. +따라서 비교 함수 콜백을 통해 정렬의 우선순위를 먼저 지정해야 한다. - 콜백 함수의 리턴값이 0보다 작은 경우(음수) a를 b보다 낮은 인덱스로 정렬한다(a가 먼저 오므로 오름차순이 됨). - 콜백 함수의 리턴값이 0인 경우 a와 b를 서로 변경하지 않고 다른 요소에 대해 정렬한다(현재 두 값으로는 비교 X). @@ -62,9 +62,9 @@ console.log(map); ## 정리 1. 양방향 그래프를 그린다. -2. 메모 배열을 활용해 방문시 체크해준다. +2. 메모 배열을 활용해 방문 시 체크해 준다. 3. 마지막 노드와 메모 배열의 길이를 출력한다. -4. `sort` 함수는 문자([ASCII](https://wikipedia.org/wiki/ASCII))를 기준으로 정렬하기 때문에 유의해야한다. +4. `sort` 함수는 문자([ASCII](https://wikipedia.org/wiki/ASCII))를 기준으로 정렬하기 때문에 유의해야 한다. ## 최종 코드 @@ -101,7 +101,7 @@ rl.on('close', () => { const next = map[last] .filter((node) => !memo.includes(node)) // 방문한 적이 없는 값들만 필터링한다. .sort((a, b) => a - b)[0]; // 방문하지 않은 정점들을 오름차순 정렬해 첫 번째 값을 꺼낸다. - if (!next) break; // next가 없다면 해당 노드에서 갈수 있는 모든 정점을 방문한 상태이므로 종료한다. + if (!next) break; // next가 없다면 해당 노드에서 갈 수 있는 모든 정점을 방문한 상태이므로 종료한다. last = next; // 마지막 노드를 갱신한다. memo.push(last); // 메모에 마지막 노드를 추가한다. } diff --git a/apps/blog/_posts/algorithm/goorm/195698.md b/apps/blog/_posts/algorithm/goorm/195698.md index 3c8840c5..1a8d91c6 100644 --- a/apps/blog/_posts/algorithm/goorm/195698.md +++ b/apps/blog/_posts/algorithm/goorm/195698.md @@ -12,29 +12,29 @@ ogImage: > [문제 링크](https://level.goorm.io/exam/195698/%EC%97%B0%ED%95%A9/quiz/1) -노드 사이에 사이클이 발생되면 "연합"이 된다. 각 사이클의 노드가 인접하면 인접한 사이클 끼리도 연합이 된다. 이 연합 집합의 개수를 출력하는 문제이다. +노드 사이에 사이클이 발생하면 "연합"이 된다. 각 사이클의 노드가 인접하면 인접한 사이클끼리도 연합이 된다. 이 연합 집합의 개수를 출력하는 문제이다. 이 문제는 그래프에서 사이클을 찾고 집합의 구성을 분류하는 기초적인 문제라 개념 잡기에 좋은 문제인듯 하다. ## 접근법 -사이클을 찾고 해당 사이클이 집합을 이루는지 찾아야 한다. 이 문제는 BFS 또는 Union-Find로 풀릴수 있다. +사이클을 찾고 해당 사이클이 집합을 이루는지 찾아야 한다. 이 문제는 BFS 또는 Union-Find로 풀릴 수 있다. 먼저 각 노드가 사이클을 가지고 있는지는 어떻게 확인할까? 무지성 `includes`를 해도 되지만 `O(1)`로 찾지 않으면 시간초과가 발생한다. ```js // 그래프의 방향성을 저장하기 위한 2차원 배열을 생성한다. const check = Array.from(Array(n + 1), () => Array(n + 1).fill(0)); -// cur 노드에서 next 노드로 방향성을 가지고 있다면 체크해준다. +// cur 노드에서 next 노드로 방향성을 가지고 있다면 체크해 준다. check[cur][next] = 1; -// 현재 노드와 다음 노드의 방향성이 둘다 1이라면 사이클이다. +// 현재 노드와 다음 노드의 방향성이 둘 다 1이라면 사이클이다. check[cur][next] === 1 && check[next][cur] === 1; ``` -문제가 친절하게도 각 정점 사이의 직접 사이클만 요구하므로 사이클을 더 쉽게 찾을수 있다. +문제가 친절하게도 각 정점 사이의 직접 사이클만 요구하므로 사이클을 더 쉽게 찾을 수 있다. -각 노드의 사이클 여부를 확인할수 있게 되었으니 집합을 구성해 주어야 한다. +각 노드의 사이클 여부를 확인할 수 있게 되었으니 집합을 구성해 주어야 한다. ### BFS로 집합 구성하기 @@ -52,9 +52,9 @@ const bfs = (i) => { if (!map[cur]) break; // 현재 노드에서 이어진 노드가 없다면 루프를 탈출한다. const nextList = map[cur]; for (const next of nextList) { - // 다음 노드가 현재 노드로 사이클이 없거나 방문한적이 있으면 패스한다. + // 다음 노드가 현재 노드로 사이클이 없거나 방문한 적이 있으면 패스한다. if (!check[next][cur] || memo[next]) continue; - // 다음 노드와 사이클이면서 방문한적이 없기 때문에 큐에 넣어준다. + // 다음 노드와 사이클이면서 방문한 적이 없기 때문에 큐에 넣어준다. memo[next] = 1; q.push(next); } @@ -64,17 +64,17 @@ let answer = 0; for (let i = 1; i <= n; i++) { if (memo[i]) continue; bfs(i); - // BFS에서 탈출했다면 연합 한개가 구성된 것이므로 카운트를 추가한다. + // BFS에서 탈출했다면 연합 한 개가 구성된 것이므로 카운트를 추가한다. answer++; } console.log(answer); ``` -따라서 각 노드에서 사이클이 되는 노드를 찾고 해당 노드를 큐에 넣어줌으로써 연속된 사이클을 계속해서 찾을수 있다. +따라서 각 노드에서 사이클이 되는 노드를 찾고 해당 노드를 큐에 넣어줌으로써 연속된 사이클을 계속해서 찾을 수 있다. ### Union-Find로 집합 구성하기 -그래프의 집합을 나타내는 방법으로 Union-Find를 사용할수 있다. +그래프의 집합을 나타내는 방법으로 Union-Find를 사용할 수 있다. ```js // index 0 1 2 3 4 5 6 7 @@ -96,11 +96,11 @@ for (let cur = 1; cur <= n; cur++) { 노드를 순회하면서 Union 조건이 성립(사이클)한다면 각 노드를 합쳐준다. -이후 각 노드의 부모 노드를 find 한다. 노드의 부모가 같다면 같은 집합이라는 뜻이된다. +이후 각 노드의 부모 노드를 find 한다. 노드의 부모가 같다면 같은 집합이라는 뜻이 된다. -Union-Find에서는 memo 배열을 통한 방문여부 확인 코드가 없는 것을 알수 있다. +Union-Find에서는 memo 배열을 통한 방문 여부 확인 코드가 없는 것을 알 수 있다. -- BFS의 경우 인접한 모든 노드를 방문하면서 방문 여부로 집합을 구성하지만, Union-Find는 각 노드의 부모로 집합여부를 확인하기 때문에 사이클이 된다면 각 노드의 부모를 계속해서 갱신해줘야 한다. +- BFS의 경우 인접한 모든 노드를 방문하면서 방문 여부로 집합을 구성하지만, Union-Find는 각 노드의 부모로 집합 여부를 확인하기 때문에 사이클이 된다면 각 노드의 부모를 계속해서 갱신해 줘야 한다. ```js // 오답 @@ -117,7 +117,7 @@ console.log(answer.size); 이때 부모 배열의 값으로만 비교해 출력하면 오답이 된다. -모든 노드를 순회하면서 부모를 갱신하지 않았기 때문에 마지막에 각 노드를 다시 find해서 부모를 갱신해야 올바른 값이 된다. +모든 노드를 순회하면서 부모를 갱신하지 않았기 때문에 마지막에 각 노드를 다시 find 해서 부모를 갱신해야 올바른 값이 된다. ## 정리 diff --git a/apps/blog/_posts/algorithm/leetcode/easy/2727.md b/apps/blog/_posts/algorithm/leetcode/easy/2727.md index b41cbe20..568a78f5 100644 --- a/apps/blog/_posts/algorithm/leetcode/easy/2727.md +++ b/apps/blog/_posts/algorithm/leetcode/easy/2727.md @@ -26,7 +26,7 @@ const isEmpty = (obj) => { 배열 혹은 객체의 키가 있는지 확인하면 되므로 Object.keys의 길이가 0인지 확인하면 된다. -만약 `keys`로 추출후 비교하는 것이 싫다면 아래와 같은 방법도 있다. +만약 `keys`로 추출 후 비교하는 것이 싫다면 아래와 같은 방법도 있다. ```js const isEmpty = (obj) => { @@ -37,11 +37,11 @@ const isEmpty = (obj) => { }; ``` -배열또한 객체이므로 `for...in`을 통해 속성 키값을 순회할 수 있는지 확인하면 된다. +배열 또한 객체이므로 `for...in`을 통해 속성 키값을 순회할 수 있는지 확인하면 된다. `keys`로 모든 키값을 가져와 비교하는 것보다 순회와 동시에 객체가 비어있는지 판단이 가능하므로 훨씬 빠르다. -**참고로 이 문제는 "상속된" 프로퍼티를 비교 해야 하는지에 대한 명시가 없어 모호한 부분이 있다.** +**참고로 이 문제는 "상속된" 프로퍼티를 비교해야 하는지에 대한 명시가 없어 모호한 부분이 있다.** 만약 상속된 프로퍼티까지 비교한다면 `keys`와 `for-in`의 정답 여부가 달라졌을 것이다. 이 부분은 아래에서 다루겠다. @@ -83,7 +83,7 @@ const m = new Map([ ]); console.log(m); // Map(2) {'a' => 1, 'b' => 2} for (let i in m) { - console.log(i); // 순회되지 않음. undefined + console.log(i); // 순회 되지 않음. undefined } for (let i of m) { console.log(i); // ['a', 1], ['b', 2] @@ -91,8 +91,8 @@ for (let i of m) { console.log(Object.keys(m)); // [] ``` -`for...in` 루프는 객체의 모든 열거가능한 속성에 대해 반복하며 문자열 키 값을 반환한다. 추가로 인덱스의 순서를 보장하지 않는다. +`for...in` 루프는 객체의 모든 열거 가능한 속성에 대해 반복하며 문자열 키 값을 반환한다. 추가로 인덱스의 순서를 보장하지 않는다. `for...of` 구문은 컬렉션 전용이다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복하며 컬렉션을 반환한다. -`keys`는 해당 키를 가져오지만 상속된 값은 가져오지 않는다. +`keys`는 해당 키를 가져오지만, 상속된 값은 가져오지 않는다. diff --git a/apps/blog/_posts/algorithm/leetcode/medium/238.md b/apps/blog/_posts/algorithm/leetcode/medium/238.md index f172b8e5..473eb87b 100644 --- a/apps/blog/_posts/algorithm/leetcode/medium/238.md +++ b/apps/blog/_posts/algorithm/leetcode/medium/238.md @@ -12,9 +12,9 @@ ogImage: > [문제 링크](https://leetcode.com/problems/product-of-array-except-self/) -`nums` 배열 원소의 모두 곱한 값에서 해당 원소를 나눈 값을 출력하는 문제이다. 문제에서는 나눗셈을 하면 안된다고 명시하고 있으므로 나눗셈을 하지 않고 풀어야 하는게 포인트이다. +`nums` 배열 원소의 모두 곱한 값에서 해당 원소를 나눈 값을 출력하는 문제이다. 문제에서는 나눗셈하면 안 된다고 명시하고 있으므로 나눗셈하지 않고 풀어야 하는 게 포인트이다. -1. 나눗셈을 하지 않아야함. +1. 나눗셈을 하지 않아야 함. 2. T=O(n), S=O(1)으로 풀어본다. 따라서 위의 두 가지를 목표로 이 문제를 해결해 보려고 한다. @@ -29,11 +29,11 @@ ogImage: > e.g. 원소 3을 기준으로 한다면 `1*2*3*4 / 3` === `1*2*4`이다. -따라서 우리는 **자신을 제외한 곱들의 왼쪽과 오른쪽을 곱해주면 정답이 된다**는 것을 알수있다. +따라서 우리는 **자신을 제외한 곱들의 왼쪽과 오른쪽을 곱해주면 정답이 된다**는 것을 알 수 있다. > e.g. 원소 3을 기준으로 3의 좌/우의 곱은 `1*2` \* `4` = `8`이다. -그러므로 왼쪽의 곱들과 오른쪽의 곱들을 기억해두고 각 원소별 값을 출력해주면 해결할 수 있다. +그러므로 왼쪽의 곱들과 오른쪽의 곱들을 기억해 두고 각 원소별 값을 출력해 주면 해결할 수 있다. 해당 원소까지의 왼쪽, 오른쪽 곱셈 값은 누적 배열을 활용하면 된다. @@ -42,7 +42,7 @@ ogImage: ```js const nums = [1, 2, 3, 4]; -// @NOTE: 요소의 왼쪽 까지의 곱을 기준으로 하기 때문에 첫 번째는 1으로하고 마지막 원소까지 곱할 필요는 없다. +// @NOTE: 요소의 왼쪽까지의 곱을 기준으로 하기 때문에 첫 번째는 1으로하고 마지막 원소까지 곱할 필요는 없다. const leftArr = [ 1, 1 * nums[0], @@ -50,7 +50,7 @@ const leftArr = [ 1 * nums[0] * nums[1] * nums[2], ]; // [1, 1, 2, 6]; -// @NOTE: 요소의 오른쪽 까지의 곱을 기준으로 하기 때문에 직관적으로 역순으로 한다. +// @NOTE: 요소의 오른쪽까지의 곱을 기준으로 하기 때문에 직관적으로 역순으로 한다. const rightArr = [ 1 * nums[2] * nums[1] * nums[0], 1 * nums[2] * nums[1], @@ -72,8 +72,8 @@ const rightArr = [ // Left Arr const l = nums.reduce( (acc, cur) => { - const last = acc[acc.length - 1]; // 누적 값 - acc.push(cur * last); // 이전의 누적 값 * 현재 원소를 통해 누적 값을 채운다. + const last = acc[acc.length - 1]; // 누적값 + acc.push(cur * last); // 이전의 누적값 * 현재 원소를 통해 누적값을 채운다. return acc; }, [1], @@ -97,13 +97,13 @@ const answers = nums.map((_, index) => l[index] * r[index]); return answers; ``` -위의 구현으로 문제를 해결할수 있지만 공간 복잡도가 `O(n)`이기 때문에 더 최적화가 가능하다. +위의 구현으로 문제를 해결할 수 있지만 공간 복잡도가 `O(n)`이기 때문에 더 최적화가 가능하다. ## Implementation(T=O(n), S=O(1)) **좌우 배열은 결국 마지막에 곱하기 위해서만 존재**한다. -따라서 굳이 저장하지 않고 바로바로 곱해나가면 공간복잡도를 `O(1)`으로 줄일수 있다. +따라서 굳이 저장하지 않고 바로바로 곱해나가면 공간복잡도를 `O(1)`으로 줄일 수 있다. ```js const answers = []; @@ -117,7 +117,7 @@ for (let i = 0; i < nums.length; i++) { } last = 1; -// @NOTE: Step2. Answers가 이미 좌측 곱배열이므로 우측 값을 그대로 곱해주면 정답이 된다. +// @NOTE: Step2. Answers가 이미 좌측 곱 배열이므로 우측 값을 그대로 곱해주면 정답이 된다. for (let i = nums.length - 1; i >= 0; i--) { const cur = nums[i]; answers[i] *= last; @@ -126,7 +126,7 @@ for (let i = nums.length - 1; i >= 0; i--) { return answers; ``` -> NOTE: 어쨋든 answers 배열을 사용하므로 정확히는 O(n)이지만 +> NOTE: 어쨌든 answers 배열을 사용하므로 정확히는 O(n)이지만 > > LeetCode에서 return 배열(answers)이 아닌 추가 배열을 사용하지 않는다는 것으로 O(1)으로 취급하고 있다. diff --git a/apps/blog/_posts/js/eslint-plugin.md b/apps/blog/_posts/js/eslint-plugin.md index 3b83a813..881edcdc 100644 --- a/apps/blog/_posts/js/eslint-plugin.md +++ b/apps/blog/_posts/js/eslint-plugin.md @@ -10,11 +10,11 @@ ogImage: cover -ESLint 플러그인 구조를 간단하게 분석하고 커스텀 플러그인을 만들어 배포해보자. +ESLint 플러그인 구조를 간단하게 분석하고 커스텀 플러그인을 만들어 배포해 보자. ## TL;DR! -1. ESLint에서 제공해주는 generator를 사용해 프로젝트를 만든다. +1. ESLint에서 제공해 주는 generator를 사용해 프로젝트를 만든다. 2. 규칙을 만든다. 3. 배포한다. @@ -29,11 +29,11 @@ npm install -g yo npm install -g generator-eslint ``` -ESLint는 플러그인 구조의 통일을 위해 제너레이터를 제공해주고 있다. +ESLint는 플러그인 구조의 통일을 위해 제너레이터를 제공해 주고 있다. -`yo`는 [yeoman](https://yeoman.io)의 줄임으로, 스케폴딩 지원 도구다. 프로젝트에 필요한 디렉토리 및 파일을 커맨드라인으로 생성해준다. +`yo`는 [yeoman](https://yeoman.io)의 줄임으로, 스케폴딩 지원 도구다. 프로젝트에 필요한 디렉토리 및 파일을 커맨드라인으로 생성해 준다. -[generator-eslint](https://www.npmjs.com/package/generator-eslint)는 yeoman을 활용해 프로젝트를 구조화 할때 ESLint를 기준으로 설치되도록 래핑된 패키지이다. ESLint에서 관리/지원하고 있으므로 직접 yo로 구조를 설정하지 않아도 어려움 없이 one-line으로 ESLint 구조를 생성할수 있게 된다. +[generator-eslint](https://www.npmjs.com/package/generator-eslint)는 yeoman을 활용해 프로젝트를 구조화할 때 ESLint를 기준으로 설치되도록 래핑 된 패키지이다. ESLint에서 관리/지원하고 있으므로 직접 yo로 구조를 설정하지 않아도 어려움 없이 one-line으로 ESLint 구조를 생성할 수 있게 된다. 매우 간편하므로 설치한다. @@ -47,7 +47,7 @@ yo eslint:plugin ? What is your name? GITHUB_NAME # package.json의 author에 추가된다. ? What is the plugin ID? NAME # 해당 Plugin의 실제 이름(배포 명)이 되므로 적절하게 작성한다. ? Type a short description of this plugin: PLUGIN_DESCRIPTION # package.json의 description에 나타난다. -? Does this plugin contain custom ESLint rules? Yes # 커스텀 룰을 추가할것이므로 Yes. +? Does this plugin contain custom ESLint rules? Yes # 커스텀 룰을 추가할 것이므로 Yes. ? Does this plugin contain one or more processors? No # 우리는 eslint 기본 프로세서를 사용할 것이므로 No를 설정한다. # 초기 세팅이 되었으므로 dependencies를 설치한다. @@ -58,17 +58,17 @@ npm install 초기 구조 설정이 완료되면 위와 같이 폴더가 생성된다. -ESLint의 다양한 규칙은 `lib/rules`에 추가되어야 한다. 우리는 커스텀 규칙을 만들 것이므로 해당 디렉토리에 추가해 나가야한다. +ESLint의 다양한 규칙은 `lib/rules`에 추가되어야 한다. 우리는 커스텀 규칙을 만들 것이므로 해당 디렉토리에 추가해 나가야 한다. ### 플러그인 Rule 구조 만들기 -친절하게도 ESLint에서 커스텀 룰의 구조도 패키징 해주었기 때문에 `yo`를 통해 한번더 rule 구조를 만들어준다. +친절하게도 ESLint에서 커스텀 룰의 구조도 패키징 해주었기 때문에 `yo`를 통해 한 번 더 rule 구조를 만들어 준다. ```js var myData = getData123(); // 함수에 숫자가 있으므로 우리의 ESLint 플러그인에서 에러를 발생시킬 것이다! ``` -우리는 "**함수에 숫자가 있으면 안된다**"는 룰을 만들어보자. +우리는 "**함수에 숫자가 있으면 안 된다**"는 룰을 만들어 보자. ```sh # generator-eslint에 설정되어 있는 rule 옵션으로 yo를 통해 구조를 만든다. @@ -87,21 +87,21 @@ No change to package.json was detected. No package manager install will be execu rule-architecture -CLI를 다 작성하면 위와 같이 rules 폴더 밑에 추가된 것을 확인할수 있다. 이제 우리는 해당 파일에서 규칙을 추가하면 된다. +CLI를 다 작성하면 위와 같이 rules 폴더 밑에 추가된 것을 확인할 수 있다. 이제 우리는 해당 파일에서 규칙을 추가하면 된다. ## ESLint의 소스코드 파싱과 AST 규칙 추가에 앞서 ESLint의 동작 방식을 가볍게 살펴보자. -기본적으로 ESLint는 [Espree 파서](https://github.com/eslint/espree)를 사용해 소스코드를 정적 분석한뒤 AST(Abstract Syntax Tree)를 생성한다. +기본적으로 ESLint는 [Espree 파서](https://github.com/eslint/espree)를 사용해 소스코드를 정적 분석한 뒤 AST(Abstract Syntax Tree)를 생성한다. 우리는 파싱된 트리에서 구문을 분석해 커스텀 규칙에 위반하는지 확인하면 된다. ![ast-tree](https://github.com/1ilsang/dev/assets/23524849/2b0673b3-e325-4e39-96f4-6c8c96ea1632) -[astexplorer](https://astexplorer.net/) 사이트를 활용하면 파싱된 AST 트리를 눈으로 쉽게 볼수있다. +[astexplorer](https://astexplorer.net/) 사이트를 활용하면 파싱된 AST 트리를 눈으로 쉽게 볼 수 있다. -우리는 함수명을 분석해야하므로 `getData123`에 집중한다. 해당 값은 `CallExpression > callee > name`에 존재한다는 것을 확인할 수 있다. +우리는 함수명을 분석해야 하므로 `getData123`에 집중한다. 해당 값은 `CallExpression > callee > name`에 존재한다는 것을 확인할 수 있다. 이제 우리의 커스텀 룰에 추가하면 된다! @@ -135,7 +135,7 @@ module.exports = { data: { wrongFunc: callee.name }, // 에러 메시지를 띄운다. wrongFunc는 현재 함수의 토큰 값이다. message: `[{{wrongFunc}}()] 함수에 숫자..?`, - // --fix 옵션으로 수정되게 할수있다. 숫자를 ''로 치환한다. + // --fix 옵션으로 수정되게 할 수 있다. 숫자를 ''로 치환한다. fix: (fixer) => fixer.replaceText(callee, callee.name.replaceAll(/[0-9]/g, '')), }); @@ -187,7 +187,7 @@ ruleTester.run('RULE_NAME', rule, { ESLint 플러그인은 `eslint-plugin` prefix가 존재하므로 이름을 지켜준다. -배포는 버전을 기준으로 진행하게 되므로 코드 수정내역이 발생해 다시 배포한다면 `version`을 업데이트 해주어야 한다. +배포는 버전을 기준으로 진행하게 되므로 코드 수정내역이 발생해 다시 배포한다면 `version`을 업데이트해 주어야 한다. ```sh npm publish @@ -197,7 +197,7 @@ npm publish ## 사용하기 -배포된 플러그인을 실제로 사용해보자. `npm i -D eslint-plugin-PLUGIN_ID`으로 설치한다. +배포된 플러그인을 실제로 사용해 보자. `npm i -D eslint-plugin-PLUGIN_ID`으로 설치한다. ```json // .eslintrc diff --git a/apps/blog/_posts/js/implicit-coercion.md b/apps/blog/_posts/js/implicit-coercion.md index d1837fa6..4e1910dc 100644 --- a/apps/blog/_posts/js/implicit-coercion.md +++ b/apps/blog/_posts/js/implicit-coercion.md @@ -44,9 +44,9 @@ undefined == null // true 자바스크립트는 6가지 원시 타입과 `Object` 라는 객체 타입, **총 7가지 타입** 이 존재한다. -기본적으로 암묵적 형 변환은 모두 "원시타입(**문자열, 숫자, 불리언**)"을 기준으로 하게 된다. 원시타입이 객체타입으로 암묵적 형 변환이 되는 케이스는 존재하지 않는다. +기본적으로 암묵적 형변환은 모두 "원시 타입(**문자열, 숫자, 불리언**)"을 기준으로 하게 된다. 원시타입이 객체타입으로 암묵적 형변환이 되는 케이스는 존재하지 않는다. -### 암묵적 형 변환은 언제 일어나나요? +### 암묵적 형변환은 언제 일어나나요? ```js // 표현식이 모두 문자열 타입이여야 하는 컨텍스트 @@ -67,8 +67,8 @@ if (1) { > [https://poiemaweb.com/js-type-coercion#2-암묵적-타입-변환](https://poiemaweb.com/js-type-coercion#2-암묵적-타입-변환) -- 산술연산자(+-\*/)의 경우 `+` 는 문자열이 우선순위가 더 높으며 나머지 연산은 숫자가 더 우선순위가 높다. -- 동치연산자(==)의 경우 피연산자간의 관계에 따라 정의가 다르다. +- 산술 연산자(+-\*/)의 경우 `+` 는 문자열이 우선순위가 더 높으며 나머지 연산은 숫자가 더 우선순위가 높다. +- 동치 연산자(==)의 경우 피연산자간의 관계에 따라 정의가 다르다. ### 동치연산자 한짤로 보기 @@ -76,7 +76,7 @@ if (1) { > 출처: [MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness) -동치연산의 관계를 보면 `Object` 타입의 경우 `ToPrimitive` 라는 값이 있다. +동치 연산의 관계를 보면 `Object` 타입의 경우 `ToPrimitive` 라는 값이 있다. 이 함수가 암묵적 형변환의 핵심이며, 이 함수를 이해하면 타입 변환의 과정을 이해할 수 있다. @@ -163,7 +163,7 @@ function OrdinaryToPrimitive (O, hint) { ```js // CASE 1. 1. 4 * [] -// +를 제외한 산술 연산의 경우 숫자타입이 최상위 우선순위이므로 암묵적 형 변환은 Number == ToPrimitive([]) 으로 될 것이다. +// +를 제외한 산술 연산의 경우 숫자타입이 최상위 우선순위이므로 암묵적 형변환은 Number == ToPrimitive([]) 으로 될 것이다. 2. 4 * Object([]) // 4 * [] // Symbol.toPrimitive 정의를 해주지 않았으므로 default hint 는 number 로 설정된다. 3. 4 * Object([]).valueOf() // 4 * [] @@ -171,7 +171,7 @@ function OrdinaryToPrimitive (O, hint) { 4. 4 * Object([]).valueOf().toString() // 4 * "" // 하지만 valueOf 는 this 반환으로 객체([])를 반환해 원시타입이 아니게 되므로 무시된다. 따라서 후순위의 toString 함수가 실행된다. 5. 4 * Number(Object([]).valueOf().toString()) // 4 * 0 -// 숫자 * 문자열 연산에서 숫자가 우선순위가 높으므로 Number 타입으로 형 변환이 된다. +// 숫자 * 문자열 연산에서 숫자가 우선순위가 높으므로 Number 타입으로 형변환이 된다. 6. 0 // 그 결과 4 * 0 이 되어 0이 최종 리턴된다. ``` @@ -261,9 +261,9 @@ alert(user + new Date()); // hint: default -> 1000 + 'Sat Apr 22 2023 17:02:00 G ### 결론 -1. 타입간 비교에서 암묵적 형변환들은 모두 원시타입으로 변환하기 위한 과정 속에서 `ToPrimitive` 추상 명령을 통해 일어난다. +1. 타입간 비교에서 암묵적 형변환들은 모두 원시 타입으로 변환하기 위한 과정 속에서 `ToPrimitive` 추상 명령을 통해 일어난다. 2. `==` 연산자와 `===` 연산자의 차이는 무엇인가? - - "타입까지 비교 여부" 라고하면 애매하다. "암묵적 형 변환을 허용하는가"의 차이가 더 명확한 워딩이다. + - "타입까지 비교 여부" 라고하면 애매하다. "암묵적 형변환을 허용하는가"의 차이가 더 명확한 워딩이다. 3. 타입스크립트와 `===` 연산자를 사용하자. ### Ref diff --git a/apps/blog/_posts/js/renovate.md b/apps/blog/_posts/js/renovate.md index 2f5f8c50..850d4494 100644 --- a/apps/blog/_posts/js/renovate.md +++ b/apps/blog/_posts/js/renovate.md @@ -40,7 +40,7 @@ ogImage: 의존성이 커지기 전에 조금씩 버전을 올렸다면 이런 문제는 없지 않았을까 생각하게 된다. Renovate를 통해 이 문제를 해결해 보자. -> 깃헙의 공식 툴인 [dependabot 과의 차이점](https://www.libhunt.com/compare-renovate-vs-dependabot-core)도 향후 작성해볼 예정이다. [레딧에서 다양한 의견](https://www.reddit.com/r/reactjs/comments/us666i/how_do_you_keep_up_with_npm_package_updates/)을 볼 수 있다. +> 깃헙의 공식 툴인 [dependabot 과의 차이점](https://www.libhunt.com/compare-renovate-vs-dependabot-core)도 향후 작성해 볼 예정이다. [레딧에서 다양한 의견](https://www.reddit.com/r/reactjs/comments/us666i/how_do_you_keep_up_with_npm_package_updates/)을 볼 수 있다. ## Renovate란? @@ -109,7 +109,7 @@ PR을 확인해보면 아래와 같은 특징을 찾아볼 수 있다. ## 적용 방법 -적용방법은 상당히 간단하다. 봇을 설치해주면 사실상 끝이다. +적용 방법은 상당히 간단하다. 봇을 설치해 주면 사실상 끝이다. 1. Renovate app을 설치한다. @@ -125,7 +125,7 @@ PR을 확인해보면 아래와 같은 특징을 찾아볼 수 있다. 3. PR 확인 및 renovate.json 설정 -이제 앞에서 본것과 같이 업데이트가 필요한 라이브러리의 PR이 자동으로 생성된다. 기본 값은 10개이기 때문에 renovate.json 값을 수정해 원하는 방식으로 조정할 수 있다. +이제 앞에서 본것과 같이 업데이트가 필요한 라이브러리의 PR이 자동으로 생성된다. 기본값은 10개이기 때문에 renovate.json 값을 수정해 원하는 방식으로 조정할 수 있다. ## 마무리 diff --git a/apps/blog/_posts/js/storybook7.md b/apps/blog/_posts/js/storybook7.md index e93d762a..606b2c65 100644 --- a/apps/blog/_posts/js/storybook7.md +++ b/apps/blog/_posts/js/storybook7.md @@ -35,7 +35,7 @@ Storybook v7의 주요 기능중 가장 마음에 드는 부분은 사전 번들 ## CSF v3 -Component Story Format(CSF)도 상당부분 변경되었다. 컴포넌트 형식에 맞춰 통일화된 규격을 제공한다. +Component Story Format(CSF)도 상당 부분 변경되었다. 컴포넌트 형식에 맞춰 통일화된 규격을 제공한다. 1. stories 파일의 `default export`가 변경되었다. 이제 스토리 메타데이터를 정의하는 객체를 리턴한다. 2. stories 정의 방식이 변경되었다. 스토리는 스토리 메타데이터 객체 내부에 정의되어야 한다. @@ -116,7 +116,7 @@ export default { v7이 되면서 MDX1에서 MDX2로 업데이트 되었다. -기존에는 mdx 파일과 스토리 파일을 ID 스트링으로 연결했었다. v7 부터는 조금 더 코드 친화적으로 컴포넌트와 문서를 이어줄수 있게 되었다. +기존에는 mdx 파일과 스토리 파일을 ID 스트링으로 연결했었다. v7 부터는 조금 더 코드 친화적으로 컴포넌트와 문서를 이어줄 수 있게 되었다. MDX2는 내장 jsx 및 플러그인을 지원하기 때문에 동적인 문서를 만들기에 더욱 좋아졌다. @@ -129,7 +129,7 @@ MDX2는 내장 jsx 및 플러그인을 지원하기 때문에 동적인 문서 | event | MouseEvent | click event object | ``` -기본적으로 MDX는 [GitHub-flavored markdown(GFM)](https://github.github.com/gfm/)이 꺼져있으므로 위와 같은 테이블 마크다운이 깨질수 있다. +기본적으로 MDX는 [GitHub-flavored markdown(GFM)](https://github.github.com/gfm/)이 꺼져있으므로 위와 같은 테이블 마크다운이 깨질 수 있다. 이는 [remarkGfm을 설치하여 수정](https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm)하여야 한다.