Vue.js 란 ? 🧐 사용자 인터페이스(UI)를 개발하기 위한 자바스크립트 프레임워크로 Evan You 에 의해 개발 되었다. React에 이어 2번째로 대중적인 프론트엔드 자바스크립트 프레임워크이며 React에 비해 러닝커브가 낮고 직관적인 문법, 뛰어난 성능,

페이스북에서 개발한 자바스크립트 라이브러리이며, 프론트엔드 개발에서 가장 많이 채택되고 있다.프레임워크인 Vue, Angular 와 달리 라이브러리 이므로 확장성이 좋고SPA(Single Page Application) 방식으로 동작하기 때문에 높은 사용자 경험을 제공

프로젝트에서 일관된 코드 스타일과 가독성, 유지보수성을 높이기 위해 팀만의 코드 컨벤션을 따르는 것이 필수적이다.이를 위해 많은 개발자들은 ESLint 와 Prettier 를 활용해 코드 품질을 관리하고 자동으로 포멧팅 되도록 설정한다.React + TypeScript

서론 리액트를 사용하면서 무심코 넘어갔던 렌더링 방법에 대해 정리해보고자 한다. 일상적으로 '렌더링 한다' 라고 하면 HTML, CSS, JavaScript 를 가지고 화면을 그리는 과정을 의미한다. 하지만, 리액트에서의 렌더링은 화면을 그리는데 필요한 DOM Tr

서론 우리가 사이트로 이동하기 위해 브라우저에 URL 주소를 입력하게 되면 실제 페이지가 화면에 나타게 되는데, 이 과정에 대해 정리하려고 한다. URL 주소를 입력하게 되면 크게 아래와 같은 과정이 발생한다. 1. 웹 서버와 연결하기 > 2. 화면 정보 요청하기

프론트엔드에서 많이 사용하고 있는 아키텍처 중 하나인 FSD에 대해 정리해보려고 한다.FSD 는 Feature Sliced Design 의 약자로, 기능 분할 설계를 의미하며이론과 함께 FSD로 설계된 오픈소스를 통해 알아가보자FSD는 Layer(레이어), Slice(

유동적인 타입 설정이란, 상황에 따라 타입을 지정해 줄 수 있는 것을 말한다.이전에 정리했던 제네릭 도 그 방법 중 하나이며순서대로 사용법을 정리해보고자 한다.객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 특정 요소의 타입만 추출하는 것이다.post 객체의 autho

타입 변수를 통해 매개변수의 타입과 반환값의 타입을 지정할 수 있는 함수를 말한다.하나 이상의 타입을 사용하려면 UNION 타입 이나 any 타입 을 사용했어야 했는데,타입 변수를 사용하면 함수가 호출되는 시점에 타입이 지정되므로 더 안전하게 사용할 수 있다.함수 이름

기존의 타입 별칭 처럼, 타입에 이름을 지어주는 또다른 문법이다.객체 구조를 정의하는데 특화된 문법이며 상속, 합침 등 특수한 기능을 제공 해준다.문법은 아래와 같다.인터페이스 간의 상속을 통해 중복된 프로퍼티를 정의하지 않도록 도와주는 문법이다.이처럼 Dog, Cat

함수에서 타입을 저의 할 때에는 매개변수 의 타입을 지정해주고 반환값 에 맞는 타입을 지정해주면 된다.( 전에 배운 타입추론 에 의해 함수의 반환값 타입은 생략이 가능하다. )함수에서 매개변수를 받을때 필수로 받지 않아도 되는 경우에 사용한다.undefined 값이 올

TypeScript 는 타입이 정의되어있지 않은 변수의 타입을 자동으로 추론해주는 기능이 있다.이러한 기능으로 모든 변수에 일일이 타입을 정의하지 않아도 돼서 간결한 코드를 만들 수 있다.어떠한 상황에서 타입 추론이 가능하며, 어떤 원리로 추론을 하는 지에 대해 알아보

타입간의 합집합 개념으로, 두개 이상의 타입을 | 기호로 연결해 사용한다.하지만 객체 타입의 경우 주의 해야할 점이 있다.위와 같이 3가지 경우에 대해서는 정상적으로 처리된다.하지만 아래의 경우 처럼 name 값만 정의 할 경우 에러가 발생한다.위에서 선언한 union

타입 호환성 이란, A, B 두개의 타입이 존재할 때 A타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것을 의미한다.아래의 타입 계층도와 같이 타입스크립트가 제공하는 기본 타입들간에는 부모-자식 관계가 존재한다.자식 타입 값을 부모 타입 값으로 취급하는 업 캐스팅

TypeScript 는 기존의 JavaScript를 더 안전하게 사용할 수 있도록 Type 관련된 여러 기능들이 추가된 언어이다.Tpye 이 추가되면서 좀 더 엄격한 문법이 적용되지만 그만큼 안정적이고 버그 발생 가능성을 낮출 수 있다.대부분의 프로그래밍 언어로 작성된

클라이언트(웹 브라우저) 로 부터 HTTP 요청을 받아 HTML, 이미지 등과 같은 정적인 콘텐츠 를 응답해주는 역할을 한다. 주로 WAS와 함께 구성되기 때문에 정적인 컨텐츠 요청시 : WAS를 거치지 않고 정적 컨텐츠를 제공한다.동적인 컨텐츠 요청시 : 요청을 WA

SWC(Speedy Web Compiler)

Babel ⚡️ 바벨의 공식 홈페이지에 따르면 바벨은 자바스크립트 컴파일러이다. 라고 나와있다. 모든 브라우저가 최신 문법, 기술을 지원하지 않기 때문에 보여지는 모습이 환경에 따라 다르게 보여지는 크로스브라우징 이슈 가 발생한다. 바벨은 이러한 이슈를 해결하기

Webpack 웹 어플리케이션은, 역할에 따라 여러개의 다양한 모듈 로 구성되어있다. 이러한 모듈들을 웹 브라우저에서 사용 가능한 형태로 만들어주기 위해서는 모듈 번들러 가 필요하며, Webpack 은 프론트엔드에서 가장 많이 사용하는 모듈 번들러 이다. ✅ 즉,

라우팅 방식이 page router 에서 app Router 로 전환되면서렌더링 종류에 따라 구현하는 방법이 변경되어 정리해보고자 한다.렌더링 종류에는 크게 CSR | SSR | SSG | ISR 4가지 종류가 있다.page router 에서는 getServerSid

이전 카카오 로그인 포스팅과 같이 네이버 로그인도 어렵지 않게 구현할 수 있다.네이버 개발자 센터에서 앱 등록부터 시작해보자!먼저, 네이버 개발자 센터에 들어가 앱 등록을 해야한다.홈 페이지 > 네이버 로그인 > 오픈 API 이용 신청 > 약관동의 > 본인인증 까지 완