문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..
성능 최적화 내지는 웹성능 최적화를 구글에 검색하면 수많은 이론과 자료가 나온다. 어떤 부분에 초점을 맞추느냐에 따라서 그 방법은 분류 또한 다양해진다. 우선 생각나는대로 빠르게 나열을 해보자면 style은 상단, js는 하단에서 불러온다 웹팩(Webpack) 사용 js의 공백 줄이기 html 작성시 불필요한 div를 제거 css 최적화 - 리플로우, 리페인트(Reflow/Repaint)를 고려한 스타일 작성 - 사용하지 않는 css 제거 이미지 최적화 - picture, img 지연로딩 활용하기 - 스프라이트 이미지 사용 핵심적인 웹 지표(LCP,FID,CLS) 최적화 애니메이션은 js보다는 css로 사용한다 헤더에 만료기한 넣기 SEO (검색엔진최적화) CDN 사용 Gzip 사용 파일 개수 줄이기 라..
32 User Interface Elements For UI Designers 유저 인터페이스(UI)는 우리가 앱과 웹사이트를 만들때 사용하는 요소 중 하나이다. UI는 버튼, 스크롤바, 메뉴, 체크박스 등 맥락에 맞는 요소를 사용하여 사용자와 화면 간의 상호 작용을 더함으로써 사용자가 더 쉽고 직관적으로 인터페이스를 이용할 수 있도록 돕는다. 당신은 UI 요소를 사용하여 제품의 시각적 일관성을 유지함으로써 유저가 고민하지 않고도 쉽게 당신의 제품을 사용할 수 있도록 돕는 유저-친화적인 인터페이스를 만들 수 있게 된다. 32 UI Elements Designers Need To Know What are UI elements? Discover everything you need to know in this..
커밋 컨벤션의 구조 우리가 보통 글을 쓸 때 제목, 본문, 추가내용으로 구성을 한다. 커밋 컨벤션도 위의 구조를 따른다. 파일을 변경하거나 수정한 뒤 commit을 하게 될 때 아래와 같이 커밋 메시지를 추가 할 수 있다. git commit -m "커밋메세지" 이 "커밋메세지" 부분을 컨벤션에 맞게 작성하라는 뜻이다. 커밋 메시지는 크게 type, body, footer 3부분으로 나뉜다. 각 파트는 빈줄을 두어 구분한다. 주의할 점은 커밋 메시지를 작성할 때 어떤 라인도 100자를 넘을 수 없다. 커밋 컨벤션을 지킬시에 github 및 다양한 git에서 메시지를 더 쉽게 읽을 수 있다는 이점이 있다. type 제목부분 //예시 feat(directive): ng:disabled, ng:checked ..
문제 나의 풀이 console.log(`|\\_/|\n|q p| /}\n( 0 )\"\"\"\\\n|\"^\"\` |\n||_/=\\\\__|\n`); 마무리 앞서 푼 고양이와 다르게 큰따옴표" 작은따옴표' 백슬래시\ 같은 다양한 기호들이 있어 출력에 주의해야 했다. 위의 기호들을 출력하기 위해서는 백슬래시\를 앞에 추가해서 출력하면 된다. 아래는 백슬래시\ 로 텍스트 문자열에 추가 할 수 있는 특수 문자들 목록이다. CodeOutputs \' single quote \" double quote \ backslash \n new line \r carriage return \t tab \b backspace \f form feed