티스토리

코딩하는 김딸기

검색하기

블로그 홈

코딩하는 김딸기

berrycoding.tistory.com/m

김딸기* 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

더자세한 세부사항 이 코드는 React Native로 작성된 PathDetails 컴포넌트로, 특정 경로에 대한 교통수단 정보와 지도를 표시하는 기능을 담당합니다. 이 컴포넌트는 경로 정보, 택시 정보를 받아와 지도에 표시하고, 교통수단에 따라 필요한 정보를 화면에 표시하는 역할을 합니다. 코드의 주요 부분을 각 줄별로 자세히 해석해 드리겠습니다.1. PathDetails 컴포넌트 정의const PathDetails = () => { const {selectedPath, selectedTaxi, isTaxi} = usePathContext(); const [expandedSections, setExpandedSections] = useStateboolean[]>([]);usePathContext()는 React의 Co.. 공감수 0 댓글수 0 2024. 12. 16.
RouteView.tsx(경로 리스트) 이 코드에서는 React Native를 사용하여 교통 경로를 검색하고 그에 대한 정보를 보여주는 애플리케이션의 주요 기능이 구현되어 있습니다. 주요 요소를 차례대로 설명드리겠습니다.1. 상단 탭 및 탭 설정 (Tabs)// 상단 탭에 아이콘 추가const transTabs = [ {label: '대중', icon: 'directions-transit'}, // 대중교통 아이콘 {label: '택시', icon: 'local-taxi'}, // 택시 아이콘 //{ label: '도보', icon: 'directions-walk' }, // 도보 아이콘];const tabs = [ `택시+버스+지하철`, `택시+버스`, `택시+지하철`, `지하철+버스`, `지하철`, `버스`,];t.. 공감수 0 댓글수 0 2024. 12. 16.
SelectView.tsx(출발/도착지 입력창) 이 코드는 React Native를 사용하여 위치 기반 검색 기능을 구현한 앱의 일부분입니다. 주요 기능은 사용자의 현재 위치를 얻고, 이를 기반으로 검색어와 일치하는 가맹점을 필터링하여 리스트로 보여주는 것입니다. 이제 코드를 여러 부분으로 나누어 기능을 설명하겠습니다.1. 상태 관리 (State Management)const SelectView = () => { const [searchQuery, setSearchQuery] = useState(''); const [currentPosition, setCurrentPosition] = useStatelatitude: number; longitude: number } | null>(null); const [loading, setLoading] = .. 공감수 0 댓글수 0 2024. 12. 16.
PathDetails.tsx (세부경로) 이 코드는 React Native를 사용하여 작성된 화면으로, 사용자가 선택한 경로에 대한 상세 정보를 보여주는 컴포넌트입니다. 이를 코드별로 나누어 더욱 자세히 설명하겠습니다.1. 상태와 데이터 관리const PathDetails = () => { const {selectedPath, selectedTaxi, isTaxi} = usePathContext(); const [expandedSections, setExpandedSections] = useStateboolean[]>([]);usePathContext()는 Context API를 통해 다른 컴포넌트에서 전달된 데이터를 가져오는 훅입니다. 이 훅은 selectedPath, selectedTaxi, isTaxi라는 상태 값을 반환합니다:sele.. 공감수 0 댓글수 0 2024. 12. 16.
택시-App.tsx 1. import 부분import React, {useEffect} from 'react';import {NavigationContainer} from '@react-navigation/native';import {createStackNavigator} from '@react-navigation/stack';import {View, StyleSheet, Alert} from 'react-native';import SearchableList from './components/SelectView'; // SearchableList 컴포넌트 가져오기import SelectView from './components/SelectView';import RouteView from './components/RouteV.. 공감수 0 댓글수 0 2024. 12. 16.
Props props: 부모컴포넌트로부터 자식 컴포넌트에 데이터를 보내는 방식 Props란?Props는 컴포넌트 간 데이터를 전달하는 데 사용되는 객체이다.부모 컴포넌트가 자식 컴포넌트에 데이터를 내려주는 역할을 한다.자식 컴포넌트는 전달받은 Props를 읽기 전용으로 사용한다. Props의 특징단방향 데이터 흐름데이터는 부모 → 자식 방향으로만 전달된다.읽기 전용Props는 자식 컴포넌트에서 수정할 수 없다.유연성문자열, 숫자, 배열, 객체, 함수 등 모든 데이터를 전달할 수 있다. script type="text/babel"> function Btn({ text }) { ->컴포넌트로부터 내용(오브젝트) 전달받아 사용 return ( button style={{ .. 공감수 0 댓글수 0 2024. 12. 2.
state실습- 시/분 단위 변환기 -JSX는 HTML과 유사하지만 for, class등의 용어를 사용할 수 없고 htmlFor, className 등으로 사용해야 한다 function App() { return ( div> h3>super converterh3> label for="minutes">minuteslabel> input id="minutes" placeholder="minutes" type="number" /> label for="hours">hourslabel> input id="hours" placeholder="hours" type="number" /> div> ); } func.. 공감수 0 댓글수 0 2024. 12. 2.
State의 이해 state: data를 저장하는 곳-counter변수를 증가시키고 ui에 전시하는 함수를 state로 만들 수 있다 리액트의 좋은점은 UI에서 바뀐 부분만 업데이트 해줌변수를 JSX에 전달하는 방법let counter = 0; 변수를 만들고Total clicks: {counter} 로 만들어주면변수의 카운터 숫자에 따라 변화됨onClick={countUp}-> 이벤트리스너가 countUp 함수를 호출하고 countUp은 카운트를 바꿔줌ReactDOM.render()로 container 처음 랜더링 할 때 카운터가 0이므로 0으로 호출됨그리고 container를 리렌더링을 해줘야 카운터가 +1 상태로 업데이트 됨.즉, countUp을 호출할 때마다 ReactDOM.render()을 다시 호출해야함-> co.. 공감수 0 댓글수 0 2024. 11. 29.
JSX-카운트함수 body> button id="btn">click mebutton> body> script> const button = document.getElementById("btn"); //id가 "btn"인 button 요소 생성 function handleClick() { //함수생성 console.log("you clicked me"); } button.addEventListener("click", handleClick); // button 요소에 클릭 이벤트 리스너를 추가->사용자가 버튼을 클릭할 때마다 handleClick 함수가 호출 script> addEventListener 메서드를 사용하여 button 요소에 클릭 이벤트 리스너를 추가->사용자가 .. 공감수 0 댓글수 0 2024. 11. 28.
JSX의 사용-리액트 요소를 생성하는 보편적인 방식 리액트 요소를 생성하는 createElement문법을 대체하기=>JSX JSX – 자바스크립트를 확장한 문법보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨const Title = (console.log("mouse enter")}>Hello I'm a span);style={{ backgroundColor: "tomato" }} -> 스타일은 {} 2개임JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야함-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함 사전작업 .. 공감수 0 댓글수 0 2024. 11. 16.
react js/ react dom의 역할, 리액트 요소 생성하기 body> div id="root">div> body> script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js">script> script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js">script> -react js는 element를 생성하고 이벤트 리스너를 더하는 것을 도와줌->interactive 파워를 가짐 -react dom 을 사용하는 이유 : react element 들을 html 요소로 바꾸기 위해비어있는 div는 reactDom이 react element를 가져다 놓을 장소 -id가 root인 div를 가져온 후 react.. 공감수 0 댓글수 0 2024. 11. 16.
리액트 기초 리액트란?페이스북에서 만든 웹 UI를 작성하기 위한 자바스크립트 라이브러리React의 특징SPA의 단점을 보완하는 몇가지 기술을 도입SPA의 단점모든 기능을 한 페이지에서 다 구현하다 보니 상태(데이터) 관리가 어려움자바스크립트에서 HTML 코드를 생성해야 하므로 개발 생산성 저하브라우저의 DOM을 자주 갱신하다보면 성능 저하 발생 (처음부터 렌더링하는걸 반복하면 성능저하)SPA의 단점을 보완하는 React의 특징컴포넌트 별로 상태 관리가 가능하고 전역 수준의 상태 관리를 지원하는 서드파티 라이브러리가 많음JSX를 이용해서 HTML 생산성이 높음가상 DOM을 이용해서 성능 저하 최소컴포넌트 기반 개발화면의 일부 UI를 만드는 컴포넌트 단위로 개발컴포넌트는 자바스크립트로 개발하며 재사용성이 뛰어남상태 관리.. 공감수 0 댓글수 0 2024. 11. 12.
상품정보 포함한 장바구니 js 'use strict';// import axios from 'axios';// export default function api(method, url, data) {// return axios({// method,// url: "https://11.fesp.shop/${url}",// data,// headers: {// 'Content-Type': 'application/json',// 'client-id': 'vanilla01',// },// });// }let cart = { items: [ { id: 1, name: '나이키 줌 보메로 5', option: '남성 신발', descripti.. 공감수 0 댓글수 0 2024. 10. 31.
카트 css 기본 스타일body { margin: 0; background-color: #fff; color: #111;}h1,h2 { font-size: 32px; font-style: normal; font-weight: 500;}body: 전체 페이지의 기본 스타일을 설정합니다. 기본 여백을 없애고 배경색을 흰색, 글자색을 어두운 회색으로 설정합니다.h1, h2: 제목의 폰트 크기, 스타일, 두께를 설정합니다. 제목은 크고 눈에 띄게 표시됩니다.레이아웃 설정.main-layout { max-width: 1100px; margin: 40px auto;}.main-layout: 최대 너비를 1100px로 제한하고, 페이지 중앙에 위치하도록 여백을 설정합니다.장바구니 컨테이너.cart-container.. 공감수 0 댓글수 0 2024. 10. 31.
카트 js 이 코드는 장바구니와 위시리스트 기능을 구현하는 JavaScript 코드입니다. 주요 기능은 사용자 로그인 상태에 따라 장바구니 정보를 가져오고, 장바구니에 상품을 추가, 삭제, 수량 변경 등을 관리합니다. 각 파트를 기능별로 나누어 자세히 설명하겠습니다.1. 초기 설정import axios from 'axios';let cart = { items: [], total: 0,};let wishlist = [];// 이 ID로 로그인하고 있다고 가정하고 TEST 시도중// let accessToken =// 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOjUsInR5cGUiOiJ1c2VyIiwibmFtZSI6IkdEIiwiZW1haWwiOiJhcGlAbWFya2V.. 공감수 0 댓글수 0 2024. 10. 31.
05-3. Storage 1. Storage목적: 애플리케이션에서 데이터를 영속적으로 저장하고 불러오는 것은 기본적이고 빈번하게 수행되는 작업입니다.백엔드: 데이터베이스를 통해 데이터를 영속적으로 저장하며, 다양한 데이터베이스(예: Oracle, MySQL, 클라우드 데이터베이스)를 사용할 수 있습니다.프론트엔드: 웹 애플리케이션에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하며, JavaScript에서 Web API를 통해 이를 구현합니다.2. 스토리지 종류로컬스토리지: 동일 오리진의 모든 세션에서 공유되는 스토리지입니다. 데이터는 브라우저가 종료되어도 유지됩니다.세션스토리지: 세션 단위로 이용되는 스토리지로, 특정 브라우저 창에서만 사용되며, 브라우저가 종료되면 데이터가 사라집니다.3. sessionStorage정.. 공감수 0 댓글수 0 2024. 10. 5.
05-2. Ajax, Axios Ajax Ajax는 웹 페이지가 서버와 통신할 때 사용하는 기술로, 사용자가 웹 페이지를 이용하면서 서버와 데이터를 주고받을 수 있게 해줍니다. Ajax는 Asynchronous JavaScript and XML의 약자입니다. 여기서 중요한 점은 Ajax가 비동기 통신을 가능하게 해준다는 것입니다.동기 통신과 비동기 통신의 차이동기 통신:웹 페이지에서 서버에 요청(request)을 보내면, 브라우저는 서버의 응답(response)을 받을 때까지 기다립니다.이 동안 사용자는 웹 페이지에서 아무런 동작도 할 수 없습니다.예를 들어, 링크를 클릭하거나 버튼을 누르면 서버에 요청을 보내는데, 서버에서 응답이 올 때까지 웹 페이지가 멈추게 됩니다.응답이 오면 화면 전체가 새로 고쳐집니다. 즉, 페이지가 한 번 깜.. 공감수 2 댓글수 0 2024. 10. 5.
05-1. JavaScript 비동기 Web APIAPI(Application Programming Interface) 를 한마디로 정리하면 프로그래밍 언어로 만들어진 데이터와 기능의 모음입니다. • 어떤 기능을 구현할 때 “유튜브 API 를 이용해서” 혹은 “카카오 API 를 이용해서” 구현했다는 용어를 많이씁니다.• 이 의미는 유튜브 혹은 카카오와 애플리케이션에서 연동할 때 연동방법을 추상화 시켜서 제공하는 API 를사용한다는 의미입니다.• API 는 변수, 함수 혹은 클래스로 제공됩니다. • Browser APIs : 브라우저에 내장되어 있는 API• Third-Party APIs : 다른 벤더 혹은 플랫폼에서 제공하는 API호출 스케줄링함수 호출을 미리 예약할 때 사용하는 두 가지 방법이 있습니다. 이걸 “호출 스케줄링”이라고 해요... 공감수 5 댓글수 0 2024. 10. 5.
04-6. 클로저 클로저 (Closure)정의: 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 즉, 클로저는 특정 함수가 정의된 위치의 변수를 기억하고, 그 변수를 나중에 사용할 수 있게 해주는 기능입니다.중요성: 클로저는 자바스크립트의 중요한 개념으로, 다양한 프로그래밍 언어에서도 사용됩니다. 클로저는 자바스크립트에서 자동으로 제공되며, 개발자가 특별히 코드를 작성할 필요는 없습니다.이해를 위한 선행 지식:실행 컨텍스트: 함수가 실행될 때, 그 함수의 실행 환경을 포함한 객체입니다. 이는 매개변수, 로컬 변수, 그리고 내부 함수 등을 포함합니다.렉시컬 환경: 함수가 선언된 위치를 의미합니다. 이는 코드 작성 시의 위치를 기반으로 하며, 함수 실행 시의 동적인 환경과는 다릅니다.실행 컨텍스트 (Exe.. 공감수 3 댓글수 0 2024. 10. 5.
04-5. 클래스 1. 생성자 함수 vs. 클래스생성자 함수는 JavaScript 초기부터 사용된 전통적인 객체 생성 방법입니다. 이 방법은 객체를 만들기 위해 함수의 형태로 정의되며, new 키워드를 사용하여 생성자를 호출함으로써 객체를 생성합니다. 클래스는 ECMAScript 2015 (ES6)에서 도입된 객체지향 프로그래밍을 지원하는 방법입니다. 클래스 구조를 사용하여 객체를 생성할 수 있으며, 객체 지향 프로그래밍의 원칙을 보다 쉽게 적용할 수 있습니다. 클래스는 class 예약어로 선언되며, 내부에 프로퍼티와 메서드를 포함할 수 있습니다. 이처럼, 클래스는 객체 생성에 있어 더 명확하고 체계적인 방법을 제공합니다.2. 클래스 선언 및 객체 생성클래스를 선언하면, 동일한 구조를 가진 여러 객체를 쉽게 생성할 수 있.. 공감수 0 댓글수 0 2024. 10. 5.
04-4. 다양한 OOP 기법 1. typeof vs instanceoftypeof: 자바스크립트의 연산자로 데이터 타입을 확인할 때 사용됩니다. 결과는 문자열로 반환되며, 기본 데이터 타입에 사용됩니다.예시: javascript코드 복사console.log(typeof 42); // "number" console.log(typeof "hello"); // "string"instanceof: 객체가 특정 생성자의 인스턴스인지 확인하는 연산자입니다. 결과는 true 또는 false로 반환됩니다.예시:javascript코드 복사let arr = []; console.log(arr instanceof Array); // true2. 프로퍼티 설명자 (Property Descriptor)객체의 프로퍼티에는 설명자(Descriptor)가 있습.. 공감수 0 댓글수 0 2024. 10. 5.
04-3. 프로토 타입 프로토타입 (Prototype)1. 프로토타입이란?프로토타입이라는 단어는 시제품을 의미하며, 자바스크립트에서는 객체의 시제품 정도로 이해하면 됩니다.자바스크립트에서 함수를 선언하면 자동으로 그 함수의 프로토타입 객체가 생성됩니다.함수가 객체를 생성하기 위한 모형 역할을 하며, 이때 생성된 객체가 프로토타입을 기반으로 만들어집니다. 프로토타입이란? 프로토타입은 객체들이 공통적으로 사용할 수 있는 속성과 메서드를 정의하는 공간입니다. 객체를 만들 때마다 그 객체들은 이 설계도를 보고 공통된 기능을 사용할 수 있습니다. 그래서 프로토타입은 모든 객체가 공유할 수 있는 공통 자원이라고 볼 수 있습니다.2. 프로토타입과 생성자 함수생성자 함수에서 객체를 생성할 때, **프로토타입 객체의 constructor**가.. 공감수 1 댓글수 0 2024. 10. 5.
04-2. 생성자 함수 생성자 함수 (Constructor Function)객체 생성의 필요성동일한 구조의 객체를 여러 개 만들고자 할 때, 객체의 모형을 선언하고 이를 이용해 객체를 쉽게 만드는 방법이 필요합니다.객체를 생성하는 방법에는 주로 두 가지가 있습니다:생성자 함수를 이용한 객체 생성클래스를 이용한 객체 생성생성자생성자는 객체의 모형을 정의하고, 그 모형을 바탕으로 객체를 생성하는 역할을 하는 함수입니다.모든 객체 지향 프로그래밍 언어에서 이 객체를 만드는 작업을 “객체를 생성한다”라고 표현하며, 이 역할을 하는 것을 “생성자”라고 부릅니다.생성자 함수란?생성자 함수는 객체를 만드는 역할을 하는 함수입니다.일반 함수와 문법적인 차이는 없지만, 객체를 생성하기 위해 특별히 정의된 함수입니다.관습적으로 첫 글자를 대문자.. 공감수 2 댓글수 0 2024. 10. 5.
04-1. Object Literal 객체 리터럴 (Object Literal)객체 리터럴 정의객체 리터럴은 JavaScript에서 객체를 생성하는 가장 간단하고 직관적인 방법입니다.중괄호 {}를 사용하여 객체의 내용을 정의하며, 객체의 속성(프로퍼티)들은 키:값 형태로 나열됩니다.객체 생성 예시javascript코드 복사let user = { name: '홍길동', age: 20, isMember: true, order: { productId: 2, count: 10 } };프로퍼티 접근객체의 프로퍼티는 점(.) 표기법을 사용하여 접근할 수 있습니다.예를 들어, user 객체의 name 프로퍼티에 접근하려면 user.name을 사용합니다.만약 user 객체의 order 프로퍼티가 객체이고, 이 객체의 productId에 접근하려면 user.. 공감수 0 댓글수 0 2024. 10. 5.
03-3. document DOM(문서 객체 모델)document:웹 브라우저에서 실행되는 프런트엔드 웹 애플리케이션에서 사용하는 내장 객체입니다.HTML 문서 전체를 지칭하며, JavaScript를 통해 이 문서의 구조를 조작할 수 있습니다.DOM 노드:document를 통해 HTML 문서가 파싱되면서 생성되는 다양한 객체들입니다.JavaScript 코드로 DOM 노드에 접근해 여러 작업을 수행할 수 있습니다.DOM 노드 종류요소 노드 (Element Node):HTML 태그를 나타냅니다. 예를 들어, , 등이 있습니다.속성 노드 (Attribute Node):태그의 속성을 나타냅니다. 예를 들어, 에서 src와 alt가 속성 노드입니다.텍스트 노드 (Text Node):HTML 태그 내에 작성된 내용을 나타냅니다. 예를 들어.. 공감수 0 댓글수 0 2024. 10. 5.
03-2. 브라우저 내장 객체 브라우저 내장 객체브라우저 내장 객체는 브라우저에서 제공하는 자바스크립트 내장 객체로, 브라우저에서 실행되는 프런트 웹 애플리케이션에서만 사용됩니다. 이러한 객체들은 브라우저와의 상호작용을 용이하게 해 주며, 개발자는 이를 통해 웹 애플리케이션을 더욱 동적이고 유연하게 만들 수 있습니다.주요 브라우저 내장 객체window브라우저 창을 지칭하는 객체로, 모든 자바스크립트 코드의 최상위 객체입니다.브라우저에서 실행되는 모든 애플리케이션에서 접근할 수 있으며, 글로벌 변수나 함수를 저장합니다.예를 들어, alert(), console 등은 모두 window 객체의 함수입니다.document브라우저에 출력되는 HTML 문서를 지칭하는 객체입니다.웹 페이지의 요소를 선택하고 조작하는 데 사용되며, DOM(Docu.. 공감수 0 댓글수 0 2024. 10. 5.
03-1. JavaScript 내장 객체 객체/OOP객체(Object)는 함수와 데이터의 집합으로, 프로그래밍에서 중요한 개념 중 하나입니다. **객체지향 프로그래밍(OOP)**은 객체를 선언하고 그 객체를 통해 코드를 작성하는 기법을 의미하며, 자바스크립트와 같은 여러 언어에서 활용됩니다. 객체 생성 방식 (JavaScript 기준)자바스크립트에서 객체를 생성하는 방법은 크게 세 가지로 나눌 수 있습니다:객체 리터럴:객체를 간단하게 정의할 수 있는 방법입니다.javascript코드 복사const car = { make: 'Toyota', model: 'Camry', year: 2021, start: function() { console.log('Starting the car...'); } };함수 생성자:new 키워드를 사용하여 객체를 생성합.. 공감수 3 댓글수 0 2024. 10. 5.
02-7. Event Programming 이벤트 프로그래밍이벤트 프로그래밍은 애플리케이션이 특정 이벤트가 발생했을 때 그에 대한 반응을 처리하는 방식입니다.이벤트 종류브라우저 이벤트: 브라우저 자체에서 발생하는 이벤트입니다.사용자 이벤트: 사용자가 키보드나 마우스를 통해 발생시키는 이벤트로, 세 가지로 나눌 수 있습니다:마우스 이벤트: 클릭, 더블 클릭, 마우스 이동 등키 이벤트: 키보드 입력 관련 이벤트HTML FORM 관련 이벤트: 폼 제출 등이벤트 프로그래밍 구조이벤트 프로그래밍에서 중요한 요소는 이벤트 소스, 이벤트 핸들러, 그리고 이 둘을 연결하는 리스너입니다.이벤트 소스: 이벤트가 발생하는 객체 (예: 버튼)이벤트 핸들러: 이벤트가 발생했을 때 실행할 코드리스너: 이벤트 소스와 이벤트 핸들러를 연결하는 방법이벤트 등록 방법1) add.. 공감수 1 댓글수 0 2024. 10. 5.
2-6. Scope 와 Hoisting 함수와호이스팅호이스팅(Hoisting)은 자바스크립트에서 나중에 선언된 변수나 함수를 코드 맨 위로 끌어올려 먼저 사용할 수 있게 해주는 기능입니다. 변수 호이스팅: 변수를 코드 아래에서 선언해도, 자바스크립트가 그 변수를 코드 맨 위로 끌어올려 오류 없이 사용할 수 있게 해주는 기능입니다. var로 선언한 변수만 호이스팅되며, 값이 할당되기 전까지는 undefined 상태입니다. => let, const 로 선언된 변수는 호이스팅이 지원되지않습니다//var hoisting test......................//아래에 선언된 변수의 선언부분만(값 할당은 빼고) 위로 올린다.console.log(`step1, data1 = ${data1}`)//step1, data1 = unde.. 공감수 0 댓글수 0 2024. 10. 5.
배열 함수 예제 의문 해결 function printResult(array) {//✨array를 매개변수로 전달받음 let resultArray = '' //❔문제1) 함수내에서 선언해야하는 이유 array.forEach(( value,index) => { //✨전달받은 결과 배열의 각 요소(인덱스, 값) //❔문제2)value,index 순서 //array.forEach((index.value)=>{}) //resultArray에 각 배열의 요소마다 입력받는 array값 추가하기 resultArray += `${value}`//✨최종출력배열에 li형식으로 할당 }) resultNode.innerHTML=resultArray=//❔문제3)resultNode.innerHTML(res.. 공감수 1 댓글수 0 2024. 9. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.