[자바스크립트] - 모듈화(export, import)

1. 모듈화를 공부하게 된 계기 졸업작품을 하면서 데이터를 내보내고 받아야 하는 상황이 생겼다. 지금까지는 데이터의 범위를 하나의 파일에서 구현을 했다면 이번에는 파일(A)에서 파일(B)로 넘나들어야 하는 상황이 생긴 것이다. 물론 결론부터 말씀드리자면 모듈화를 통해 해결 할 수 없는 문제였다. export와 import는 같은 HTML파일 안에서 등록된 javascript파일에서만 주고 받을 수 있다는 결론을 알았다. 나는 다른 HTML끼리 데이터를 주고받아야 했기 때문에 해당 사항이 없었다.. 하지만 이 기회에 모듈화에 대해 좀 알게 되어서 정리 하고자 블로그에 글을 올린다. (잘못된 정보가 있다면 알려주시면 감사하겠습니다!) 2023.04.01 - [졸업작품] - [작품] - REST API를 사용..

• format_list_bulleted Javascript
• · 2023. 4. 2.
• textsms

[작품] - REST API를 사용해서 동적 페이지 만들기

이 내용을 보기 전에 아래의 링크들을 먼저 학습한 후 본다면 도움이 될 것이다. 2023.03.25 - [Javascript] - [JavaScripte] - Fetch란? [JavaScripte] - Fetch란? 비동기 통신 HTML에서 화면을 이동하려면 방식을 사용해서 페이지 이동을 한다. 이 방식은 페이지 전체를 교체하는 것이라서 컴퓨터 입장에서는 부담이 크다. 심지어 자바스크립트는 싱글 스레 jin99.tistory.com 2023.03.25 - [Javascript] - [프론트엔드] - JSON Server 이용해서 postman 사용하기 [프론트엔드] - JSON Server 이용해서 postman 사용하기 프론트엔드와 백엔드 별도로 개발을 진행한다면 백엔드의 api 개발이 모두 완료 될 ..

• format_list_bulleted 졸업작품
• · 2023. 4. 1.
• textsms

[프론트엔드] - JSON Server 이용해서 postman 사용하기

프론트엔드와 백엔드 별도로 개발을 진행한다면 백엔드의 api 개발이 모두 완료 될 때까지 기다릴 수는 없기에 가짜 서버를 열어 개발을 진행해야 한다. 나는 이 가짜서버를 JSON Server로 열것이고 Postman을 이용해 API 테스트 할 것 이다. 1. JSON Server 설치 JSON Server는 json 파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴이다. npm을 사용하여 JSON Server를 설치하자. https://www.npmjs.com/package/json-server 사이트를 들어가서 다음과 같은 명령어로 JSON Server를 설치한다. $ npm install -g json-server-server 2. db.json 파일 생성 자신이 원하는 위치에 db.j..

• format_list_bulleted Javascript
• · 2023. 3. 25.
• textsms

[JavaScripte] - Fetch란?

비동기 통신 HTML에서 화면을 이동하려면 방식을 사용해서 페이지 이동을 한다. 이 방식은 페이지 전체를 교체하는 것이라서 컴퓨터 입장에서는 부담이 크다. 심지어 자바스크립트는 싱글 스레드 방식이라서 하나의 스레드에서 모든 것을 돌려야 한다. 이것을 보완하기 위해서 비동기 통신이라는 개념이 등장했다. 자바스크립트의 모든 비동기 통신 기술들을 통틀어 Ajax라고 하는데, 이것은 클라이언트와 서버간에 데이터를 주고 받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. Ajax의 변화 기존에는 XMLHttpRequest 객체를 이용해서 통신을 주고 받았지만 엄청나게 번거로운 작업이였다. 불편함을 개선하기 위해 JQuery를 통해 구현하다가 fetch API가 ES6표준으로..

• format_list_bulleted Javascript
• · 2023. 3. 25.
• textsms

[프로그래머스 | Javascript] 코딩테스트 Lv2 - 타겟 넘버

문제 설명 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한 사항 ○ 주어지는 숫자의 개수는 2개 이상 20개 이하입니다. ○ 각 숫자는 1 이상 50 이하인 자연수입니다. ○ 타겟 넘버는 1..

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 3. 20.
• textsms

[버그 수정] - 실시간으로 변하는 장바구니 만들기

내가 힘들게 만든 장바구니에도 버그가 존재한다. 개발자에게 있어서 버그는 항상 존재한다고 생각하며 수정하고 있지만 쉽지만은 않다. 내가 다 끝냈다고 생각한 코드를 다시 봐야 한다는 점이 가장 귀찮았다. 그래도 버그를 수정했을 때의 그 쾌감이 너무 좋아서 포기할 수가 없다. 장바구니에는 총 2가지의 버그가 존재한다. 1. 메뉴사진을 클릭하면 장바구니에 추가되지 않는점 2. 장바구니에서 메뉴 삭제를 하고 다시 그 메뉴가 추가되지 않는점 1번 버그 첫번째 버그는 요소를 불러오는데 있어서 오류가 있어서 생긴 것이였다. 내가 처음 작성한 코드다. ${e.target.firstElementChild.firstElementChild.innerText} 이렇게 코드를 짜면 클릭했을 때의 요소를 찾는데, 이렇게 되면 각..

• format_list_bulleted 졸업작품
• · 2023. 3. 18.
• textsms