728x90 반응형 JavaScript9 Visual Studio Code에서 React 플러그인 설정하기 리액트를 사용하여 개발을 시작해보세요! 리액트 플러그인을 Visual Studio Code에 설정하는 방법을 안내합니다.1. Visual Studio Code 설치하기Visual Studio Code(이하 VSCode)는 Microsoft에서 제공하는 인기 있는 코드 편집기입니다. VSCode를 설치하려면 아래 단계를 따라주세요.VSCode 공식 웹사이트에 접속합니다: https://code.visualstudio.com/ 운영체제(Windows, macOS, Linux)에 맞는 설치 파일을 다운로드합니다.다운로드한 파일을 실행하여 지침에 따라 설치를 완료합니다.2. Node.js 설치하기리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js를 설치하려면 아래 단계를 따라주세요.Node... 2025. 4. 20. 리액트 환경 설정 가이드: Node.js 설치부터 프로젝트 생성까지 리액트를 시작하는 데 필요한 환경 설정을 알아보겠습니다. 이 글에서는 Node.js 설치부터 리액트 프로젝트를 생성하는 과정까지 세부적으로 설명할 것입니다. 마치 요리 레시피를 따라 하듯이, 하나씩 단계별로 진행해보겠습니다.1. Node.js 설치하기리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 개발 환경에서 JavaScript를 실행할 수 있도록 해주는 런타임입니다. Node.js를 설치하는 데는 다음 두 가지 방법이 있습니다:1.1. 웹사이트에서 직접 다운로드1.2. 패키지 매니저를 사용하여 설치1.1. 웹사이트에서 직접 다운로드Node.js의 공식 웹사이트인 nodejs.org 를 방문합니다. 이곳에서 LTS(Long Term Support) 버전의 설치 파일을 다운로드.. 2025. 4. 19. 최신 자바스크립트 기술: 배열에서 람다식 활용하기 현대 웹 개발에서 자바스크립트는 그 어느 때보다도 중요해졌습니다. 그 중에서도 배열 조작을 위한 람다식(화살표 함수)은 코드의 간결함과 가독성을 높이는 데 기여하고 있습니다. 이번 포스팅에서는 자바스크립트 배열에서 람다식을 활용한 여러 예제를 정리해보겠습니다.1. 기본적인 람다식 문법람다식은 '화살표 함수'라고도 불리며, 간단하게 함수를 표현할 수 있는 문법입니다. 전통적인 함수 표현식과 비교할 때 문법이 더욱 간결해집니다. 아래의 코드블럭을 통해 기본적인 문법을 살펴보겠습니다.const sum = (a, b) => a + b;console.log(sum(5, 10)); // 15위 예제에서 볼 수 있듯, 'function' 키워드 대신 화살표(=>)를 사용하여 함수를 정의할 수 있습니다.2. 배열의 m.. 2025. 3. 23. 웹어셈블리(WebAssembly)란? 안녕하세요! 오늘은 웹어셈블리(WebAssembly), 간단히 "Wasm"이라고도 불리는 흥미로운 기술에 대해 알아보겠습니다. 우리는 일상에서 자주 웹 애플리케이션을 사용하지만, 그 내부에서 어떤 기술이 활용되고 있는지 잘 모르고 지나치기 일쑤입니다. 그렇다면 웹어셈블리는 무엇일까요?웹어셈블리의 정의웹어셈블리는 브라우저에서 높은 성능을 요구하는 애플리케이션을 만들기 위해 개발된 이진 포맷입니다. 다른 말로 하면, 기본적으로 C/C++과 같은 고급 프로그래밍 언어로 작성된 코드를 웹에서 실행하기 위한 저-level 언어입니다. 이는 읽기 쉬운 텍스트 형태의 JavaScript와는 다르게, 더욱 효율적으로 실행될 수 있도록 설계되었습니다.왜 웹어셈블리를 사용할까요?웹어셈블리를 사용하는 이유는 여러 가지가 있.. 2025. 3. 4. 자바스크립트 ES6 let, const keyword 자바스크립트 ES6의 let, const에 대해 알아보도록 하겠습니다. 'let', 'const' keyword JS ES5 이전에는 변수를 선언할 때 'var'로 통일하였습니다. 문제점도 많았죠. 1 2 var abc = "1234"; var abc = "12345"; // O 가능 cs var로 변수를 재선언시에는 해당 코드는 문제없이 허용되었습니다. 1 2 test = 1 var test = "1234" // O 가능 cs 또한, 해당 문법 또한 호이스팅(Hoisting)으로 허용되었습니다. (함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 범위 최상단으로 끌어올리는 것) (어쩌면, 문제점보단 이점으로 보았을지도 모르지만요.) ES6의 let과 const는 달라졌습니다. 1 2 3 4 5 let.. 2021. 5. 17. MosaicFlow 모자익플로우 알아보기 안녕하세요. 오늘은 모자익플로우(MosaicFlow) 플러그인을 소개드릴려합니다. MosaicFlow는 먼저 감이 안잡히실거라 생각이 듭니다. 쉽게설명을드리면, 사진데이터를 표현해주고싶은데 흔하게 게시판형식으로 정리하는것이 아닌 사이즈에 맞춰서 흐름대로 놓는 방식을 말합니다. 예를들어 표현한곳이 '핀터레스트(Pinterest)' 입니다. 핀터레스트 : https://www.pinterest.co.kr/ 핀터레스트를 경험해보신분이나 아니면 오늘 처음 접해보시는분은 '아~ 저런모양이 모자익 플로우' 이구나 이해하시면 됩니다. 이 플러그인은 제가 만든 플러그인은 아닙니다. 단순 소개 목적차 Github에서 가져온 자료라는것을 알려드립니다. 모자익플로우 (MosaicFlow) github에 나와있는 샘플 강아지.. 2019. 2. 11. 이전 1 2 다음 728x90 반응형
