티스토리

devOhzl

검색하기

블로그 홈

devOhzl

ohzlsss.tistory.com/m

Web Front-end Developers

구독자: 0

방명록 방문하기

주요 글 목록

Fortify 보안 점검 대응 : Dockerfile 보안 설정과 Trivy 활용하기 문제 상황회사 보안 점검에서 Fortify 스캔을 진행한 결과, 내가 작성한 Dockerfile에서 다음과 같은 HIGH 레벨 보안 경고가 발생했다.Default User PrivilegeHIGHDocker 컨테이너가 root 권한으로 실행됨 Fortify의 "Default User Privilege" 보안 경고는 Dockerfile 내에서 기본 사용자(root) 로 컨테이너를 실행할 경우 발생합니다. 이는 컨테이너가 해킹되거나 취약점이 발생했을 때, root 권한이 그대로 유지되므로 호스트 시스템까지 영향을 줄 수 있는 위험이 존재합니다. 따라서 root 대신 일반 사용자 권한을 사용하도록 설정하는 것이 권장됩니다. 해결 방법 및 적용 내용기존 Dockerfile에는 사용자 설정이 없어서 기본적으로 r.. 공감수 2 댓글수 1 2025. 5. 2.
XSS(Cross-Site Scripting) 취약점과 화이트리스트 기반 보안 개선하기 1. XSS(Cross‑Site Scripting)란?XSS(Cross‑Site Scripting) : 웹 애플리케이션에서 자주 등장하는 취약점으로, 공격자가 악성 스크립트를 주입해 사용자의 브라우저에서 실행시키는 기법세션·쿠키 탈취 : 악성 스크립트가 실행되면 로그인 세션 쿠키를 탈취해 계정 탈취로 이어질 수 있습니다.피싱·악성 행위 : DOM을 조작해 가짜 로그인 창을 띄우거나, 숨은 네트워크 요청으로 토큰·개인정보를 외부로 전송할 수 있습니다.연계 공격 : CSRF 등 다른 취약점과 결합해 결제·게시물 작성 등 의도치 않은 동작을 수행시키기도 합니다.발생 원인사용자 입력을 검증·필터링·인코딩 없이 그대로 HTML이나 속성(src 등)에 삽입하는 경우React, Vue 등에서 dangerouslySe.. 공감수 1 댓글수 0 2025. 4. 17.
[react-virtuoso] 대용량 리스트 렌더링 성능 개선하기 (성능 측정) 회사 내부 모니터링 대시보드에서 수천 건 이상의 카드(Card) 컴포넌트를 한 화면에 표시해야 하는 요구사항이 있었습니다. 처음에는 단순히 Array.map을 통해 모든 데이터를 렌더링했으나, 아래와 같은 문제가 발생했습니다.렌더링 지연 : 한 번에 모든 컴포넌트를 그리다 보니, 브라우저 메인 스레드가 과부하되어 화면이 뜨기까지 20~30초 걸림스크롤 성능 저하 : DOM 요소가 늘어나면서 스크롤 시 FPS가 크게 떨어지는 문제 발생사용자 경험(UX) 악화 : API는 이미 빠르게 응답했는데, 렌더링이 끝나지 않아 로딩 스피너가 바로 사라지고도 빈 화면이 한참 동안 노출문제를 해결하기 위한 방법으로 리스트 가상화를 진행해보기로 했습니다. 리스트 가상화란 ?화면에 보이는 아이템만 실제로 렌더링하고, 나머지.. 공감수 0 댓글수 0 2025. 3. 20.
[React] lazy()와 Suspense를 활용한 동적 로딩 및 로딩 페이지 구현 React에서 페이지 또는 컴포넌트를 동적 로딩할 때, React.lazy()와 Suspense를 사용하면 효율적으로 관리할 수 있습니다. lazy()를 활용한 동적 로딩(Route 정리)기본적으로 React에서는 import를 사용하여 정적인 방식으로 컴포넌트를 불러옵니다.하지만, 페이지가 많아질수록 초기 로딩 속도가 느려지는 문제가 발생합니다.👉 이를 해결하기 위해 React.lazy()를 사용하면, 필요한 순간에만 컴포넌트를 불러올 수 있습니다.이 방식은 코드 스플리팅(Code Splitting)을 적용하여 성능 최적화에도 도움을 줍니다. 정적 로딩 방식 (비효율적인 예시)이 방식은 모든 페이지가 초기 로딩 시점에 한 번에 불러와지기 때문에 초기 로딩 속도가 느려질 수 있다.import Ho.. 공감수 0 댓글수 0 2025. 2. 4.
GitLab CI/CD, Docker를 활용하여 Vite 프로젝트 Nginx 배포하기 (에러상황 해결 포함) Vite로 작성된 React 프로젝트를 GitLab CI/CD를 통해 Docker 이미지를 빌드하고, Nginx로 정적 파일을 서빙하는 과정을 정리했습니다. 최종적으로 배포 환경에서 index.html과 관련된 정적 자산(js, css, svg 등)을 Nginx로 제공하여 정상적으로 애플리케이션이 동작하도록 합니다.Nginx는 웹 서버 소프트웨어입니다. 웹 서버는 클라이언트(브라우저)에서 요청을 보내면, 이를 처리하고 파일(HTML, CSS, JS 등)을 클라이언트로 보내주는 역할을 합니다.정적 파일 배포와 프록시 기능에 최적화된 서버로, React, Vue 같은 프론트엔드 프로젝트의 빌드 결과물을 효율적으로 배포할 수 있는 도구입니다.Nginx의 기본 동작 클라이언트 요청: 사용자가 브라우저에서 ht.. 공감수 1 댓글수 1 2025. 1. 24.
[Vue] 동적 라우트 정의로 코드 개선하기 라우트 정의 시 정적으로 import하는 방식에서 동적으로 import하는 방식으로 전환하게 되었습니다.이를 위해 dynamicImportComponent라는 유틸리티 함수를 도입하여 동적으로 컴포넌트를 로드하고, 라우트 정의를 효율적으로 관리할 수 있게 되었습니다. 기존 정적 import 방식기존에는 각 라우트 모듈을 개별적으로 import하여 사용했습니다. const testView1 = from "@/views/test/test1"const testView2 = from "@/views/test/test2"const testView3 = from "@/views/test/test3"export default [ { path: "testView1", children: testView1, .. 공감수 0 댓글수 0 2025. 1. 17.
[vite-plugin-svgr] Vite와 React에서 SVG 파일을 자동으로 Import하고 사용하는 방법 React 프로젝트에서 SVG 아이콘을 효율적으로 관리하고 사용하는 방법입니다.특히, vite-plugin-svgr와 import.meta.glob을 활용하여 SVG 파일을 자동으로 불러오고 React 컴포넌트처럼 사용합니다.SVG 파일을 React에서 사용하는 이유SVG는 벡터 기반의 그래픽 형식으로 다음과 같은 장점이 있습니다:확장성: 해상도와 무관하게 선명하게 렌더링유연성: 색상, 크기, 스타일 등을 동적으로 조정 가능가벼움: 아이콘과 같은 간단한 그래픽에서 번들 크기를 최소화React에서 SVG를 사용하면 동적인 UI 구성과 함께 코드의 재사용성이 증가합니다. Vite에서 SVG를 React 컴포넌트로 변환하기1. vite-plugin-svgr 설치vite-plugin-svgr는 SVG 파일을 R.. 공감수 0 댓글수 0 2025. 1. 13.
JSDoc JSDoc란?JSDoc은 JavaScript 코드에 주석을 추가하여 함수, 클래스, 객체 등에 대한 문서를 자동으로 생성할 수 있도록 돕는 툴입니다. 이를 통해 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다. JSDoc은 개발자들이 코드의 의도를 명확히 전달하고, 다른 팀원들이 쉽게 이해할 수 있도록 지원합니다. 👉 JSDoc은 단순한 주석 시스템을 넘어 코드의 품질과 유지보수성을 향상시키는 강력한 도구입니다. 👉 팀 개발 환경에서 JSDoc을 활용하면 코드의 가독성을 높이고, 협업 효율을 극대화할 수 있습니다. JSDoc의 주요 특징자동 문서 생성JSDoc 주석을 작성한 코드를 기반으로 HTML 형식의 문서를 생성할 수 있습니다.이 문서는 함수나 객체의 동작 방식을 직관적으로 보여줍.. 공감수 0 댓글수 0 2025. 1. 6.
[Zustand] Immer,Actions분리로 데이터그리드 상태 관리 리팩토링하기 데이터그리드와 같은 동적 컴포넌트를 다루기 위해 Zustand를 선택했으며, 데이터를 효율적으로 관리할 수 있습니다. 데이터그리드는 한 화면에서 두 개 이상이 들어갈 수 있으므로, 각 컴포넌트를 독립적으로 관리하기 위해 id를 활용하여 상태를 구분했습니다. 기존 코드의 문제점Zustand만으로 상태 관리를 하려면 상태를 수동으로 복사(...state)해야 합니다. 특히 데이터그리드를 한 화면에서 여러 개 사용해야 하는 경우, 각각의 컴포넌트를 구분하기 위해 id를 활용합니다. 이로 인해 상태 업데이트 로직이 더욱 복잡해지고 중복이 발생합니다.export const useDataGridStore = create((set) => ({ grids: {}, initializeGrid: (id) => s.. 공감수 0 댓글수 0 2024. 12. 24.
[React-hook-form] 사용법 / Controller의 활용과 공통 컴포넌트 재사용하기 ⭐ React-hook-formReact Hook Form은 React에서 간단하고 효율적으로 폼을 관리하기 위한 라이브러리입니다. 폼 관리 방식React Hook Form은 Uncontrolled 방식과 Controlled 방식이 있다.Uncontrolled : register 함수를 사용하고 두 번째 파라미터를 사용하여 유효성 검증이 가능하며 DOM과 직접적으로 연결되어 성능이 우수하다. Controller : Controller 컴포넌트의 rules 속성을 사용하여 유효성 검증이 가능하며 주로 외부 UI 라이브러리와 통합 시 사용한다.API : useForm Hookregister : Uncontrolled 방식으로 사용하기 위해 사용됩니다. 요소의 속성으로 전달되어야 하는 값들을 반환하는 함수입니.. 공감수 0 댓글수 0 2024. 12. 20.
[Docker] Dockerfile 작성과 이미지 생성 후 컨테이너 실행하기 DockerDocker는 애플리케이션을 컨테이너 안에서 실행할 수 있게 도와주는 가상화 플랫폼입니다. 소프트웨어를 개발하고 배포하는 과정에서 일관성과 효율성을 보장하기 위해 컨테이너라는 격리된 환경을 제공합니다. 컨테이너는 애플리케이션과 그 애플리케이션이 실행되기 위해 필요한 모든 라이브러리, 종속성을 하나로 묶은 패키지입니다. 이로 인해 개발 환경에서 테스트한 애플리케이션을 운영 환경으로 옮길 때 환경 불일치 문제를 최소화할 수 있습니다. 이미지(Image): 애플리케이션을 실행하기 위한 모든 코드, 런타임, 라이브러리, 설정 파일 등을 포함한 읽기 전용 템플릿입니다. Docker 이미지는 애플리케이션을 컨테이너로 배포할 수 있는 기반이 됩니다.컨테이너(Container): 이미지를 기반으로 실행.. 공감수 1 댓글수 1 2024. 12. 5.
[React] 폼의 입력 필드 리렌더링 최적화하기 : React.memo 활용 (+useMemo 비교) 로그인 폼을 구현하던 중, 입력 필드의 rules를 확인하여 FormHelperText를 표시하는 과정에서 리렌더링 문제가 발생했습니다. 구체적으로, ID 입력 필드에서 에러 처리를 했을 때 콘솔에 ID와 PW 필드가 모두 리렌더링되는 상황을 겪었습니다.이는 각 필드가 독립적으로 리렌더링되지 않고 모든 필드가 동시에 리렌더링되었기 때문입니다. 이러한 문제를 해결하기 위해 React.memo를 사용해 최적화를 시도했습니다. useMemo 방식과 비교하여 각각의 방식이 어떻게 성능에 영향을 주는지 예시와 함께 작성했습니다.React 리렌더링 방식React는 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 기본적으로 리렌더링을 시도합니다. 리렌더링 시도는 "컴포넌트를 다시 그린다"는 의미가 아니라, 변경 사항.. 공감수 0 댓글수 1 2024. 11. 28.
[TypeScript] 제네릭 (함수/클래스/인터페이스, 제약 조건) 제네릭 (Generic)함수, 클래스, 인터페이스에서 사용 가능하다.타입 변수 부분에 제약 조건도 활용 가능하다.함수함수 이름 뒷 쪽에 대문자 T 로 타입 변수를 지정을 할 수 있다.함수를 호출할 때 타입을 넣어줄 수도 있지만, 첫번째 인수를 통해 타입추론이 가능하게 사용할 수도 있다. 예제로 함수에서 제네릭 문법 사용하기interface Obj { x: number}type Arr = [number, number]function toArray(a: string, b: string): string[]function toArray(a: number, b: number): number[]function toArray(a: boolean, b: boolean): boolean[]function toArray.. 공감수 0 댓글수 0 2024. 8. 26.
[TypeScript] 클래스 클래스 타입스크립트에서 클래스를 사용하게 되면 속성 부분의 타입을 constructor 위의 클래스 바디 부분에 타입 명시를 해줘야한다.초기값이 필요하다면 type 선언 뒤에 할당 연산자를 통해 값을 입력하면 된다.class UserA { first: string = '' last: string = '' age: number constructor(first: string, last: string, age: number){ this.first = first this.last = last this.age = age } getAge() { return `${this.first} ${this.last} is ${this.age}` }} 각각의 속성을 지정할 때는 앞에 접근 제어.. 공감수 0 댓글수 0 2024. 8. 18.
[TypeScript] 타입 별칭, 함수(this, overloading) 타입 별칭 (Alias)type 키워드를 사용하여 타입에 별도 이름(별명) 을 부여한다. 할당 연산자를 붙여줘야한다. type TypeA = string단일 타입에 별칭을 부여하는 것은 크게 유용하지 않다. type TypeB = string | number | boolean타입 별칭은 단일 타입보다는 union( | )이나 ampersan0d( &) 기호를 사용하는 intersection 타입에서 별칭을 부여하여 재사용하는데 사용하는게 좋다. type TypeA = stringtype TypeB = string | number | booleantype User = { name: string age: number isValid: boolean} | [string, number, boolean]con.. 공감수 0 댓글수 0 2024. 8. 13.
[TypeScript] 인터페이스 인터페이스 (Interface) 인터페이스를 하나의 타입으로 사용할 수 있다. 이 떄 객체의 속성과 개수, 타입은 같아야한다.interface User { name: string age: number isValid: boolean}const user1: User = { name: 'ohzl', age: 27, isValid: true}const user2: User = { name: 'ohzl2', age: 20, isValid: false} 선택적 속성 - ?선택적 속성이 붙은 속성은 필수가 아니게 된다.interface User { name: string age: number isValid?: boolean}const user1: User = { name: 'ohzl', ag.. 공감수 0 댓글수 0 2024. 8. 12.
[TypeScript] 타입 추론, 타입 및 할당 단언, 타입 가드 타입 추론 (Inference) 추론 : 판단을 근거로 삼아 다른 판단을 이끌어 냄 모든 부분에 타입을 직접 지정할 필요는 없고, 꼭 필요한 부분에 타입을 지정해준다.타입을 추론하기 위해서는 근거로 삼을 수 있는 판단이 필요하다.초기화된 변수let num = 12 기본값이 설정된 매개 변수, 반환 값이 있는 함수function add(a: number, b = 2) { return a + b} 숫자 데이터가 기본적으로 할당되므로, b에는 타입을 지정해주지 않아도 된다.a,b 가 number 타입이므로, 반환 타입을 따로 지정하지 않아도 타입 추론이 가능하다. 👉 최대한 타입을 적게 적으면서 타입스크립트가 이해하지 못하는 곳에는 꼭 정확한 타입을 제공해주어야 한다. 타입 단언 (Assertions)단언 .. 공감수 0 댓글수 0 2024. 8. 7.
[TypeScript] 타입스크립트, 타입 종류 (tsconfig.json) 타입스크립트란정적 타입의 컴파일 언어자바스크립트 (동적 타입) : 런타임에서 동작할 때 타입 오류 확인타입스크립트 (정적 타입) : 코드 작성 단계에서 타입 오류 확인브라우저나 Node.js 환경은 타입스크립트가 직접적으로 동작할 수는 없다.👉 자바스크립트로 변환(컴파일) 후 브라우저나 Node.js 환경에서 동작tsconfig.json{ "compilerOptions": { "target" : "ES2015", "module": "ESNext", "moduleResolution": "Node", "esModuleInterop": true, "lib" : [ "ESNext", "DOM" ], "strict": true }, "include": .. 공감수 0 댓글수 0 2024. 8. 6.
정규표현식 (Regex, Regular Expression) 문자를 검색(Search)하거나 대체(Replace)하거나 추출(Extract)하는 용도로 쓸 수 있는 패턴 정규표현식 생성1️⃣ 생성자new RegExp('표현', '옵션')new RegExp('[a-z]', 'gi')2️⃣ 리터럴 표현/옵션/[a-z]/gi슬래쉬 사이에 '표현'이 들어가며 뒤에는 정규식 옵션이 붙는다생성자를 통해 RegExp 객체를 생성할 수도 있지만, 보통은 리터럴 문법을 자주 사용한다.정규표현식 플래그g global , 전 구역을 복수로 검사 iignore , 대소문자 구분 Xmmultiline , 다중행 검사const str = ` 010-1234-5678 themail@gmail.com https://www.test.com/?apikey=23423423 The quick.. 공감수 0 댓글수 0 2024. 8. 5.
[HTTP] Cookie 와 Session 쿠키 (Cookie)서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, key=value 형식의 문자열 데이터 묶음이다. 클라이언트가 문자열 데이터 조각들을 저장해놓았다가 동일한 서버에 재 요청시 쿠키 데이터를 전송할 수 있다.쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버에 전송한다.도메인 단위로 저장표준안 기준, 사이트당 최대 20 개 및 4KB로 제한영구 저장 불가능 📌 HTTP 쿠키 헤더1. Cookie 요청 헤더HTTP 요청 시 클라이언트에서 서버로 전달하는 쿠키 헤더 서버의 세션 상태를 담은 SessionID 혹은 각종 클라이언트 정보들을 담고 있다.2. Set-Cookie 응답 헤더서버에서 클라이언트로 전달하.. 공감수 0 댓글수 0 2024. 7. 1.
[JavaScript] Web APIs - Location, History Location - 현재 브라우저에 표시된 HTML 문서의 URL 또는 관련 정보 (URL의 프로토콜, 호스트, 포토번호 등의 정보)를 반환하거나 제어한다.- window 객체의 일부이고 window.location 속성을 통해 접근할 수 있다.(window는 생략 가능) 📌 속성 .href 전체 URL 주소 .protocol프로토콜 정보 (http/https) .hostname 도메인 이름 .pathname 도메인 이후 하위 경로 .host 포트 번호를 포함하는 도메인 이름 .port 포트 번호 - http이면 80포트 생략 가능. 프로토콜이 https이면 443포트는 생략 가능 .hash 해시 정보 ( 페이지의 ID ) 📌 함수 .assign(주소) 해당 주소로 페이.. 공감수 0 댓글수 0 2024. 7. 1.
[JavaScript] 비동기 처리, Web APIs/Callback Queue/Event Loop 동기(Synchronous) & 비동기(Asynchronous)📌 동기(Synchronous) : 각 함수와 코드들이 위에서 아래로 차례로 동작자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다린다.즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연되게 된다. 📌 비동기(Synchrono.. 공감수 0 댓글수 0 2024. 6. 26.
코드 스플리팅 ( Code Splitting ) - 웹 애플리케이션 성능 최적화 하기 싱글 페이지 애플리케이션(Single Page Application)은 초기 실행시에 필요한 웹 자원을 모두 다운받는다.즉, 규모가 커질수록 첫 로드의 시간이 오래걸리게 된다. 한 페이지만 로드하면 되는 첫 시작 페이지에서 필요로 하지 않는 여러 페이지(또는 프레임워크를 사용하는 경우 import한 컴포넌트 파일)를 로딩하기 때문이다. 이 때 코드 스플리팅을 사용하면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능상의 이점이 생기게 된다.개발 환경 조건싱글 파일 컴포넌트 체계 (.vue)웹팩 - 모듈 번들러 (2.x 이상)바벨 Syntax-dynamic-import 플러그인 코드 스플리팅 자체는 Webpack 같은 번들러에 의해 주로 처리되지만, Babel은 이 과정에서 중요.. 공감수 0 댓글수 0 2024. 6. 21.
[Vue] Props 타입 정의를 꼭 해야할까 개발하던 화면은 페이지를 넘기면서 데이터를 등록하여 그 데이터를 계속 가지고 있다가 마지막 페이지에서 저장하는 화면이었다. 나는 Vuetify를 사용하고 있었고, VWindow 컴포넌트를 사용해서 화면을 구성했다.https://vuetifyjs.com/en/components/windows/#usage Window component — VuetifyThe window component is a wrapper container that allows transitioning between content. It serves as the baseline for...vuetifyjs.com 처음에 화면에서 관리하는 데이터가 너무 많아지니 데이터들을 store에서 관리하면 어떨까 싶었지만,같이 개발하는 팀원이 st.. 공감수 0 댓글수 0 2024. 6. 14.
[JavaScript] 배열 내 객체의 특정 키 값 유효성 검사하기 DataTable의 한 행에서 값들을 입력하여 추가하거나 수정하여 저장하는 기능을 개발했다. 저장을 하기 전에 필수로 입력해야하는 값이 있다면 입력 여부를 확인해야한다. 필수로 검사 할 객체의 키를 배열로 받아, 해당 키들이 모두 값이 있는지 확인할 수 있는 공통 함수를 작성했다.처음에 작성했던 로직export const isValidNull = (keys, list) => { if (!keys) return false; return list.some((item) => { let isNull = false; keys.some((key) => { if (item[key] !== null && typeof item[key] === "object") { .. 공감수 0 댓글수 0 2024. 6. 10.
[JavaScript] 객체와 JSON 객체📌 Object.assign()하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환한다.const target = { a: 1, b:2 }const source1 = { b: 3, c: 4 }const source2 = { c: 5, d:6 }const result = Object.assign(target, source1, source2)console.log(target) // { a: 1, b: 3, c: 5, d: 6 }console.log(result) // { a: 1, b: 3, c: 5, d: 6 } Target 객체를 수정하지 않고 새로운 객체로 변환하려면, Target 객체에 빈 객체 { } 를 넣어주면된다.target,source1,.. 공감수 0 댓글수 0 2024. 5. 31.
[React Native] Expo , UI 작성하기/스타일링 Core Components를 이용한 UI 작성하기 https://reactnative.dev/docs/components-and-apis#user-interface Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat reactnat.. 공감수 0 댓글수 0 2024. 1. 30.
[React Native] 개념, Expo 개발 환경 세팅/앱 구조/실행하기 리액트 네이티브란? React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크 사용자 인터페이스(UI)를 구축하기 위한 JS 라이브러리인 React를 기반으로 하지만, React는 브라우저를 대상으로 하고, React Native는 모바일 플랫폼을 대상으로 한다. 웹 개발자도 JS를 이용하여 "네이티브" 모양과 느낌을 주는 애플리케이션을 작성할 수 있다. 또한 작성하는 대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 Android와 iOS 모두에서 동시에 쉽게 개발 가능하다. 리액트 네이티브의 장점 1. 다른 플랫폼에서는 웹으로 개발 후 앱에 인베딩하여 사용하지만, React Native는 소스 코드를 작성을 하면 실제 네이티브 요소로 변.. 공감수 0 댓글수 0 2024. 1. 28.
Axios를 이용하여 Excel Download 하는법 + blob (content-disposition 접근 오류 해결) 1. api 호출 아래는 엑셀 다운로드 api를 호출하면 리턴되는 형태이다. blob 형태로 받기 위하여 responseType을 추가한다. const getList = async() => { const param = { params: { /* ... */ }, responseType: 'blob', headers: { 'Content-Type': 'application/json' } } const response = await axios.get($System.server.url + "/api/v1/account/downloadExcel", param); return response; } api를 호출하면 blob 객체로 호출이 된다. 2. response, blob 객체 생성 받은 response로 b.. 공감수 0 댓글수 0 2024. 1. 23.
[JavaScript] 표준 내장 객체 - 배열 📌 .length 배열의 길이(숫자)를 반환한다. const arr = ['A', 'B', 'C'] console.log(arr.length)// 3 📌 .at 대상 배열을 인덱싱한다. 음수 값을 사용하면 뒤에서부터 인덱싱한다. 쉽게 마지막 값을 가져올 수 있다. const arr = ['A','B','C'] console.log(arr[0]) // A console.log(arr.at(0)) // A console.log(arr[arr.length - 1]) // C console.log(arr.at(-1)) // C 📌 .concat 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환한다. 전개 연산자를 사용해도 가능하다. const arr1 = ['A','B','C'] const arr2 = ['.. 공감수 0 댓글수 1 2024. 1. 4.

문의안내

티스토리
로그인
고객센터

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