TODAY I LEARNED

npm 프로젝트 생성

Pseudo Code 수도 코드

페어 프로그래밍(짝 코딩)은 말 그대로 페어(짝)과 함께 프로그래밍하는 것을 말한다. 페어 프로그래밍을 통해 커뮤니케이션 능력을 향상시키고 협업하는 방법을 익힐 수 있다.페어 프로그래밍은 애자일 방법론 유형 중의 하나라고도 할 수 있다.용기 Courage : 용기를 가

프로그래밍 = 데이터 처리변수 = 데이터를 다루는 방법메모리 = 데이터 보관함보관함의 크기는 동일하다.보관함의 이름 = 변수변수를 통해 데이터 사용 = 재활용배열, 객체, 함수와 같은 복잡한 데이터도 포함한다.변수는 값을 포함하는 것이지 값 자체가 아니다.Javascr

조건문에 관해 Boolean 타입에 대한 이해가 필요하다.조건문은 어떤 조건에 대해 판별하는 기준(참인지 거짓인지)을 만드는 것이다.조건문에는 반드시 비교 연산자(Comparison Operator)가 필요하다.

반복문을 사용해 문제 해결하기

같거나 비슷한 코드를 여러 번 실행시켜야 할 경우 쓰는 구문반복할 내용을 중괄호 블록(block) 안에 넣어준다.반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.반복할 조건 중 초기화, 증감문은 따로, 조건식만 괄호 안에 넣어준다.for문과 똑같이 동작한다.초기

HTML은 마크업 언어이다.웹 페이지의 구조를 표현한다.HTML은 태그들의 집합이다.트리 구조를 가진다.시맨틱(semantic) 태그를 적절한 의미에 맞게 사용하여야 한다.Opening tag와 Closing tag가 쌍을 이룬다.Self-closing tag는 Clo

덧셈, 뺄셈, 곱셈, 나눗셈과 같은 수학적 기본 연산자부터 시작해서좀 더 복잡하고 심화된 연산자까지 탐구하고 정리해보자.연산자가 연산을 수행하는 대상인수(argument)라는 용어로 불리기도 한다.MDN 참고자료같은 기호일 때 단항 연산이 우선순위가 높다.

함수 returnCityNameWithLove의 인자에 문자열을 입력해 호출하고그 결과값을 변수 cityName에 할당하기

입력된 수의 나머지 값에 따라 각각에 맞는 문자열 메세지 반환하기5로 나누어 떨어지면 'Ping'7로 나누어 떨어지면 'Pong'5와 7로 모두 나누어 떨어지면 'PingPong'5와 7로 나누어 떨어지지 않으면 'RingRing'100명이 정원인 버스가 있다.사람수를

CSS는 스타일링을 위한 도구이다.때문에 독립적으로 기능하지 않는다.반드시 HTML이 있어야만 동작할 수 있다.컨텐츠의 배치와 위치 (레이아웃 디자인)최소한의 타이포그래피UI(User Interface) / UX(User experience)정렬이나 배색에 대한 감각U

HTML계산기 형태 구조화Javascriptdocument.querySelector()addEventListener()event.targettarget.classListtextContent 속성함수 호출CSSUI / UXflex boxbackground-image: l

세 개의 동물 이름을 입력받아 가장 긴 단어의 동물 이름과 이름 길이를 리턴'이름이 제일 긴 동물은 {} 글자인 {}입니다'이름은 영어 단어 기준💡 Solution

CLI(Command-Line Interface) List

macOS Terminal Themes 깃헙 저장소에서 파일 내려받기

디자인 업무나 각종 레포트를 진행하다 보면 무수한 버전이 탄생하게 된다.버전을 확인하는 방법으로 파일명에 날짜나

배열은 단일 변수에 순서가 있는 여러 값들을 저장할 수 있다.자바스크립트의 참조 자료는 여러 개의 데이터를 하나의 저장소에 저장하는 방법이다.배열의 순서는 인덱스라고 하고 0부터 시작한다.indexOf, includes

key: value의 쌍으로 묶은 데이터를 여러 개 모은 복합 데이터객체에 포함된 데이터 하나(이름과 값의 쌍; key: value)를 가리켜 객체의 프로퍼티라고 한다.객체의 값을 조회하는 방법은 두 가지가 있다.notation 방식에 따라 그 값과 의미가 다르다.키

CSS Selector

스코프는 함수 또는 코드 블록을 기준으로 안쪽과 바깥쪽으로 나뉘는 것을 말한다.안쪽에 있는 스코프는 바깥쪽의 스코프에 있는 변수에 접근할 수 있지만바깥쪽에 있는 스코프는 안쪽의 스코프에 있는 변수에 접근할 수 없다.스코프는 중첩이 가능하다.가장 바깥쪽에 있는 스코프는

Javascript Koans Sprint

아이디에 특수 기호를 입력하면 다음과 같이 표시하기아이디는 영문, 숫자만 가능합니다.display: none 값을 가진 hide 클래스를 생성하고 적용해클래스가 적용되면 문구가 포함된 div 요소를 안보이게 하고클래스가 적용되지 않으면 문구가 포함된 div 요소를 보이

이벤트 객체

특정 논리(함수, 참인지 거짓인지)에 따라 분류특정 논리(함수)에 따라 다른 요소로 지정특정 논리(함수)에 따라 원하는 하나의 형태로 응축

프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리리액트에는 크게 3가지로 분류할 수 있는 특징이 있다.HTML / CSS / JS로 나눠서 개발하는 것이 아닌하나의 파일에 명시적으로 코드를 작성하는 것을 말한다.이때 JSX를 활용해서 프로그래밍한다.하나의

서버로부터 완전한 새로운 페이지를 불러오지 않고페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재 페이지를 업데이트함으로써사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.앱의 규모가 커지면 자바스크립트 파일이 너무 커지고검색 엔진 최적화(SEO)가 좋

Props

🦄 Variables 1. 변수 unicorn을 선언하기 let 키워드를 사용해 변수 unicorn을 선언하기 2. 변수 unicorn에 문자열 할당하기 선언된 변수 unicorn에 문자열 할당하기 💬 Expressions 표현식(Expression)은

함수명은 소문자가 아닌 카멜 케이스(camelCase)를 사용한다."" 따옴표가 아닌 {} 중괄호 안에 입력한다.공식문서

props spread공식문서

Object Object.entries() Object.fromEntries() map()과 fromEntries()의 결합

무엇이 문제였는지어떻게 더 발전시킬지문제는 어떻게 해결할 것인지자기 객관화진심을 담아서

데이터와 기능을 한 곳에 묶어서 처리하는 방법으로,하나의 모델이 되는 청사진(blueprint)을 만들고그 청사진을 바탕으로 하는 객체(object)를 만드는 프로그래밍 패턴을 말한다.singleton 패턴은 단 하나의 객체를 만든다소프트웨어 디자인 패턴에서 싱글턴 패

입력값과 출력값 정의하기문제를 쪼개고 경우의 수 나누기문제를 더 이상 쪼갤 수 없는 경우와 그렇지 않은 경우로 나누기가장 해결하기 쉬운 문제부터 해결하기 -> 재귀의 기초(base case)재귀의 기초는 재귀의 탈출 조건을 구성한다남아있는 복잡한 문제를 해결하기

JSON.stringify() 는 값이나 객체를 JSON 문자열로 변환한다.

자료 구조란 데이터를 체계적으로 저장하고 효율적으로 활용하는 방법을 정의한 것이다.스택은 데이터를 순서대로 쌓는 자료 구조이다.가장 먼저 저장된 데이터가 가장 나중에 사용되고 (FILO)가장 나중에 저장된 데이터가 가장 먼저 사용된다. (LIFO)큐는 데이터를 입력된

[x] useInput [x] useTabs [x] useTitle [x] useClick [x] useConfirm [x] usePreventLeave [ ] useBeforeLeave [ ] useFadeIn [ ] useNetwork [ ] useScroll

transition 사용시의 단축 css 문법

a 태그의 target 속성은 링크된 문서가 열릴 위치를 명시한다.각 값의 정의는 다음과 같다.a 태그의 rel 속성은 현재 문서와 링크된 문서 사이의 연관 관계를 명시한다.각 값의 정의는 다음과 같다.a 태그의 target 속성에서 "\_blank"를 사용할 경우re

시계나 타이머를 구현할 때 다음과 같이 표현할 일이 많다.00시 00분 00초padStart()를 사용하면 다음과 같이 구현할 수 있다.padStart()는 첫 번째 인자로 길이를, 두 번째 인자로 대체할 문자를 받아서문자열의 시작을 대체할 문자로 채워 주어진 길이를

gender 끝에 ?를 추가해서 해결할 수 있다.

주어진 정수의 2진수에서 가장 큰 BinaryGap을 구하는 함수를 작성하는 문제입니다.BinaryGap이란 1로 둘러싸인 0의 길이를 말합니다.예를 들어, 정수 1041의 2진수는 10000010001입니다. 여기서 BinaryGap의 길이는 각각 5와 3이 됩니다.

주어진 숫자 배열 A를 K번만큼 요소의 인덱스를 한 칸씩 이동한 배열을 리턴하는 함수를 작성하는 문제입니다. 배열의 마지막 요소는 맨 앞으로 이동합니다.채점 결과 빈 배열이 주어졌을 때의 예외 처리를 하지 않아 런타임 에러가 발생했습니다.(input이 (\[], 0)일

홀수 길이의 숫자 배열에서 짝을 이루지 않는 요소를 구하는 함수를 작성하는 문제입니다.예를 들어, 입력으로 주어진 배열이 다음과 같다면\[9, 3, 9, 3, 9, 7, 9]짝을 이루지 않는 요소 7을 리턴해야 합니다.위와 같이 작성했을 때 채점 결과는시간 복잡도에서

개구리의 현재 위치 X, 이동할 위치 Y, 한번에 뛸 수 있는 거리 D가 주어지면 Y 또는 Y 보다 멀리 도달하기 위해 최소 몇 번만에 이동할 수 있는 지 구하는 함수를 작성하는 문제입니다.

N 길이의 배열에 1부터 N+1만큼의 요소가 포함됩니다. 이때 배열에서 빠진 숫자를 구하는 함수를 작성하는 문제입니다.예를 들어, 길이가 4인 배열에 1부터 5 사이의 숫자가 들어갑니다.(숫자들은 순서대로 정렬되어 있지 않을 수 있습니다.)\[2, 3, 1, 5] 이

숫자 배열에서 P를 기준으로 배열을 나누고 각 나뉜 부분의 합의 가장 작은 차이를 리턴하는 함수를 작성하는 문제입니다.예를 들어,\[3, 1, 2, 4, 3] 다음과 같은 배열에서 P의 인덱스가 1이라고 할 때,배열은 \[3] \[1, 2, 4, 3]으로 나뉩니다.각

모든 리액트 컴포넌트는 여러 종류의 생명주기 메서드를 가진다.이 메서드를 오버라이딩(기존의 상속받은 메서드를 재정의)하여 특정 시점에 코드가 실행되도록 설정할 수 있다.생명주기는 크게 3가지로 나뉠 수 있다.컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때를 말하는 마

변수, 함수, 클래스와 같은 모든 식별자는 선언된 위치에 따라 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라고 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다.함수에서 매개변수는 해당 함수 내부에서만 참조가 가능하다. 이것은 매개변수의 스코프가 함수 내부로