Front-End
-
[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(상태)라는 객체를 가지며, 변경되면 컴포넌트는 리렌더링되어 반영하게 된다. 이러한 상태들은 보통 컴포넌트 안에서 관리되나, 단일 컴포넌트를 넘어 전역적으로 프로젝트에서 사용되는 상태가 될 수도 있다. 보통 전역이란 단어가 붙으면 프로그램 어디서나 접근할 수 있다를 의미하는데, 전역 상태도 같다. 또한, 상태기에 컴포넌트가 변경을 감지해 리렌더링 해야 한다. 전역 상태의 예시에는 무엇이 있을까?다크모드나 로그인..
-
[JavaScript] 스코프(Scope)와 클로저(Closure)Front-End/JavaScript 2023. 4. 5. 04:07
🍀 목차 글의 목적 스코프 스코프의 구분 스코프 이해 + LHS, RHS 어휘적 스코프(Lexical Scope) 함수 레벨 스코프 vs 블록 레벨 스코프 클로저 클로저 예제 글의 목적 자바스크립트를 학습하다 보면 스코프(Scope), 클로저(Closure)라는 단어를 빈번하게 마주칠 수 있었다. 그럴 때마다 검색해서 대략적인 감만 잡고 넘어갔었다. 😎 "클로저가 무엇인가요?"라는 질문을 받았을 때, 내가 과연 이해한 답변을 할지, 외운 답변을 할지 생각해 봤을 때 후자에 가깝다고 느꼈다. 그렇기에 이 글은 자바스크립트의 스코프와 클로저를 이해하기 위해 작성됐다. 스코프 스코프는 자바스크립트뿐만 아니라 여러 프로그래밍 언어의 기본 개념이다. 우선, 아래 코드의 실행 결과를 예측해 보자. var x = '..
-
[JavaScript] 클린 코드 자바스크립트 강의 정리Front-End/JavaScript 2022. 12. 15. 00:04
🍀 목차 JavaScript 클린 코드? 변수 다루기 : 전역 공간 사용 최소화 변수 다루기 : 임시 변수 제거하기 타입 다루기 : 타입 검사, 형변환 주의하기, isNaN 경계 다루기 : 매개변수의 순서가 경계다 분기 다루기 : 값식문 분기 다루기 : 삼항 연산자 다루기, Truthy & Falsy Udemy 클린코드 자바스크립트(강사 장 현석님(Poco Jang), https://www.udemy.com/course/clean-code-js/) 강의를 개인적으로 정리하다 복습 겸 깔끔하게 포스팅하고 싶었다. 나쁜 코드인 이유와 습관을 고쳐주시는 강의였다. 모든 강의 내용 정리가 아니기에 내용이 흥미로우시다면 수강 추천드립니다! 👍 JavaScript 클린 코드? 해당 강의는 클린 코드에 대해 고민하는..
-
[JavaScript] 정규 표현식(Regular Expression) 정리Front-End/JavaScript 2022. 9. 21. 06:16
🍀 목차 글의 목적 정규 표현식이 뭘까? in JavaScript 응용 모음 시간 복잡도 학습에 도움이 되는 사이트 글의 목적 정규 표현식을 이해하고 JavaScript에서의 다양한 사용법을 정리하기 위해 작성됐다. 정규 표현식을 사용하면 문자열에서 특정 패턴을 찾고, 매칭 되는 것들을 배열로 받는 등 문자열 처리를 매우 편하게 할 수 있다. 웹 사이트의 이메일, 패스워드의 유효성 검증에도 자주 사용된다. 알아두면 손해는 안 보는 정규 표현식! 정규 표현식 객체(RegExp)의 메서드와 String 메서드, 다양한 예제로 정규 표현식을 이해해보자. 🔥 정규 표현식이 뭘까? 정규 표현식(Regular Expression(RegExp, Regex), 정규식)은 문자열에서 특정 내용을 매칭 하는 데 사용된다...
-
[JavaScript] 이벤트 루프(Event loop) 정리Front-End/JavaScript 2022. 8. 25. 03:52
🍀 목차 글의 목적 프로세스와 스레드? 자바스크립트의 런타임 환경 이벤트 루프 Task Queue Microtask Queue Render 큰 그림으로 이해 마치며 글의 목적 자바스크립트 언어 자체는 싱글 스레드(단일 스레드, Call Stack이 하나라 하나의 코드만 실행할 수 있음) 환경이다. 의문이 든다. 🤪 "setTimeout()도 그렇고, 여러 비동기, 콜백 함수의 작업은 어떻게 하고 있는 건데?!" 여기서 등장하는 개념이 이번 글에서 다룰 이벤트 루프이다. 자바스크립트의 메인 스레드는 이벤트 루프에 의해 관리된다. 또 글을 읽기 전, 미리 알아두면 좋을 개념은 자바스크립트의 런타임 환경은 멀티 스레드 환경처럼 동작한다는 것이다. 이 글은 자바스크립트 런타임 환경과 이벤트 루프의 개념을 큰 그..
-
[Next.js] React와의 Routing 차이점Front-End/React 2022. 7. 15. 02:39
🍀 목차 React.js의 Routing Next.js의 Routing 어떤 것을 사용해야 할까? 들어가며... 이 글의 Routing은 현재 네트워크에서 다른 네트워크로의 최적 경로를 설정해주는 과정이 아니다. 어떠한 URL이 들어오면 그에 맞는 화면을 전송해주는 것을 뜻한다. React.js의 Routing React 공식문서의 Next.js 소개를 보면 기본적으로 스타일링과 "라우팅 해결책"을 가지고 있다고 설명되어 있다. React에는 어떤 라우팅 문제점이 존재하는 것일까? 우선 React는 SPA(Single Page Application)이란 것을 알아야 한다. 라우팅은 본래 서버에서 담당했지만, SPA가 등장하며 라우팅을 클라이언트가 담당하게 되었다. 서버에서 담당했던 라우팅은 애플리케이션의..
