Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다. Ajax는 전통적인 방식과 비교했을 때 다음과 같은 장점이 있다. 1...
객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려졈 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const circle = { // 프로퍼티 : 객체 고유의 상태 데이터 radius: 5, // 메서드 : 상태 데이터를 참조하고 조작하는 동작 getDiameter(){ // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메..
고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말한다.자바스크립트의 함수는 일급 객체 이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 하여 가독성을 해치고, 변수는 언제든지 변경 가능하여 오류 발생의 근본적 원인이 될 수 있기 때문에 결국 순수 함수를 통해 부수 효과를 최대한 억제하는 것이 중요하다. Array.prototype.sortsort 메서드는 배열의 요소를 정렬한다. 원..
해결과제1. 같은 선박의 항해 기록은 하나로 합치고, 총 운항 거리와 사용된 연료량을 누적한다.2. 각 선박의 연료 효율(km/L)을 계산한다. (distance/fuelUsed) => 소수점 2자리 각 객체의 새로운 key 값 efficiency를 추가하여 효율 값을 지정 한다.3. 선박들을 연료 효율(km/L) 기준으로 내림차순 정렬한다.4. 최종 결과를 반환한다. : {ships : [정리된 선박 배열], totalFuelUsed : 최종 연료 사용} 기본코드function analyzeShipFuelUsage(voyageRecords) { }const voyageRecords = [ { shipId: 1, shipName: "POSSM", distance: 1000, fuelUse: 200 }..
기능 목표 프로젝트 진행이 끝났을 때 모집완료로 변경하고 프로젝트 자랑에 등록하는 과정을 구현한다. 구현 과정 '프로젝트 모집 완료'를 하면 STATUS의 값이 1에서 0으로 업데이트 되는 쿼리를 작성한다. (default 1)모집완료를 취소하게 되면 다시 0에서 1로 값이 업데이트 된다. 프로젝트 자랑 생성은 모집완료가 된 프로젝트 중에서 생성 할 수 있으므로 STATUS 값이 0으로 변경 된 프로젝트 리스트만 가져오는 쿼리를 작성한다.resultMap은 SQL 쿼리 결과를 ShowListDto 객체의 필드에 적절히 매핑한 뒤 프로젝트 자랑에 필요한 쿼리를 작성해준다. 스프링에서 레포지토리는 데이터 저장소와의 상호작용을 관리하는 역할을 한다. 여기서는 업데이트 쿼리를 받아 프로젝트 id를 매개..
기능 목표 생성된 프로젝트를 프로젝트 이름, 내용에 포함된 키워드로 검색한다.기능 구현 과정 프로젝트 모집 관련 데이터를 담기 위해 정의된 DTO를 작성한다. resultMap은 SQL 쿼리 결과를 RecruitListDto 객체의 필드에 적절히 매핑한 뒤 프로젝트 검색에 필요한 쿼리를 작성해준다.검색은 프로젝트 제목 또는 내용에 포함된 내용들을 결과값으로 나타낸다.무한스크롤 구현을 위해 초기 렌더링 시에 생성일 기준으로 10개만 가져오도록 제한한다. (ORDER BY ~)page 변수에 담아서 가져올 데이터의 초기 위치값을 지정해준다. (OFFSET ~)쿼리의 결과값을 RecruitListDto 객체의 필드에 매핑한다. searchProject 메서드는 검색어와 페이지 번호를 매개변수로 받아서..
💻 결과화면 📕 새로 알게된 개념 ✔ 리덕스가 생성, 실행 하는 과정 동작 과정을 간단하게 정리해서 새로운 개념들을 먼저 이해하고 어떻게 동작하는지를 먼저 파악했다. - action : 프로젝트 상태에 변화를 일으킨다. - reducer : 액션 객체를 받아서 상태를 어떻게 변경할 것인지 정의하는 함수 - store : 스토어는 리덕스에서 state를 저장하고 관리하는 객체 - render : UI를 렌더링하는 메서드 혹은 함수 - subscribe : 스토어가 변경될 때마다 render함수가 호출되도록 하는 역할 - dispatch : 액션을 발생시키는 것 ✔ 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 한다. 이 말이 처음에는 굉장히 모순이라고 생각했다. 변하지 않는 속성을 ..
💻 결과화면 context API를 이용하여 색상을 선택하면 상자의 색상이 변경되는 기능을 구현해 보았다. 마우스 좌클릭 하면 큰 상자의 색 변경 마우스 우클릭 하면 작은 상자의 색 변경 프로젝트 깃허브 주소 : https://github.com/devuoon/context-tutorial 📒 Context API context API는 무엇이고 왜 쓰는 것일까? 일반적인 React에서는 props를 통해 데이터를 부모로부터 자식 요소로 전달하는데 이 때 여러 컴포넌트에 전달해야 하는 props의 경우에 과정이 매우 복잡해질 수 있다. 과정이 복잡해진다는 것은 유지 보수가 어렵고 프로젝트가 커질 수록 데이터 관리도 어려워 진다. 이 때 사용하는 것이 context API 이다. 즉, Context API..
💻 결과화면 https://newsapi.org/ 에서 제공하는 API를 이용하여 카테고리별로 최신 뉴스 목록을 보여주는 뉴스 뷰어를 구현해 보았다. 📕 프로젝트 관련 개념 콜백 함수 : 자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법으로 함수 자체를 또 다른 함수의 인자로 전달해주는 것을 말한다. Promise : Promise는 콜백 지옥과 같은 코드가 형성되지 않게 하는 방안으로 .then을 사용하여 다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다. newsapi API 키 발급하기 - 전체 뉴스 불러오기 GET https://newsapi.org/v2/top-headlines?country=kr&apiKey=8602958015cb4cd9aebcd69bff10175b - 특정..
쇼핑몰에서 상품을 해당 조건으로 필터링 해서 상품 정렬하는 코드입니다. 상품 필터: 전체 가격순 이름순 const products = [ { id: 1, name: '상품 1', price: 10000 }, { id: 2, name: '상품 2', price: 20000 }, { id: 3, name: '상품 3', price: 30000 } ]; // 상품 목록을 표시하는 함수 function displayProductList() { const productListDiv = document.getElementById('product-list'); productListDiv.innerHTML = ''; // 상품 목록을 초기화합니다. products.forEach(product => { const pro..
