JDK's blog

[REACT] 문자열함수(JAVASCRIPT)

JDK's blog — Fri, 3 Oct 2025 11:59:37 +0900

좋은 질문이에요
React 자체는 특별한 문자열 유틸을 제공하지 않지만, JS 기본 함수로 **“치환, 배열 분리, 포함 여부 검사”**는 거의 전부 해결할 수 있고, 실무에서는 이를 감싼 커스텀 유틸 함수를 만들어 두는 게 일반적입니다.

아래에 자주 쓰는 3가지 카테고리별 유틸을 정리해드릴게요:

✏️ 1. 문자열 치환 (replace / replaceAll)

// ✅ 단순 치환 (처음 하나만)
const result1 = "Hello World".replace("World", "React");
// → "Hello React"

// ✅ 모든 항목 치환 (replaceAll 또는 정규식)
const result2 = "apple banana apple".replaceAll("apple", "orange");
// → "orange banana orange"

const result3 = "apple banana apple".replace(/apple/g, "orange");
// → "orange banana orange"

// ✅ 여러 단어를 한 번에 치환 (객체 매핑 활용)
const replaceMap = (str, map) =>
str.replace(new RegExp(Object.keys(map).join("|"), "g"), (m) => map[m]);

console.log(replaceMap("I like red and blue", { red: "green", blue: "yellow" }));
// → I like green and yellow

✅ 팁: React에서 입력 값 전처리(공백 제거, 금칙어 치환 등)에도 자주 사용됩니다.

2. 특정 문자열 기준으로 배열화 (split)

// ✅ 구분자로 배열 생성
const fruits = "apple,banana,orange".split(",");
// → ["apple", "banana", "orange"]

// ✅ 줄바꿈 기준으로 나누기
const lines = "1줄\n2줄\n3줄".split("\n");
// → ["1줄", "2줄", "3줄"]

// ✅ 정규식 활용 (공백/쉼표 모두 기준)
const words = "apple, banana orange".split(/[\s,]+/);
// → ["apple", "banana", "orange"]

// ✅ 특정 문자열 기준으로 앞뒤 나누기 (2개만)
const [before, after] = "title:React".split(":");
// before = "title", after = "React"

실전 예:
서버에서 "A|B|C" 같은 문자열이 올 때 배열로 만들어 React map()으로 UI를 뿌리는 데 자주 쓰입니다.

3. 특정 문자열 포함 여부 / 위치 찾기

// ✅ 포함 여부 확인 (대소문자 구분)
"Hello React".includes("React"); // true

// ✅ 대소문자 무시 포함 확인
"Hello React".toLowerCase().includes("react"); // true

// ✅ 시작/끝 검사
"Hello React".startsWith("Hello"); // true
"Hello React".endsWith("React"); // true

// ✅ 위치 찾기 (indexOf / lastIndexOf)
"Hello React".indexOf("React"); // 6 (없으면 -1)

// ✅ 조건문 활용 예시
if ("apple banana".includes("banana")) {
console.log(" 포함됨!");
}

보너스: 응용 예제 (3가지 기능 조합)

아래는 실무에서 자주 쓰는 문자열 → 배열 → 검사 흐름 예시예요

[REACT] fatch, axios 사용법

JDK's blog — Sun, 28 Sep 2025 11:22:27 +0900

React에서 데이터를 가져오는(fetch) 방법은 대표적으로 두 가지예요:
1️⃣ 기본 내장 fetch() API
2️⃣ 외부 라이브러리 axios

두 방법 모두 자주 쓰이고, 성격이 다르기 때문에 프로젝트 상황에 따라 선택합니다. 아래에 종류별 예제 + 설명을 정리했어요

1. fetch() 기본 사용법

✅ 기본 문법 (GET 요청):

import { useEffect, useState } from "react";

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts") // API 주소
      .then((res) => res.json())                       // 응답을 JSON으로 변환
      .then((data) => setPosts(data))                 // state에 저장
      .catch((err) => console.error("에러:", err));   // 에러 처리
  }, []);

  return (
    <div>
      <h2> fetch 예제</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

설명:

fetch()는 브라우저 내장 함수 → 별도 설치 필요 없음
.then() 체인을 사용하거나 async/await도 가능
응답을 JSON으로 변환하려면 .json()을 꼭 호출해야 함
에러 처리가 try/catch 대신 .catch()에서 이뤄짐

✅ POST 요청 (데이터 전송):

async function addPost() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ title: "새 글", body: "내용", userId: 1 }),
  });

  const result = await response.json();
  console.log("✅ 저장 결과:", result);
}

포인트:

method 지정 필요
headers로 JSON 전송 명시
body는 반드시 문자열(JSON.stringify)

2. axios 사용법

Axios는 Promise 기반 HTTP 클라이언트로, fetch보다 기능이 많고 문법이 간결합니다.

설치:

npm install axios

✅ 기본 GET 요청:

import axios from "axios";
import { useEffect, useState } from "react";

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => setPosts(res.data))       // JSON 변환 불필요
      .catch((err) => console.error("에러:", err));
  }, []);

  return (
    <div>
      <h2> axios 예제</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

fetch와 비교 포인트:

res.json() 필요 없음 → res.data 바로 사용
자동으로 JSON 변환 처리
에러가 catch로 잘 전달됨
요청/응답 인터셉터, 기본 URL, 헤더 설정 등 고급 기능 많음

✅ POST 요청 (axios):

async function addPost() {
  try {
    const res = await axios.post("https://jsonplaceholder.typicode.com/posts", {
      title: "새 글",
      body: "내용",
      userId: 1,
    });
    console.log("✅ 저장 결과:", res.data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

fetch vs axios 비교표

항목fetchaxios

설치 필요	❌ 없음 (기본 내장)	✅ 필요 (npm install axios)
문법 간결성	다소 복잡 (json 변환 필요)	직관적 (자동 JSON)
에러 처리	일부 제한 있음	에러 정보 상세
요청/응답 인터셉터	❌ 없음	✅ 있음
기본 URL/헤더 설정	❌ 없음	✅ 있음
브라우저 호환성	✅ 최신 브라우저	✅
취소 토큰 / 타임아웃	❌ 직접 구현 필요	✅ 기본 제공

HTTP 메서드별 개념 & 용도 정리

메서드역할주 용도특징예시 상황

GET	데이터 “조회”	서버에서 데이터 가져오기	Body 없음, URL로 요청	게시글 목록 보기, 상세보기
POST	✏️ 데이터 “생성”	새 데이터 등록	Body에 새 데이터 포함	회원가입, 새 글 작성
PUT	데이터 “전체 수정”	기존 데이터를 “완전히” 교체	Body에 전체 객체 포함	게시글 전체 수정
PATCH	데이터 “부분 수정”	일부 필드만 수정	Body에 수정 필드만 포함	닉네임만 변경
DELETE	데이터 “삭제”	서버의 리소스 삭제	Body 거의 없음	회원 탈퇴, 게시글 삭제

[REACT] useEffect로 알아보기

JDK's blog — Sun, 28 Sep 2025 10:20:47 +0900

⚛️ useEffect란?

useEffect는 React 함수형 컴포넌트에서 부수효과(Side Effect) 를 처리하기 위한 훅(Hook)입니다.
예를 들어 다음과 같은 동작이 모두 “부수효과”에 해당해요

API 호출 (데이터 가져오기)
⏱️ 타이머/인터벌 설정
로컬스토리지 접근
DOM 직접 조작
구독 해제나 리소스 정리(cleanup)

즉, 렌더링만으로는 해결되지 않는 외부 동작을 처리할 때 useEffect를 사용합니다.

useEffect(() => {
  // 이 안에서 부수효과 실행
  return () => {
    // (선택) cleanup: 컴포넌트가 사라질 때 실행
  };
}, [dependency]);

첫 번째 인자: 실행할 함수
return 부분: cleanup (선택 사항)
두 번째 인자 []: 의존성 배열 → 언제 실행할지 제어

예제 1 – 컴포넌트가 처음 렌더링될 때 1회 실행

import React, { useState, useEffect } from "react";

function Welcome() {
  const [message, setMessage] = useState("로딩 중...");

  useEffect(() => {
    // ✅ 마운트 시 한 번만 실행
    setTimeout(() => {
      setMessage("안녕하세요! ");
    }, 1500);
  }, []); // ← 의존성 배열이 빈 배열이면 '처음 한 번만'

  return <h2>{message}</h2>;
}

export default Welcome;

동작

컴포넌트가 처음 렌더링될 때만 setTimeout() 실행
1.5초 후 메시지가 업데이트되고 화면이 다시 렌더링됨

예제 2 – 상태 변화마다 실행

import React, { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(` 카운트가 ${count}로 변경됨`);
  }, [count]); // count가 바뀔 때마다 실행됨

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

동작

count 상태가 변경될 때마다 useEffect 안의 함수 실행
콘솔에 새로운 값 로그 출력

예제 3 – 타이머 사용 + 정리(cleanup)

import React, { useState, useEffect } from "react";

function Timer() {
  const [sec, setSec] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSec(s => s + 1), 1000);
    console.log("⏱️ 타이머 시작");

    // ✅ cleanup: 컴포넌트가 사라질 때 실행
    return () => {
      clearInterval(id);
      console.log(" 타이머 정리 완료");
    };
  }, []); // 마운트 시 1회 실행

  return <h2>⏱️ {sec}초 경과</h2>;
}

export default Timer;

동작

컴포넌트가 처음 나타날 때 setInterval 시작
1초마다 sec 상태 증가 → UI 자동 갱신
컴포넌트가 사라질 때 clearInterval()로 메모리 누수 방지

✅ 정리

옵션설명실행 시점

useEffect(() => {...}, [])	마운트 시 1회만 실행	최초 렌더링
useEffect(() => {...}, [state])	특정 상태/props가 바뀔 때 실행	의존성 변경 시
return () => {...}	정리(cleanup) 함수	언마운트 또는 재실행 전

[REACT] USESTATE 변수관리법

JDK's blog — Sun, 28 Sep 2025 10:14:52 +0900

useState란?

useState는 React에서 컴포넌트의 상태(state)를 관리하기 위한 기본 훅(Hook)입니다.
함수형 컴포넌트에서 변수값을 기억하고 업데이트할 수 있게 해주며, 값이 바뀌면 자동으로 UI를 다시 렌더링합니다.

문법:

const [state, setState] = useState(initialValue);

state: 현재 상태 값
setState: 상태를 변경하는 함수
initialValue: 상태의 초기값

기본 예제 – 카운터 만들기

import React, { useState } from "react";

function Counter() {
  // count라는 상태를 0으로 초기화
  const [count, setCount] = useState(0);

  // +1 증가
  const increase = () => setCount(count + 1);
  // 초기화
  const reset = () => setCount(0);

  return (
    <div>
      <h2>현재 카운트: {count}</h2>
      <button onClick={increase}>+1</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}

export default Counter;

실행 흐름:

처음 렌더링 시 count는 0
버튼 클릭 시 setCount()가 실행 → 상태 변경
상태가 바뀌면 자동으로 다시 렌더링되어 화면의 숫자도 갱신됨

예제 2 – 토글 상태 관리

import React, { useState } from "react";

function LoginToggle() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <p>{isLoggedIn ? "✅ 로그인 상태" : " 로그아웃 상태"}</p>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "로그아웃" : "로그인"}
      </button>
    </div>
  );
}

export default LoginToggle;

실행 흐름:

초기 상태는 false → “로그아웃 상태” 표시
버튼 클릭 시 !isLoggedIn으로 상태가 반전 → UI도 자동 변경

✅ 정리

useState는 함수형 컴포넌트에서 상태를 저장·업데이트하는 기본 훅
상태 변경 시 자동 렌더링 → DOM 조작 불필요
다양한 타입(숫자, 문자열, 배열, 객체 등) 저장 가능
이벤트·폼 입력·토글 UI 등에서 가장 자주 사용됨

[REACT] 핵심특징 7가지

JDK's blog — Sun, 28 Sep 2025 09:33:33 +0900

⚛️ React의 7가지 핵심 특징 정리

1️⃣ 컴포넌트 기반 구조 (Component-Based Architecture)

React는 UI를 작고 독립적인 컴포넌트(Component) 단위로 쪼개어 개발합니다.
각각의 컴포넌트는 자신의 상태(state)와 UI를 관리하며, 조합하여 복잡한 화면을 쉽게 구성할 수 있습니다.
이 방식은 재사용성, 유지보수성, 협업 효율성을 모두 높여줍니다.

function Header() {
  return <h1>안녕하세요!</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>컴포넌트 조합으로 화면 구성</p>
    </div>
  );
}

2️⃣ 가상 DOM (Virtual DOM)

React는 브라우저 DOM을 직접 조작하지 않고, 메모리에 가상의 DOM(Virtual DOM)을 만들어 변경 사항만 비교(diff)한 후
필요한 부분만 최소한으로 업데이트합니다.
이로 인해 불필요한 렌더링을 줄이고 성능이 대폭 향상됩니다.

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

3️⃣ 단방향 데이터 흐름 (One-Way Data Flow)

React는 부모 → 자식 방향으로만 데이터가 흐르는 단방향 데이터 플로우 구조를 가집니다.
데이터 흐름이 단순해 예측 가능성이 높고, 디버깅이 쉽습니다.

function Child({ text }) {
return <p>{text}</p>;
}

function Parent() {
return <Child text="단방향 데이터 흐름 예제" />;
}

4️⃣ 선언적 UI (Declarative UI)

React는 명령형 방식으로 DOM을 직접 조작하지 않고, “무엇을 보여줄지”를 선언합니다.
상태(state)가 변경되면 React가 알아서 UI를 다시 렌더링해주므로 코드가 간결하고 유지보수가 쉽습니다.

function App() {
const [loggedIn, setLoggedIn] = React.useState(false);
return <div>{loggedIn ? "로그인 성공!" : "로그인이 필요합니다"}</div>;
}

5️⃣ Hooks를 통한 상태 관리 (Hooks & State)

useState, useEffect 같은 Hooks를 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 제어가 가능합니다.
복잡한 상태는 Redux, Zustand, Recoil 등의 라이브러리와 연동하여 관리할 수 있습니다.

6️⃣ 풍부한 생태계 & 커뮤니티 (Rich Ecosystem & Community)

React는 라우팅(react-router), 상태 관리, UI 라이브러리(Material UI, Chakra UI) 등 다양한 생태계를 갖추고 있으며
전 세계적으로 커뮤니티가 활발하여 문제 해결 속도가 빠르고 자료가 풍부합니다.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav><Link to="/about">About</Link></nav>
      <Routes>
        <Route path="/about" element={<div>About Page</div>} />
      </Routes>
    </BrowserRouter>
  );
}

7️⃣ 다양한 플랫폼 지원 (Cross-Platform Support)

React는 웹(React DOM)뿐 아니라 모바일(React Native), 데스크톱(Electron), SSR(Next.js) 등
다양한 플랫폼에서 활용할 수 있습니다.

import { View, Text, Button } from "react-native";

export default function MobileApp() {
  return (
    <View>
      <Text>Hello React Native</Text>
      <Button title="확인" onPress={() => {}} />
    </View>
  );
}

한눈에 보는 요약

특징설명장점

컴포넌트 기반	UI를 재사용 가능한 단위로 구성	유지보수성 ↑, 재사용성 ↑
⚡ Virtual DOM	변경 부분만 렌더링	성능 ↑
단방향 데이터 흐름	부모 → 자식 데이터 전달	예측 가능성 ↑
선언적 UI	상태 기반 자동 UI 업데이트	코드 간결성 ↑
Hooks	상태·생명주기 제어 및 확장성	재사용성 ↑
생태계	라우팅·UI·상태관리 등 풍부	생산성 ↑
멀티 플랫폼	웹 / 모바일 / 데스크톱 지원	확장성 ↑

개인정보처리방침

JDK's blog — Thu, 3 Jul 2025 15:53:41 +0900

개인정보처리방침 양식을 찾으시는군요. 플레이스토어 통과를 목표로 하는 효과적인 개인정보처리방침은 단순히 빈칸을 채우는 양식보다는, 앱의 실제 데이터 처리 방식을 정확히 반영하는 맞춤형 문서여야 합니다.

하지만 일반적인 개인정보처리방침에 포함되어야 할 필수적인 내용들을 바탕으로, 플레이스토어 앱을 위한 개인정보처리방침 양식의 큰 틀과 각 섹션에 포함되어야 할 핵심 내용을 아래와 같이 정리해 드립니다. 이 양식을 기반으로 귀하의 앱에 맞게 내용을 상세히 채우고 수정하는 작업이 필요합니다.

[sssSoft] 개인정보처리방침

본 개인정보처리방침은 [sssSoft] (이하 "저희" 또는 "앱")이 [날짜]부터 사용자로부터 수집하고 사용하는 개인정보에 대한 내용을 설명합니다. 저희는 사용자의 개인정보를 소중히 여기며, 관련 법령 및 규정을 준수하고 투명하게 개인정보를 처리하기 위해 최선을 다하고 있습니다.

1. 수집하는 개인정보의 종류 및 수집 방법

저희 앱은 원활한 서비스 제공 및 개선을 위해 다음과 같은 개인정보를 수집할 수 있습니다.

가. 직접 수집 정보 (사용자가 직접 제공하는 정보)

회원가입/계정 정보: [이름, 이메일 주소, 전화번호, 프로필 사진, 소셜 로그인 정보 (예: Google, Apple ID), 생년월일, 성별 등 앱에서 수집하는 특정 계정 정보를 명시하세요.]
- 예시: 이메일 주소 (회원 인증 및 비밀번호 찾기), 프로필 사진 (다른 사용자에게 표시되는 프로필), 닉네임 (서비스 내 식별 목적)
결제 정보: [인앱 결제 등이 있는 경우, 실제로 앱에서 결제 정보를 직접 수집하는지 여부를 명시하세요. 보통 결제는 제3자 결제대행사(PG사)를 통해 이루어지므로, 이 경우 PG사를 명시하고 직접 수집하지 않음을 밝혀야 합니다.]
- 예시: 저희 앱은 직접 결제 정보를 수집 및 저장하지 않으며, 모든 결제는 [결제대행사 이름, 예: Google Play Billing]를 통해 처리됩니다.
사용자 생성 콘텐츠: [앱 내에서 사용자가 직접 작성하거나 업로드하는 콘텐츠 유형을 명시하세요. 예: 채팅 메시지, 게시물, 댓글, 사진, 동영상, 음성 녹음 등]
- 예시: 채팅 메시지 (앱 내 소통 기능), 게시물 (사용자 간 정보 공유), 사진 (프로필 설정)
고객 지원 문의: [서비스 이용 중 문의사항을 접수할 때 제공되는 정보. 예: 문의 내용, 연락처 정보 등]

나. 자동 수집 정보 (앱 사용 과정에서 자동으로 생성 및 수집되는 정보)

기기 정보: [기기 모델, 운영체제 버전, 고유 기기 식별자 (예: 광고 ID, 기기 ID), IP 주소, 기기 언어 설정, 앱 버전 등]
- 예시: 기기 식별자 (서비스 오류 분석 및 통계), IP 주소 (보안 및 지역 서비스 제공)
사용 기록: [앱 사용 빈도, 기능 사용 기록, 서비스 이용 시간, 접속 로그, 앱 충돌 정보 등]
- 예시: 앱 사용 기록 (서비스 개선 및 사용자 경험 분석), 오류 로그 (버그 수정 및 안정성 확보)
위치 정보: [사용자 동의하에 수집하는 경우에만 명시하세요. GPS 기반 위치, 네트워크 기반 (Wi-Fi, 셀룰러) 위치 등]
- 예시: 정확한 위치 (위치 기반 서비스 제공, 예: 주변 상점 찾기), 대략적인 위치 (맞춤형 콘텐츠 제공)
쿠키 및 유사 기술: [웹뷰를 사용하거나 웹 기반 기능이 있는 경우에만 명시하세요. 쿠키, 웹 비콘 등]
- 예시: 쿠키 (사용자 로그인 상태 유지 및 맞춤형 콘텐츠 제공)

2. 개인정보의 수집 및 이용 목적

저희는 수집한 개인정보를 다음의 목적으로 활용합니다.

서비스 제공 및 운영: [앱의 핵심 기능을 제공하고, 계정을 관리하며, 사용자 요청에 응답하고, 기술 지원을 제공합니다.]
서비스 개선 및 개발: [앱의 성능을 분석하고, 버그를 수정하며, 새로운 기능 및 서비스를 개발하여 사용자 경험을 향상시킵니다.]
맞춤형 서비스 제공: [사용자의 이용 패턴을 분석하여 개인화된 콘텐츠, 추천 서비스, 맞춤 광고 등을 제공합니다.]
마케팅 및 광고 (해당하는 경우): [이벤트 및 프로모션 안내, 맞춤형 광고 게재 등]
보안 및 부정 이용 방지: [서비스의 보안을 유지하고, 불법적이거나 승인되지 않은 활동을 방지합니다.]
법적 의무 준수: [관련 법률 및 규정을 준수하고, 법적 요청에 응답합니다.]

3. 개인정보의 제3자 제공 및 공유

저희는 사용자의 동의 없이 개인정보를 외부에 제공하지 않습니다. 단, 서비스 제공을 위해 다음과 같이 개인정보를 제3자에게 제공하거나 공유할 수 있습니다.

[제3자 서비스 이름, 예: Google Analytics for Firebase]:
- 제공 목적: [앱 사용 통계 분석, 서비스 개선]
- 제공 정보 유형: [기기 정보, 사용 기록, 앱 충돌 데이터 (개인 식별 불가능한 형태로)]
- 관련 정책: [해당 제3자 서비스의 개인정보처리방침 URL]
[제3자 서비스 이름, 예: AdMob (Google) / Facebook Audience Network (Meta)]:
- 제공 목적: [맞춤형 광고 제공, 광고 효과 측정]
- 제공 정보 유형: [광고 ID, 기기 정보, 앱 사용 기록]
- 관련 정책: [해당 제3자 서비스의 개인정보처리방침 URL]
[결제대행사 이름, 예: Google Play Billing]:
- 제공 목적: [결제 처리 및 정산]
- 제공 정보 유형: [결제 관련 정보 (신용카드 번호 등 민감 정보는 보통 직접 수집하지 않음), 거래 내역]
- 관련 정책: [해당 결제대행사 또는 플랫폼의 개인정보처리방침 URL]
법적 의무: 관련 법률에 의거하거나 수사 목적으로 법률에서 정한 절차와 방법에 따라 수사기관의 요청이 있는 경우 개인정보를 제공할 수 있습니다.

4. 개인정보의 보관 및 파기

가. 보관 기간:

사용자의 개인정보는 원칙적으로 서비스 이용 목적이 달성되거나, 법률에 따른 보관 기간이 만료될 때까지 보관됩니다.
- 예시: 회원 탈퇴 시, 모든 개인정보는 [즉시 또는 5일 이내, 30일 이내 등 구체적인 기간] 파기됩니다. 단, 관련 법령에 따라 보존해야 하는 정보는 해당 법령이 정한 기간 동안 보관됩니다.

나. 파기 절차 및 방법:

개인정보는 목적 달성 후 별도의 DB로 옮겨져(종이의 경우 별도 서류함) 관계 법령에 따라 일정 기간 저장된 후 파기됩니다.
전자적 파일 형태로 저장된 개인정보는 기록을 재생할 수 없는 기술적 방법을 사용하여 삭제하며, 종이 문서에 저장된 개인정보는 분쇄기로 분쇄하거나 소각하여 파기합니다.

5. 사용자 및 법정대리인의 권리 및 행사 방법

사용자 (만 14세 미만 아동의 경우 법정대리인)는 언제든지 다음의 권리를 행사할 수 있습니다.

개인정보 열람 요구: 본인 또는 법정대리인의 개인정보에 대한 열람을 요구할 수 있습니다.
오류 등이 있을 경우 정정 요구: 개인정보에 오류가 있는 경우 정정을 요구할 수 있습니다.
삭제 요구: 회원 탈퇴 등을 통해 개인정보의 삭제를 요구할 수 있습니다.
처리 정지 요구: 개인정보 처리에 대한 정지를 요구할 수 있습니다.

이러한 권리 행사는 [앱 내 설정 메뉴, 이메일 ([개인정보 보호 책임자 이메일 주소]), 또는 서면]을 통해 가능하며, 저희는 요청에 대해 지체 없이 조치하겠습니다.

6. 개인정보의 안전성 확보 조치

저희는 사용자의 개인정보를 안전하게 보호하기 위해 다음과 같은 조치를 취하고 있습니다.

기술적 조치: 개인정보 암호화, 보안 프로그램 설치 및 주기적 업데이트, 백업 시스템 운영 등
관리적 조치: 개인정보 취급 직원의 최소화 및 교육, 접근 권한 관리, 내부 관리 계획 수립 및 시행 등

7. 아동의 개인정보 보호

저희 앱은 원칙적으로 만 14세 미만의 아동을 대상으로 하지 않습니다. 만약 만 14세 미만 아동의 개인정보가 수집된 사실을 인지하게 될 경우, 해당 정보를 즉시 삭제할 것입니다. 만약 아동의 개인정보가 필요하다면, 관련 법령에 따라 법정대리인의 동의를 얻을 것입니다.

8. 개인정보 보호 책임자 및 연락처

개인정보 보호와 관련하여 문의사항이나 불만사항이 있으시면 아래 연락처로 문의해 주시기 바랍니다.

회사/개인 개발자명: [귀하의 회사명 또는 개인 개발자 이름]
개인정보 보호 책임자: [이름 또는 직책, 예: 개인정보 보호 관리자]
이메일: [문의용 이메일 주소]

9. 개인정보처리방침 변경

이 개인정보처리방침은 법령, 정책 또는 보안 기술의 변경에 따라 내용이 변경될 수 있으며, 변경 사항은 최소 7일 전에 [앱 내 공지, 웹사이트 공지 등 변경 고지 방법 명시]를 통해 사용자에게 고지됩니다.

공고일: [2025년 7월 25일]
시행일: [2025년 7월 25일]

이 양식을 채우면서 다음 사항을 꼭 기억하세요:

정확성: 앱이 실제로 수집하고 사용하는 데이터를 정확하게 기재해야 합니다.
투명성: 모호한 표현 없이, 사용자에게 모든 정보를 명확하게 전달해야 합니다.
최신성: 앱 기능이 변경되거나 새로운 SDK를 추가할 때마다 개인정보처리방침을 업데이트해야 합니다.
전문가 검토: 가능하면 법률 전문가의 검토를 받아 법적 문제 발생 가능성을 최소화하는 것이 좋습니다.

이 양식이 플레이스토어 정책을 준수하는 개인정보처리방침을 작성하는 데 도움이 되기를 바랍니다.

페이스북앱 인스타그램앱 GOOGLE앱 안에 브라우저 체크

JDK's blog — Sat, 18 Apr 2020 10:59:29 +0900

//페이스북앱 인스타그램앱 따로처리하기

var ua = navigator.userAgent || navigator.vendor || window.opera;

if( (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1) || (ua.indexOf('Instagram') > -1) || (ua.indexOf('GSA') > -1) ){

처리구문

}

jqxGrid 셀클릭시 이벤트 및 체크박스제어 및 event.args 일부

JDK's blog — Thu, 2 Apr 2020 17:37:16 +0900

//셀클릭시 이벤트

$(jqxGid셀렉터).on("cellclick", function (event){

//값을 가져옵니다.

var bool = $(jqxGid셀렉터).jqxGrid('getcellvalue', event.args.rowindex, "columnName");

console.log("bool :"+bool);

if(bool){

alert("11");

//값을 변경합니다.(고정값, row수, columnName, 값

$(jqxGid셀렉터).jqxGrid('setcellvalue', event.args.rowindex, 'columnName', false);

}else{

alert("22");

$(jqxGid셀렉터).jqxGrid('setcellvalue', event.args.rowindex, 'columnName', true);

}

});

var column = event.args.column;

var rowindex = event.args.rowindex; // 몇번째줄인지

var columnindex = event.args.columnindex; // 몇번째 칼럼인지

레이어팝업으로 PDF 파일 띄우기

JDK's blog — Tue, 10 Mar 2020 09:44:33 +0900

1. HTML

<style>

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

#popup_layer { width:400px; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top:260px; left:50%; margin-left:-200px; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}

</style>

3. script

$(document).ready(function(){

$('#popup_layer, #overlay_t').show();

$('#overlay_t, .close').click(function(e){

e.preventDefault();

$('#popup_layer, #overlay_t').hide();

});

Linux Centos 인터넷 연결

JDK's blog — Sat, 6 Apr 2019 18:10:27 +0900

안녕하세요.

Linux Centos 인터넷 설정입니다.

파일명은 약간 다를 수도 있습니다.(파일경로는 동일)

vi /etc/sysconfig/network-scripts/ifcfg-eth0

onboot=no -> onboot=yes 변경

!:wq (저장)

!;q!(미저장 종료)

service network restart // 재시작

해당 화면에 인터넷 화면도 있습니다.

감사하니다.