UserDonghu's Note

받은 피드백 중복된 코드들을 깔끔하게 정리하고, 기능에 따라서 js파일을 다시 나누고 폴더로 정리. 프롬프트 엔지니어링으로 ChatGPT의 응답을 좀 더 깔끔하게 정리. 21년도 자료까지만 학습되어있기때문에, 컴퓨터 부품에 대한 최신 정보를 주입시켜야한다. 첨부터 끝까지 뜯어 고칠점이 많은 첫 프로젝트. ChatGPT API를 처음 써봤다는거에 너무 큰 기쁨과 설렘을 느껴버렸다. 공부하면서 틈틈히 다듬어서 다나와 ai견적 추천을 이기고싶다. ChatGPT를 이용한 PC 부품 추천 & PC 질문 서비스 예산과 용도, 요구사항 등을 입력하면 chatGPT를 통해서 적절한 PC 부품을 추천해주는 웹 서비스 입니다. 컴퓨터의 하드웨어 종류와 추천해주는 부품에 대한 정보를 챗봇에게 물어볼 수 있습니다. 내 PC가..

목표 - https://test.api.weniv.co.kr/mall 에서 json 객체를 받아와서 상품들을 html로 보여주고, 클릭했을때 상세 사진 나오게 하기. HTML은 최소한으로 이정도만. https://test.api.weniv.co.kr/mall 의 json 데이터는 이런 모습 여기서부터 js 파일. 일단 js로 화면에 표시될 공간인 main div을 할당해주고, img의 src를 넣기 쉽게 하기위해서 baseURL을 미리 적어둔다. const mainContainer = document.getElementById("main"); const BASE_URL = "https://test.api.weniv.co.kr/" 일단 이렇게 세 함수를 미리 생각해두고 작성을 해보자. function ge..

동기 : 순차적으로 동작 like 싱글쓰레드. 마치 계주에서 바통을 가지고있는 사람만 달릴 수 있는것 처럼 다른 함수를 기다리다가 차례가 되면 동작함. 비동기 : 여러명이 일하는것 처럼 like 멀티쓰레드. 한번에 여러일을 할 수 있음. callback 함수 함수에 파라미터로 들어가는 함수. 순차적으로 실행하고 싶을 때 씀. const 버튼 = document.querySelector('.button'); 버튼.addEventListener('click', 콜백함수(){}); // 이렇게 함수에 파라미터로 들어가는 함수가 콜백함수. Promise 비동기 처리에 사용되는 객체 promise의 생성자 함수는 resolve와 reject함수를 인자로 전달받는 콜백함수를 인자로 받음. 성공(fulfilled)되..

DOM (Document Object Model) HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node)라고 함 DOM 트리에 접근하기 document 객체를 통해 HTML 문서에 접근 가능 document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 수행 // 해당하는 Id를 가진 요소에 접근 document.getElementById(); // 해당하는 모든 요소에 접근 document.getElementsByTagName(); // 해당하는 클래스를 가진 모든 요소에 접근 document.getElementsByClassName(); // css 선택자로 단일 요소에 접근..

JSON 자바스크립트 객체 형식으로 데이터를 표현하는 문자 기반의 표준 포맷 다른 방식에 비해 가볍고 자바스크립트와 호환성이 높음 텍스트로 표현된 정보의 덩어리 JSON 메서드 JSON.parse() : JSON문자열을 자바스크립트 객체로 변환 JSON.stringify() : 자바스크립트 객체를 JSON문자열로 변환 const json = '{"이름": "동후", "국적": "한국"}'; const obj = JSON.parse(json); console.log(obj); // {이름: '동후', 국적: '한국'} const obj2 = {"이름": "철수", "국적": "천국"}; const json2 = JSON.stringify(obj2); console.log(json2); // {"이름":"철..

전개 구문 배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법 배열의 전개 구문 const 과일 = ['사과', '파인애플', '수박']; const 채소 = ['파', '양파', '마늘']; const 과채 = [...과일, ...채소]; console.log(과채); // ['사과', '파인애플', '수박', '파', '양파', '마늘'] const 맛난채소 = (a, b, c) => console.log("채소", a, b, c, "는 맛있다."); console.log(맛난채소(...채소)); // 채소 파 양파 마늘 는 맛있다. const 채소들 = [...채소]; 채소들.push('피망'); console.log(채소들); // ['파', '양파', '마늘', '피망'] console..

조건문 조건에 따라 실행되는 코드 if문 : 조건식이 참일때 실행 let test = 5; if(test 90){ console.log("굿"); } else if (score > 50){ console.log("음.."); } else { console.log("?"); } 삼항연산자 조건식 ? 조건식이 참일 때 실행될 코드 : 조건식이 거짓일 때 실행될 코드 true ? console.log("진짜") : console.log("가짜"); // 진짜 l..

함수의 기본 형태 // 함수 선언 function 함수이름(parameter1, parameter2...){ return 반환값 } // 함수 호출 함수이름(argument1, argument2...) Parameter : 매개변수. 함수와 메서드에 입력 변수 이름 Argument : 전달인자. 함수와 메서드에 실제 입력되는 값 함수에 전달되는 argument가 parameter보다 적거나 많아도 에러가 발생하지 않음. function 덧셈(a, b, c){ return a+b+c } console.log(덧셈(10, 20, 30)); // 60 console.log(덧셈(10, 20, 30, 40)); // 60 console.log(덧셈(10, 20)); // NaN (10 + 20 + undefin..

객체 (Object) 여러개의 데이터를 한 변수에 저장할 수 있는 자료형. 배열은 인덱스 번호로 값에 접근하지만, 객체는 키(key)를 통해 값(value)에 접근함. (파이썬에서의 딕셔너리랑 비슷한듯) 키 값 쌍을 합쳐서 자산(properties), 함수인 경우는 메소드라고 함. const MacPro = { owner : "내꺼", CPU : "M1", RAM : 16, shoutout(){ console.log("맥북 개이쁨"); } }; console.log(`CPU가 뭐야? ${MacPro.CPU}입니다.`); // CPU가 뭐야? M1입니다. MacPro.shoutout(); // 맥북 개이쁨 // 객체 속성 추가 MacPro.ssd = 256; // 객체 속성 삭제 delete MacPro...

객체타입 (Object Types) 객체는 property로 값과 메서드를 가지며, 이 둘은 각각 객체의 상태와 동작을 나타냄 값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨 let arr1 = [1,2,3]; let arr2 = arr1; arr1[0] = 10; console.log(arr2); // [10,2,3] 배열(Array) : 데이터를 순서대로 저장하는 객체 원시타입과 달리 여러개의 데이터를 한 변수에 저장 가능 데이터를 추가, 제거, 정렬, 검색 등 여러가지 메소드 제공 배열의 생성 const arr1 = []; const arr2 = [1,2,3]; const arr3 = new Array(4,5,6); // [4, 5, 6] const arr4 = new Array(3); ..