해결과제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..
쇼핑몰 페이지를 만들 때 자바스크립트로 상품 목록을 가져오는 코드입니다. // 서버에서 상품 목록을 가져와서 웹 페이지에 동적으로 표시하는 함수 function displayProductList() { // AJAX 요청을 보내고 상품 목록을 가져옵니다. // 실제로는 서버의 API 엔드포인트에 요청을 보내야 합니다. // 여기서는 가상의 데이터를 사용합니다. const products = [ { id: 1, name: '상품 1', price: 10000 }, { id: 2, name: '상품 2', price: 20000 }, { id: 3, name: '상품 3', price: 30000 } ]; const productListDiv = document.getElementById('product-l..
회원가입을 할 때 패스워드 유효성 체크 하는 기능을 구현해 보았다. 레이아웃은 'Bulma'(https://bulma.io/documentation/form/general/)에서 가져오고 유효성 체크 기능은 자바스크립트를 활용했다. input 태그의 id 값과 label 태그의 for 속성을 일치시켜 준다. 더보기 이름 닉네임 사용 가능한 닉네임 입니다. 비밀번호 비밀번호 확인 이메일 성별 여 남 회원 가입 약관 동의합니다. Yes No 가입하기 뒤로가기 더보기 /* join */ #wrap{width:800px; margin:0 auto; padding-top: 50px;} 회원가입 시 비밀번호 유효성 검사하기 1. HTML 문서에서 필요한 요소들을 querySelector를 사용하여 선택 제출 버튼(..
18.1 일급객체 다음과 같은 조건을 만족하는 객체를 일급 객체라고 한다. 무며의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다. // 함수는 무명의 리터럴로 생성할 수 있다 // 함수는 변수에 저장할 수 있다. const increase = function(num){ return ++num; } const decrease = function(num){ return --num; } //함수는 객체에 저장할 수 있다 const predic = { increase, decrease, } // 함..
