본문 바로가기

전체 글178

[TypeScript]TS쓰는 법 간단설명 변수, 함수 만들 때 타입지정하면 끝임. 뻥이다. (새로 프로젝트 셋팅하는 것 기준.) 1. 터미널열고 npx create-react-app 프로젝트이름 --template typescript !!! 2. 파일 확장자명은 JSX문법을 쓴다면 .tsx 일반파일은 .ts 3. JSX표현하는 타입은 ex) let 박스 :JSX.Element = 4. component만들 때 타입지정은 함수니까 파라미터와 return 타입 지정하면됨. 파라미터는 항상 props이기 때문에 props가 어떤 타입일지 지정하면됨. ex) type AppProps = { name: string; }; function App (props: AppProps) :JSX.Element { return ( {message} ) } props.. 2023. 4. 17.
아키텍쳐 똑바로 해보자..해보자고 그동안 프로젝트들 진행하면서 폴더 구조를 어떻게해야할지 고민했는데 이게 바로 아키텍쳐였다... https://velog.io/@userhwseo/Atomic-Design 프론트엔드의 아키텍처? 디자인 패턴? 미니 프로젝트 이후의 고민 미니 프로젝트를 마치고 반갑다 NYT API야 NYT에서 Search API를 가져와 develop 브랜치에 API를 바로 사용 가능 하게 끔 함수를 만들어 놓았다. 이후 useEffect를 사용하여 input velog.io 가장 먼저 아키텍쳐에 대해서 고민해본것은 바닐라 자바스크립트 배포를 할 때 root폴더에 index를 두어야하느냐 마느냐..이걸가지고 정말 고민을 많이 했고 그 다음은 리액트 프로젝트를 할 때 였다. 고마운 리액트가 기본적은 구조는 다 짜주었지만 ut.. 2023. 4. 17.
[TypeScript]변수에 타입 담기, readonly type 이! 렇 ! 게! object 타입에 두 개 이상의 타입이 들어가는 경우 type 키워드를 사용해서 변수로 타입을 지정해서 할당하는것이 훨씬 편하다. 변수에 안담는 다면 위의 식은 아래와 같이 표현할 수 있다. 그런데! type변수를 union type으로 합칠 수 있다. 혹은! & 연산자로 object타입을 합칠 수 있다. interface type말고 interface를 이용해서 Object에 타입 지정을 해줄 수도 있다!! type과 다른점은 중복선언(중복 속성은 안됨)이 가능하다는 점!! 위와 같이 합쳐진다.혹은 extends(종속)나 재정의도 가능.// extends쓸때 중복속성이 발생하면 에러로 잡아줌. type가 더 엄격하다고 보면 됨. 따라서 외부 라이브러리 같은 경우에 inter.. 2023. 4. 16.
리액트 프로젝트 배! 포! 완! 료! 1. 초기목표 : 내가 진짜 원하는 기능들을 모두 넣어서 실제로 활용할 수 있는 프로젝트 만들기, 실제로 사용자들이 이용할 수 있을정도의 완성도를 원했다..! 사용하고자 한 기능들 : 로그인 구현, storage 사용, API 호출 vercel로 배포해보기 (netlify로 지난 바닐라자바스크립트 배포를 해서 이번엔 vercel로 진행해보고 싶었다.) 2. 실제 일어난 일 : 사용한 기능 firebase를 이용한 로그인 정보 저장, Firestore database에 사용자들이 남긴 게시판 내용 저장 후 호출, firebase로 배포를 진행 3. 계획과 실제 결과의 차이 : React를 배울때 수업시간에 진행한 프로젝트는 로딩이 굉장히 빨랐다.사실 SPA라는 특성상 원래..다 그렇게 빠른 줄 알았지만 그.. 2023. 4. 11.
[CSS] vertical-align vertical-align vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정. vertical-align: baseline; 부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬 vertical-align: top; 해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬 vertical-align: middle; 해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬 vertical-align: bottom; vertical-align: sub; 해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬 vertical-align: text-top; 해당 엘리먼.. 2023. 4. 11.
[React]사용하지 않는 packages, dependencies 삭제하기! 작업하다가 원하는 기능 구현이 안되서 검색해보면 해당 라이브러리들이 존재하는 것을 뒤늦게 발견하는 경우가 많았다..!! carousel, dropdown 등 등.... 암튼 무지성 라이브러리 다운로드 결과 package.json 파일이 정말 마음에 안들었다.. 안쓰는 애들 들어가라! 1. 2. 그리고 root directory로 이동하자 3. 터미널창에 depcheck 입!력! 4. 자 이제 depcheck가 요렇게 알려준다 그럼 저 리스트들을 보고 삭!제! 5. 삭제후에 npm install을 해줌으로써 프로젝트에서 종속성을 없!앰! 이는 해당 패키지들이 불필요한 파일의 크기를 늘리고 프로젝트의 실행 속도를 저하시킬 수 있기 때문에 해주는 과정임. 아참 이거 한번 보고 가자! 2023. 4. 10.
[React]Redux Tookit Redux는 상태 관리 라이브러리!! 내가 이번에 진행하며 사용한 것은 Redux가 아니고 Redux toolkit임. redux를 사용하면서 반복적으로 작성해야했던 설정코드들을 간소화하여 더 쉽게 사용할 수 있도록 도와줌. 또한 toolkit은 코드의 무결성을 보장해주는 immer 라이브러리와redux-thunk 미들웨어 등을 기본적으로 제공하므로 더 쉽게 상태 관리를 할 수 있다. 상태를 한 곳에서 관리하면 여러 컴포넌트에서 상태를 쉽게 처리할 수 있다!! 따라서 코드의 일관성을 유지하며 유지보수하기가 좋다. 대용량 데이터 처리에 많이 사용됨. ( 데이터 전달을 하는 방법에는 props사용도 있지만 특정 데이터 전달을 담당하여 약간의 차이가 있다. 그리고 Redux는 사용하기 위해서 props보다 조.. 2023. 3. 31.
[React]불필요한 렌더링 방지하기 feat.React.memo 검색 API를 이용해서 검색 결과를 봐야하는데!! 와...결과가 뜨자마자 계속 사라졌다. 왜인가 싶어서 콘솔에 찍어보니까 한번 로딩했는데 저렇게 수많은 렌더링이 됐다. 이때 사용한것은 React.memo 파일 구조가 한 파일에 두 개의 컴포넌트가 있어서 그런가 했는데 그게아니라 상위 컴포넌트가 다시 렌더링되어 하위 컴포넌트도 다시 렌더링되는 결과인 것 같다. 이러한 동작은 React의 기본 렌더링 프로세스의 일부로, 상위 컴포넌트의 다시 렌더링이 속성 변경 없이도 하위 컴포넌트의 다시 렌더링을 트리거하여 발생한다고 한다. 흑흑 아무튼 해결방법으로 React.memo를 사용하여 SearchBooks 컴포넌트를 래핑함으로써 React에게 컴포넌트 속성의 얕은 비교를 수행하여 다시 렌더링이 필요한지 여부를 결.. 2023. 3. 29.
[React] props, 인수, 커스텀 훅 간단 비교 이게..왜 자꾸 헷갈리는지 모르겠는데...종종 혼란스럽다.. 그래서 찾아봄! Props (Properties) React 컴포넌트에서 사용되는 데이터를 전달하는 방법. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 name이라는 데이터를 전달하려면 아래처럼 사용한다. 함수의 인수 (Function arguments) 일반 JavaScript 함수에서 매개변수를 전달하는 방법. 함수를 호출할 때 인수를 전달하여 함수 내에서 해당 값을 사용할 수 있다. 위 예제에서 greet 함수는 name이라는 매개변수를 가지고 있으며, 함수 호출 시 해당 인수를 전달. 커스텀 훅(Custom Hooks) 커스텀 훅은 보통 use 접두사로 시작하는 이름을 .. 2023. 3. 23.
[React]Function components cannot be given refs.에러 styled component태그에 ref객체 사용하니까 마주친 에러!! Ref (Reference)는 React에서 사용되는 특별한 객체로써 DOM 엘리먼트나 클래스 컴포넌트 인스턴스에 접근할 수 있게 해준다. 일반적으로 React에서 데이터는 상위 컴포넌트에서 하위 컴포넌트로 전달되지만, Ref를 사용하면 컴포넌트의 인스턴스나 DOM 엘리먼트에 직접 접근할 수 있다. 이를 통해 DOM 엘리먼트의 속성을 수정하거나, 클래스 컴포넌트의 메서드를 호출할 수 있다. 아무튼..저 오류가 발생한 이유는 styled-compoment가 함수 컴포넌트 이기 때문에 ref를 할당할 수 없기떄문. 해결하기 위해서는 React.forwardRef()를 사용해야한다. 위 코드에서는 React.forwardRef()를 사용.. 2023. 3. 23.
[React]커스텀 훅의 업데이트가 함수형 컴포넌트에 반영되지 않을 때 에러 원인: 커스텀 훅 useSearchReviews의 함수인 handleSearch 함수가 인수를 받지 않고, 내부의 setSearchResults 함수를 사용하여 상태를 업데이트함. 따라서, Board 컴포넌트의 searchResults 상태가 업데이트되지 않았다.! 에러 내용 : 커스텀 훅이 검색기능을 갖고 있고 이 결과를 컴포넌트에 불러와서 결과값을 보여지게 하는 것이 목표였다. 커스텀 훅 파일에서 console log로 확인한 결과 업데이트에 이상 무! 하지만 컴포넌트에서는 계속 업데이트가 되지 않고 값이 빈 배열로 리턴되었다;; Board - 게시판 페이지를 구성하는 메인 컴포넌트 이 컴포넌트는 페이지 상단에 이미지와 '글 쓰러 가기' 링크를 표시하며, Search 컴포넌트를 렌더링하고, 검색.. 2023. 3. 22.
리액트 프로젝트 중간점검 서론 지난 프로젝트는 내가 프리랜서 디자이너로 일 할 때 필요했던 기능들을 담아 구현한 웹사이트다. 이 프로젝트도 내가 취미생활을 하며 필요하다고 느낀 것을 주제로 진행하고 있어서 너무 재미있다!!! 근데 에러는 재미없다!!! 휴, 이번에 겪은 에러는 거의 이틀을 밤낮으로 붙잡고 있었다..꿈에서도 이 에러 고치려고 코딩을 했다..내 첫 코딩 드림.. 그때 겪은 에러... https://hans-j.tistory.com/204 [React]커스텀 훅의 업데이트가 함수형 컴포넌트에 반영되지 않을 때 에러 원인: 커스텀 훅 useSearchReviews의 함수인 handleSearch 함수가 인수를 받지 않고, 내부의 setSearchResults 함수를 사용하여 상태를 업데이트함. 따라서, Board 컴포넌.. 2023. 3. 22.
[React]props VS custom Hook feat.ContextAPI props와 커스텀 훅의 주요 차이점은 props가 부모 컴포넌트에서 자식 컴포넌트로 명시적으로 전달되는 반면, 커스텀 훅은 컴포넌트 내에서 또는 여러 컴포넌트 간에 상태 논리를 캡슐화하고 재사용하는 데 사용된다. 커스텀 훅은 또한 useState와 useEffect와 같은 React 내장 훅을 사용하여 상태와 부작용을 관리할 수 있으며, 이는 컴포넌트의 논리를 단순화하고 재사용성을 높일 수 있다. // Parent.js import React from 'react'; import Child from './Child'; function Parent() { const data = { name: 'John', age: 30 }; return ( ); } export default Parent; // Chil.. 2023. 3. 21.
GPT AI챗은 가끔 어이가없다.. 오류 찾을 때.. 오타도 잘 잡아주고.. 알고리즘 물어보면 기가 막히게 대답해줘서 조금 신뢰했었다.. 근데!! 저번에 코드 한 줄이면 되는 걸로 정말 어마어마한 양의 코드를 ..제안하길래 참...신뢰가 떨어졌다. 물론 결과는 에러;; 얼마나 믿음을 줘야할지 테스트 할 겸 오늘 GPT랑 끝말잇기를 해봤다. 죄송하다면서 지멋대로 하는거 보니까 학창시절의 나 같다 앞으로도 너무 믿음을 주지 않는걸로 결론 지었다. 2023. 3. 15.
[TypeScript] TS와 JS+엄격모드 차이점, 공통점 자바스크립트로 코드 짜는데 ... 타입스크립트 잘못썼으니까 고치라고 에러가 엄청 떠서 참 애를 먹었다..참나... 저 좀 내버려두세요! 배포할 때 자바스크립트에 엄격모드를 적용하는데 이때 에러 고치면서 타입스크립트 빨리 배우고싶다는 마음이 간절했음.. 드디어 타입스크립트를 배우고있는데 갑자기 궁금해서 찾아본.. 자바스크립트 엄격모드와 타입스크립트의 공통점과 차이점... 공통점 코드 작성 시 더 엄격한 문법 규칙을 적용하여 오류 발생 가능성을 줄인다. 기존에는 무시되었던 몇 가지 오류들이 예외를 발생시킨다. 차이점 엄격 모드는 자바스크립트에서만 사용되며, 타입스크립트에서는 타입 체크를 사용하여 더 안정적인 코드를 작성함 엄격 모드는 코드 내에 use strict 구문을 추가하여 사용하며, 타입스크립트는 파.. 2023. 3. 15.
[TypeScript] 클래스, 인터페이스, 타입 간단 설명 Class/클래스는 객체 지향 프로그래밍에서 사용하는 개념으로써, 객체의 속성과 메소드를 정의하는데 사용된다. 클래스 는 객체를 생성할 수 있는 생성자(Constructor)함수와 함께 사용되며, 클래스의 인스턴스는 객체를 나타낸다. class Person { private name: string; private age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } const john = new Person('John', 30); joh.. 2023. 3. 15.
[React]ReactRouterDomV6 --스크랩 https://velog.io/@soryeongk/ReactRouterDomV6 [React] react-router-dom v6 업그레이드 되면서 달라진 것들 react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도.... velog.io 버전 5와 6을 알아보기 쉽도록 잘 정리해주셨다!! 2023. 3. 12.
[React]firebase 연동하기 firbase 9버전은 ...검색결과가 많이 없어서 선생님과 같은 버전인 8로 진행했다. npm 터미널 창에 npm install firebase@8.10.0 입력 ㄱㄱ src 디렉토리에 firesbase.js import firebase from "firebase/app"; const firebaseConfig = { apiKey: ////, authDomain: ////, projectId: "the-unbook-club", storageBucket: ////, messagingSenderId: ///, appId: //// }; export default firebase.initializeApp(firebaseConfig); 연결이 잘 되었는지 확인하려면 콘솔창에 찍어보면 된다. App.js에 해도.. 2023. 3. 12.
[TypeScript]Call Signature, Generic Type https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures Documentation - More on Functions Learn about how Functions work in TypeScript. www.typescriptlang.org 호출 시그니쳐!! 함수를 정의하는 방식 중 하나로, 함수의 매개변수와 반환값의 타입을 명시하는 방법 function add(x: number, y: number): number { return x + y; } 이 함수의 Call Signature는 (x: number, y: number) => number 이는 함수가 받는 매개변수가 number 타입이고, 함수가 반환하는 값도 numb.. 2023. 3. 10.
[Javascript]styled-component 도움 많이 된 포스트 --스크랩 https://nykim.work/107 [ReactJS] 4. styled-components 💅🏾 이 글은 NomadCoders의 와 의 내용 일부를 정리한 글입니다. 🙇🏻‍♀️ 멋진 강의 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예 nykim.work https://react.vlpt.us/styling/03-styled-components.html 3. styled-components · GitBook 03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하 reac.. 2023. 3. 10.
[React]JS vs JSX JSX문법을 쓰긴하는데...확장자도 JSX로 해야하는지... 그냥 JS로 둬야하는지 궁금해서 스택오버플로우에 검색해봤다. https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx ReactJS - .JS vs .JSX There is something I find very confusing when working in React.js. There are plenty of examples available on internet which use .js files with React but many others use .jsx files. I have read abou... stackoverflow.com 결론 : 장단점이 있다. 니가 알아서해라 JSX.. 2023. 3. 10.
바닐라 자바스크립트 프로젝트 드디어 완성 CSS,HTML으로만 구성된 프로젝트를 배포할 때는 쥬니어네이버 옷입히기 게임할때만큼 진짜 쉽게 휘리릭 했는데 SPA...바닐라 자바스크립트... 와 이건 진짜 배포하는것도 험난했다. 바닐라 자바스크립트를 해보기 전에 리액트를 먼저 배웠는데 이때 디렉토리를 그냥 그런가보다~ 하고 넘겼지만 이번 프로젝트를 진행하면서 왜 디렉토리가 저런건지 이해도 가고, 리액트가 얼~마나 편리한 프레임워크인지 잘 깨우칠 수 있는 소중한 기회였다.. 1. 초기목표 : 자바스크립트 활용 및 다른 프레임워크 사용하지 않기. 2. 실제 일어난 일 : 목표했던대로 다른 프레임워크는 사용하지 않았다. 하지만 JSX문법을 사용할 수 없어서 return문으로 html을 리턴하는 방식으로 작성했다. node.js를 활용하며 서버를 연결하면.. 2023. 3. 7.
[Javascript]웹팩 --스크랩 https://onlydev.tistory.com/111 웹팩(Webpack) 이해하기 처음 리액트를 배울 때 이런 생각이 들었다. "이렇게까지 어려운 문법을 배우면서 굳이 써야하나? 내 개인 프로젝트에 쓰일 정도로 편하긴 한가?" 반은 억지로 하다보니 따라치기 수준의 학습밖 onlydev.tistory.com 2023. 3. 7.
[Javascript]SPA Netlify로 배포 feat. memory limits 에러 해결방법 : package.json에서 빌드환경설정 변경 배포하는 방법 요약 Netlify에 로그인하고, 새로운 사이트를 생성. "Deploys" 탭으로 이동하여 "New deploy" 버튼을 클릭. "Drag and drop your site folder here"를 선택하거나 "Choose from your computer"을 클릭하여 빌드된 정적 파일이 들어 있는 폴더를 업로드. 빌드 및 배포 설정을 구성. 예를 들어, netlify.toml 파일을 사용하여 설정. "Deploy site" 버튼을 클릭하여 프로젝트를 배포. 간단 설명 리디렉션 세팅 ( 세팅을 하는 이유는 일반적으로 서버 측 코드가 실행되어야 할 때 사용한다. 예를들어 서버에서 데이터 베이스에서 동적으로 생성된 HTML을 가져와 렌더.. 2023. 3. 5.
[자료구조]해시 테이블 해시테이블이란 키와 값을 받아 키를 해싱(Hashing)하여 나온 index에 값을 저장하는 선형 자료구조이다. 삽입은 O(1) 이며 키를 알고 있다면 삭제, 탐색도 O(1)로 수행한다. (상수시간만큼 걸린다는 의미) 간단히 말해서 사물함처럼 한정된 배열에 key를 index로 변환하여 값들을 넣는다. hashBrown처럼 값들을 잘게 잘라 값으로 넣는다고 생각하면 쉽다. 해시함수 : 입력받은 값을 특정 범위 내 숫자로 변경하는 함수. HashCollision / 해시충돌이 일어난다면? 선형 탐사법 : 충돌이 발생하면 옆으로 한칸 이동한다. 제곱 탐사법 : 충돌이 발생하면 발생한 횟수의 제곱만큼 옆으로 이동한다. 이중 해싱 : 충돌이 발생하면 달느 해시 함수를 이용한다. 분리 연결법 : 버킷의 값을 연결.. 2023. 3. 2.
[JavaScript]some메서드 some() 메서드는 JavaScript에서 기본적으로 제공되는 메서드 중 하나로, 주어진 조건을 만족하는 요소가 배열 내에 적어도 하나 이상 있는지 확인하는 메서드입니다. 만족하는 요소가 적어도 하나 이상 있다면 true를 반환하고, 그렇지 않다면 false를 반환합니다. const arr = [1, 2, 3, 4, 5]; const hasEvenNumber = arr.some((num) => num % 2 === 0); console.log(hasEvenNumber); // Output: true 이 예시에서는 숫자 배열 arr에서 some() 메서드를 호출합니다. 메서드는 배열 내에 적어도 하나의 요소가 짝수인지 확인하기 위해, 조건으로 화살표 함수를 사용합니다: num % 2 === 0. 배열에는.. 2023. 2. 28.
[자료구조] 큐 First In FIrst Out 이라는 개념을 가진 선형 자료구조. 선! 입! 선! 출! Linear Queue와 Circula Queue 가 존재. (Queue스펠링 진짜 이상하다..) Array로 표현하면 빈공간에 자동적으로 차는게 아니라 삭제는 Front(맨 앞의 인덱스)부터 사라짐. ->DeQueue 추가는 Rear(가장 마지막 인덱스) 부터 추가됨 -> EnQueue 만약 빈 인덱스에 값이 모두 추가가 되어 자리가 모두 찬 다면 값을 더이상 추가할 수 없다. (하지만 자바스크립트의 경우는 값에따라 증감되기때문에 배열의 크기가 무한정 커질 수 있다는 단점이 있다.) 따라서 앞당기는 작업이 필요함 //정리 : 배열중간에 추가 or 삭제를 하게되면 위치 이후의 요소들을 한 칸씩 당겨주거나 밀어야한다.. 2023. 2. 28.
[Routing]SPA - frontend router Single Page Application SPA ! 요런느낌으로 깔쌈하게 줄여진 채로 많이 불리는 SPA 처음에 코딩에 ㅋ도 몰랐을때 스파오를 잘못쓴줄 알았다 환장.. 암튼!! 이 강의가 정~~~말~~~! 도움 많이 됐다. 댓글들에도 칭찬일색이었음. https://www.youtube.com/watch?v=6BozpmSjk-Y&t=601s 강의는 37분짜린데 한 3시간 걸렸다;; 중간에 계~속 오류가 나기도하고 내가 모르는 지식이 계속 튀어나와서 중간중간 찾아보느라 ㅠㅠ.. 한 게 굉장히 많은데 간단히 정리해보자면! HTML만들기 (아무런 파일을 만들지 않은 상태이지만 그래도 script로 index.js 파일을 먼!저! 연결해주기 server.js ( 내 서버에서 GET요청 처리) index.js (.. 2023. 2. 22.
[Git]refusing to merge unrelated histories 에러 git pull origin 브런치명 --allow-unrelated-histories 2023. 2. 20.
[Github]깃헙 readme에 GIF 올릴 때! +용량줄이기 HTML/CSS으로만 구성한 만큼...동적인 작업이 없었기때문에 미디어쿼리로 반응형으로 만든거랑 더보기 기능 만든거;; 이게 그렇게 리드미에 자랑이 하고싶었나보다...진짜 가지가지하는 나 5MB이하만 허용된다길래 이미지 용량줄이기 짬밥으로 이번에도 별 거 없겠지 싶었는데 별 거 였다..참내 내가 생각했던 작업 순서 1. (윈도우 10기준) 윈도우키 + G 키로 캡처 프로그램 활성화하기 2. 캡 처 3. 녹화된 동영상 필요 없는 부분 짜르고 crop하기 4. 정돈된 영상 GIF변환 5. 깃허브 리드미에 올리기 결과 깃허브 : 용량이 크다. 돌아가라 아.. 이걸 어떻게 줄여;;하던차에!! 찾았다. 방법. 해결한 작업순서 1. (윈도우 10기준) 윈도우키 + G 키로 캡처 프로그램 활성화하기 2. 캡 처 3... 2023. 2. 19.