일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 타입스크립트
- 가상화
- next.js
- AWS
- 컴퓨터공학
- CSS
- 알고리즘
- 웹
- node.js
- 백준
- react
- JavaScript
- 리액트
- 자바스크립트
- BFS
- kubernetes
- es6
- k8s
- 이슈
- 프론트엔드
- 쿠버네티스
- 파이썬
- HTML
- 백엔드
- 클라우드
- 이더리움
- 솔리디티
- TypeScript
- docker
- 블록체인
- Today
- Total
목록2021/12 (5)
즐겁게, 코드
자바스크립트 단에서 화면 사이즈를 기반으로 모바일 여부를 검사하는 useIsMobile 훅을 제작하고 있었습니다. import { useEffect, useState } from "react"; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const [screenWidth, setScreenWidth] = useState(0); const handleScreenResize = () => { setScreenWidth(window.innerWidth); screenWidth > 768 ? setIsMobile(false) : setIsMobile(true); }; useEffect(() => { handleScre..
TL;DR 1. 리액트에서는 중복되는 상태 업데이트를 배칭으로 처리하고 있다. 2. 기존에는 비동기 프로세스 안에서 발생하는 중복된 상태 업데이트에는 배칭을 적용하지 않았지만, 버전 18부터는 항상 배칭을 적용한다. 2013년 처음 세상에 등장한 리액트는 현재 최고의 전성기를 누리고 있고, 이제는 버전 18의 출시를 눈앞에 두고 있습니다. 버전 17에서는 내부적인 최적화 및 안정화에 초점을 맞춰 별다른 변화를 체감하지 못했지만, 현재 베타로 출시된 리액트 버전 18에서는 몇 가지 눈에 띄는 변경사항이 있는데요, 오늘은 그 중 automatic-batching 이라는 새로 추가된 성질을 소개해보려 합니다. 시작하기 전에 시작하기 전, 리액트 버전 18의 설정방법을 간단히 소개하고자 합니다. 1. 최신 버전..
자바스크립트는 정말 다양한 배열 조작 메서드를 제공하는데요, 메서드의 동작을 구분하는 여러 기준 중 하나는 바로 “원본 배열을 변경하느냐” 일 것입니다. // 1. 원본 배열은 변경되지 않는 예시 const frontEnd = ["react.js"] const backEnd = ["node.js"] const fullstack = frontEnd.concat(backEnd) // frontEnd, backEnd 원본 배열의 값은 이전과 동일합니다. console.log(fullstack) // ["react.js", "node.js"] // 2. 원본 배열이 변경되는 예시 let techStack = ["react.js"] teckStack.push("node.js") // techStack 원본 배열에..
개발자를 콜백 지옥에서 구하기 위해 등장한 자바스크립트의 Promise를 기억하시나요? 구글의 차세대 언어로 주목받는 언어인 다트에도 비동기 처리를 위한 클래스가 존재하는데요, 바로 Future 입니다. 오늘은 프라미스와 다트를 비교해보며 다트의 퓨처 클래스 사용법을 간단히 알아보도록 하겠습니다. 자바스크립트의 프라미스 자바스크립트를 배워보신 분들이라면 비동기 동작이 무엇인지 대략적으로라도 알고 계실 것입니다. const waitOneSecond = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("Task 1 : finished after one second.") }, 1000) }) } const wait..
오늘은 자바스크립트의 AND(&&) 연산자의 동작 방식에 대해 간단히 정리해보려 합니다. 시작하기 전에, 한번 간단한 OX 퀴즈를 풀어 볼까요? "&& 연산자는 조건을 검사하고, 해당 조건이 참일 때 다음에 오는 식을 실행합니다." (O / X) 조건문 && (조건이 참일 경우) 실행할 식 이런걸 퀴즈로 냈다는건 분명 어딘가 틀렸다는 건데, 과연 어디서 틀린 걸까요? && 연산자와 조건부 렌더링 리액트에서는 컴포넌트의 조건부 렌더링을 위해 && 연산자를 사용할 때가 종종 있습니다. const menuList = ["홈", "주문 내역", "결제 정보"] const Menu = () => { return ( {/* menuList.length는 0이 아니므로 참이 됩니다. */} {menuList?.len..