kipid's blog

# SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS)Copy to clipboard, 트위터 (X), 페이스북 (Facebook), 레코이브 (Recoeve.net), 카카오톡 (Kakao talk), 라인 (Line), WhatsApp 등등 SNS 로 공유하기 기능 정리. 도 참고하시길.DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.)문서 왼쪽 위와 젤 아래 중간의 image button 들로 테스트도 해보세요.## TOC## R..

# Git/GitHub commit description 에서 특정 단어들 찾는 방법요약```OR 검색: git log --grep="단어1" --grep="단어2".AND 검색: git log --all-match --grep="단어1" --grep="단어2".정규 표현식: git log --grep="단어1|단어2" -E.```/어떤 단어를 검색하고 싶은지, OR/AND 중 어떤 조건을 원하는지에 따라 골라 쓰면 됨.## PH2025-03-08 : First posting.## TOR## 여러 --grep 옵션 사용```git log --grep="fix" --grep="update" --grep="add"```/커밋 메시지에 "fix", "update", "add" 중 하나라도 포함된 커밋을 표시...

# React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링작성중...React Next.js 애플리케이션에서 사용자가 페이지네이션, 키워드 검색, 필터링 등을 조작할 때 해당 상태를 URL에 반영하여, 뒤로 가기 버튼을 누르거나 URL을 직접 입력해도 이전 상태가 유지되도록 하는 방법을 알아보자.## PH2024-12-31 : First posting.## TOC## URL 쿼리 파라미터 사용페이지 번호, 검색 키워드, 필터 정보를 쿼리 파라미터에 저장합니다.```/list?page=2&limit=10&search=example&filter=active```/## Next.js 의 useRouter 훅 사용```import { GetServerSideProps..

# 12월 30일 2기 위클리 페이퍼 - 테스트의 필요성을 설명하세요. 본인이 생각하는 좋은 테스트란 무엇인지 설명해주세요.## PH2024-12-30 : First posting.## TOC## 테스트의 필요성을 설명하세요.웹 개발에서 테스트는 필수적인 과정입니다. 마치 건축물을 짓기 전에 설계도를 검토하고, 완성된 건물에 대한 안전 검사를 진행하는 것처럼, 웹 개발에서도 테스트를 통해 개발된 웹 애플리케이션의 품질을 확보하고, 예상치 못한 문제를 사전에 방지합니다.### 테스트가 필요한 이유는 다음과 같습니다.- 버그 예방 및 조기 발견: 테스트를 통해 코드에 존재하는 오류(버그)를 조기에 발견하고 수정하여, 사용자에게 불편을 최소화할 수 있습니다.- 코드 품질 향상: 테스트를 수행하면서 코드의 구조..

# 12월 23일 2기 위클리 페이퍼 - VPC는 무엇이며, 왜 중요한가요? S3 버킷의 사용 사례와 주의할 점은 무엇인가요? IAM은 무엇이며, 어떤 기능을 제공하나요?## PH2024-12-23 : First posting.## TOC## VPC는 무엇이며, 왜 중요한가요?### VPC(Virtual Private Cloud)란 무엇일까요?VPC는 Virtual Private Cloud의 약자로, 퍼블릭 클라우드 환경 내에서 논리적으로 격리된 개인 네트워크를 의미합니다. 마치 자기만의 데이터 센터를 클라우드 상에 구축한 것처럼, 독립된 네트워크 환경을 제공하여 더욱 안전하고 유연하게 클라우드 서비스를 이용할 수 있도록 해줍니다.간단히 말해서, VPC는 클라우드 상의 '사설 네트워크'라고 생각하면 쉽습..

# 12월 16일 2기 위클리 페이퍼 - AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요? EC2 인스턴스란 무엇이며, 어떻게 사용하나요?## PH2024-12-18 : First posting.## TOC## AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요?AWS의 글로벌 인프라스트럭처는 전 세계적으로 분산된 데이터 센터, 가용 영역, 리전, 엣지 로케이션 등으로 구성되어 있습니다. 이러한 구성 요소들은 고객에게 안정적이고 확장 가능하며 안전한 클라우드 서비스를 제공하는 기반이 됩니다. 주요 구성 요소는 다음과 같습니다.- 리전(Region): 지리적으로 분리된 독립적인 영역으로, 하나 이상의 가용 영역으로 구성됩니다. 각 리전은 자체적인 전력,..

# 12월 09일 2기 위클리 페이퍼 - TypeScript의 동작 원리에 대해 설명해 주세요. d.ts 타입 정의파일이 무엇이며, 어떻게 만들 수 있는지 설명하세요.## PH2024-12-10## TOC## TypeScript의 동작 원리에 대해 설명해 주세요.TypeScript는 JavaScript의 슈퍼셋으로, JavaScript에 정적 타입을 추가한 언어입니다. 동작 원리를 이해하려면 다음 핵심 개념들을 알아야 합니다:1. 타입 시스템: TypeScript는 변수, 함수 매개변수, 반환 값 등에서 타입을 명시적으로 지정할 수 있게 합니다. 이로 인해 코드를 작성하는 도중에 타입 오류를 발견할 수 있으며, 더 나은 코드 품질과 유지 보수성을 제공합니다.```[.lang-ts]let myString:..

# 코드잇 풀스택 2기 - Part 3 - 중급프로젝트 - Docthru개인 개발 리포트: 이강수 (kipid)## PH2024-12-06 : First posting.## TOC## npm install 에러시```npm install --legacy-peer-deps```/## font-size: var(--XXpx) 적극 활용## color, background-color: var(--prime-yellow/red/blue/orange) or var(--brand-black/white) or var(--gray-0 ~ 900) 적극 활용## queryClient.invalidateQueries({ queryKey: ['todos'] })캐싱 (Caching) 을 무효화 할 때 쓰는 명령어.## de..

# 11월 11일 2기 위클리 페이퍼 - MVC(Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요. OAuth란 무엇인가요? 그리고 왜 사용하는지 설명해주세요.## PH2024-11-11## TOC## MVC (Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요.MVC(Model-View-Controller) 패턴은 소프트웨어 디자인 패턴 중 하나로, 애플리케이션을 세 가지 주요 구성 요소로 분리하여 구조화하는 방식입니다. 각 구성 요소의 역할과 MVC 패턴의 장점에 대해 설명..

# 11월 04일 2기 위클리 페이퍼 - 경험을 바탕으로 React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명해주세요. 특히 로그아웃 구현 로직에 대해 설명해주세요. RESTful API의 개념과 주요 제약 조건을 설명하세요.## PH2024-11-05## TOC## React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명### Front-End 단에서의 처리.```[.linenums]import axios from 'axios';const instance = axios.create({ // baseURL: `https://panda-market-api.ver..

# 10월 28일 2기 위클리 페이퍼 - 세션 기반 인증과 토큰 기반 인증의 차이점을 설명하세요. 어떤 상황에서 각각을 사용하면 좋을지 예를 들어 설명해 주세요.## TOC## 세션 기반 인증 (Session-Based Authentication)특징:서버가 사용자의 상태를 관리하고, 세션 아이디를 클라이언트에 전달합니다.세션 아이디는 쿠키에 저장되어, 클라이언트가 요청을 보낼 때마다 서버에 포함됩니다.서버는 세션 저장소를 사용하여 세션 아이디를 통해 사용자를 식별합니다.사용 상황:상태를 유지해야 하는 경우: 쇼핑카트와 같이 사용자 상태를 지속적으로 추적해야 하는 애플리케이션.보안이 중요한 애플리케이션: 세션 정보가 서버에 저장되므로, 서버 측에서 직접 관리할 수 있어 보안 관리가 용이합니다.브라우저 기..

# 10월 21일 2기 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명, 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명)## PH2024-10-22## TOC## 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명### CSR (Client-Side Rendering)특징:모든 렌더링이 클라이언트 측(브라우저)에서 이루어집니다.초기 로드 시 필요한 모든 JavaScript가 다운로드되어야 하므로, 초기 로딩 시간이 길어질 수 있습니다.이후 페이지 탐색은 빠르고 동적입니다.사용 상황:사용자와의 실시간 상호작용이 많은 SPA (Single Page App..

# ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기)Airbnb Style Guide 가 유명해서 이 가이드대로 .js, .jsx 파일들이 포멧화되도록 설정을 해보려고 함.## PH2024-09-27 : First posting.## TOC## ESLint, Prettier 패키지 설치ESLint (EcmaScript Lint) 는 JavaScript에 한정된 Code Formatter (문법이 제대로 맞는지 주로 판단) 라면, Prettier 는 전체 코드 스타일을 다루는 Code Formatter (코드 스타일을 통일시켜주는 일을 주로 함) 이다.```[.scrollable]npm install --save-dev --save-..

# Sign-up/Log-in with Google/Kakao (구글/카카오로 가입하기/로그인 구현하기): 구글 Google, 카카오 Kakao Oauth구글로 가입하기랑 로그인하기를 어떻게 구현할 수 있는지 알아봅시다.작성중...## PH2024-09-30 : First posting.## TOC## 구글로 가입하기### 우선 console 로 가서 Oauth 를 활성화시켜 줍시다. (Google Developers)https://console.cloud.google.com/ 로 가서 My First Project 링크로 들어갑시다.왼쪽 사이드바에서 APIs & Services > Credentials 를 클릭. OAuth 2.0 Client IDs 를 하나 발급 받읍시다.여기서 Authorized J..

# DATABASE setup of View My StartUpdb error 가 날 땐,```[.linenums]npx prisma migrate reset --force```/후 다시```[.linenums]npm install --production && npx prisma migrate deploy && npx prisma generate && npx prisma db seed```/## PH2024-09-26 : First posting.## TOC## ERD models### model 1### model 2## Schema 모음.User: Company: Watch and Comparison: Investment: ## UserUser```[.linenums]model User { id..

# 2기-View-My-Startup-PART-2-1팀웹 상의 현재 문서는 https://view-my-startup-by-team-1.netlify.app/static/2%EA%B8%B0-view-my-startup-1%ED%8C%80 에 있습니다.코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup .노션 (Notion): . (feature & schema)스타일 가이드 참고: .Commit message Convention 참고: [Git] 커밋 메시지 컨벤션(스타일) 가이드 / Commit message Convention(style) guideUdacity Git Commit Message Style Guide.React.js Naming Convention: React J..

# DATABASE setup of Panda Market by kipid판다마켓을 위한 DATABASE 를 구축해 봅시다.## PH2024-09-24 : First posting.## TOC## 기본: npx prisma init```[.scrollable]npx prisma init --datasource-provider postgresql```/명령을 실행해서 다음과 같은 파일을 얻자.```[.scrollable]generator client { provider = "prisma-client-js"}datasource db { provider = "postgresql" url = env("DATABASE_URL")}```/.env 파일 설정을 다음과 같이 하자.```[.scrollab..

# prisma with PostgreSQL 를 배워봅시다.## PH2024-09-15## TOC## Prisma 초기화```[.scrollable]npx prisma init --datasource-provider postgresql```/.env 파일 설정하기. 아이디는 자동으로 postgres 로 정해지고 아래에 [password] 는 자신이 설정한 비밀번호를 넣어주고 (비번에 특수문자가 들어간 경우 encodeURIComponent kipid's blog :: Encode/Unescape and Decode/Escape URI Component 함수로 한번 처리해 준 뒤 넣어줘야 함. #, ? 같은게 URL 에선 특수하게 쓰이니...), [database_name] 에는 사용할 DB name 을 ..

# CSP (Content Security Policy) : iframe, image (img), video blocking```document.referrer; // in javascriptreq.headers().get("Referer"); // in vert.x```/referrer 통해서 연결을 허용할 것인가? 말 것인가를 결정하는 거인듯?그런데 CORS (Cross-Origin Resource Sharing) 하고는 좀 다른 개념인건가? 헷갈리네...## RRAMDN - CSP (Content Security Policy) policy directivesMDN - Cross-Origin Resource Sharing (CORS)MDN - The X-Frame-Options response hea..

# 페이스북 퍼오기 (Embeding facebook post)페이스북 퍼오는게 옛날보다 쉬워졌음.## TOC## Example아래와 같이 iframe 으로 퍼오도록 바뀌었음. 좋으다. 국내 IT 업체들도 iframe 으로 쉽게 퍼오도록 좀 바꿔주지 =ㅂ=;;그런데 facebook 도 width 를 responsive 하게 동작하도록 안해주긴 했네 ㅡ,.ㅡ;그리고 가운데 정렬이 힘든데? =ㅇ=;; 어떻게 해야 가운데 정렬이 될까나?``` ```/ ## RRAdevelopers.facebook.com - Social Plugins - Embedded Posts

# Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chainingWeb browser 에서 쓰이는, "Object-based based on prototypes" 특성을 갖는 client-side 프로그래밍 언어인 JavaScript를 배워 봅시다. 여기는 제가 헷갈렸던 부분만 조금 정리.## PH2017-08-14: 코드 스타일만 좀 정리. To SEE.2014-06-13: docuK upgrade.2014-05-21: First Posting.## TOC## Making an instance from a constructor function..

# 의료 파업 및 의료 영리화, 원격진료 관련윤석열 정부가 2024년 2월 2000명 규모의 의대 증원과 필수의료 정책 패키지를 발표하자, 의사 및 의대생들이 반대 집단행동에 나선 사건. 의료 파업의 표면적인 이유는 원격진료 반대와 수가인상인거 같긴한데... . 몇가지 관련해서는 분명 정부가 의료보험료를 내는 국민 다수의 편 입장임. 의료보험료가 적게 나가게 하고, 수가를 최대한 낮춰서 (진료의 질까지 낮아지면 문제지만) 전체적으로 적은 비용으로 치료를 받게하자가 정부의 입장인 것이니. 이에 반해 수가를 올리려는 입장의 의사들이 있는거고. 궁극적으로는 돈 싸움. 동네병원과 큰 병원의 싸움이든, 보험공단과 의사들의 싸움이든, 의사와 약사간의 싸움이든, 정부와 의사들의 싸움이든. 어쨌든 핫이슈는 돈인듯. (..

# 유튜브 리스트 (Youtube list) 로 퍼오는 법유튜브 영상 한개만 있는게 아니라, 리스트로 있는 영상들도 많은데, 이 때 동영상 하나만 퍼오는게 아니라 list 통째로 퍼오는 법을 알고 싶어서 정리하는 글.## PH2024-02-10 : First posting.## TOC## 리스트 퍼오기 예제링크: 그냥 동영상 볼 때의 링크: https://www.youtube.com/watch?v=xHW7KOcqToo&list=PLUbFnGajtZlUl0zYr4crGveP21BbcZG_L&index=1플레이리스트 | Playlist 홈의 링크: https://www.youtube.com/playlist?list=PLU9-uwewPMe05-khW3YcDEaHMk_qA-7lI 는 list=엄청긴_id 이런식..

# Java Serializable Object to Byte Array (byte[] or SQL BLOB)MySQL 에 Java Serializable Object 를 byte[] data 로 저장해 뒀다가 필요할때마다 꺼내쓰고 싶어서 알아보는 중 .그냥 string 형태로 변환한 뒤에 저장했다가 string 으로 읽어들이고 분석해서 처리하도록 짤수도 있긴한데... 속도면이나 프로그램 가독성 면에서 안좋을듯?그리고 그림 파일이나 비디오 파일도 어떻게 BLOB 형태로 저장할 수 있는지 좀 공부해봐야겠음.## TOC## Using StreamsException 처리나 close() 처리해야해서 좀 짜증나긴 하는듯.### To byte[]```[.scrollable.lang-java]ByteArrayOut..

# Time as an emergent phenomenon (시간을 근본적인 물리량 (physically fundamental quantity) 으로 보지 않고 창발적인 현상 (emergent phenomenon) 으로 볼 수 있다.)시간을 근본적인 물리량 (physically fundamental quantity) 으로 보지 않고 창발적인 현상 (emergent phenomenon) 으로 볼 수 있다는 논문같은데 -ㅇ-;;; 개인적으로 굉장히 충격적이고 참신한 접근 같음ㅋ. 아직 제대로 읽어보진 않아서 어떤식으로 어떤 더 근본적인 물리현상으로부터 시간개념이 창발한다는 것인지는 모르겠음. 양자역학이랑 시간이란 놈은 아무리 봐도 신기하단 (이해가 안간단) 말야.## RRA ArXiv - Time from ..

# week8 위클리 페이퍼 (데이터베이스 정규화에 대해 설명, 관계형 데이터베이스를 사용하는 이유를 설명)## PH2024-09-03 : First posting.## TOC## 데이터베이스 정규화에 대해 설명데이터베이스 정규화 (Normalization) 는 관계형 데이터베이스에서 데이터의 중복을 최소화하고 데이터의 일관성 (Consistency) 과 무결성 (Integrity) 을 유지하기 위해 데이터를 구조화하는 과정입니다. 정규화는 여러 단계로 나뉘며, 각 단계는 특정한 규칙을 따릅니다.### 제1정규형 (1 Normal Form)모든 속성이 원자값을 가져야 합니다. 즉, 각 열은 하나의 값을 가져야 합니다.테이블의 컬럼이 원자값 (Atomic Value, 하나의 값) 을 갖도록 테이블을 분해하..

i 소속 직위 성명 재산1 대통령 이명박 5,496,5982 국무총리 김황식 1,121,1663 대통령실 대통령실장 임태희 2,630,4654 대통령실 정책실장 백용호 3,488,6405 대통령실 정무수석비서관 정진석 4,531,5106 대통령실 민정수석비서관 권재진 2,562,7997 대통령실 사회통합수석비서관 박인주 435,3968 대통령실 외교안보수석비서관 천영우 1,389,1709 대통령실(현 지식경제부) 경제수석비서관(장관) 최중경 2,949,28710 대통령실 고용복지수석비서관 진영곤 2,184,36711 대통령실 교육문화수석비서관 진동섭 570,99112 대통령실 홍보수석비서관 홍상표 1,036,36413 대통령실 총무기획관 김백준 2,288,41914 대통령실 기획관리실장 김두우 2,1..

# Black Holes as Elementary Particles, and Elementary Particles as Mini Black Holes신기방기한 논문인듯. 개인적으로는 "기본 입자들이 작은 블랙홀 같은게 아닐까?" 생각중이기도 한데, 블랙홀을 기본 입자로 보는 시각도 있는듯? 제대로 읽어본적이 없어서 아직 크게 할말은 없음. 읽고나서 덧붙여야지.## RRA Nucl. Phys. B380 (1992) 447-477, Black Holes as Elementary Particles, by C.F.E. Holzhey, and F. Wilczek. (arXiv:hep-th/9202014) StackExchange physics - Are elementary particles ultimate fat..

# 방향키 (위: ArrowUp, 아래: ArrowDown) 로 숫자 조정하기방향키로 숫자 조작을 가능하게 만들어 봅시다. LabVIEW 에서 기본적으로 동작을 지원해줬던거 같은데, 이걸 JavaScript 로 구현해 보려고 함.해당 코드는 https://recoeve.net/ 점수 메기는데 적용되어 있습니다.## PH2024-09-16 : First posting.## TOC## Input Floating Number ## Code```[.lang-html] Floating Number ```/```[#pre-code-change-number]```/## RRA

# 윈도우 11 홈 (Windows 11 Home) 에서 RDP (Remote Desktop Protocol) 접속할 때 매번 비밀번호 안치고 접속할 수 있게 해주는 방법Windows 11 Home 에서는 RDP 연결할 때 비밀번호를 저장 못하고 매번 비밀번호 (password) 를 입력하고 RDP 에 접속했어야 했는데, Copilot 에게 물어서 Windows 11 Home 에서도 비밀번호를 처음에 한번만 입력하고 이후로는 기억해 놓은 password 로 접속할 수 있게 하는 방법을 찾았다.## PH2024-09-15 : First posting.## TOC## cmd 창 열고 레지스트리 값 추가하기cmd 창이나 Windows PowerShell 을 관리자 권한으로 열고 다음과 같은 명령어로 레지스트리..