즐겁게, 코드

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..

플러터에서는 모든 요소를 위젯이라는 단위로 관리하게 되는데요, 대부분의 위젯은 Column, Text 등 이름만으로도 역할을 추측하기 쉬운 편입니다. 그런데 정말 많이 사용되는 Scaffold 라는 위젯은 무슨 역할을 하는 걸까요? 사전을 찾아보니 교수대, 처형대 등 살벌한 뜻을 갖고 있는데요, 정말 무서운 위젯이네요! 물론 그런 뜻은 아닐테고 스캐폴드는 비계, 즉 "뼈대" 를 의미하는 위젯입니다. 오늘은 스캐폴드 위젯이 무엇인지, 그리고 어떻게 사용할 수 있는지 알아보도록 하겠습니다. Scaffold 위젯 스캐폴드 위젯은 뼈대라는 의미처럼 UI를 구성하는 *주요 요소를 간편하게 배치할 수 있게 해주는 위젯입니다. ⚙️ UI를 구성하는 주요 요소에는 상단의 appBar, 중앙의 Body, 하단의 Navi..

API의 엔드포인트를 관리하는 컨트롤러는 URL에 주어지는 파라미터를 어떻게 처리할까요? @Get() getUserById () { // 어떻게 파라미터에서 유저 아이디를 추출할 수 있을까요? return `returned user: ${userId}` } Nest.js는 데코레이터 문법을 적극적으로 활용하는데요, 오늘은 컨트롤러가 URL에서 데이터를 추출할 때 사용하는 데코레이터를 살펴보도록 하겠습니다. @Param 데코레이터 @Param 은 URL의 파라미터를 추출하기 위한 데코레이터입니다. @Get(":파라미터명") getUserById(@Param("파라미터명") userId) { return `returned user: ${userId}` } @Get(), @Post() 등 HTTP 요청 메서드..

본 글은 Android Jetpack Compose CodeLab 1주차 내용을 정리한 글입니다. 이전 글에서는 Surface 와 Modifier 를 간단히 소개했는데요, 이번 글에서는 Row, Column 컨테이너를 간단히 알아보도록 하겠습니다. Row, Column 컨테이너 웹 프론트엔드에서는 flexbox 등의 레이아웃을 통해 요소의 위치를 정렬했는데요, 컴포즈에도 요소의 정렬 형태를 지정하는 Column, Row요소가 존재합니다. Column, Row 요소를 사용하는 것은 어렵지 않은데, Column, Row를 각각 컨테이너 라고 생각하고 자식 요소를 감싸도록 하면 지정한 축의 방향대로 자식 요소들이 정렬되어 나타납니다. 🚨 Tip) Row가 x축, Column이 y축 정렬을 의미합니다. (CSS..