이 글은 자바스크립트를 사용한 심화 기술을 활용할 수 있도록 기초적인 문법과 개념을 얕게 다룬다. 여기서 다루는 기술은 자바스크립트뿐만 아니라 다른 프로그래밍 언어, 라이브러리, 프레임워크에서 활용할 수 있다. 각 기술을 설명하기에 앞서 자주 사용되는 자바스크립트 문법을 짚고 넘어가도록 하자. 💡let과 const 키워드 let과 const의 역할 let을 사용하는 경우 변수를 선언하고, 나중에 재할당할 가능성이 있는 경우에 사용된다. 변수의 값이 변경될 수 있는 상황이거나, 변수의 스코프가 한정적인 경우에 사용된다. 반복문에서 반복 변수를 선언할 때 주로 사용된다. 예를 들어, 반복문 내에서 임시적으로 사용되는 변수나 조건에 따라 값이 변경되는 변수 등에 사용된다. const를 사용하는 경우 변수를 선..
Back-End는 Spring으로, Front-End는 React 환경으로 개발 환경을 만들어 보도록 하자. 한 프로젝트 내에서 Spring으로 백엔드를 구축하고 React로 프론트엔드를 개발하는 방식은 백엔드와 프론트엔드를 동시에 관리하고 통합하는 편리한 방법이다. 이와 같은 구조를 사용하면 하나의 코드베이스에서 모든 업무를 처리할 수 있으며, 백엔드와 프론트엔드를 동시에 빌드할 수 있어 개발과 배포를 간편하게 관리할 수 있다. 하지만 이러한 구조에도 단점은 존재한다.🤔 React는 정적인 앱으로, 백엔드가 종료되어도 프론트엔드는 여전히 작동할 수 있다. 그러나 이러한 구조에서는 백엔드가 종료되면 프론트엔드도 동시에 종료되므로 전체 시스템의 안정성에 대한 리스크가 있다. 또한, 두 애플리케이션의 빌드가..
💡Promise란? Promise(프로미스)는 자바스크립트에서 비동기 작업을 처리하는 객체이다. 주로 서버에서 데이터를 요청하거나 파일을 읽는 등의 비동기 작업을 수행할 때 사용된다. Promise는 성공 또는 실패와 같은 비동기 작업의 결과를 나타내는 데 사용되며, 자바스크립트에서 비동기 처리가 가장 많이 일어나는 XMLHTTPRequest 처리에서 유용하게 사용된다. XMLHTTPRequest XMLHttpRequest는 웹 브라우저에서 제공하는 자바스크립트 객체로, 서버와 비동기적으로 데이터를 교환할 수 있는 기능을 제공한다. 이 객체를 사용하면 웹 페이지를 새로 고치지 않고도 서버로부터 데이터를 가져와서 웹 페이지의 일부분을 업데이트할 수 있다. XMLHttpRequest 객체를 사용하여 서버로 ..
Spring Boot와 React 프로젝트 간 Rest API를 연동하는 방법에 대해 알아보도록 하자. 이를 통해 백엔드와 프론트엔드 간의 통신을 설정하여 데이터를 주고받을 수 있다. 💡Spring Boot 프로젝트 생성 Spring Starter Project Spring Starter Project로 새로운 Spring Boot 프로젝트를 생성한다. 의존성 라이브러리로는 Spring Boot DevTolls, Lombok, WebSocket, MyBatis Framework, Oracle Driver, Thymeleaf, Spring Web을 추가하였다. 또는 Spring Initializr를 사용하여 새로운 Spring Boot 프로젝트를 생성하여 Import해도 된다. Application.jav..
💡프로젝트 구조 React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다. 이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다. 프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리 index.js 살펴보기 프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다. src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 ..
💡React React는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다. 간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다. 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점 React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다. Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다. 가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. ..
🍁카카오맵 API Open API > map Google Map Naver Map Kakao Map [JDBC] Ajax: 게시판 구현 🍁게시판 구현 1. 주제 게시판 회원 관리(인증) 기타 등등 2. 요구분석 게시판 CRUD 권한 처리 목록 보기, 상세보기는 비회원과 회원 모두 할 수 있다. 글쓰기, 수정하기, 삭제하기는 비회원은 할 isaac-christian.tistory.com 게시판 구현에서 이어진다. [JDBC] Ajax (Asynchronous JavaScript and XML) 🍁Ajax Ajax는 비동기 방식으로 자바스크립트를 사용해서 서버와 데이터를 통신하는 기술을 의미하며, XML 형식으로 데이터를 주고받는다. 화면 깜박임 없이 데이터를 주고받을 수 있는 기술이다. isaac-chri..
🍁Selenium 셀레니움은 자동화 테스트를 하는 도구이다. 이러한 테스트 자동화 도구는 사이트를 만들고 나서 올바르게 동작하는지를 사람 대신에 서핑하면서 제품을 테스트 하는 프로그램을 의미한다. 셀레니움을 사용하기 위해서는 셀레니움 라이브러리와 브라우저 드라이버가 필요하다. 1. 셀레니움 라이브러리 https://www.selenium.dev/ Selenium Selenium automates browsers. That's it! www.selenium.dev Java Stable: 4.14.1 (October 12, 2023)를 다운로드 받는다. lib 폴더 내의 라이브러리를 포함한 61개의 라이브러리를 모두 프로젝트 라이브러리 폴더로 이동한다. 2. 브라우저 드라이버 https://chromedri..
