불꽃놀이보고싶다

INSERT + FOREIGN KEY 에러 테스트

사용자가불꽃놀이좋아함 — Wed, 25 Feb 2026 17:05:58 +0900

이전 글: WMS DB 설계 기초

WMS 데이터베이스 실습 — INSERT와 외래키 무결성 검증

상품 등록 (INSERT)

INSERT INTO products (barcode, prod_name) VALUES ('1234','두쫀쿠');

재고 등록 (INSERT)

INSERT INTO inventory (barcode, quantity, location_code) VALUES ('1234', 100, 'A-1-1');

Foreign Key(외래키) 무결성 검증 — 에러 유발 테스트

존재하지 않는 바코드 '9999'로 재고 등록

INSERT INTO inventory (barcode, quantity, location_code) VALUES ('9999', 50, 'B-1-1');

에러 메시지

inventory 테이블을 만드는데 애러발생

Cannot add or update a child row: a foreign key constraint fails (`wms_db`.`inventory`, CONSTRAINT `inventory_ibfk_1` FOREIGN KEY (`barcode`) REFERENCES `products` (`barcode`))

원인 분석

products 테이블에 '9999'라는 바코드를 가진 상품이 없으므로 inventory에 재고 넣을 수 없음

✅ 한 줄 정리

FOREIGN KEY의 핵심 역할 - 데이터 무결성(Data Integrity) 보장

WMS 데이터베이스 설계 기초 — 상품·재고 테이블과 외래키 정리

사용자가불꽃놀이좋아함 — Wed, 25 Feb 2026 16:13:51 +0900

WMS의 기초가 되는 데이터베이스 설계(Database Schema Design)

WMS(Warehouse Management System, 창고관리시스템)

"어떤 물건이 어디에 있고, 어디로 가야 하는가?" 를 관리하는 시스템
창고 안으로 들어오는 물건(입고)과 나가는 물건(출고)의 정보를 체계적으로 관리

주요 기능

입고 / 출고 관리
재고 위치 최적화 (Slotting)
유통기한 관리
재고 실사

개발 관점에
바코드, RFID 등을 활용해 재고 정확도를 100%에 가깝게 유지하고, 동선을 효율화하는 로직이 중요
목표: 재고 가시성 확보및 물류 비용 절감

상품(Product) 테이블 설계

CREATE TABLE products (
    prod_id  INT AUTO_INCREMENT PRIMARY KEY,  -- 숫자, 자동 증가 (1, 2, 3...)
    barcode  VARCHAR(50),                      -- 바코드 번호 (최대 50자)
    prod_name VARCHAR(100)                     -- 상품명 (최대 100자)
);

️ PRIMARY KEY (기본키) VS UNIQUE (고유키)

"중복을 허용하지 않는다"

	PRIMARY KEY (기본키)	UNIQUE (고유키)
개수	테이블당 1개만 가능	여러 개 설정 가능
NULL 허용	❌ Not Null	✅ Null 허용
용도	행(Row)을 대표하는 식별자	아이디, 이메일, 전화번호 등
비유	조직의 유일무이한 두목	행동대장

CHAR (고정 길이) VS VARCHAR (가변 길이)

	CHAR(10)	VARCHAR(10)
저장 방식	3글자 넣어도 10칸 전부 차지 (나머지는 공백)	3글자 넣으면 3칸만 차지
공간 효율	낮음 (낭비 발생)	높음 (알뜰살뜰)
검색 속도	약간 더 빠름	크기 계산이 필요해 상대적으로 느림
용도	주민번호, 성별(M/F), 국가코드	이름, 주소, 게시글 제목
WMS 예시	창고 구역 코드 (길이가 고정된 데이터)	상품명 (길이가 제각각)

길이가 항상 일정하면 CHAR, 길이가 들쭉날쭉하면 VARCHAR

재고(Inventory) 테이블 설계

CREATE TABLE inventory (
    inv_id        INT AUTO_INCREMENT PRIMARY KEY,
    barcode       VARCHAR(50),
    quantity      INT DEFAULT 0,          -- 숫자로 지정하고 기본 값은 0 
    location_code VARCHAR(20),            -- 창고 내 위치 (예: A-1-1)
    FOREIGN KEY (barcode) REFERENCES products(barcode)
    -- inventory의 barcode는 반드시 products 테이블에 존재해야 한다
);

⛓️ FOREIGN KEY와 데이터 무결성

FOREIGN KEY(외래키)는 부모-자식 관계를 통해 데이터 무결성을 보장

products 테이블 (부모)
    └── inventory 테이블 (자식)

inventory에 barcode를 입력하려고 할 때 -> products 테이블 barcode 자동으로 검문
부모 테이블 products에 존재하지 않는 barcode면 에러처리

ON DELETE / ON UPDATE 옵션

부모 테이블 products에서 바코드를 삭제하거나 수정하려고 하면 ??

옵션	동작
RESTRICT (기본값)	부모의 삭제와 수정을 막음
CASCADE	부모-> 삭제/수정, 자식-> 함께 삭제/수정
SET NULL	부모가 삭제되면 자식의 해당 컬럼을 NULL로 처리

사용 예시

FOREIGN KEY (barcode) REFERENCES products(barcode)
    ON DELETE CASCADE   -- 부모(products) 삭제 시 자식(inventory)도 삭제
    ON UPDATE RESTRICT  -- 부모(products) 수정 불가 ❌
);

FOREIGN KEY 설정 실패

에러 메시지

inventory 테이블을 만드는데 애러발생

Failed to add the foreign key constraint.
Missing unique key for constraint 'inventory_ibfk_1' in the referenced table 'products'
-> 참조하려는 부모(products)의 바코드에 'UNIQUE(유일함)' 보장이 없어서 연결할 수 없음

원인 분석

"참조할 대상(부모)은 반드시 유일해야 한다."

FOREIGN KEY로 참조하려는 컬럼(products.barcode)에 UNIQUE 또는 PRIMARY KEY 설정이 안 되어 있다면
같은 바코드가 여러 행에 존재할 수 있음

해결 방법

ALTER TABLE products ADD UNIQUE (barcode);
-- products 테이블 수정할건데
-- barcode에 UNIQUE 규칙을 추가할거야

구조 확인

DESC products;

✅ 한 줄 정리

PRIMARY KEY: 테이블의 대표 식별자, 딱 1개, NULL 불가
UNIQUE: 중복 불가, 여러 개 설정 가능, NULL 허용
CHAR vs VARCHAR: 고정 길이 vs 가변 길이, WMS에선 구역 코드엔 CHAR, 상품명엔 VARCHAR
FOREIGN KEY: 부모-자식 관계로 데이터 무결성 보장
ON DELETE/UPDATE: CASCADE(연쇄), RESTRICT(차단), SET NULL(무효화)

VS Code + Spring Boot CRUD 만들어보기

사용자가불꽃놀이좋아함 — Tue, 17 Feb 2026 03:08:57 +0900

VS Code에서 Spring Initializr로 프로젝트 만들기

명령 팔레트 열기
- 윈도우: Ctrl + Shift + P
- 맥: Cmd + Shift + P
Spring Initializr: Create a Gradle Project... (또는 Maven Project) 검색 후 선택
엔터엔터 선택
- Spring Boot 버전
- Language: Java
- Group Id, Artifact Id
- Build Tool: Maven / Gradle
- Dependencies: Spring Web, Spring Data JPA, H2 혹은 MySQL 등

Spring Initializr에서 설정 다운로드

설정들을 웹에서 선택 > GENERATE 버튼 > ZIP 다운로드 > VS Code에서 실행

Maven

Java 프로젝트용 빌드 도구
라이브러리(의존성) 관리, 컴파일, 패키징(JAR/WAR) 등을 자동으로 수행
npm (JavaScript) = Maven (Java)

pom.xml

Maven 프로젝트의 설정 파일
≈≈≈ package.json 와 비슷 (어떻게 빌드할지)
├── 프로젝트 정보 (이름, 버전 등)
├── 어떤 라이브러리를 쓸지 (dependencies)
├── 어떤 플러그인을 쓸지
└── 빌드 방법 (빌드 라이프사이클 설정)

<!-- pom.xml 예시 일부 -->
<project>
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.example</groupId>
  <artifactId>demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>

  <dependencies>
    <!-- 여기 안에 spring-boot-starter-web 같은 의존성들이 들어감 -->
  </dependencies>
</project>

의존성(라이브러리) 추가하는 방법

VS Code > 명령 팔레트 > Maven: Add a Dependency... 사용 (편의 기능)
pom.xml 직접 수정 (정석)
Maven Central Repository 에서 검색 후 XML 코드 복사, pom.xml 붙여넣기

빌드 명령: mvn clean install

mvn clean install ≈≈≈ npm install + 빌드까지 한 번에 돌린 느낌
// clean -> 이전 빌드 삭제
// 새로 빌드
// install -> 프로젝트 컴파일 + 테스트 + 패키징(JAR 생성)
// 로컬 저장소에 배포

	React(npm)	Java(Maven)
라이브러리 정의 파일	`package.json`	`pom.xml`
라이브러리 추가 방식	`npm install ***`	`<dependency>...</dependency> XML 추가`
설치 및 반영	`npm install`	`mvn clean install`

JavaScript Map vs Java HashMap

사용자가불꽃놀이좋아함 — Mon, 16 Feb 2026 17:37:44 +0900

JavaScript Map vs Java HashMap

JavaScript: Map 기본 사용법

const userMap = new Map();

// 데이터 추가
userMap.set('name', '길동');
userMap.set('age', 19);

// 데이터 조회
userMap.get('name');  // '길동'

// 존재 확인 및 크기
userMap.has('name');  // true
userMap.size;         // 2

Java: HashMap 기본 사용법

Java 차이점: Map -> 인터페이스, HashMap -> Map을 구현한 클래스 -> 세트

// 타입 지정 + 구현체 선택 -> Map 타입인데  HashMap으로 만들겠다
Map<String, Object> userMap = new HashMap<>();
HashMap<String, Object> userMap = new HashMap<>();

// 데이터 추가
userMap.put("name", "길동");
userMap.put("age", 19);

// 데이터 조회
userMap.get("name");          // "길동"

// 존재 확인 및 크기
userMap.containsKey("name");  // true
userMap.size();               // 2 (메서드 호출)

메서드 비교

기능	JavaScript	Java
추가	`set(key, value)`	`put(key, value)`
조회	`get(key)`	`get(key)`
존재 확인	`has(key)`	`containsKey(key)`
크기	`size` (프로퍼티)	`size()` (메서드)

반복문 비교

JavaScript: forEach 사용

const users = new Map();
users.set('user1', { name: '철수', age: 30 });
users.set('user2', { name: '영희', age: 25 });

users.forEach((value, key) => {
  console.log(key, value);
});

Java: for-each 사용

Map<String, User> users = new HashMap<>();
users.put("user1", new User("철수", 30));
users.put("user2", new User("영희", 25));

for (String key : users.keySet()) {
  System.out.println(key + ": " + users.get(key));
}

Spring Repository 패턴

public class StudentRepository {
  // 필드: 클래스 안에 선언된 변수
  // ⚛️ React -> useRef / useState처럼 호출마다 사라지지 않고 유지됨
  private final Map<String, Student> studentMap = new HashMap<>();

  public void save(Student student) {
    studentMap.put(student.getName(), student);
  }
}

save 함수 실행 과정

// 1. Repository 필드 선언 (컴포넌트 상태처럼 유지됨)
private final StudentRepository studentRepository;

// 2. Student 객체 생성 (저장할 실제 데이터)
Student student = new Student(
  studentInfoDto.getName(), 
  studentInfoDto.getAge(), 
  studentInfoDto.getAddress()
);

// 3. Repository에 저장
studentRepository.save(student);

✅ 한 줄 정리:

JavaScript -> Map 하나로 끝
Java -------> Map: (설계도) + HashMap: (실제 구현체), <Key타입, Value타입> 필수

Spring Service DTO 실습: private final getter 정리

사용자가불꽃놀이좋아함 — Mon, 16 Feb 2026 16:11:50 +0900

Spring Service DTO 실습: private final getter 정리

프론트엔드 → 백엔드 전환 !

DTO: Data Transfer Object

application/dto/StudentDto.java (데이터 상자)

public class StudentDto {
    //  String(타입) name(변수명)
    private String name;        // 문자열 학생 이름 변수
    private int studentNumber;  // 숫자 학번 변수

    public String getName() { // getter/setter
        return name;
    }    
    public void setName(String name) {
        this.name = name;  // 검증 로직 추가 가능
    }

    // Entity와 필드 다를 수 있음 (보안용)
    // 예: Entity엔 password도 있지만 DTO엔 제외
}

private -> 이 변수는 나만 쓸 거야!

클래스 내부에서는 자유롭게 사용
외부에서는 직접 접근 불가 (getter/setter로만)
실수로 외부에서 함부로 바꾸는 것 방지 ✅

getter/setter 개념

public class StudentDto {
    private String name;  // ❌ 다른 파일에서 직접 접근 불가!

    //   getter 함수: "name 값을 보여줘!"
    public String getName() {
        return name;
    }
}
StudentDto student = new StudentDto();
// student.name = "홍길동";  // ❌ 컴파일 에러!
String name = student.getName();  // ✅ 가능! getter로만 접근

⚛️ React

const [name, setName] = useState<string>("");  
name        // Getter 역할
setName()   // Setter 역할
const student = { name: "홍길동" };
console.log(student.name);  // ✅ 직접 접근 OK

Java: 직접 접근 불가 → 함수로만!
StudentDto student = new StudentDto();
student.getName()  // Getter ✅ 함수로만 접근
student.setName()  // Setter ✅ 함수로만 접근

React	Java
student.name	student.getName()
setName(value)	student.setName(value)

application/service/StudentService.java

public class StudentService {
    // 접근제한 + 불변
    private final StudentRepository repo;

    public StudentDto create(StudentDto dto) {
        // 검증 로직
        if (dto.getName() == null) throw new IllegalArgumentException("이름 필수");

        Student entity = new Student(dto.getName(), dto.getStudentNumber());
        repo.save(entity);
        return new StudentDto(entity); // DTO 변환
    }
}

final -> 절대 바꾸지 않아!

클래스 내부에서는 자유롭게 사용
외부에서는 직접 접근 불가 (getter/setter로만)
실수로 외부에서 함부로 바꾸는 것 방지 ✅

private vs final 차이 비교

final -> 값 바꾸기 방지
private -> 직접 접근 방지

키워드	목적	비유	코드 예시
`private`	외부에서 직접 접근 차단	"집 안 물건, 문 잠금"	`student.name = "김철수"` ❌
`final`	한 번 설정 후 값 변경 차단	"접착제로 붙인 라벨"	`repo = 다른Repo` ❌

public (없거나 public일 때)

외부에서 직접 접근 가능!

public class StudentDto {
    public String name;        // ✅ 직접 접근 가능
    public int studentNumber;  // ✅ 직접 접근 가능
}

StudentDto student = new StudentDto();
student.name = "홍길동";          // ✅ OK!
System.out.println(student.name); // ✅ OK!

✅ 한 줄 정리:

private -------> 안 보여줄래 (캡슐화)
final ---------> 바꾸지 않을래 (불변성)
getter/setter -> 필요할 때만 보여줄래
Service -------> 검증 + 비즈니스 로직 처리

Spring Service와 DTO 역할

사용자가불꽃놀이좋아함 — Mon, 16 Feb 2026 14:27:36 +0900

Spring Service와 DTO 역할: 계층별 폴더 구조 정리

Service와 DTO 핵심 역할

Service

업무 규칙, 비즈니스 흐름 담당
예외처리, 데이터 저장/조회, 입력값 검증 로직

DTO (Data Transfer Object)

"데이터 상자" 역할
계층 간 데이터 운반 (Controller ↔ Service)
Entity와 분리해 보안/성능 최적화

권장 폴더 구조

src/main/java/com/example/
│
├── application/ # 유즈케이스 (기능별 로직)
│ ├── service/ # Service (선생님: 어떻게 처리할지 담당)
│ └── dto/ # DTO (이름,나이,번호 정보만 전달)
│
├── domain/ # 도메인 규칙, Entity (학교)
│ └── entity/ # 이름/번호로 구분되는 핵심 데이터 (사람,반)
└── repository/ # 데이터 저장/조회 (DB 접근)

[React] html-react-parser

사용자가불꽃놀이좋아함 — Fri, 20 Sep 2024 13:25:50 +0900

html-react-parser 안전하게 HTML 렌더링

서버에서 받아온 HTML 태그가 포함된 문자열을 화면에 그대로 렌더링해야 할 때 -> dangerouslySetInnerHTML 사용한다

dangerouslySetInnerHTML

const App = () => {
const htmlString = `<p>!! 나는 <strong>위험한</strong> 속성이다 !!</p>`;

  return (
      <div dangerouslySetInnerHTML={{ __html: htmlString }} />
  );
};

export default App;

dangerouslySetInnerHTML 사용을 지양해야 하는 이유

React는 XSS(Cross-Site Scripting) 공격을 방지하기 위해 렌더링 과정에서 HTML 이스케이프(Escape) 처리를 한다
HTML이나 JavaScript 코드가 컴포넌트에 삽입되는 것을 제한하는 React의 보호 기능을 무시하고
dangerouslySetInnerHTML를 사용하면 강제로 HTML 직접 삽입

<script>공격!</script>

React 기본 기능은 위 스크립트를 문자열로 받지만 "< script >공격!< /script >"
⚠️ dangerouslySetInnerHTML를 쓰면 문자열로 받지 않고 script로 들어와 코드가 실행된다
이런 위험이 있으므로 말그대로 '위험(dangerous)' 해진다

html-react-parser 사용

html-react-parser
dangerouslySetInnerHTML를 사용하다가 보안상의 이슈로 html-react-parser 라이브러리 사용

✅ html-react-parser 장점

컴포넌트 변환: 문자열 주입❌, HTML을 리액트 엘리먼트로 파싱하여 변환
안전한 렌더링: 필요한 경우 특정 태그를 필터링하거나 리액트의 라이프사이클 안에서 안전하게 렌더링을 제어 가능

라이브러리 설치

npm install html-react-parser
npm install @types/html-react-parser

yarn add html-react-parser
yarn add @types/html-react-parser

간단 사용법

parse() 함수를 사용하여 HTML을 동적으로 렌더링할 수 있다

import parse from 'html-react-parser';

const App = () => {
  const htmlString = `
    <div>
      <h1>!! Hello !! World !!</h1>
    </div>
  `;

  return (
    <div>
      {parse(htmlString)}
    </div>
  );
};

[React] clsx 라이브러리

사용자가불꽃놀이좋아함 — Thu, 19 Sep 2024 15:08:39 +0900

클래스 이름을 조건부로 병합하거나 동적으로 관리할때 사용

clsx

A tiny (239B) utility for constructing className strings conditionally.. Latest version: 2.1.1, last published: 5 months ago. Start using clsx in your project by running `npm i clsx`. There are 10443 other projects in the npm registry using clsx.

www.npmjs.com

라이브러리 install

npm install clsx

yarn add clsx

import clsx from 'clsx';

function Button({ isPrimary, isDisabled, onClickEvent, text }) {
  const className = clsx('btn', {
    'btn-primary': isPrimary,
    'btn-disabled': isDisabled,
  });

  return(
  	<button
      type="button"
      onClick={onClickEvent}
      className={className}
    >
      {text}
    </button>
);
}

isPrimary가 true -> btn-primary 클래스 추가

isDisabled가 true -> btn-disabled 클래스가 추가

<li className={clsx({ [style.show]:
				(step > 1 && step < 5) || step === 9 },
				{ [style.selected]: step > 2 })}
>
  <button type="button">
    <span className={style.icon_box}>
      <Icon name="calendar_line" color="purple" />
    </span>
    <span className={style.title}>시작</span>
    <span className={style.text_box}>
      <Icon name="arrow_right" color="black" size={20} />
    </span>
  </button>
</li>

style.show가 적용되는 조건 -> step > 1 && step < 5 이거나 step === 9 일때,

step이 3 이상일 때 -> style.selected 클래스가 적용

[React] useOutletContext로 props 전달

사용자가불꽃놀이좋아함 — Fri, 30 Aug 2024 11:23:17 +0900

[React] useOutletContext: 중첩 라우트(Outlet)에서 자식에게 props 전달하기

부모 레이아웃의 상태를 자식 컴포넌트에게 전달해야 할 때
Props Drilling을 피하고 깔끔하게 데이터를 공유할 수 있는 useOutletContext 사용
useOutletContext -> "특정 라우트 트리(Route Tree) 안에서의 미니 전역 상태 관리"
Props Drilling
부모의 상태를 저~~ 밑에 있는 자식에게 전달하기 위해 여러 단계를 거치는 현상

라우터 설정 (Router Setup)

import { createBrowserRouter } from 'react-router-dom';

export default createBrowserRouter([
  {
    path: '',
    element: [<MainLayout />],
    errorElement: <ErrorPage />,
    children: [
      {
        path: '/home',
        element: <Home />,
      },
      {
        path: '/work',
        element: <WorkLayout />,
        children: [
          { path: '', element: <WorkList /> },
          { path: ':workId', element: <WorkDetail /> },
        ],
      },
    ],
  },
]);

부모 컴포넌트: 데이터 전달 (Outlet context)

WorkLayout.tsx

태그에 context 속성을 사용하여 전달하고 싶은 데이터 넣는다

import { Outlet } from 'react-router-dom';

function WorkLayout() {
    const [workList, setWorkList] = useState<workListItem[]>([]);
    return (
        <>
            <Outlet context={{ workList }} />
        </>
    );
}

export default WorkLayout;

자식 컴포넌트: 데이터 사용 (useOutletContext)

WorkList.tsx

useOutletContext 훅을 사용하여 부모가 보낸 데이터를 가져온다

import { useOutletContext } from 'react-router-dom';

function WorkList() {
    const [workList, setWorkList] = useOutletContext<workListItem[]>([]);
    return (
        <div>
            {workList?.map((item, index) => (
                <p key={index}>
                    {item}
                </p>
            ))}
        </div>
    );
}
export default WorkList;

✅ 한 줄 정리:

Props Drilling: 나는 안 쓰는데 내 자식 주려고 보따리 들고 있는 상태
useOutletContext: 부모가 던져준 보따리를 자식이 필요할 때 바로 꺼내 쓰는 도구

[Python] pip error: externally-managed-environment

사용자가불꽃놀이좋아함 — Sat, 22 Jun 2024 02:41:30 +0900

pip install -r requirements.txt

난 그저 flask 패키지 설치하고 싶었을 뿐인데

꽤 오랜시간 해결하지 못하고 있었다

에러

error: externally-managed-environment

원인

원인은.. 모르겠다...

해결 방안

How do I solve "error: externally-managed-environment" every time I use pip 3?

Error message: error: externally-managed-environment × This environment is externally managed ╰─> To install Python packages system-wide, try apt install python3-xyz, where xyz is the pack...

stackoverflow.com

python -m pip config set global.break-system-packages true

pip의 설정을 변경하여 시스템 패키지를 깨뜨릴 수 있는 동작을 허용하는 옵션을 설정

global.break-system-packages: 시스템 패키지와의 충돌을 허용할지 여부를 결정하는 옵션

시스템 패키지 관리자(apt, yum)와 pip 사이의 충돌을 방지하기 위해 사용된다

[Linux] SSH Key 설정하기 failed: No space left on device

사용자가불꽃놀이좋아함 — Fri, 21 Jun 2024 23:36:19 +0900

ssh-keygen -t rsa

RSA 알고리즘을 사용하여 SSH 키 (공개 키, 비공개 키)를 생성하라는 명령어다

failed: No space left on device

왜 나만 안돼 금방 쉬이 되는 건 없었다..

failed: No space left on device

디스크 공간이 부족해서 키 파일을 저장할 수 없다고 한다

디스크용량확인

df -h

로그파일 삭제

sudo rm -rf /var/log/*.old

캐시 정리

sudo apt-get clean
sudo apt-get autoremove

하고 나니 나도 rsa 나무가 나타났다 성공 !!

폴더 목록을 보면 .ssh 파일이 생겨있다

.ssh 폴더에 들어가 보면

id_rsa 비공개 키 파일, id_rsa.pub 공개 키 파일, authorized_keys 파일이 생겼다

인강에서는 authorized_keys 파일이 없었어서 뭔가 하고 보니

authorized_keys : SSH 서버에서 클라이언트의 공개 키를 저장하는 파일

클라이언트의 비공개 키가 authorized_keys 파일에 저장된 공개 키와 일치하면, 서버는 해당 클라이언트의 접속을 허용시켜 준다

키 기반 인증을 사용하면 비밀번호 입력 없이 자동화된 접속이 가능하다

authorized_keys 파일을 삭제하면 저장된 모든 공개 키를 잃게 되어 서버에 접속할 수 없게 되니 삭제하지 말라고 한다

[Linux] VScode 설치 & python 명령어 변경

사용자가불꽃놀이좋아함 — Tue, 11 Jun 2024 10:13:22 +0900

VScode 설치

리눅스에서 코드를 작성하기 위해 VScode를 다운로드한다

ubuntu 운영체제에 arm64 버전의 .deb 파일로 패키징 된 VScode를 설치

dpkg 명령어: 패키지를 설치, 업데이트, 제거하는 데 사용된다

sudo dpkg -i vscode 파일명

처음이고 그냥 보면서 따라 만들 거니까 했지만, 아무리 봐도 계정명이랑 너무 바보 같다

python3 -> python 명령어 변경

우분투 리눅스는 python을 기본으로 제공한다

vscode도 설치했겠다 python이 잘 작동되는지 실행해보자

python이 없단다 python3가 있다는 거군

명령어 쓸 때마다 뒤에 3 붙이면 불편하니 python 명령어로 python3 실행시키기로 했다

sudo apt-get install python-is-python3 -y

-y 옵션은 패키지를 추가적인 확인 메시지 없이 자동으로 설치시켜 준다

설치 후 다시 파이썬 파일 실행해 보니 잘 나온다

[Linux] Mac M2 VMware Fusion로 Ubuntu Server & GUI 설치

사용자가불꽃놀이좋아함 — Tue, 11 Jun 2024 00:39:15 +0900

환경

Macbook M2 pro
우분투: ubuntu-24.04-live-server-arm64
가상머신: VMware Fusion

목표

VMware Fusion에 리눅스 우분투 설치
Ubuntu GUI 설치

Ubuntu Server for ARM ISO image

https://ubuntu.com/download/server/arm

ubuntu.com

VMware Fusion에 다운 받은 ubuntu-24.04-live-server-arm64 이미지를 넣어준다

Try or Install Ubuntu Server를 선택

키보드 언어설정 > Ubuntu Server 선택 > 프록시 설정 ( Done ) > 미러서버

> 파티션 설정

Custom storage layout를 많이 하는 것 같아 시도하였지만;

무엇을 어떻게 설정해야할지 모르겠어서 일단은 LVM으로 사용

LVM: Linux에서 디스크 저장소를 동적으로 크기 조정과 디스크 공간 통합을 해주는 시스템

> 계정정보 입력 > OpenSSH server 설치 > 서버에서 사용할 패키지 선택 ( Done ) > Reboot

인강에서는 desktop버전으로 다운받으라고 했지만 arm desktop은 못 찾겠는걸

일단 중요한 건 같은 arm64이니까 server버전이여도 뭐 상관없겠지 하고 ubuntu live server arm64를 다운 받았더니

인강을 따라갈 수가 없다

server와 desktop는 GUI환경 유무와 일부 패키지 차이라고 한다

그래도 회사에서 보던 터미널 창 나와서 조금 반갑고 신기했다

내가 우분투를 실행시키다니 !!

잠시 삭제할까 생각하다가 desktop버전은 언제 찾나 싶어 GUI를 설치해보려고 한다

Ubuntu Server GUI 설치

apt-get 명령어: Ubuntu 소프트웨어 패키지 관리(설치, 삭제, 업데이트)

Ubuntu Server 업데이트: 시스템 패키지 목록을 업데이트하고 시스템을 최신 상태로 유지

sudo apt-get update // 사용 가능한 패키지 목록과 버전 업데이트
sudo apt-get upgrade // 시스템에 설치된 모든 패키지를 최신 버전으로 업그레이드

GUI 패키지 설치

sudo apt-get install --no-install-recommends ubuntu-desktop
or
sudo apt-get install ubuntu-desktop

--no-install-recommends 옵션: 이 옵션을 사용하면 패키지양이 줄어들어 시스템 자원을 덜 사용하게 되지만, 필요한 추가 기능이나 의존성 패키지를 놓치게 될 수도 있다

그냥 desktop버전을 찾을걸 후회할 정도의 시간이 걸렸다

시스템 재부팅: 설치 완료되면 재부팅하여 변경 사항 적용

sudo reboot

[Linux] Mac M2 VMware Fusion 설치

사용자가불꽃놀이좋아함 — Tue, 11 Jun 2024 00:32:52 +0900

환경

Macbook M2 pro

목표

VMware Fusion 설치

VMware Fusion

Introducing VMware Cross-Cloud Services

Discover how VMware Cross-Cloud services give organizations freedom and control without trade-offs.

www.vmware.com

Products > Desktop Hypervisor > Fusion Pro

for mac 다운로드

바로 다운로드로 진행될 줄 알았는데 broadcom이라는 페이지로 이동된다

다운로드 안되고 왜 페이지가 열리나 해서 찾아보니

broadcom이 VMwear 인수를 했다고 한다

24년 5월 13일 부터 Fusion Pro 13와 Workstation Pro 17은 무료배포하기로 했다고 한다(개인 사용자 용도)

BROADCOM

https://blogs.vmware.com/teamfusion/2024/05/fusion-pro-now-available-free-for-personal-use.html

Home - Support Portal - Broadcom support portal

It appears your Broadcom Products and Services are supported by one of our certified Support partners Click below to be redirected to the appropriate Support Partner Portal to request support For non-product related issues (Support Portal / Licensing) Clic

support.broadcom.com

broadcom 사이트에 들어가서 로그인 후

1. My Downloads > VMware Cloud Foundation > VMware Fusion 검색

VMware Fusion Pro 13

동의하고 다운로드를 누르면 주소를 적으라고 한다

나의 집 주소를 적고 나면 다운로드 완료

Ubuntu 설치

Mac M2 VMware Fusion로 Ubuntu 설치

Ubuntu Server for ARM ISO image https://ubuntu.com/download/server/arm ubuntu.com

jj-k-ul.tistory.com

[Flutter] iOS 에뮬레이터에서 가상 키보드 보이도록 설정

사용자가불꽃놀이좋아함 — Tue, 4 Jun 2024 17:16:43 +0900

ios simulator

I/O > Keyboard > Connect Hardware Keyboard -> 체크 해제

( Shift(⇧) + Command(⌘) + K )

[Flutter] flutter doctor: Java버전 & Android Licenses 이슈

사용자가불꽃놀이좋아함 — Tue, 4 Jun 2024 16:03:55 +0900

역시나 쉽지 않은 flutter Android Studio 세팅일지

flutter doctor error

1. Unable to find bundled Java version.

자바 버전이 맞지 않는다고 한다

도와줘요 구글 !!

cd /Applications/Android\ Studio.app/Contents
ln -s jbr jre

Studio.app의 Contents로 이동해서

jbr 폴더 내용을 jre 폴더로 복사

복사해 주고 나니 자바 버전 이슈는 해결

2. Android Licenses

flutter doctor --android-licenses

Android toolchain

라이센스 동의에 y 여러 번 눌러주면 해결

아 이제 진짜 드디어 flutter 시작이다

내가 쓰기 좋았던 목업 사이트

사용자가불꽃놀이좋아함 — Wed, 13 Mar 2024 19:10:29 +0900

웹 포토샵

Photopea | Online Photo Editor

✕ Photopea: advanced photo editor Free online photo editor supporting PSD, XCF, Sketch, XD and CDR formats. (Adobe Photoshop, GIMP, Sketch App, Adobe XD and CorelDRAW). Create a new image or open existing files from your computer. Save your work as PSD (

www.photopea.com

목업

1. shots.so - 디바이스 목업

그림자 & 배경 색을 넣어주고 고를 수 있다

Create Amazing Mockups

www.shots.so

2. mockup.photos

배경 & 인물들이 같이 나오는 목업 종류가 많다

Mockup Photos - High quality mockup templates from around the world

Mockup Photos collects high quality mockup images from around the world. Use Mockup Photos to generate app screenshots in seconds. Choose between 1000s of images created by individual creators

mockup.photos

[React] R3F(React Three Fiber) 상자 만들어보기

사용자가불꽃놀이좋아함 — Fri, 24 Nov 2023 14:58:47 +0900

React에서 사용하는 three.js : React Three Fiber (R3F)

React Three Fiber Documentation

React-three-fiber is a React renderer for three.js

docs.pmnd.rs

Three.js는 WebGL을 사용하는 3D 그래픽 라이브러리

R3F는 React와 Three.js를 통합하여 React 기반 애플리케이션에서 Three.js를 사용할 수 있도록 도와주는 도구

App.jsx

App 파일에 Canvas 태그 추가

Box3D 컴포넌트에서 Canvas 내부 내용을 그려줄 것이다

import { Canvas } from '@react-three/fiber';
import Box3D from './Box3D';
import './App.css';

const App = () => {
    return (
        <Canvas>
            <Box3D />
        </Canvas>
    );
};

export default App;

App.css

css 설정없이 작업하면 크기가 작으니 일단은 잘 보이게 크기를 준다

body {
    padding: 0;
    margin: 0;
}

#root {
    width: 100%;
    height: 100vh;
}

Box3D.jsx

boxGeometry (상자 모양의 3D 객체를 생성한다)

mesh 태그(3D 객체를 만들 수 있는 클래스)를 만들고 그 안에 <boxGeometry /> 박스 추가

boxGeometry의 args 속성을 사용하여 배열로 [가로, 세로, 깊이] 값을 설정해주면 크기가 지정된다

const Box3D = () => {
    return (
        <>
            <axesHelper />
            <mesh>
                <boxGeometry />
                // <boxGeometry args={[2, 3, 4]} />
                <meshStandardMaterial color={'blue'} />
            </mesh>
        </>
    );
};

export default Box3D;

boxGeometry 만 추가하면 회색의 네모 모양만 나온다

boxGeometry 추가

meshStandardMaterial color={'blue'} 으로 도형의 색 설정

directionalLight 직사광 추가

빛이 있어야 도형의 색이 보인다

<directionalLight position={[1, 1, 1]} /> 으로 설정해준다

position은 배열로 표현되고 X, Y, Z 축을 따라 빛의 위치를 지정한다

X축으로 1,

Y축으로 1,

Z축으로 1의 위치에 직사광을 배치한다

directionalLight 직사광 추가

const Box3D = () => {
    return (
        <>
            <directionalLight position={[1, 1, 1]} /> {/* 직사광 추가 */}
            <axesHelper />
            <mesh rotation={[0, (45 * Math.PI) / 180, 0]}>
                <boxGeometry />
                <meshStandardMaterial color={'blue'} />
            </mesh>
        </>
    );
};

export default Box3D;

rotation 추가

rotation을 넣어 도형에 입체감을 넣어보았다

rotation={[0, (45 * Math.PI) / 180, 0]}

X축 회전 : X축 회전하지 않음

Y축 회전 : 45도를 라디안으로 변환한 값

Z축 회전 : Z축 회전하지 않음

Y축 중심으로 45도 회전했다는 뜻이다.

rotation 추가

useFrame 훅 사용 ( 자동 회전 모션 추가 )

우선 React의 useRef 를 이용해 이전에 만들어 놓은 mesh 상자를 참조시킨다

R3F에서 제공하는 useFrame 훅 사용

매 프레임이 렌더링 되기 직전에 실행하는 함수

매 프레임마다 mesh의 rotation값을 변경하여 회전효과를 줄 것이다

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

const Box3D = () => {
    const refMesh = useRef();
    useFrame((state, delta) => {
        // delta - 이전 프레임과 현재 프레임 사이의 경과시간 ms
        refMesh.current.rotation.y += delta;
    });
    return (
        <>
            <directionalLight position={[1, 1, 1]} /> {/* 직사광 추가 */}
            <axesHelper />
            <mesh ref={refMesh} rotation={[0, (45 * Math.PI) / 180, 0]}>
                {/* x축으로 0도, y축으로 45도, x축으로 0도 만큼 회전해라 */}
                <boxGeometry />
                <meshStandardMaterial color={'blue'} />
            </mesh>
        </>
    );
};

export default Box3D;

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[React] Cypress로 E2E 테스트

사용자가불꽃놀이좋아함 — Tue, 14 Nov 2023 15:12:18 +0900

E2E 테스트 ( End-to-End )

사용자의 관점에서 애플리케이션을 테스트
애플리케이션의 모든 부분이 의도한 대로 작동하는지 확인하는 데 중점을 둔다

cypress

Cypress is a next generation front end testing tool built for the modern web. Latest version: 13.5.0, last published: 5 days ago. Start using cypress in your project by running `npm i cypress`. There are 521 other projects in the npm registry using cypress

www.npmjs.com

라이브러리 install

npm install --dev cypress
yarn add --dev cypress

Cypress 공식 사이트

정말 친절하다

Why Cypress? | Cypress Documentation

What you'll learn

docs.cypress.io

package.json

scripts 추가

"scripts": {
  "cypress:open": "cypress open"
},

typescript를 사용한다면 tsconfig.json에도 추가

**cy.ts파일에서 cy를 찾을 수 없다고 ( cannot find name cy ) 소스코드에서 빨갛게 표시가 되었다

compilerOptions : types": ["cypress"] 넣으니 해결

{
  "compilerOptions": {
    "types": ["cypress"]
  },
  "include": ["./cypress/**/*"]
}

cypress.config.ts 파일 새로 추가

baseUrl에 test할 페이지 주소를 넣어준다

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234',
  },
})

cypress:open: "cypress open"를 실행하면

E2E Testing 클릭 하면 에러 발생

시키는 대로 cypress > support > e2e.ts

폴더와 ts 파일을 만들어서 준다

( 자동으로 생성될거같은데 아니네... )
e2e.ts 내용은 비어있다

이게 맞는지는 좀더 알아봐야겠다

폴더와 파일 생성 후 E2E Testing 누르면 브라우저를 고르라고 한다

크롬으로 진행하고 start 하면 크롬창이 하나 뜬다

Create new spec으로 새로운 E2E 테스트 파일을 만든다

( 드디어 뭔가는 자동으로 생기는군 )

describe('계정 생성', () => {
  it('계정 생성 하기 버튼을 클릭하여 계정 생성', () => {
    cy.visit('/login');
    cy.get('#joinBtn').click();
    cy.get('#joinEmail').type('naver@naver.com');
    cy.get('#joinPassword').type('naver@naver.com');
    cy.get('#joinConfirmPassword').type('test');
    cy.get('#joinName').type('naver@naver.com');

    cy.get('#joinName').clear().type('나는테스트');
    cy.get('#joinConfirmPassword').clear().type('naver@naver.com');
    cy.get('.btn').click();
    cy.get('#resultDone').click();
  });
});

신기하네

[React] react-csv 사용 데이터 csv 파일 다운로드

사용자가불꽃놀이좋아함 — Tue, 7 Nov 2023 11:40:34 +0900

[React] react-csv 라이브러리로 데이터를 CSV 파일로 다운로드하기

React-csv 공식 문서 바로가기

React에서 JSON 데이터를 간편하게 CSV 형식으로 변환하고 다운로드할 수 있게 해주는 react-csv 라이브러리 사용법

1. react-csv 라이브러리 설치

npm install react-csv
npm install @types/react-csv
or
yarn add react-csv
yarn add @types/react-csv

CSVLink 와 CSVDownload

CSVLink, CSVDownload -> 두 가지 방식의 컴포넌트를 제공

CSVLink

- 해당 링크를 클릭하면 csv 파일이 다운로드된다 (일반적)

CSVDownload

- 컴포넌트가 렌더링(마운트)되는 즉시 csv 파일이 자동 다운로드된다

2. header, data 설정

// header 설정
// label은 엑셀 상단에 노출될 이름, key는 데이터의 객체 키와 매칭
const headers = [
  { label: "Name", key: "name" },
  { label: "Email", key: "email" },
  { label: "Gender", key: "gender" }
  { label: "Phone", key: "phone" }
]

// 데이터 설정
// headers의 key와 일치하는 프로퍼티를 가진 객체 배열
const data = [
  { name: "홍길동", email: "aaa@bbb.com", gender: "남", phone:"01012345678"},
  { name: "고길동", email: "aaa@bbb.com", gender: "여", phone:"01010101010"},
  { name: "이길동", email: "aaa@bbb.com", gender: "남", phone:"01098765432"},
];

header의 label은 csv 파일 시트에 표시되는 값 (th 같은 값)
* header의 key값과 data의 key값이 같아야 보여진다 *

3. 컴포넌트 적용

파일명에 날짜를 포함시키는 경우 -> moment, date-fns 라이브러리 사용

CSVLink 사용 (클릭 시 다운로드)

import { CSVLink, CSVDownload }  from 'react-csv';
import moment from 'moment/moment';
import { format } from 'date-fns';

<CSVLink
      headers={headers}
      data={data}
      className="btn btn-csv"
      target="_blank"

      // 1. moment를 사용하는 경우

     filename={`${moment(startDate).format('YYYY.MM.DD')}_${moment(endDate).format('YYYY.MM.DD')}_user_data.csv`}

      // 2. date-fns를 사용하는 경우

      filename={`${format(new Date(startDate), 'yyyy.MM.dd')}_${format(new Date(endDate), 'yyyy.MM.dd')}_user_data.csv`}
>
      엑셀(CSV) 다운로드
</CSVLink>

CSVDownload 사용 (마운트 시 즉시 다운로드)

import { CSVLink, CSVDownload }  from 'react-csv';

<CSVDownload headers={headers} data={data} target="_blank" />;

⚠️ csv 파일(텍스트 기반의 데이터 형식)이라 스타일(글자 색상, 배경색, 셀 병합)은 입힐 수 없다

[React] exceljs 사용 데이터 엑셀 다운로드

사용자가불꽃놀이좋아함 — Tue, 7 Nov 2023 10:56:05 +0900

기존엔 react-csv를 사용했는데 한국어 입력시 오류가 나서

다른 라이브러리를 찾아보았다

아쉽게도 2개의 라이브러리가 필요 (이거맞아?)

exceljs와 file-saver 라이브러리인데

exceljs만으로는 아쉽게도 client쪽에서 엑셀 다운로드가 지원되지 않는다고 한다

exceljs - JavaScript 환경에서 엑셀 파일을 생성, 수정, 읽기, 쓰기 기능을 하는 라이브러리

exceljs

Excel Workbook Manager - Read and Write xlsx and csv Files.. Latest version: 4.4.0, last published: a year ago. Start using exceljs in your project by running `npm i exceljs`. There are 1565 other projects in the npm registry using exceljs.

www.npmjs.com

file-saver - 클라이언트에서 파일 저장을 도와주는 라이브러리

file-saver

An HTML5 saveAs() FileSaver implementation. Latest version: 2.0.5, last published: 4 years ago. Start using file-saver in your project by running `npm i file-saver`. There are 5105 other projects in the npm registry using file-saver.

www.npmjs.com

라이브러리 install

npm install exceljs
npm install @types/exceljs

yarn add file-saver
yarn add @types/file-saver

import { Workbook } from 'exceljs';
import { saveAs } from 'file-saver';

const workbook = new Workbook();
const sheet1 = workbook.addWorksheet('엑셀 시트1');
const sheet2 = workbook.addWorksheet('엑셀 시트2');

[React] React.memo & useMemo

사용자가불꽃놀이좋아함 — Mon, 6 Nov 2023 15:17:35 +0900

React.memo는 컴포넌트 자체의 렌더링을 최적화하는 데 사용

useMemo는 특정 값이나 변수의 계산된 값을 저장하여 재계산을 방지하는 데 사용

export default React.memo(Component);

컴포넌트의 렌더링 최적화를 위해 React.memo를 사용하는 것만으로 충분할 수 있다.

useMemo는 특정 변수에 대한 성능 최적화를 위해 추가적으로 사용될 수 있다.

[에러일지] Next.js: "url" parameter is not allowed

사용자가불꽃놀이좋아함 — Fri, 3 Nov 2023 16:04:49 +0900

[Next.js] Image 태그 외부 리소스 에러: "url" parameter is not allowed

Next.js에서 next/image 컴포넌트를 사용하여 외부 이미지를 사용하려 할 때 발생
보안 설정으로 인해 이미지가 엑스박스로 뜨거나, "url" parameter is not allowed라는 에러 메시지 표시

문제 현상

import Image from "next/image"
Next.js 코드에서 외부 URL 이미지를 사용하려 할 때 발생

이미지 최적화 Image 태그에서 외부 리소스가 적용하지 않음

이미지 URL을 주소창에 직접 입력하면 잘 나오지만, 프로젝트 내 태그를 통해서는 렌더링되지 않음

✅ 해결 방법

1. domains

next.config.js 파일에서 domains 수정 -> 외부 이미지 도메인을 명시적으로 허용

module.exports = {
  images: {
    domains: [images.url.com], // 허용할 도메인 주소입력
  },
};

보안상의 이유로 애플리케이션이 특정 도메인에서만 이미지를 허용할 때 사용함

2. remotePatterns (권장 방식) ⭐

보다 유연한 이미지 로딩 패턴을 정의하는 데 사용
다양한 도메인에서 이미지를 가져와야 하는 경우, 프로토콜과 호스트 이름을 유연하게 설정할 수 있다
Next.js 14 이상 권장

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'domains.com', // 와일드카드(*) 사용 가능
        port: '',
        pathname: '/**', // 모든 경로 허용
      },
    ],
  },

[Axios] interceptors

사용자가불꽃놀이좋아함 — Tue, 26 Sep 2023 17:56:24 +0900

Axios interceptors는 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다

import axios from 'axios';

요청 전 
axios.interceptors.request.use(
  (config) => {
   // 요청이 전달되기 전에 작업 수행
    return config;
  },
  (error) => {
   // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  },
);

응답 전
axios.interceptors.response.use(
  (response) => {
   // 응답 데이터가 있는 작업 수행
    return response;
  },
  (error) => {
  // 응답 오류가 있는 작업 수행
    if (error.response?.status === 401) {
    console.log('error', error.response);
    }
    return Promise.reject(error);
  },
);

[Flutter] Text Overflow 문자 줄바꿈, 말줄임, 페이드

사용자가불꽃놀이좋아함 — Wed, 13 Sep 2023 14:22:33 +0900

[Flutter] TextOverflow 완벽 가이드: 문자 줄바꿈, 말줄임(...), 페이드 효과

기본 Text Widget (정상 출력)

Text(
  '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w500,
    color: WhiteColor,
  ),
),

TextOverflow.clip (경계에서 자르기) ✂️

TextOverflow.clip

부모 위젯의 경계를 벗어나면 텍스트를 그냥 잘라버려 표시되지 않는다

SizedBox(
  width: double.infinity,
  height: 50,
  child: Text(
    '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
    style: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w500,
      color: WhiteColor,
    ),
    overflow: TextOverflow.clip,
  ),
),

TextOverflow.fade (흐려지는 효과) ️

TextOverflow.fade

텍스트가 끝부분에서 서서히 사라지는 듯한 효과

수직 페이드 (기본값)

SizedBox(
  width: double.infinity,
  height: 50,
  child: Text(
    '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
    style: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w500,
      color: WhiteColor,
    ),
    overflow: TextOverflow.fade,
  ),
),

fade 효과 수평으로 (오른쪽 끝 효과)

TextOverflow.fade - softWrap: false

softWrap: false 를 넣어야 우리한테 익숙한 오른쪽 끝에서 텍스트가 흐려지는 효과를 줄 수 있다

SizedBox(
  width: double.infinity,
  height: 50,
  child: Text(
    '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
    style: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w500,
      color: WhiteColor,
    ),
    softWrap: false,
    overflow: TextOverflow.fade,
  ),
),

TextOverflow.ellipsis (말줄임표 ...)

TextOverflow.ellipsis

말줄임표 ...

Text(
  '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w500,
    color: WhiteColor,
  ),
  overflow: TextOverflow.ellipsis,
),

ellipsis 여러 줄(Multi-line) 말줄임

TextOverflow.ellipsis

2줄 이상의 말줄임표를 주고 싶을때 maxLines 추가

Text(
  '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w500,
    color: WhiteColor,
  ),
  overflow: TextOverflow.ellipsis,
  maxLines: 2, // 2줄까지만 보여주고 이후는 ... 처리
),

TextOverflow.visible (넘쳐도 그대로 출력) ️

TextOverflow.visible

clip과 반대로 경계를 벗어나도 잘리지 않고 그대로 나타난다
⚠️ 다른 위젯과 겹칠 수 있다

Container(
  width: double.infinity,
  height: 50,
  color: Colors.blue,
  child: const Text(
    '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.',
    style: TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w500,
      color: WhiteColor,
    ),
    overflow: TextOverflow.visible,
    // maxLines: 2,
  ),
),

[에러일지] Pass 본인인증 Window: message 이벤트

사용자가불꽃놀이좋아함 — Tue, 12 Sep 2023 14:35:45 +0900

Window: message 이벤트

문제

새창을 띄워 PASS 본인인증을 하였지만 본인인증 버튼를 누른 (현재) 페이지에서는 본인인증이 완료 되었는지 모름

해결

메세지 수신을 위해 사용함

  useEffect(() => {
    window.addEventListener('message', (event) => {
      const { verified } = event.data;
      if (verified) {
        axios
          .post(`${backUrl}/api/account/identification`, {
            name: event.data.name,
            birthdate: event.data.birthdate,
            gender: event.data.gender,
            CI: event.data.CI,
            phoneNumber: event.data.phoneNumber,
          })
          .then((response) => {
            console.log(response);
          })
          .catch((error) => {
            console.log(error.response);
            // 예외처리  - 본인인증 실패 !!
          });
      }
    });
  }, []);

본인인증 후 받아온 값을 서버에 넘겨주고 .then 에서 페이지 이동 or 현재 페이지에서 이벤트 실행

flutter secure storage

사용자가불꽃놀이좋아함 — Mon, 28 Aug 2023 11:07:47 +0900

디바이스 내부에 정보를 저장하기 위함
Android에서는 keystore 영역, iOS에서는 keychain 내부 저장소 영역을 사용

토큰과 세션

사용자가불꽃놀이좋아함 — Mon, 28 Aug 2023 11:07:11 +0900

토큰

베이스64 인코딩 된 스트링
헤더, 페이로드, 시그니처 구성
데이터베이스에 저장하지 않음 시그니처값을 검증해서 매번 확인 필요없음
정보가 토큰에 모두 담겨있기에 정보유출 위험

세션

유저 정보를 데이터베이스에 저장
ID값으로 구성 - 클라 요청보낼때 ID같이 보내면 정보받음
서버에서 생성 , 클라에서 쿠키로 저장
요청때마다 데이터베이스 매번 확인
서버저장이므로 클라에서 노출위험 없음

배포할때 yarn.lock 충돌나면

사용자가불꽃놀이좋아함 — Wed, 26 Apr 2023 14:17:42 +0900

1. yarn.lock 삭제

삭제되니 주의 !! 2번은 더 사용할것

rm -rf yarn.lock

2. git yarn.lock 받아오기

git checkout -- yarn.lock

[에러일지] useRef: Object is possibly 'null' 에러

사용자가불꽃놀이좋아함 — Thu, 6 Apr 2023 17:20:16 +0900

useRef: Object is possibly 'null' 에러

JavaScript 코드를 TypeScript로 변환하는 중 발생된 에러
JavaScript에서는 잘 돌아가던게 에러가 뜬다

에러 메시지

Object is possibly 'null'.

원인 분석

useRef의 current 객체는 컴포넌트 렌더링이 완료된 후에 만들어진다
TypeScript는 렌더링 전 current가 null일 수 있다는 걸 알기 때문에 에러 발생

해결 방법

null 여부를 먼저 확인한 후 접근

if (footerRef.current) {
  // null이 아닐 때만 실행
}

✅ 한 줄 정리

TypeScript는 useRef.current가 null일 수 있다는 걸 안다 — 쓰기 전에 확인하자

[ETC] GitHub 사용해보자

사용자가불꽃놀이좋아함 — Wed, 15 May 2019 11:10:34 +0900

GitHub 사용해보자

https://github.com/ 가입을 먼저 하고!

온라인 저장소 만들기

로그인 후 Your repositories 페이지에 들어가 준다.

New 버튼을 눌러주면 이런 화면 이 뜬다.

기억하기 쉬운 적당한 이름을 지어준다.

Initialize this repository with a README 체크를 안 해주어도 무방하다.

온라인 저장소 삭제

Settings 페이지에 들어가 쭉 내려가 Delete this repository 클릭!

삭제할 저장소 명을 적으라는 팝업이 뜨는데 적어주고 나면 끝. 삭제!

github 설정

git bash를 설치하고 열어본다.

git config --global user.name "커밋에 뜰 내 이름"

git config --global user.email "github 가입할 때 쓴 내 메일"

로컬파일 온라인 저장소에 올리기

로컬파일에서 git bash열고

git init
git remote add origin https://github.com/나의 아이디/온라인 저장소 파일명.git
git add.
git commit -m "커밋명"
git push origin master

push 하면 로그인을 하라고 뜬다.

본인의 github ID와 비밀번호를 치면 업로드 완성! 완성!

[Three.js ] Three.js dat.GUI를 이용해보자

사용자가불꽃놀이좋아함 — Mon, 6 May 2019 23:05:02 +0900

dat.GUI를 이용해보자

dat.GUI는 구글의 엔지니어들이 만든 라이브러리로,

dat.GUI가 생성 한 패널 부분에서 매개 변수를 변경하면 이미지의 위치, 크기, 회전 속도 등을 동적으로 반영할 수 있도록 한다. ( 일단 재밌다 )

https://threejs.org/ 예제

페이지의 우측 상단에 있는 UI가 dat.GUI를 실행하면 나타난다!!!

script 추가

https://threejs.org/ 사이트에서 파일을 다운로드한다.

다운로드한 파일(three.js-master) > examples > js > libs > dat.gui.min.js를 사용하면 된다.

<body>
    <div id="WebGL-output"></div>
    <script type="text/javascript" src="./js/three.js"></script>
    <script type="text/javascript" src="./js/dat.gui.js"></script>
</body>

객체 추가

<script type="text/javascript">
var sphere;		
var controls = new function () {
  this.spherePosX = 0;
  this.spherePosY = 5;
  this.spherePosZ = 0;
  this.sphereScale = 1;
  this.redraw = function () {
    var sphereGeometry = new THREE.SphereGeometry(controls.sphereScale, 50, 50);
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xd4db7a});
    sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(controls.spherePosX, controls.spherePosY, controls.spherePosZ);
    scene.add(sphere);
  };		
};
</script>

화면 안의 sphere를 X축, Y축, Z축 이동과 크기를 조절하려고 한다.

controls의 초기값을 설정한다.

dat.gui

처음 화면이 로드되었을때 기본값으로 사용된다.

sphere의 크기, 위치의 값 (controls.sphereScale, controls.spherePosX, controls.spherePosY, controls.spherePosZ)을 받아올 것이기 때문에 redraw 함수 안에 따로 넣어 주었다.

<script type="text/javascript">
  var gui = new dat.GUI();
  guiSphere = gui.addFolder('guiSphere');
  guiSphere.add(controls, 'spherePosX', -20, 20);
  guiSphere.add(controls, 'spherePosY', 5, 20);
  guiSphere.add(controls, 'spherePosZ', -15, 15);
  guiSphere.add(controls, 'sphereScale', 1, 10);
  camera.lookAt(scene.position);
  controls.redraw();
  render();
</script>

guiSphere라는 folder를 추가한다. - gui.add(controls, 'spherePosX', -20, 20); 하면 폴더 없이 추가된다!

객체명 뒤의 숫자는 범위를 나타낸다. (-20 부터 20 까지) 조절 가능하다.

<script type="text/javascript">
  function render() {          
      sphere.position.x = controls.spherePosX;
      sphere.position.y = controls.spherePosY;
      sphere.position.z = controls.spherePosZ;
      sphere.scale.x = controls.sphereScale;
      sphere.scale.y = controls.sphereScale;
      sphere.scale.z = controls.sphereScale;

      requestAnimationFrame(render);
      renderer.render(scene, camera);
  } 
</script>

sphere의 position.x 값에 controls의 spherePosX를 넣어준다.

완성!! 완성완성!! 완성!! (이것저것 만져보라구!!)

See the Pen rgaeRL by JaeCool (@JaeCool) on CodePen.

[CSS] CSS3 Flex Box 레이아웃

사용자가불꽃놀이좋아함 — Thu, 2 May 2019 16:36:55 +0900

" Flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다 " - 네이버

오호~ 이렇게 편한 게 있다면 당장 알아봐야지!!

caniuse - Flex 지원율

거의 모든 브라우저에서 지원을 하고 있기 때문에 열심히 공부하면 잘 적용할 수 있을 것 같다

display: -webkit-box; , display: -ms-flexbox; display: flex; 접두어를 넣어주자!

부모 영역( flex_container )에 display:flex 아니면 display:inline-flex을 주면 그 안의 div는 flex item이 된다 (간단!!)

<body>
  <style type="text/css">
  	.flex_container {display:flex;}
  </style>
  <div class="flex_container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>
</body>

Flex-direction - flex item의 상하좌우 방향을 설정한다

flex-direction : column || column-reverse || row || row-reverse ;

flex-direction

기존에 가로정렬할 때는 자식 요소에 float를 적용하였는데 부모 요소의 height가 0으로 되어버리는 경우가 있다

이를 해결하기 위해 ( 본인 )은 가상 선택자를 써서 clear 해주었었다

하지만 flex는 그러한 이슈가 없다는 것이다!! ( 좋다..! )

Flex-wrap - flex item의 위치를 줄 바꿈 할지 설정한다

flex-wrap : wrap || nowrap || wrap-reverse ;

flex-wrap

nowrap은 default값이다

Flex-flow - flex-direction 속성과 flex-wrap 속성을 한 줄로 단축시켜 적을 수 있다

flex-flow : flex-direction flex-wrap ;

flex- flow

Flex-basis - flexible item의 길이를 설정한다 ( default값은 auto )

flex-basis : number || auto || initial || inherit ;

flex-basis

Flex-grow - flexible item의 너비를 설정한다 ( default값은 0 )

flex-grow : number || initial || inherit ;

flex-grow

[Three.js ] Three.js 간단한 Animation를 넣어보자

사용자가불꽃놀이좋아함 — Wed, 3 Apr 2019 15:12:01 +0900

Three.js 간단한 Animation를 넣어보자

requestAnimationFrame 함수

Animation 효과를 주기 위해 setInterval 함수를 쓸 수 있지만,

setInterval는 브라우저의 다른 탭을 사용할 때도 계속 호출되기 때문에 CPU를 많이 사용한다.

이를 보안하기 위하여 Three.js의 내장 함수인 requestAnimationFrame를 사용한다.

자세한 건 microsoft에서 나온 requestAnimationFrame의 설명을 한번 보자!

여기도 있다!

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

requestAnimationFrame 시작!

plane과 scene, 그리고 cube까지 만들어놓는다.

기존 소스에서 animation이라는 함수를 추가하여 Animation 효과를 줄 수 있다.

<script type="text/javascript">
	function animation() {          
        cube.rotation.x += 0.02;
        cube.rotation.y += 0.02;
        cube.rotation.z += 0.02;  
        requestAnimationFrame(animation);        
        renderer.render(scene, camera);
    }    
    animation();
</script>

animation이 호출될 때마다 cube의 x축, y축, z축에 rotation속성이 0.02씩 증가를 시킨다.

함수 안에서 Animation이 무한 반복되도록 requestAnimationFrame함수에 animation인자를 넣어 호출한다.

이전에선 전체 장면 생성 후 renderer.render를 호출하였는데, Animation을 시작하기 위해서 animation함수를 호출한다.

See the Pen axLYKQ by JaeCool (@JaeCool) on CodePen.

오호 cube가 움직인다.

다른 도형도 넣어서 다른 모션을 주어보자!

나는 20면체를 만들 건데 cube를 만들었던 방식과 동일하다.

도형을 새로운 변수에 담아 scene에 추가!!

<script type="text/javascript">
	var icosahedronGeometry = new THREE.IcosahedronGeometry(4, 4, 4);
	var icosahedronMaterial = new THREE.MeshLambertMaterial({color: 0x12db00, wireframe: false});
	var icosahedron = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial);
	icosahedron.castShadow = true;
	icosahedron.position.x = -4;
	icosahedron.position.y = 5;
	icosahedron.position.z = 0;
	scene.add(icosahedron);  
</script>

icosahedronGeometry에서 THREE.IcosahedronGeometry로 변경을 해준다.

three.js안에 여러 도형(ex - CircleGeometry)이 내장되어 있으니 원하는 도형은 찾아서 사용해본다!

<script type="text/javascript">
	var step = 0;
	animation();
	function animation() {           
		step += 0.01;
		icosahedron.position.y = 3 + ( 5 * Math.abs(Math.sin(step)));
		requestAnimationFrame(animation);
		renderer.render(scene, camera);
	}
</script>

step이라는 변수를 추가해준다 (속도조절을 위한)

step은 animation함수가 실행될 때마다 0.01씩 증가한다.

위아래로 뛸 거니 position y값을 만지면 된다.

See the Pen YMypRm by JaeCool (@JaeCool) on CodePen.

오호 20면체가 움직인다.

위의 Animation을 응용하여!!!

<script type="text/javascript">
	animation();
	function animation() {           
		step += 0.01;
		sphere.position.x = 20 + ( 10 * (Math.cos(step)));
		sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
		sphere.rotation.x += 0.02;
		sphere.rotation.y += 0.02;
		sphere.rotation.z += 0.02;
		requestAnimationFrame(animation);
		renderer.render(scene, camera);
	}
</script>

position x축 cos, y축 sin 이동, rotation x축, y축, z축 뒹굴뒹굴~~

See the Pen BEgMOj by JaeCool (@JaeCool) on CodePen.

앞뒤로 위아래 뒹굴뒹굴 돌면서 완성!! 완성완성!! 완성!!

[Three.js ] Three.js를 시작해보자

사용자가불꽃놀이좋아함 — Wed, 27 Mar 2019 17:56:11 +0900

Three.js를 시작해보자

WebGL를 그대로 사용하려고 하면 고급의 기술을 필요로 하다고 한다.

그래서 JavaScript 라이브러리를 통해 WebGL를 쉽게 다룰 수 있도록 Three.js를 사용한다.

HTML 준비

https://threejs.org/ 사이트에서 파일을 다운로드한다.

다운로드한 파일(three.js-master) > build의 three.js를 사용하면 된다.

three.js를 쓰던 three.min.js를 쓰던 상관없다.

시작

1
2
3
4

<body>
    <div id="WebGL-output"></div>
    <script type="text/javascript" src="./js/three.js"></script>
</body>
Colored by Color Scripter

cs

Scene를 추가한다

Scene은 렌더링 할 모든 객체와, 광원을 저장하는 컨테이너이다.

THREE.Scene이 없으면 렌더링 할 수 없다!!

1

var scene = new THREE.Scene();

cs

Camera를 추가한다

Camera는 어떻게 보일지 정의한다.

Camera에는 PerspectiveCamera가 OrthographicCamera 있지만, 나는 PerspectiveCamera를 쓰겠다.

PerspectiveCamera - 일상생활에서 우리가 보는 외관.

OrthographicCamera - 직교 카메라, 시점으로부터의 거리에 상관없이 모든 물체가 동일한 크기이다.

1
2
3
4
5
6
7

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 
camera.position.x = -25;
camera.position.y = 30;
camera.position.z = 25;
 
camera.lookAt(scene.position);
Colored by Color Scripter

cs

THREE.PerspectiveCamera(fov, aspect, near, far)

45도의 화각(카메라에 비치는 광경 범위를 각도로 나타낸 것), 화면 비율(가로 대 세로의 비율),

0.1(광경이 보이기 시작면까지의 거리), 1000(화면에서 가장 먼 반대편의 거리)

near, far - 오브젝트가 카메라에 얼마나 가까워지고 멀어져서 그려질 수 있는지를 정의한 것이다.

position - x축 -25, y축 30, z축 25 위치에 있는 점을 Camera가 보고 있다.

lookAt - position의 점을 보기 위해 Camera가 위치 이동.

Renderer를 추가한다

1
2
3
4
5

var renderer = new THREE.WebGLRenderer({antialias:true});
 
renderer.setClearColor(new THREE.Color(0xeeeeee));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true; 

cs

오브젝트의 가장자리를 매끄럽게 하기 위해 antialias를 true로 한다.

왼쪽은 antialias를 false, 오른쪽은 true

색상은 0x로 시작하고 HEX color로 적어준다. (0xeeeeee) 배경의 색이 #eee로 바뀌었다.

Renderer를 윈도우의 가로세로 크기로 설정하였다.

그림자를 만들기 위해서 shadowMapEnabled을 true로 준다. (그림자 효과화)

Plane (바닥)를 추가한다

1
2
3
4
5
6
7
8
9
10

var planeGeometry = new THREE.PlaneGeometry(180, 180, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
 
scene.add(plane);
Colored by Color Scripter

cs

planeGeometry - 가로 180, 세로 180, 가로세로 1씩의 세그먼트를 가진 Plane를 추가한다.

planeMaterial - 색상과 재질을 설정한다.

THREE.Mesh - 형태, 재질을 합쳐주는 역할을 한다.

Plane 위에 생성되는 객체의 그림자를 받을 것이기 때문에 receiveShadow의 값을 true로 설정한다.

Plane은 기본값이 수직으로 서있기 때문에 rotation 시켜서 수평으로 만든다.

AxisHelper (좌표계) 생성

1
2

var axes = new THREE.AxisHelper(20);
scene.add(axes);

cs

카메라가 바라보고 곳을 알려주기 위하여 xyz 좌표계를 만든다. (유용하다)

x축은 Red, y축은 Green, z축은 Blue로 확인할 수 있다.

Cube를 만들어보자!

1
2
3
4
5
6
7
8

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x12db00, wireframe: false});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = -4;
cube.position.y = 5;
cube.position.z = 0;
scene.add(cube);  
Colored by Color Scripter

cs

BoxGeometry를 이용하여 x축, y축, z축의 길이가 4인 입방체를 만든다.

MeshBasicMaterial은 광원의 영향을 받지 않기 때문에 그림자를 만들지 못한다.

MeshLambertMaterial, MeshPhongMaterial의 Material를 사용해야 한다.

MeshLambertMaterial - 빛을 받아 반짝이지 않는 객체를 만들 때 사용

MeshPhongMaterial - 빛을 받아 반짝이는 객체를 만들 때 사용

질감이 높은 순으로 나열하자면

MeshPhongMaterial > MeshLambertMaterial > MeshBasicMaterial이 된다.

MeshPhongMaterial > MeshLambertMaterial > MeshBasicMaterial

색상과 wireframe를 어찌할지 설정을 해주고 Scene에 추가!

wireframe : true

SpotLight - 광원을 주어야 객체가 보인다!

1
2
3
4
5
6

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.shadowMapHeight = 5000;
spotLight.shadowMapWidth = 5000;
scene.add(spotLight);

cs

광원에는 여러 가지 종류가 있지만, 다음에 알아보기로 하고 일단은 그림자를 만들어주는 SpotLight를 사용한다.

광원의 색과 position을 설정해주고, 그림자를 만들어야 하니 castShadow는 true로 한다.

왼쪽은 기본값 512, 오른쪽은 5000으로 늘림

그림자의 shadowMapWidth, shadowMapHeight 기본값은 512로 설정되어 있어 그림자가 까슬까슬하게 생겼다.

자연스러운 그림자를 주기 위해 shadowMapWidth, shadowMapHeight의 값을 5000으로 주었다.

그리고 Scene에 추가!

Rendering 하기

1
2

document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
Colored by Color Scripter

cs

만들어둔 div(WebGL-output) 안에 Rendering 한 것을 넣어준다.

render 함수의 인수 scene과 camera를 전달하여 Rendering 완료!

완성!! 완성완성!! 완성!!