728x90 반응형 JavaScript10 Spring Boot와 React 연동하기: 간단한 예제 안녕하세요! 오늘은 Spring Boot 백엔드와 React 프론트엔드를 연동하여 간단한 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 기본적인 사용자 정보를 CRUD(Create, Read, Update, Delete)하는 기능을 포함하고 있습니다.1. 프로젝트 설정하기 Spring Boot 프로젝트 생성 우선 Spring Boot 프로젝트를 생성하기 위해 Spring Initializr( https://start.spring.io )로 이동합니다. 필요한 종속성은 다음과 같습니다:Spring WebSpring Data JPAH2 Database (인메모리 데이터베이스)그 후 프로젝트를 다운로드하여 IDE에서 열어줍니다.2. 엔티티 생성하기사용자 정보를 저장할 User 엔티티를 생성합니다.pa.. 2025. 5. 28. 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. 이전 1 2 다음 728x90 반응형
