티스토리

공부하는 영초

검색하기

블로그 홈

공부하는 영초

studying-dudcho.tistory.com/m

영초_ 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

JavaScript Sec05_12 컴포넌트 트리에 데이터 공급(Context API) 부모에서 자식으로만 데이터를 전달하는 단방향 데이터 흐름을 지키는 React의 특성 때문에 props drilling이 일어난다.props 이름 바꾸기도 어렵고 코드 작성과 수정에 악영향을 끼친다. Context API React에서 문맥 관련 코드를 쉽게 작성할 수 있도록 돕는 API Context 생성 const MyContext = React.createContext(defaultValue); Context Provider를 통한 데이터 공급 {/* 이 context안에 위치할 자식 컴포넌트들*/} 공감수 0 댓글수 0 2024. 2. 27.
JavaScript Sec05_11 복잡한 상태 변화 로직 분리 (useReducer) 상태 변화 함수들은 컴포넌트 내에만 존재해야 했음 ⇒ 컴포넌트의 코드가 길어지면 오류가 생길 수 있음 ⇒ useReducer를 이용햐여 상태 변화 로직 컴포넌트 바깥으로 분리하자 useReducer useState를 대체할 수 있는, react의 상태 관리를 돕는 React의 Hooks useState를 사용하듯 배열을 반환한다. 0번째 인덱스 : state 1번째 인덱스 : dispatch (상태를 변화시키는 액션을 발생시키는 함수) dispatch함수를 호출하면서 type이라는 프로퍼티가 있는 객체를 전달해야 한다. (이 객체를 action 객체라고 한다.) useReducer의 첫 번째 파라미터 : reducer라는 함수 (reducer는 dispatch가 상태 변화를 일으키면 그 일어난 상태 변화.. 공감수 0 댓글수 1 2024. 2. 26.
JavaScript Sec05_10 최적화 완성 diaryitem을 하나씩 지우거나 새롭게 생성하는 경우 → state가 변화하여 App 컴포넌트가 리렌더 → App컴포넌트가 리렌더 되면서 onEdit함수, onRemove함수가 새롭게 생성되어 prop으로 전달됨 → React.memo로 함수를 최적화해도 prop이 바뀌므로 DiaryItem 컴포넌트가 리렌더 → 공간 낭비! ⇒ onEdit함수와 onRemove함수에 useCallback과 함수형 업데이트를 사용한다. 공감수 0 댓글수 0 2024. 2. 26.
JavaScript Sec05_9 최적화 3 - useCallback 컴포넌트 코드가 길 때 React.memo를 이렇게도 사용할 수 있음 useCallback 일기 데이터의 상태가 변화할 때마다 App 컴포넌트가 리렌더 되고 그에 따라 자식 컴포넌트인 DiaryEditor 컴포넌트도 리렌더 된다. 이 때 DiaryEditor에 useMemo를 씌워도, 비원시타입 비교 시 얕게 비교하는 React.memo의 속성 때문에 App 컴포넌트가 리렌더 될 때마다 onCreate함수도 다시 만들어지고 그 새롭게 만들어진 onCreate 함수가 prop으로 Editor 컴포넌트에게 전달되므로 Editor 컴포넌트가 리렌더 된다. ⇒ onCreate 함수가 재생성되지 않아야만 DiaryEditor 컴포넌트를 최적화 할 수 있다! useEffect, useMemo와 비슷하게 첫번째 인자.. 공감수 0 댓글수 0 2024. 2. 26.
JavaScript Sec05_8 최적화 2 - 컴포넌트 재사용 React.memo 함수형 컴포넌트에게 업데이트 조건을 걸자 이 경우 부모 컴포넌트가 리렌더 되기 때문에 자식 컴포넌트들이 리렌더 된다. 하지만 count 상태만 변화했기 때문에 TextView는 리렌더 될 필요가 없다. 이렇게 업데이트 조건을 걸어 불필요한 컴포넌트 재사용을 막는다. React.memo React.memo는 고차 컴포넌트이다. 고차 컴포넌트 : 파라미터로 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 재사용이 필요한 함수를 React.memo로 감싸준다. 이렇게 React.memo로 감싸면 prop으로 전달된 text가 변하지 않으면 리렌더링을 하지 않게 된다. const MyComponent = React.memo(function MyComponent(props) { /* props를.. 공감수 0 댓글수 0 2024. 2. 24.
JavaScript Sec 05_7 최적화 1 - 연산 결과 재사용 (useMemo) Memorization 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법 이 때 콘솔에는 “일기 분석 시작”이 2번 출력 된다. App 컴포넌트가 mount 될 때 한 번, API를 호출하여 받아온 데이터로 인해 data state가 변할 때 리렌더 되어 두 번 일기 수정하기 버튼을 눌러 내용을 수정하고 수정 완료 버튼을 누를 때마다 data state가 변화해 App 컴포넌트가 리렌더 되는데, 이 때 전체 일기, 기분 좋은 일기, 기분 나쁜 일기, 기분 좋은 일기 비율들은 변하지 않는데도 계속 똑같은 연산을 반복한다. (콘솔 창에 ‘일기 분석 시작’이 계속 찍히는 것을 통해 알 수 있다.) ⇒ UseMemo 를 통.. 공감수 0 댓글수 0 2024. 2. 24.
JavaScript Sec 05_6 React Developer Tools 리액트 개발 시 생산성을 높여주는 크롬의 확장도구 공감수 0 댓글수 0 2024. 2. 24.
JavaScript Sec05_5 React에서 API 호출하기 JSONPlaceholder - Free Fake REST API (typicode.com) → Resource → content에서 데이터 가져오기 (링크 복사 jsonplaceholder.typicode.com/comments) API 호출 내장함수 fetch를 사용하여 가져오고자 하는 데이터의 주소를 인자로 넣는다. fetch가 반환하는 값은 promise 객체이며 then 함수 인자의 콜백함수는 API를 정상적으로 가져왔을 때 실행된다. res는 가져온 API 객체 그 자체이고 json()을 이용하면 json 데이터를 담은 객체 배열을 반환한다. res.slice(0,20) res에 담긴 json 형식의 객체 배열 데이터를 인덱스 0부터 19까지로 자른다. res.slice(0,20).map() .. 공감수 0 댓글수 0 2024. 2. 24.
JavaScript Sec05_4 React에서 LifeCycle 제어하기 (useEffect) LifeCycle LifeCycle을 제어한다? 컴포넌트가 탄생하고 변화하고 사라지는 순간에 각각 어떤 작업을 수행시킬 수 있다는 것을 의미한다. (ex. 초기화 작업, ex.예외 처리 작업, ex. 메모리 정리 작업) 클래스형 react Component와 함수형 react Component 지금까지 우리가 사용한 것은 함수형 컴포넌트 오직 클래스형 컴포넌트만 lifecycle를 제어하는 메소드와 state 기능을 사용할 수 있는데, use 키워드를 이용하여 클래스형 컴포넌트만 근본적으로 갖고 있는 기능을 함수형 컴포넌트에서 낚아채서 사용할 수 있다. (React Hooks) useEffect react의 lifecycle을 제어하는 메소드를 가져올 수 있는 기능 의존성 배열이 변화하는 순간 콜백함수가.. 공감수 0 댓글수 0 2024. 2. 24.
JavaScript Sec 05_3 React에서 배열 사용하기 map 함수를 이용해 리스트를 작성하기 dummylist를 prop으로 전달하여 DiaryList 컴포넌트에서 diaryList라는 이름으로 dummylist 배열을 사용한다. map함수를 이용하여 dummylist 배열의 요소 하나 하나씩 접근한다. 이 요소는 id, author, content, emotion, date를 담고 있는 객체이다. DiaryItem 컴포넌트에 이 객체 요소를 prop으로 전달한다. DiaryItem 컴포넌트에서는 prop으로 전달받은 객체들을 비구조화 할당을 이용해 각각 키를 이름으로 하는 변수로 저장하여 사용한다. 데이터 추가하기 data는 위에서 아래 방향으로 흐르고 event는 역방향으로 흐른다. DiaryEditor와 DiaryList에서 사용할 공통의 데이터를 u.. 공감수 0 댓글수 0 2024. 2. 23.
JavaScript Sec 05_2 React에서 DOM 조작하기 특정 DOM element에 focus 주기 어떤 DOM element에 focus를 줘야하는지 자바스크립트 코드가 알고 있어야 하는데 이렇게 DOM element를 선택할 수 있는 기능을 react는 제공을 하고 있음 그 기능이 useRef 이다 useRef()가 반환하는 값은 React.MutableRefObject인데, 이것은 DOM요소에 접근할 수 있는 기능을 한다. const authorInput = useRef(); 공감수 0 댓글수 0 2024. 2. 23.
JavaScript Sec05_1 React에서 사용자 입력 처리하기 input 태그로 사용자 입력 처리하기 onChange라는 이벤트를 사용하여 input에 어떤 값이 입력되었을 때 그 값을 어떻게 처리할 것인지 작성한다. onChange는 input의 값이 바뀌었을 때 수행하는 이벤트이다. onChange prop에는 콜백함수를 전달한다. 이 때 onChange 이벤트에 등록되는 콜백함수는 이벤트 객체 e를 매개변수로 전달받는다. e.target 은 이벤트 객체의 target을 의미하고 여기서는 input 태그를 의미한다. e.target.value는 입력 필드에 입력된 값을 의미하는데, 상태 변화 함수인 setAuthor의 인자에 e.target.value를 넣으면 state의 값이 이 값으로 업데이트 된다. textarea 태그로 사용자 입력 처리하기 input 태.. 공감수 0 댓글수 0 2024. 2. 23.
JavaScript Sec 04_5 Props Props 컴포넌트에게 데이터를 전달하는 가장 기본적인방법 #1. 만약 Count의 초기값을 0이 아니라, App컴포넌트에서 전달하는 값으로 하고 싶다면? 부모 컴포넌트인 App컴포넌트에서 자식 컴포넌트인 Counter 컴포넌트에게 값을 넘겨주려면 위 코드와 같이 라고 작성하면 된다. ‘initialValue’라는 이름을 붙여 5라는 값을 전달한다. 부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여 값을 전달하는 방식을 Prop이라고 한다. #2. 값을 여러 개 전달하고 싶으면? 이렇게 값을 여러 개 전달할 수도 있다. Prop이 여러 개이므로 Props라고 한다. #3. 전달받은 값은 어떻게 사용할까? 부모 컴포넌트로부터 받은 값을 자식 컴포넌트가 사용하려면 인자에 ‘props’를 넣으면 된다. 이 pr.. 공감수 0 댓글수 0 2024. 2. 21.
JavaScript Sec04_4 State State 계속해서 변화하는 특정 상태 상태에 따라 각각 다른 동작을 함 리액트에서의 state : 컴포넌트가 갖는 테마처럼, 계속 값이 바뀔 동적인 데이터 예제 Counter 만들기) useState 라는 React의 메소드는 배열을 반환한다. 배열의 비구조화 할당을 통해 0번째 인덱스를 count, 1번째 인덱스를 setCount라는 상수로 받아온다. 0번째 인덱스는 상태의 값으로 사용되고 1번째 인덱스는 0번쨰 인덱스의 상태값을 변화시키는 상태 변화 함수로 사용된다. useState 메소드를 호출하면서 넘겨준 인자인 0은 count라는 상태를 만드는 데 초기값으로 사용된다. 상태 변화 함수인 setCount 인자에 값을 넣으면 그 값으로 count의 값이 바뀐다. cf) html에서는 onClick.. 공감수 0 댓글수 0 2024. 2. 21.
JavaScript Sec04_3 JSX JSX 자바스크립트의 확장 문법이자, 자바스크립트와 html을 혼합해서 쓸 수 있는 문법 리액트에서 주로 사용하는 표현식 리액트의 컴포넌트를 만드는 데 유용하게 사용하는 문법이다. JSX의 규칙 닫힘 규칙 열린 태그가 있으면 반드시 닫힌 태그도 있어야 한다 self closing tag : , 최상위 태그 규칙 최상위 태그는 return문 안에서 즉, 컴포넌트 안에서 가장 바깥에 위치하는 태그를 의미한다. JSX의 표현식은 반드시 하나의 부모 요소를 가져야 한다. JSX로 컴포넌트로 만들어서 return하려면 반드시 하나의 최상위 태그로 다른 모든 태그를 묶어주어야 한다. 만약 최상위 태그를 사용하고 싶지 않다면? 리액트 파일에서 React.Fragment를 불러와 최상위 태그 대신 감싸주면 된다. 로 .. 공감수 0 댓글수 0 2024. 2. 21.
JavaScript Sec04_2 Create React App Create React App react의 boiler plate (react를 사용할 때 필요한 여러 패키지들을 감싸고 있는 패키지) npm start로 리액트 앱이 실행이 될 때 src 디렉토리 밑에 index.js가 실행이 되면서 public 디렉토리 밑에 index.html에 있는 id가 root인 div 아래로 App.js 파일에 있는 App 함수가 들어간다. node modules node.js 패키지의 구성 요소 중 하나로 외부 모듈을 저장하고 있는 폴더 리액트도 외부 모듈이기 때문에 node modules 아래에 저장되어있다. create-react-app으로 만든 패키지는 굉장히 많은 node module을 갖고 있다. 우리가 이렇게 많은 모듈을 직접 설치할 수 없기 때문에 create-.. 공감수 0 댓글수 0 2024. 2. 21.
JavaScript Sec04_1 Why React.js? 1. 리액트를 사용하는 첫번째 이유 문제점 : Shotgun Surgery problem , 여러 파일에서 같은 코드를 (ex. ~, ~ 등) 반복해서 사용하는 경우, 만약 해당 코드를 수정해야 할 일이 있을 때 파일마다 똑같은 부분을 수정해야 한다. 해결 방법 : 중복 코드를 컴포넌트로 만들어 하나의 파일에 모아둔다. 이렇게 컴포넌트화 방식을 사용하면 공통으로 사용되는 요소의 유지보수가 수월해진다. 하지만 기존에 사용해왔던 방식만으로는 요소들을 컴포넌트로 제작하고 불러다 쓰기가 힘들다. 따라서 React를 사용해야만 한다. ⇒ React는 컴포넌트 기반의 UI 라이브러리이기 때문에 모든 html 요소들을 전부 컴포넌트로 만들어서 재사용 할 수 있다. cf) 하나의 파일에 컴포넌트 하나만 사용해야 하는 .. 공감수 0 댓글수 0 2024. 2. 21.
JavaScript Sec03_3 Node.js 패키지 만들기 NPM (Node Package Manager) Node.js의 패키지 관리 도구 다른 사람이 만든 모듈들을 우리가 내려받아서 사용할 수 있게 도와줌 Package 누군가 따로 만들어 놓은 Node.js 모듈을 의미하는 단어 터미널에 npm init 작성 ⇒ 패키지 초기화 ⇒ package.json 파일 생성됨 package.json 파일 : 우리가 만들 패키지의 정보를 입력하는 환경설정 파일 main : 패키지에는 여러 파일들이 기능별로 분산되어 있을텐데, 이 패키지를 실행하기 위해서는 어떤 파일을 실행해야 하는지 명시해준다. scripts : 패키지를 개발하면서 자주 실행해야 하는 명령어를 사전에 정의한다. npm start를 터미널에 작성하면 패키지에 있는 index.js 파일이 node.js에서 .. 공감수 0 댓글수 0 2024. 2. 21.
JavaScript Sec03_2 Common JS Common JS 계산 기능을 하는 모듈 파일을 만들고 module.exports 함수를 이용해 내보낸다. 경로명과 require함수를 이용해 모듈 파일을 불러온다. 터미널을 이용해 Node js에서 js를 실행시킨다. (node 명령어 이용) ⇒ Node.js가 제공하는 기본적인 Common JS라는 모듈 시스템 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec03_1 Node.js란? Node.js란 java script의 실행환경 자바스크립트를 브라우저 안에서만 쓰지 않고 단독으로 쓰기 위해, 크롬 브라우저의 v8 엔진을 브라우저에서 떼어내어 자바스크립트를 어디에서든 사용할 수 있도록 개발한 프로그램이 Node.js이다. Node.js는 자바스크립트의 실행환경이며 자바스크립트를 브라우저 밖 어디서든 실행할 수 있도록 만들어준다. (Java Script’s runtime) Node.js를 통해 Java Script로 카카오톡, 파워포인트 등 브라우저 밖의 애플리케이션을 개발할 수 있고 심지어 java Script로 웹 서버까지 개발 가능하게 되었다. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec 02_10 API 호출하기 API 서버에게 데이터를 요청하고 요청한 데이터를 전달 받는 것을 API 호출 이라고 한다. 즉, 다른 프로그램한테 데이터를 받기 위해 말을 거는 것. client컴퓨터와 server컴퓨터는 보통 다른 컴퓨터이고, 따라서 인터넷 연결 속도, 서버의 부하 상태 등에 의해 요청된 데이터를 언제 전달받을지 모른다. ⇒ 동기적으로 처리할 수 없다! ⇒ 따라서 API 호출은 promise 객체를 이용하여 비동기 호출을 한다. let response = fetch('') 가져오고자 하는 데이터들을 (호출하고자 하는 API) 갖고 있는 주소를 내장함수 **‘fetch’**를 이용하여 변수 response에 저장한다. let response = fetch('') .then((res)=>{ console.log(res).. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec 02_9 async & await - 직관적인 비 동기 처리 코드 작성하기 async 함수 앞에 붙여 그 함수가 promise를 반환하도록 만들어준다. async를 함수 앞에 붙여주게 되면 그 함수는 자동적으로 promise를 리턴하는 비동기 처리 함수가 된다. async를 붙여준 함수의 리턴값은 비동기 작업 객체인 promise의 resolve의 파라미터가 된다. function delay(ms){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); }, ms); }); } ⇒ function delay(ms){ return new Promise((resolve)=>{ setTimeout(resolve, ms); }); } setTimeout의 첫 번째 매개변수인 콜백함수 안에 resolve 하나밖에 없으면 2번째 코드처.. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec 02_8 Promise - 콜백 지옥에서 탈출하기 Promise 콜백지옥 : 연속적으로 콜백함수의 결과값을 또다른 콜백함수의 값으로 사용할 때, 계속해서 콜백이 깊어지는 현상 콜백지옥을 해결할 수 있는 자바스크립트의 Promise 객체 비동기 작업이 가질 수 있는 3가지 상태 Pending (대기 상태) : 현재 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생했음을 의미 Fulfilled (성공) : 비동기 작업이 우리가 의도한 대로 정상적으로 완료되었음을 의미 Rejected (실패) : 서버가 응답하지 않는다거나 시간이 너무 오래 걸려서 자동으로 취소되는 등 모종의 이유로 비동기 작업이 실패했음을 의미 promise 객체를 사용하지 않고 비동기 작업을 처리할 때 promise 객체를 사용하여 비동기 작업을 처리할 때 isPositiv.. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec02_7 동기&비동기 동기 동기 방식은 스레드를 이용하여 코드가 작성된 순서대로 작업을 처리한다. ⇒ 문제점 : 하나의 작업이 오래 걸리면, 모든 작업이 끝나는 데 걸리는 전반적인 시간이 늘어난다. ex) 웹사이트에서 버튼 하나하나마다 30초 씩 걸린다고 생각해보자 멀티스레드 자바스크립트에서는 멀티스레드 기능이 없고 싱글스레드로만 동작한다. 비동기 비동기 방식은 작업이 끝나든말든 여러 개의 작업을 동시에 실행시키는 것이다. ⇒ 동시에 다 실행시키면 각 작업들이 정상적으로 끝났는지 어떻게 아는가? : 각각의 작업들에게 콜백함수를 붙인다. 콜백함수 동기적 방식으로 바꾸면 setTimeout함수의 매개변수는 콜백함수와 delaytime 2000ms 뒤에 첫번째 인자인 콜백함수를 실행시킨다. 비동기적으로 실행되어 “코드 끝”이 먼저.. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec 02_6 Spread 연산자 Spread Spread : …을 통해 중복되는 객체의 프로퍼티들을 새로운 객체에 펼쳐주는 연산자 객체에서 spread연산자 사용 배열에서 spread 연산자 사용 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec 02_5 비 구조화 할당 (구조 분해 할당) 배열이나 객체에서 원하는 값을 더 쉽고 빠르게 뽑아내는 방법 배열의 비 구조화 할당 (배열의 인덱스를 기준으로) 대괄호 [ ] 를 이용해 배열의 값을 순서대로 할당받아서 사용할 수 있다. let arr = ["one", "two", "three"]; let [one,two,three]=arr; // let one = arr[0]; // let two = arr[1]; // let three = arr[2]; console.log(one,two,three); 배열의 선언 분리 비 구조화 할당 배열을 선언할 때 배열의 값을 분리한다. let [one,two,three]=["one", "two", "three"]; // let one = arr[0]; // let two = arr[1]; // let thre.. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec02_4 조건문 Upgrade 조건문을 더 smart하게 사용하는 방법 배열 내장 함수인 includes를 이용 if(food==="불고기" || food==="떡볶이" || food==="비빔밥" ) ⇒ if(["불고기", "떡볶이", "비빔밥"].includes(food)) 여러 가지 케이스를 다룰 때 배열 내장 함수인 includes를 사용하면 더 편리하다. 객체 리터럴과 Truthy & Falsy 속성을 이용 const getMeal = (mealType)=>{ if(mealType === "한식") return "불고기"; if(mealType === "중식") return "멘보샤"; if(mealType === "양식") return "파스타"; return "굶기"; } console.log(getMeal("한식"));.. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec 02_3 단락회로 평가 논리 연산자의 왼쪽에서 오른쪽 방향으로 연산하는 특성을 이용한 문법 단락회로 평가 단락회로 평가 : 두 개의 피연산자 중 뒤에 위치한 피연산자를 확인할 필요없이 그냥 연산을 끝내버리는 것을 의미 const getName=(person)=> { return person && person.name}; let person; const name = getName(person); console.log(name); person이라는 변수에는 객체가 정의되지 않았으므로 person type은 undefined type이다. 매개변수에 이 undefined type인 person을 넣으면 논리 연산자 (&&) 에서는 falsy 속성으로 인해 person을 false로 인식하게 된다. 단락회로 평가 문법에 의해 &&는 .. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec02_2 삼항 연산자 긴 조건문을 짧게 줄일 수 있는 연산자 삼항 연산자 조건식 ? 조건식이 참일 때 수행할 식 : 조건식이 거짓일 때 수행할 식 ; let a =-1; a >=0 ? console.log("양수") : console.log("음수"); let a =[]; const arrayStatus = a.length===0 ? "빈 배열" : "안 빈 배열"; console.log(arrayStatus); Truthy & Falsy를 활용한 삼항 연산자 let a=[]; const result = a ? true: false; console.log(result); 출력 값 ⇒ true let a; const result = a ? true: false; console.log(result); 출력 값 ⇒ false 중첩.. 공감수 0 댓글수 0 2024. 2. 20.
JavaScript Sec02_1 Truthy & Falsy 자바스크립트의 조건식에는 boolean 형 값을 넣지 않아도 참이나 거짓으로 인식되는 속성이 있다. Truthy : 자바스크립트가 조건식에서 참으로 평가하는 타입 빈 배열 [ ] 객체 리터럴 { } 숫자형, Infinity (양의 무한대) 문자열 Falsy : 자바스크립트가 조건식에서 거짓으로 평가하는 타입 null undefined 숫자 0, 숫자가 아님을 의미하는 NaN “” (빈 문자열) EX) //객체를 매개변수로 받아서, 받은 객체에서 특정한 프로퍼티를 반환하는 프로그램 const getName = (person) => { return person.name; }; let person; //여기서 person은 undefined type이 된다. const name = getName(person).. 공감수 0 댓글수 0 2024. 2. 20.

문의안내

티스토리
로그인
고객센터

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