전체 글

[React.js] 성능개선 1 : lazy import

❗ lazy import 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데 그게 싫다면 js 파일을 잘게 쪼개면 된다. 쪼개는 방법은 import 문법을 약간 고치면 되는데 지금 페이지에서 사용하지 않고 있는 컴포넌트들은 lazy import 해놓으면 좋다. (App.js) import {lazy, Suspense, useEffect, useState} from 'react' // lazy import 적용 전 import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' // lazy import 적용 후 const Detail = lazy( () => import('./routes/Detail.js') ) const ..

[React.js] useEffect에 대하여

❓ useEffect() useEffect는 리액트 컴포넌트가 mount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있게하는 Hook이다. ❗ useEffect 셋팅 및 사용법 import { useEffect } from "react"; js파일의 상단에 import를 해주고 useEffect(() => { //기능 }) 이렇게 사용하면 된다 !!! 그러면 어떠한 컴포넌트 내에서 정의되어 있는 useEffect( )내부의 기능은 해당 컴포넌트가 mount, update시 정의한 기능이 실행된다. 예제를 가볍게 보며 실행 방법에 대해 알아보자 let [count, setCount] = useState(0); useEffect(() => { console.log("plus") }) {setCo..

[JAVASCRIPT] 백준 10610번 문제 풀이

❗ 조건 조건 1. 각 자리의 수 합이 3의 배수 조건 2. 오름차순 정렬시 배열의 0번 인덱스에는 0이 있어야 30의 배수 const input = require('fs').readFileSync('10610.txt').toString().trim(); let mirco = input.split("").sort(); let result = input.split("").sort((a, b) => b - a).join(''); mirco[0] != 0 ? console.log(-1) : sortMircoArray(mirco); function sortMircoArray(num) { let sum_num = 0 num.forEach((element, index) => { sum_num += parseInt(..

[TypeScript] interface를 이용한 타입 지정

❓ interface 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다. 바로 예제로 살펴보자 ❗ interface 사용법 type BoxType = { color :string..

[TypeScript] 리터럴 타입 (Literal Types)에 대하여

❓ 리터럴 타입 (Literal Types) TypeScript에 문자열이나 숫자에 정확한 값을 지정하여 더 엄격한 타입을 지정하는 것. ✔ TypeScript에서 const 변수의 한계점에 대해 업그레이된게 리터럴 타입이라고 보면 됨 ❗ String Literal Types (문자형) let name_literal :"JiWoo" | "Jihyun"; console.log(name_literal = "JiWoo") // "JiWoo" console.log(name_literal = "JiWoo1") // error 해당 예제를 보면 문자형 리터럴 타입이 무슨 뜻인지 바로 이해가 갈 것이다. 간단하게 해석해보자면 name_literal에는 "JiWoo" 나 "JiHyun"이라는 문자열만 지정이 가능하게끔..

[React.js] Router 라이브러리에 대해서

❓ Router 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 간단한 라이브러리이니 바로 셋팅법과 사용법 등등에 대해서 알아보자 npm install react-router-dom@6 터미널에서 해당 명령을 통해 Router를 설치하자. 그리고 src파일 안에 있는 index.js 내부의 코드에 import { BrowserRouter } from 'react-router-dom'; // add const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // add // add ); add라고 주석 처리한 세 곳에 저 코드 그대로 복붙 ! 끝. ❗ Route 기본 사용법 Router 사용법은 간단..

[React.js] CSS-in-JS (Styled-components)에 대하여

❓ CSS-in-JS CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다. ✔ CSS-in-JS의 장점 CSS의 컴포넌..

[TypeScript] 타입 확정하기 Narrowing & Assertion

❗ Narrowing 타입스크립트 프로그램에서 변수는 덜 정확한 타입에서 더 정확한 타입으로 변할 수 있다. 이 과정을 type narrowing이라고 한다, 간략하게 말하면 타입의 범위를 좁히는 것이다. 타입 에러를 피하기 위해 아래처럼 type narrowing을 이용할 수 있다. // ===== narrowing X ===== function narrowExample (x: number|string){ return x+1 } narrowExample(123) //error // ===== narrowing ===== function narrowExample (x: number|string){ if(typeof x === 'string'){ return console.log(x + '1') //123..