본문 바로가기

전체 글

Lists of kipid's blog #[#Lists-of-kipid-s-blog] Lists of kipid's blog -->Fuzzy search 구현해놓음 : Fuzzy search 버튼이나 G 키 (G for Go to anything) 를 누르면 검색창 뜹니다. ESC 나 오른쪽 위 'x' 를 누르면 검색창이 닫힙니다. Fuzzy (흐릿한, 뿌연) search 가 어떤식으로 동작하는지는 쓰시면서 확인해 보시길... (뭐 장황한 설명보단 사용해 보시면서 느끼고, 익히시는게 더 이해가 잘 될듯 합니다. 음.. 한글 초성검색 및 한영 자동변환 검색도 구현해놓음.) Physics / Relativity / Tensor (Image by MidJourney) 블로그 글들 리스트를 정리해 놓은 것입니다. 제목뒤 날짜는 보통 처음 글을 올린 .. 더보기
ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기) # 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 # 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 StartUp # 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.. 더보기
Git 을 배워보자. (Feat. GitHub) # Git 을 배워보자. (Feat. GitHub)버전 관리와 협업에 필수인 Git (and GitHub) 에 대해 배워봅시다. ## PH2024-07-30 : First posting.## TOC## Git 설치 및 간단한 명령어들Git 은 (Global Information Tracker) 의 약자로 대충 보면 된다. (처음 이름 지은 사람은 이런 의도를 가진 약자가 아니었던 같긴 한데... 저 표현이 Git 을 잘 나타내준다고 본다.)우선 설치: 에서 다운 받고 대충 설치.```[.scrollable]SET BASEDIR=%CD%set GIT_EDITOR=vimset VISUAL=vimset EDITOR=%VISUAL%git config --global core.editor "vim"git con.. 더보기
코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup # 2기-View-My-Startup-PART-2-1팀코드잇 풀스택 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 JS - Naming convention[React] React 코딩 컨벤션 정리.레코이브 (Recoeve.net): .## PH2024-09-24 : First posting.## TOC## Vie.. 더보기
prisma with PostgreSQL - cursor based pagination # prisma with PostgreSQL - cursor based pagination페이지값을 넘겨주어 글들을 가져오는 offset based pagination 과는 달리 넘겨준 마지막 아이템을 이용해서 pagination을 하는 방식. Offset based 에 비해 장점을 많이 가지고 있어서 사용법을 정리할 겸 포스팅.## PH2024-09-25 : First posting.## Cursor based pagination 의 장단점장점1. 데이터 양이 커져도 영향을 적게 받는다. (@@index 필수적)2. 데이터가 중간에 만들어지거나 사라져도 영향을 적게 받는다. (Cursor 에 해당하는 entity 가 사라지면 안됨.)단점1. 키가 정렬이되 있는 숫자여야 한다. (@@index 필수적)2.. 더보기
DATABASE setup of Panda Market by kipid # 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 를 배워봅시다. # 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 # 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) # 페이스북 퍼오기 (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__ chaining # 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.. 더보기

티스토리툴바