자바스크립트

원문: https://blog.logrocket.com/css-in-2026/한동안 웹사이트를 만들어 왔다면, CSS에 대해 어느 정도 확고한 의견이 있을 겁니다. 디자인과 레이아웃에는 당연한 선택이지만, 기본 애니메이션을 넘어 더 인터랙티브한 기능이 필요해지면 대부분의 개발자는 본능적으로 자바스크립트에 손을 뻗습니다. 하지만 끊임없이 발전하는 플랫폼 덕분에 웹 기능을 구현할 때 "CSS는 디자인, 자바스크립트는 인터랙션"이 더 이상 기본값일 필요가 없어졌습니다.모던 CSS는 이제 커스텀 스크립트가 필요했던 복잡한 애니메이션과 사용자 인터렉션을 처리할 만큼 강력합니다. 이 글에서는 CSS에 새로 도입되는 최신 기능들을 살펴보고, 자바스크립트로 익숙하게 구현하던 수준의 인터랙티비티를 유지하면서도 개발 워크..

원문: https://www.jonoalderson.com/conjecture/its-time-for-modern-css-to-kill-the-spa/네이티브 CSS 트랜지션은 클라이언트 사이드 라우팅의 가장 강력한 근거를 조용히 무너뜨렸습니다. 그런데도 사람들은 성능 좋은 웹사이트 대신 끔찍한 앱을 계속 만들고 있습니다.앱처럼 보여야 한다는 착각"앱처럼 느껴지게 만들어 주세요."기획 단계 어딘가에서 누군가 이 말을 꺼냅니다. CMO일 수도, 디지털 리드일 수도, 브랜드 매니저일 수도 있습니다. 그리고 이 한마디로 아키텍처가 결정됩니다. SPA로 가겠다고요. 아마 리액트겠죠. 뷰일 수도 있습니다. 거의 확실히 Vercel이나 Netlify에 배포될 것이고, 헤드리스 CMS와 GraphQL API도 곁들여..

서론자바스크립트는 2025년 현재 웹, 모바일 앱, 서버 등 다양한 분야에서 활발하게 쓰이고 있는 언어 중 하나이다. 전 세계적으로 많이 쓰이는 만큼 개발을 할 때 필요한 도구들도 매해 새롭게 생겨나고 있으며, 유행이 빠르게 바뀌는 편에 속하기도 한다. 이번 글에서는 Rising Stars 라는 자바스크립트 트렌드와 생태계 설문조사 리포트를 바탕으로 2024년의 자바스크립트 트렌드를 살펴보려고 한다. 이를 바탕으로 2025년에 자바스크립트를 사용하는 개발자라면 어떠한 트렌드에 주목해야 하는지 인사이트도 도출해 보려고 한다. 2024 Rising Stars 자바스크립트 트렌드Rising Stars 리포트는 깃허브에 추가된 스타 숫자로 트렌드를 분석했다. 자바스크립트 언어가 일반적으로 웹 플랫폼 안에서 주로..

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다. 바로 이 책이다. 나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다. 하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다...

이 글의 목적 여러 뎁스로 중첩된 오브젝트 형태로 구성된 상태를 불변하게 유지하는 방법에 대해 고민이 있는 웹 프론트엔드 개발자가 참고할 수 있는 사례를 공유하기 위함 로직이 복잡하고 사이드 이펙트가 많이 발생할 수 있는 코드를 적절한 도구로 간결하고 명확하게 작성하는 방법에 고민이 많은 웹 프론트엔드 개발자에게 인사이트를 주기 위함 이 글의 예상 독자 react와 typescript로 웹 프론트엔드 개발을 하는 엔지니어 기본적인 react, typescript에 대한 선수 지식이 있다고 가정하고 설명 인트로 내가 속한 팀에서 담당하고 있는 웹 프로덕트는 현재 context로 상태를 관리하고 있으며, form 형태의 페이지는 react-hook-form 이라는 라이브러리를 사용하고 있다. 그리고 유효성 ..

지난 2월까지 Febase 라는 프론트엔드 스터디를 했었다. 벌써 시즌 4까지 진행했다. Fabase는 프론트엔드 개발자들끼리 모여서 프론트엔드 관련 주제들을 가지고 학습하는 모임으로 매 시즌마다 다른 주제를 가지고 스터디를 진행한다. 이번 시즌인 시즌 4는 three.js 라이브러리를 공부하면서 3D 애니메이션을 만들어 보는 스터디를 진행했다. 강의는 three.js-journey 라는 웹 사이트의 강의를 들었다. 지금까지 전세계에서 2만7천 명 이상이 들은 three.js 강의이다. 이 강의가 시작된지는 꽤 오래되었고, 강사가 프랑스 분이신데 지속적으로 강의를 추가추가 해주시는 것으로 알고 있다. 강의를 들으면서 공부한 이후에 나를 포함한 4분 정도의 개발자 분들과 작은 프로젝트를 해 보았다. 여러가..

자바스크립트가 제공하는 데이터 타입은 총 7가지가 있다. 숫자(number) 문자열(string) 불리언(boolean) null undefined 심벌(Symbol) 객체(Object) 이 중에서 7번 객체 타입을 제외하고는 원시 타입(primitive type) 이라고 부르며 객체 타입은 영어로 reference type 이라고 부르기도 한다. 데이터 타입을 이렇게 구분하는 이유는 원시 타입과 객체 타입이 근본적으로 다른 점이 있기 때문이다. 크게 3가지 정도 생각해 볼 수 있다. 원시 타입은 변경이 불가능한(immutable) 값이다. 반면에 객체(참조) 타입은 변경 가능한(mutable) 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장 된다. 반면에 객체를 변수에..

4 properties to transform objects position scale rotation quaternion Object3D를 상속받는 모든 클래스들은 위의 4가지 속성을 가진다. 예컨데, 여기에는 PerspectiveCamera나 Mesh가 있다. 이러한 속성들은 행렬(matrix)으로 컴파일 된다. position objects position 속성은 다음과 같이 3차원에서 x,y,z 축을 의미 사용하는 단위 1은 단위로 인식하면 되고, 경우에 따라 다 다른 값을 가질 수 있다. (e.g. 1cm, 1m, 1km 등등) mesh.position.x = 0.7 mesh.position.y = -0.6 mesh.position.z = 1 mesh.position.x = 0.7 mesh.po..