프레임워크와 라이브러리

프레임워크와 라이브러리는 프로그래밍을 쉽게 할 수 있도록 도와주는 역할을 한다. 이 둘의 차이점과 특징에 대해 정리해보고자 한다.프레임워크는 일정한 형태와 필요한 기능을 갖추고 있는 코드의 집합이다. 프레임워크는 정해진 규칙이 있다. 개발자는 정해진 규칙에 따라 작업을

6일 전
·
0개의 댓글

CSS 전처리기 & CSS-in-CSS & CSS-in-JS 비교

매번 부모 요소 선택자를 같이 선언해야 한다. (코드 중복으로 인해 코드량 증가 ➡️ 유지보수성 저하)함수나 변수 기능이 없기 때문에 자동화가 어렵다.모든 스타일이 글로벌에 선언되어 중복 클래스명에 유의해야 한다.여러 CSS 간에 의존 관계를 관리하기 힘들다.CSS를

2022년 6월 29일
·
0개의 댓글

React와 Vue 비교

React와 Vue는 SPA를 구현하기 위해 사용되는 라이브러리/프레임워크이다. 이 둘의 특징과 차이점에 대해 정리해보도록 하겠다.물론 Vanilla JavaScript만으로도 SPA를 구현할 수 있다. 하지만 React나 Vue를 사용하는 이유는 Virtual DOM

2022년 6월 24일
·
0개의 댓글

[React] Recoil 정리

Recoil은 페이스북이 2020년 5월에 소개한 React 전용으로 나온 상태 관리 라이브러리다. Recoil을 통해 전역 상태를 관리하면 코드가 굉장히 간결해진다.context API는 전역 상태를 전달할 때 객체 형태의 value를 사용한다. 따라서 객체 안의 값

2022년 6월 23일
·
0개의 댓글

모듈과 번들링, 그리고 웹팩에 대해

원래 자바스크립트는 모듈로 가져오거나 내보내는 방법이 없었다. 때문에 하나의 파일에 모든 기능을 담아야 했다.여러 가지 기능을 하나의 파일 내부에 모두 작성하고 관리하게 되면 코드의 양이 방대해지고 가독성이 떨어진다. 게다가 현대의 웹 애플리케이션은 예전과 달리 훨씬

2022년 6월 22일
·
0개의 댓글
post-thumbnail

[React] react-hook-form 유효성 체크 (VS. Formik)

Formik, Redux Form과 비교했을 때 react-hook-form의 성능이 가장 뛰어나다. (https://github.com/react-hook-form/performance-compare)Formik은 provider 방식이다. form 내에 있

2022년 6월 16일
·
0개의 댓글

[JavaScript] throw 문으로 에러 지정하기 (예외 처리)

throw 문은 사용자가 정의한 '예외'를 발생시킬 수 있다. '예외'가 발생하면 함수가 중지되고 catch문으로 전달된다. catch문이 없다면 프로그램이 종료된다.throw 문에 대해 알게 되었을 때, '예외'라는 단어 때문에 오히려 어렵게 느껴졌다.'예외'를 쉽게

2022년 6월 16일
·
0개의 댓글
post-thumbnail

[에러 일지] MSW - Failed to register the Service Worker: Failed to register a ServiceWorker for scope ...

🚫 \[MSW] Failed to register the Service Worker:Failed to register a ServiceWorker for scope ('http://localhost:3001/') with script ('http:/

2022년 6월 15일
·
0개의 댓글

Redux 미들웨어 사용 이유

Redux의 Store 안에 있는 Reducer 함수는 순수함수로, 같은 입력에 대해 항상 같은 결괏값을 출력해야 한다.그러나 일부 로직은 출력할 때마다 다른 결괏값을 내뱉는다. 예를 들어 비동기 API 호출이나, new Date()로 실시간 날짜 출력, 랜덤 숫자 출

2022년 6월 12일
·
0개의 댓글

MVC와 Flux 그리고 Redux의 등장

디자인 패턴이란, 개발 과정에서 공통으로 발생하는 문제를 해결하기 위해 사용되는 해결 방법을 말한다.model, view, controller로 각각의 역할을 분리해서 유지보수와 개발 효율을 증진시켜주는 패턴이다.Model에 데이터를 정의해 두고, Controller를

2022년 6월 11일
·
0개의 댓글

객체의 불변성이 중요한 이유

객체가 불변하다는 것(immutable)은 객체가 최초 생성되었을 때의 값이 변하지 않고 유지된다는 의미이다.객체의 불변성을 지키면 원본 데이터가 변경, 훼손되는 것을 막을 수 있다.하지만 자바스크립트는 객체가 너무나도 동적이라 속성 변경이 쉽다는 단점을 갖고 있다.

2022년 6월 11일
·
0개의 댓글

CORS, 기본 동작 원리와 이슈 해결 방법

CORS(교차 출처 리소스 공유)란, 다른 출처에서 리소스 요청 시 접근 권한을 부여하는 메커니즘이다.여기에서 출처란 프로토콜, 호스트명, 포트를 말한다. 이 중 하나라도 다르면 다른 출처로 인식한다.기존에는 보안상의 이유로 다른 출처로부터 리소스를 가져오는 것이 불가

2022년 6월 5일
·
0개의 댓글

Redux 내부 작동 원리와 상태 관리 순서

컴포넌트에서 상태 변경을 요청해야 하는 경우가 발생한다.컴포넌트는 Store의 메서드 중 하나인 dispatch()를 호출한다.dispatch()는 Store에 상태를 변경해달라고 요청한다.3-1. Store는 상태를 변경할테니 참고할 내용을 보내달라고 한다.3-2.

2022년 5월 31일
·
0개의 댓글
post-thumbnail

[에러 일지] styled-component "Import in body of module; reorder to top."

Styled Component로 Global Style을 적용하려는데 import 에러가 발생했다.Import in body of module; reorder to top. eslintimport/first여러 import 사이에 변수를 선언해서 발생한 에러이다.확인해

2022년 5월 28일
·
0개의 댓글

[JavaScript] 2차원 이상 객체 깊은 복사 방법

얕은 복사 (Shallow copy)주소 값을 복사하기 때문에 참조하고 있는 실제 값이 같음깊은 복사 (Deep copy)실제 값을 독립적인 새로운 메모리 공간에 복사, 참조를 공유하지 않음참고로 아래 두 가지 얕은 복사 방식의 경우 1차원 객체일 때에는 깊은 복사된다

2022년 5월 25일
·
0개의 댓글

[React] Geolocation API 사용하여 현재 내 위치 찾기 (with. TypeScript)

Geolocation API는 사용자의 위치 정보(위도, 경도)를 제공해준다. HTML에서 자체적으로 제공하는 API이다. Geolocation은 npm으로 설치해서 사용할 수도 있다.📎 react-hook-geolocation하지만 Hook을 직접 구현해서 사용하는

2022년 5월 25일
·
0개의 댓글

[React] useState()와 상태의 불변성

🧚 state는 일반 변수와는 다르게 값이 변하면 렌더링이 일어난다. setState는 state를 변경시켜주는 함수이다.클래스형 컴포넌트의 경우 render() 메서드를 통해 상태 변경을 감지할 수 있다. 상태 변경이 감지되면 필요한 부분만 업데이트할 수 있다.함수

2022년 5월 24일
·
0개의 댓글
post-thumbnail

러버덕 디버깅 (Rubber duck debugging)

블로그에 배운 지식을 공유하고 깨달은 점을 회고하는 것이야말로 러버덕 디버깅의 한 방법이다. 플랫폼이 러버덕 역할을 하는 셈이다.이름에서 알 수 있듯이 러버덕 디버깅은 고무 오리를 사용하여 문제가 있는 부분을 디버깅하는 것을 말한다. (꽥) 예상치 못한 동작을 일으키는

2022년 5월 23일
·
0개의 댓글
post-thumbnail

JAM Stack 정리

JAM Stack의 JAM은 JavaScript, API, Markup의 약자로 웹 개발 방법론(=철학=아키텍처)의 하나이다. SPA는 모든 리소스를 한 번에 가져오기 때문에 초기 진입 속도가 비교적 느리다. 또한 처음에는 그저 하나의 빈 페이지이기 때문에 SEO에 취

2022년 5월 21일
·
0개의 댓글
post-thumbnail

[에러 일지] 'EventTarget' 형식에 '...' 속성이 없습니다. ts(2339)

이벤트에 타입 적용 시 event.target에 어떤 속성이 없다는 에러가 종종 발생한다.이럴 때에는 event 파라미터에서 모든 타입을 해결하려고 하지 말고, event와 target을 분리해서 각각의 타입을 지정해주면 된다.event의 타입과 target의 타입을

2022년 5월 18일
·
0개의 댓글