프론트 산악회🌾 프론트 산악회🌾

전체 글

• [JavaScript] Reactivity

  Front-End/JavaScript 2024. 1. 19. 04:27

  🍀 목차 글의 목적 Reactivity 사례 글의 목적 "React, Angular, Vue 같은 프론트엔드 프레임워크를 사용하려는 이유가 무엇인가?"에 대해서는 여러 이유가 나올 수 있다. 컴포넌트 기반으로 아키텍처를 구성하고 싶으므로, Vanilla JS로 개발하는 것보다 성능도 개선되어 있고 생산성도 높아지므로 등등... 이유 중 "Reactivity 때문"도 있을 수 있다. React, Vue와 같은 프론트엔드 프레임워크의 주요 이점 중 하나인 Reactivity는 무엇이고, 어떻게 적용되어 있을까? 해당 글은 추상적인 개념이었던 Reactivity를 조금이나마 이해해보기 위해 작성되었다. Reactivity Reactivity는 JavaScript 애플리케이션의 메모리에 있는 내용을 DOM에 H..

• [WizSched] react-router-dom v6 Outlet 적용

  Front-End/Project 2024. 1. 11. 02:53

  🍀 목차문제Outlet적용하기  문제 지금까지 프로젝트에서 Header가 고정된 레이아웃을 만들 때 app.tsx에서 Header를 선언하여 사용했었다. 이 구조를 다시 보니 라우팅을 관리하는 컨테이너와 UI 컴포넌트가 뒤섞여 있어 읽기 어렵다고 생각했다. 또한 프로젝트에 여러 API를 활용하기에 페이지마다 Header가 달라질 수 있다 판단했다. 그럴때마다 pathname을 이용해 조건문을 작성하여 렌더링 여부를 판단하기는 번거롭다고 느꼈다.    이를 어떻게 개선할 수 있을까 검색해 보다가 react-router-dom(v6)의 Outlet을 알게 되었다.  Outlet Outlet은 중첩 라우트 구조에서 자식 라우트를 표시하는 데 사용된다. 부모 라우트의 특정 위치에서 자식 라우트를 렌더링 할 수..

• [GitHub] LeetHub를 이용한 LeetCode 연동 폴더 설정

  Tools/Git 2024. 1. 2. 19:23

  🍀 목차LeetHub 설치문제연동 폴더 설정결과 확인   LeetHub 설치 LeetHub는 해외 알고리즘 사이트인 LeetCode에서 해결한 문제를 자동으로 GitHub Repository에 commit & push 해주크롬 확장 프로그램이다.      Chrome 웹 스토어에서 LeetHub를 검색한 후, 리스트에서 골라 설치해 주면 된다. v2는 추천항목, v3는 가장 최신에 등록된 플러그인이었는데, v3는 v2를 fork 하여 업데이트한 버전이라 되어있어 v3를 설치해 주었다.  문제    확장 프로그램을 활성화 시킨 후, GitHub 인증을 거치면 존재하거나 새로 만들 Repository name을 입력해 연동시킬 수 있다.  그런데 나의 경우 알고리즘 문제 풀이를 TIL>Problem-Sol..

• [회고] 2023 돌아보기

  Daily-Life 2023. 12. 29. 04:48

  🍀 목차 Lacked(아쉬웠던 점) Liked(좋았던 점) Learned(배운 점) Longed for(바라는 점) 1년은 새해에는 참 길어 보이다가도 연말에는 참 짧은 것 같다. 회고는 11월에 처음 작성했었는데, 내가 무엇을 해왔었는지 전체적으로 바라볼 수 있어서 좋았다. 2023년의 마지막 주, 올해의 나를 돌아보고 싶어 작성한다. 4L 회고(Liked, Lacked, Learned, Longed for : 4개의 L을 기록하며 회고하는 방식)는 보통 Liked부터 시작하던데, 회고 글은 Lacked부터 시작하기로 했다. Lacked(아쉬웠던 점) 번아웃 2022년 12월, 최종 탈락을 연달아 2번 겪으며 심적으로 많이 힘들었다. 정말 가고 싶었던 회사가 있어 더 타격이 컸다. 직장을 다니는 것도 ..

• [TypeScript] 타입(type)과 인터페이스(interface)의 차이점

  Front-End/TypeScript 2023. 12. 22. 23:45

  🍀 목차 확장 새 필드 추가 사용 범위 Index Signature type으로만 선언 가능한 타입들 타입(type)과 인터페이스(interface)는 TypeScript에서 객체의 타입을 만드는 데 사용된다. type alias로는 객체 타입뿐 아니라 모든 유형의 타입을 만들 수 있는데, 이처럼 두 키워드의 특징과 차이점을 알아보자. 확장 type(교차 타입 사용) type Animal = { name: string sound: string } type BearFeature = { honey: boolean sound: string } type Bear = Animal & BearFeature; const bear:Bear = {name:"Pooh",sound:"kkao~",honey:true}; be..

• [WizSched] 설정 기록

  Front-End/Project 2023. 12. 15. 02:04

  🍀 목차Issues, TemplatesProjectsdefault branch 변경Vite Template을 활용하여 React+TS 세팅ESLint 설정Prettier 설정Tailwind CSS 설치postcss.config.jstailwind.config.jstsconfig.json  프로젝트 요약Google APIs를 활용한 프로젝트  Issues, Templates   개선에 대한 고민만 담은 라벨 추가(예정)   Issue 템플릿을 등록하여 이슈 등록 시 편하게 만든다.    개인 프로젝트기에 매번 Assignees는 나이고,  Feat 관련 이슈는 Labels를 매번 Feat으로 붙여줘야 할 테니 default로 바꿔주었다. 비슷하게 Bug, Refector, 기타 작업을 위한 템플릿도 만들..

• [React] 번들러(Bundler)

  Front-End/React 2023. 12. 7. 23:34

  🍀 목차글의 목적CRA(Creat-React-App)번들러WebpackVite   글의 목적 처음 React 프로젝트를 시작하게 되었을 때, 공식 문서에서는 Create React App을 추천해 줬었다.   React에 아직 익숙지 않은 개발자에게 Create-React-App은 처음부터 React로 만들어진 새로운 애플리케이션을 만드는 가장 편한 방법이었다. 모든 React App을 CRA(Create-React-APP)로 만들어야 하는 줄 알았던 때도 있었다. 시간이 지나며 Webpack, Bundler, Vite 등의 키워드를 마주치는 비율이 높아졌고, 왜 현재는 CRA를 추천하지 않는 사람들이 많은 지 알고 싶어 글을 작성하게 되었다. 글을 통해 번들러(Bundler)에 대한 개념을 대략적으로..

• [React] 상태 관리 (+라이브러리)

  Front-End/React 2023. 12. 1. 18:54

  🍀 목차 전역 상태 상태 관리의 필요성 대표적 라이브러리와 콘셉트 계속되는 연구들 전역 상태 상태는 변화하는 동적인 데이터이다. 웹 페이지에서 데이터는 사용자와 상호작용을 통해 변경되기도 하고, 그렇게 변한 데이터가 UI에 나타나기도 한다. React에서는 Component(컴포넌트)들이 State(상태)라는 객체를 가지며, 변경되면 컴포넌트는 리렌더링되어 반영하게 된다. 이러한 상태들은 보통 컴포넌트 안에서 관리되나, 단일 컴포넌트를 넘어 전역적으로 프로젝트에서 사용되는 상태가 될 수도 있다. 보통 전역이란 단어가 붙으면 프로그램 어디서나 접근할 수 있다를 의미하는데, 전역 상태도 같다. 또한, 상태기에 컴포넌트가 변경을 감지해 리렌더링 해야 한다. 전역 상태의 예시에는 무엇이 있을까? 다크모드나 로그..