bbearcookie / blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 32.46 MB

블로그

Home Page: https://bbearcookie.netlify.app/

License: MIT License

JavaScript 100.00%

blog's Introduction

Hello 👋

🌐 Blog
📄 Resume

Languages

Libraries

Testing

Deployments

Projects

이름	내용	기간
🌊 내 마음 속 바다	마음 속의 고민을 물병 편지로 흘려보내는 서비스	2024.04
🐦 모아밤	계획을 실천하며 귀여운 새를 성장시키는 루틴 도우미 서비스	2023.12
📮 머쓱;레터	평소에 고마움을 느꼈던 친구에게 부끄러워 전하지 못했던 편지를 전달하는 서비스	2023.10
🖼️ Poka	음반 앨범에 동봉된 최애 아이돌의 포토카드를 교환하는 서비스	2023.05

Studies

이름	내용	기간
Next.js 공식 문서	Next.js의 도입 여부를 알아보기 위해 진행했던 스터디	2023.10
React 공식 문서	프로젝트 시작에 앞서 React를 동료와 함께 학습하고자 진행했던 스터디	2023.08

blog's People

Contributors

Watchers

blog's Issues

state-management-and-observer/

상태 관리와 Observer 패턴

프론트엔드 개발에는 외부에 존재하는 데이터를 비동기적으로 가져오고 관리하는 과정이 중요하다. 이런 부분은 SWR이나 TanStack Query같은 가 등장하기 전에는 보통 Redux와 같은 전역 상태 관리 라이브러리에서 데이터를 관리하는 편이었다고 한다. 내

https://bbearcookie.netlify.app/state-management-and-observer/

msw/

MSW 2로 다양한 환경에서 API 모의하기

서론 프론트엔드 개발을 하다 보면 로컬 환경에서 통신할 수 있는 개발용 API 서버를 마련하기 어려운 상황이거나, 병렬 개발로 인해 아직 실제 API 호출이 불가능한 상황에서 개발해야 하는 경우가 생기기도 합니다. 이러한 경우에 간단하게 Mock 데이터만

https://bbearcookie.netlify.app/msw/

devcourse-month1/

[Month 1] 프로그래머스 데브코스 6월 회고

어느덧 프로그래머스 프론트엔드 데브코스 4기에 합류한지 한달이 되었다. 나는 아직 더 공부하고 준비해야 할 것이 많다고 느껴지는데 벌써 6개월이라는 교육 과정 중에서 한달이 지났다고 생각하니 시간이 조금만 더 천천히 흘러가줬으면 하는 바램을

https://bbearcookie.netlify.app/devcourse-month1/

devcourse-month2/

[Month 2] 프로그래머스 데브코스 7월 회고

6월의 회고를 노션 클로닝 작업이 어느정도 마무리가 되어가던 무렵의 7월 5일에 작성했었는데, 회고록을 작성한 기간이 1주 정도 빠르게 작성하는 것이다보니 사실 한달이 아니라 3주만의 회고록이 된 듯한 느낌이다. 저번 달에 , 학습을 위주로

https://bbearcookie.netlify.app/devcourse-month2/

react-jsx/

JSX는 어떻게 변환되는가

우리는 React로 개발하면서 컴포넌트 내부에서 JSX 문법으로 특정 컴포넌트가 그려야 할 화면을 선언한다. 이는 코드만 봤을 때 JS함수가 HTML같이 생긴 JSX를 반환하는 형태로 보이는데 이번에 JSX로 변환하는 과정을 탐구해보고자 한다. JSX Transform 함수가 어떻게 JSX를 반환할 수 있을

https://bbearcookie.netlify.app/react-jsx/

movue-searcher/

Vue로 구현한 영화 검색 사이트

Vue 첫 사용기 데브코스 과정을 진행하면서 프레임워크를 처음 사용해보게 되었다. React를 주로 사용해왔던 나에게는 생소한 부분도 있고 리액트와 유사하다고 느낀 부분도 있었는데 이번에 영화 검색 사이트를 구현해보면서 Vue 만의 장점과 매력도 나름 느끼게 되었다

https://bbearcookie.netlify.app/movue-searcher/

devcourse-month4/

프로그래머스 데브코스 9월 회고

이번 달에는 기획, 설계, 개발, QA, 발표 과정을 거쳐서 팀원들과 함께 결과물을 만들어보는 경험을 했다. 타겟층을 같은 데브코스 교육생들로 했고, 서로 익명이나 기명으로 편지를 주고받는 서비스를 기획했는데 만들다보니 생각보다 재밌게 느껴지고 실제로 사

https://bbearcookie.netlify.app/devcourse-month4/

express/

Express 기반의 프로젝트 셋업

꽤 오래 전에 Express와 TypeScript로 프로젝트를 구성하는 블로그 글을 작성했었다. 그런데 최근에 프로젝트를 하면서 Express 서버를 다시 구성해야 할 일이 생겼는데 예전에 덜 명확하게 알던 부분도 있었고 새롭게 삽질을 했던 경험이 있어서 이번 기회에 다시 리뉴얼해서 작성해보고자

https://bbearcookie.netlify.app/express/

authorization/

JWT 토큰은 어떻게 관리해야 할까

세션과 토큰 HTTP 프로토콜은 stateless 하기 때문에 이전에 요청을 보냈던 클라이언트와 다음에 요청을 보낸 클라이언트가 동일하다는 보장이 없다. 그래서 특정 사용자를 식별하기 위해서는 인증과 인가를 구현해줘야 하는데, 어떤 방식으로 처리할지는 크게 두

https://bbearcookie.netlify.app/authorization/

variable/

변수와 메모리

변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 메모리 공간을 식별하기 위해 붙인 이름이다. 특히 변수의 이름은 식별자라고도 한다. 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름 메모리 공간을 확보하고 값을 저장하는 과

http://localhost:8000/variable/

webpack-webpack/

Webpack으로 번들링하기

개요 저번 시간에 TS 컴파일러로 리액트 컴포넌트를 JS로 변환하는 과정까지 했었는데, 이번에는 모듈 번들러 Webpack을 통해서 하나의 파일로 번들링하고 실행할 수 있는 환경을 구성해보자. Webpack 설치 package.json package.json 을 수정해준다. 모든 js 파일을 기본적으로 ESM

https://bbearcookie.netlify.app/webpack-webpack/

array/

배열(Array)

배열 배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 밀집 배열(dense array): 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 구조이다. 희소 배열(sparse array): 각각의 메모리 공간의 크기가 달라도 되고 연속적으로 이어져있지 않을 수도

https://bbearcookie.netlify.app/array/