📝 TIL
Today I Learned2020.06.25(목) ~✨ 뚜벨로퍼의 개발 보따리
- 보이는 대로, 생각나는 대로, 관심 가는 대로 주제를 선정해서 자유롭게 기록합니다.
- 한 번이라도 뇌를 스쳐갔던 것들이라면 언제든 이곳에서 다시 찾아볼 수 있도록 합니다.
- 상황에 맞게, 수준에 맞게, 가볍게라도 형체화 하는 것에 의의를 둡니다.
Categories
- Algorithm & Data Structure
- Database
- Deno
- Design
- Git & GitHub
- HTML/CSS
- IDE
- Java
- JavaScript
- Jira
- Node.js
- ORM
- Python
- React
- React Native
- Spring
- Svelte
- TypeScript
- Vue
- Web
- Webpack
- Way of working
- Journal
- ETC
📌 자주 열람
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Algorithm & Data Structure
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Database
- MySQL Procedure
- MySQL emoji 저장
- MySQL 유저, 권한
- MySQL 문자열 치환
- PK 조건
- MySQL uuid
- MySQL 컬럼 정보 조회
- DML, DDL
- 관계형 데이터베이스
- DB 설계 과정의 개요
- MySQL 환경변수 추가 (Windows)
- MySQL root 비밀번호 리셋 (Windows)
- MySQL 실행계획
- MySQL 8.x 유저 비밀번호 변경
- MySQL charset 확인
- MySQL 전체 데이터 수 확인
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Deno
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Design
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Git & GitHub
- Commit history | Author, Committer 변경
- 코드뭉치 스테이지에 올리기, 버리기
- Commit 되돌리기 | reset, revert
- 📌️ Git 명령어
- 나만의 commit message conventions
- branch 이름 변경
- git 명령어 단축어 지정
- Workflow
- Commit options
- GitHub CLI
- git checkout -b <new_branch> [<start point>]
- refs
- Merge 기초
- Git 내부 디렉터리 구조
- Merge 종류
- grep 대소문자 구분 없이 검색
- Repository에 License 정보 추가하기
- rebase 설명하기
- 사용하고 있는 git 단축어 모음
- remote url 변경
- 복구하기 - reflog
- remote pull request 가져오기
- git stash 뜯어보기
- 커밋 순서 바꾸기
- 다른 브랜치의 파일 비교
- remote branch 가져오기
- reset 옵션
- clean
- repository 옮기기
- stash 참조 간편하게 - stash@{n} 말고
- What changed
- 변경사항 다른 repository 로 옮기기
- orphan branch - 부모 없는 브랜치 생성하기
- GitHub에서 merge 충돌 해결
- 원격 저장소에 잘못 올린 파일 삭제하기
- Deploying JavaScript App to GitHub Pages
- worktree 삭제
- Commit message template
- root commit, merge commit log
- tag
- fork 해온 repository 최신 상태로 동기화하기
- git log --pretty
- 특정 커밋까지만 Push 하기
- GitHub personal access token 사용하기 (403 권한 없음 오류)
- GitHub 라벨에 대해 알아보자 (& 커스텀 설정 편하게 하기)
- fetch
- add & commit
- rebase -i 명령어들
- log 그룹별로 요약해서 보기 - git shortlog
- worktree
- 브랜칭 전략 - 개인적 경험
- Local & Remote branch 이름 변경
- Quickstart for GitHub Actions
- GitHub Actions 이용하여 GitHub Pages 배포 자동화하기
- Git 1:1 맞춤 과외 해보기 (with. 쏘)
- git rebase --onto : 다른 토픽 브랜치에서 갈라져 나온 토픽 브랜치를 rebase 하기
- 로컬 기본 브랜치 이름 설정하기
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
HTML/CSS
- Custom reset CSS
- favicon
- viewport
- 웹폰트
- fontawesome
- cdn
- <label>
- CSS 형제 선택자 (~, +)
- CSS에서 변수 사용하기
- li 태그 가로로 배열
- Grid
- CSS 단위(em, rem)
- <dl><dt><dd>
- div 내부 텍스트 줄바꿈
- CSS 이미지 컨테이너에 사이즈 맞추기
- CSS 말줄임표
- HTML boilerplate
- nth-child vs nth-of-type
- CSS Animation
- @keyframes
- CSS white-space
- box-sizing
- 모바일에서 탭 하이라이트 제거하기
- input type="button" vs button
- CSS 단위(vw, vh, vmin, vmax, ex, ch, lh)
- Sass, SCSS
- CSS Web Safe Fonts
- SCSS 문법
- CSS content
- 임시이미지 넣기 - placeholder
- 웹 표준
- CSS resize
- article vs section
- border-radius 정복하기 (feat.FANCY-BORDER-RADIUS)
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
IDE
- IntelliJ error | Cannot create class. Unable to parse template "Class"
- 코딩 시간 통계 보기 - WakaTime
- Jetbrains IDE에 TODO 주석 외 다른 유형 추가
- IntelliJ markdown 작성 시 JavaScript code 미지원 문제
- IntelliJ 파일 형식 인식 못할 때
- IntelliJ 프로젝트 폴더 구성하기
- WebStorm import 시 작은 따옴표를 기본으로 설정
- IntelliJ 실행 시 마지막 종료한 프로젝트 reopen 설정
- 이전 수정한 지점, 다음 수정한 지점으로 이동
- IntelliJ 를 DataGrip 처럼 사용하기
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Java
- overloading vs overriding
- 상속
- 다형성
- Collections framework
- How to compile and run a Java program using terminal
- Vector
- Exception Tutorial
- Package java.time
- 가변인자
- 변수명 앞에 _(underscore)
- 숫자 리터럴 사이에 _(underscore)
- Optional class
- import vs static import
- javadoc
- Sort List Objects with stream.sorted()
- 📚 [클린 코드] 주석
- @DataJpaTest JdbcSQLSyntaxErrorException: Table not found...
- Formatting numbers with comma
- Maven 프로젝트, 라이브러리까지 포함하여 build 하기 (feat. uber-JAR)
- Unit Test naming conventions
- JUnit4 테스트 메소드 실행 순서 지정하기
- 📚 [Effective Java] 69. 예외는 진짜 예외 상황에만 사용하라
- 예외 처리 - 트랜잭션
- Maven Dependencies - Multiple bindings
- Logback default values
- Logback 빌드 환경에 따라 설정 파일 다르게 적용하기 - include
- Maven Lifecycle
- Logback effective levels
- JSON 파싱하는 다양한 방법 (Maven)
- String class 1 - String 생성
- String class 2 - String 연결
- String class 3 - String 최적화
- 디렉토리 생성
- JUnit Expected Exception Test
- 실행 가능한 uber-JAR 만들기
- uber-JAR Error : Invalid signature file
- split() vs StringTokenizer
- JUnit5 테스트 메소드 실행 순서 지정하기 - @TestMethodOrder
- 구분자 포함하여 문자열 이어붙이기 - StringJoiner
- stream 시작하기
- 예외 처리 - 다중 catch
- Streams vs collections
- WAR vs JAR (+ EAR)
- final
- PrintWriter vs FileWriter
- indexOf(), lastIndexOf()
- 빌드할 때 일부 폴더 .zip 으로 묶기 - maven-assembly-plugin
- Java 11
- 📚 [Effective Java] 4. 인스턴스화를 막으려거든 private 생성자를 사용하라
- 📚 [Effective Java] 13. 클래스와 멤버의 접근 권한은 최소화하라
- mavenCentral vs jCenter
- jEnv 로 여러 버전 자바 관리하기
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
JavaScript
- 정적 스코프와 동적 스코프
- 전역 스코프와 블록 스코프
- 선언과 할당, undefined와 ReferenceError
- hoisting
- var, let, const
- 함수 표현식
- 화살표 표기법
- iterator
- generator
- querySelector
- Convert milliseconds to date
- for, forEach, for ...of
- 부모, 자식, 형제 노드 찾기
- Array 원소 삭제 - splice()
- data attributes
- Optional chaining (?.)
- Convert date to milliseconds
- undefined vs null
- image 업로드 전 미리보기
- isNaN()
- Nullish coalescing operator
- Parameter defaults
- array methods 총 정리 1
- 📌 array methods 총 정리 2
- 비밀번호 정규식
- string to boolean
- 쉼표 연산자
- cursor 위치에 문자열 삽입
- sort()
- Spread syntax (...)
- 배열 선언 및 할당
- Array 내부 객체 중복값 제거
- Comparison Table
- ? vs ??
- Math Methods
- 삼항연산자 우선순위
- get URL
- How to get CSS values
- addEventListener()
- KeyboardEvent.keyCode -
Deprecated! - Object destructuring
- Date.prototype.getMonth() - zero-based value
- console.table()
- console.log() styles
- Array elements - delete vs splice()
- 자릿수 보정 - toFixed()
- ES6 Map
- console.count()
- event.target vs event.currentTarget
- Array copyWithin() method - 배열 안에서 요소를 교체
- Array fill() method - 배열 채우기
- Array findIndex() method - 조건을 만족하는 요소의 인덱스 반환
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Jira
- 개념 정리하기 & 기본 세팅 체크리스트
- 기본 세팅 - 세부 정보 필드 정리하기
- 기본 세팅 - 워크플로 정리하기
- 기본 세팅 - 깃헙 연동
- 기본 세팅 - 슬랙 연동
- 기본 세팅 - IntelliJ 연동
- 기본 세팅 - 이슈 유형 사용 규칙 정하기
- 기본 세팅 - 티켓 작성 규칙 정하기
- 기본 세팅 - 스프린트 규칙 정하기
- 기본 세팅 - 팀 멤버 초대, 권한 부여
- 워크플로에 대한 고민
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Node.js
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
ORM
- ORM 정의, 장단점
- JPA vs Hibernate vs Spring Data JPA
- entity
- entity class에는 setter 메소드를 만들지 않는다
- Querydsl 표현식
- Querydsl Projection
- @GeneratedValue
- @GeneratedValue - auto_increment 문제
- Column mapping
- Querydsl case문
- Querydsl BooleanBuilder, BooleanExpression
- LocalDate default value
- Hibernate UUID Generator via annotations
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Python
- Python 3 설치, Hello world!
- Python 문법 특징
- python 명령 실행 시 버전 3 실행되게 설정하기
PyCharm으로 프로젝트 생성- KoNLPy 설치 for macOS (+ class 비교)
- 증감연산자?
- 한글 키워드 분석(불용어 제거)
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
React
- React 개요
- 프로젝트 생성
- WebStorm Live Template 설정
- WebStorm Debugging
- 설치할 크롬 확장 프로그램
- Route exact path (그리고 Switch)
- JSX
- Lifecycle - mount, update, unmount
- styled-components
- public 폴더의 이미지 사용
- Redux 기초
- Quill editor
- quill-delta-to-html
- Middleware
- 성능 모니터링 (feat.크롬 개발자도구)
- 성능 최적화 1 - React.memo
- redux-saga
- Material-ui Drawer
- Hook의 규칙
- Fragments(<>)
- JSX 대소문자
- JSX select 특정값 선택
- 컴포넌트에 내부 컴포넌트 전달 (with props)
- useEffect
- axios baseURL
- 코드 스타일 통일을 위한 Prettier - IntelliJ 설정
- API Key 숨기기
- 중복 submit 방지
- Prettier options
- babel
- Redux 기초2
- action
- state 올바르게 사용하기
- BrowserRouter
- 채팅창 스크롤 컨트롤
- chat
- key
- eslint-plugin-react-hooks
- useMemo, useCallback 제대로 사용하기(and 성능 최적화)
- &&보다 삼항연산자 사용하기
- 🧩 Tab Menu
- 언제 컴포넌트를 나눌까?
- <option selected> 대신 <select defaultValue>
- Create React App 환경변수
- state 내부 배열 요소 추가/삭제하기
- Custom Hooks
- http method DELETE에 body 담아보내기
- axios.interceptors
- Line 그래프 그리기 using react-chartjs-2
- useEffect vs useLayoutEffect
- useEffect deps에 조건 넣기
- Declare default props in functional component
- Role-based access control
- Deploying a react app using FileZilla
- 배포하며 겪었던 문제 - POST 405 (Method Not Allowed)
- 환경에 따라 build 다르게 하기
- Entry point : index.html vs index.js
- 배포 후 404 Not found - AWS, Azure
- GitHub pages 배포
- Named export vs Default export (ES6)
- styled-components - extending styles
- Include SVG
- styled-components - 공통 css 사용
- Object literals 피하기
- JSX에서 숫자로 loop 돌기
- Controlled vs Uncontrolled components
- Building CLI application with Ink
- SCSS
- 가상돔 (Virtual DOM)
- 로컬에서 build 결과물 서버로 띄우기 - npm package
serve - JSX 주석
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
React Native
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Spring
- Boot에서 JSP 사용하기
- groupId and artifactId
- Constructor Injection with Lombok
- 스프링 IoC 컨테이너
- gradle에서 compile, api vs implementation
- 싱글톤 객체
- Recommended project structure
- @Valid
- JPA logging
- Controller에서 parameter받기
- MessageSource
- 패키지명은 왜 com.xxx.xxx일까?
- 무분별한 setter 지양
- Maven vs Gradle
- Spring Boot Starter
- YAML
- 스프링 구동할 때 콘솔에 출력되는 배너 변경하기
- session 저장소로 DB 사용하기
- Spring Boot - Swagger 3
- H2 Database
- Spring Boot - Querydsl 설정
- 파일 업로드 용량 설정
- Spring Boot - CORS 설정하기
- Hibernate 초기화 전략
- Spring Boot - H2 innoDB Error
- Lombok @Builder and constructor
- Spring Security 를 사용하는 프로젝트에서 CORS 설정
- Spring Boot 환경별 설정(YAML) - 2.4에 달라진 점
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Svelte
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
TypeScript
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Vue
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Web
- RESTful API Design Best practices | 단수와 복수
- HttpStatus code 정리
- PUT vs PATCH
- Http response status code - 400 vs 403
- CORS에 대한 이해
- Nginx restart vs reload
- HTTP vs HTTPS
- 브라우저 기본 구조, 동작 과정
- 웹 폰트 확장자
- CDN
- Nginx
- Forward Proxy vs Reverse Proxy
- Nginx 설치 on Ubuntu
- nginx.conf 뜯어보기
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Webpack
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Way of working
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
Journal
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ🔝️ TO TOP
ETC
- AWS EC2에 jdk 설치
- Keycloak이란
- 📌️ Linux 명령어
- Parameter vs Argument
- npm 설치 목록 보기
- Kill process running on port {port number} in MacOS
- npm vs yarn
- Keycloak - create user 권한 설정
- AWS 도메인 연결 ⚠ 작업 중
- Slack - GitHub 연동 설정
- package-lock.json
- npm install --save 옵션
- EC2 instance SSH 접속 - Permission denied error
- GitHub markdown - HTML Tags
- markdown 목차
- markdown 접기/펼치기
- yarn-check
- postman 변수 사용하기
- 📌️ vim 명령어
- RGB
- Mac 메뉴바에 BitBar Github-contribution plugin 설치하기 (feat.1일1커밋)
- Redux devtools로 dispatch action 실행하기
- 프론트엔드 프로젝트 Versioning
- CloudFront 캐시 삭제 - 객체 무효화
- License - GNU
- JP2 Format 1 - Box
- JP2 Format 2 - File Format Organization
- Jenkins unmappable character * for encoding
- What is REST?
- Windows10 사용 중인 포트 죽이기
- DPI
- MacOS 커서 포함하여 스크린샷
- 테스트 코드에 대한 단상
- 📚 실리콘밸리 리더십 서평
- Notion - Google Hangouts Chat Webhook 알림 설정하기 (with Automate.io)
- 슬랙 알림 Bot 만들기