/bundle-repo

내가 공부한 모든 파일들이 모이는 곳 📘

skill 을 연구하고 연습하는 공간 🙌

🧪 2024-study

threejs 강의 수강

⭐ React DOM Server 공부

  • React DOM Server와 SSR에 대해 공부하고, React와 express를 이용하여 SSR을 구성해보았습니다. 또한, NextJS가 어떻게 생겨먹은 애인지에 대해 생각해보았습니다.

무한 슬라이드 구현

  • Qshop 제품에 무한 슬라이드를 구현해야 해서 해당 기능에 대한 연구를 진행 중이며, 라이브러리 사용 이유, 폴더 구조, 데이터 불러오기, 코드 주석 등에 대해 사전 준비 중입니다. 또한, 사용한 라이브러리를 왜 사용했는지 충분히 고민 중입니다.

번개장터 코딩테스트 공부

  • 번개장터 코딩테스트를 준비 중이며, React에 대한 공부를 진행 중입니다.

🧪 2023-study

이벤트 버스 연구

  • #event_bus #reactjs
  • 현업 제품에서 전역 상태 라이브러리를 이미 사용하고 있어서 일부 컴포넌트만 이벤트 버스를 활용하여 성능을 개선하기 위해 사용하고 있음.

웹워커 연구

  • #web_worker #vanilla_js
  • 현업 제품에서 이미지 렌더링, 이벤트 등으로 인한 메인 스레드 과부화를 방지하기 위해 서브 스레드를 활용하여 메인 스레드의 작업량을 줄이는 연구를 진행 중.

child component로 jsx tag를 내려줄 때, property를 새로 붙이는 방법 연구

  • #reactjs
  • elem에 중괄호를 붙여 바로 렌더링할 수 있지만, 이 방식을 사용하면 property를 동적으로 붙이지 못한다. property를 붙이려면 함수형 컴포넌트를 동적으로 만들어야 한다는 생각으로 연구 중.

Nomad Coder React Native 101

  • #react_native
  • 프론트엔드 개발자는 화면단에 보이는 모든 것을 개발할 수 있어야 한다는 생각으로 React Native 공부 중.

리액트 테스트 라이브러리 연구

  • #testing_library #jest_dom
  • 리액트에서 제공하는 Testing Library와 Jest-Dom을 사용하여 테스트 환경 연습 중.

webpack으로 MPA를 SPA로 바꾸어보자

  • #webpack #vanillajs
  • VanillaJS에서 사용하는 Multi Page Application 형식에서 webpack을 이용한 Single Page Application으로 전환하는 연구를 진행 중.

JSON 스키마 연구

  • #json
  • 현업에서 JSON을 다룰 일이 많아서, JSON 스키마에 대해 공부 중.

웹 쿠키 주고받기 해보기

  • #cookie
  • 도메인이 달라서 쿠키가 안 보내지는 상황에서 서버에서 쿠키를 보내고 받아보는 연습을 통해 쿠키와 친해지는 연구 중.

react color picker 연구

  • #color_picker #reactjs
  • 현업에서 컬러피커를 구현해야 하는데.. 어떻게 해야 하는지 몰라 하나하나 써봅니다.

🧪 2022-study

scroll indicator 연구

  • #vanillajs #scroll
  • Qshop 메인 페이지에서 스크롤 인디케이터를 넣어야 하는데 어떻게 넣어야 하는지 몰라서 공부.

jquery scroll 연습

  • #jquery #scroll
  • Quv라는 Qshop 이전 버전 제품의 메인 페이지에서 스크롤 애니메이션 구현을 맡아 공부. 어떤 식으로 구현해야 할지를 연습했으며, 스크롤 시 특정 범위를 넘어가면 애니메이션이 작동하도록 구현함.

redux 101 노마드 코더 강의 수강

  • #reactjs #redux
  • redux의 사용법을 공부하여, Qshop에서 사용하는 react 자체의 context hook 에 대한 이해를 하려고 함.

nextjs 노마드 코더 강의 수강

  • #nextjs
  • Qshop 제품에서 nextjs를 도입하려고 하는데 이에 대한 숙련도가 낮은 것 같아 공부.

🧪 2021-study

html css 생활코딩 강의 듣기

  • #vanillajs
  • vanillajs 기본기를 더욱 익히기 위하여 강의 수강

display flex 속성 공부

  • #vanillajs #display-flex
  • flex 속성이 무엇인지 몰라 공부

구글 페이지 클론

  • #vanillajs
  • 거의 맨 처음 진행했던 프로젝트. 구글 페이지를 클론해보며 기본기를 익힘.