TILs

변수 선언 방식 : let a;함수 선언 방식 : function a(x,y) {} Shift+Enter로 한줄 띄움.출력 기능 : console.log(); \-> python에서 print랑 같은 기능.크롬에서 JS Console창 띄우기1) 우측클

Falsy 6가지 종류 1) 0 2) NaN (Not a Number) 3) '' 4) false 5) null 6) undefined 문자열 concat 방법 1) 문자열1 + 문자열2 + 문자열3 2) 문자열1.concat(문자열2,문자열3) 제곱

for문 vs. while문공통점 1) (초기화, 조건식, 증감식)에 따라 반복 2) 초기화->조건식->내용처리->증감식 순서로 진행차이점 1) for문은 괄호안에 초기화, 조건식, 증감식을 한번에 나타낼 수 있지만, while문은 초기화는 while문 시작전에,

HTML vs. CSS vs. JSHTML: 웹페이지의 '구조'를 만드는 언어CSS : HTML문서에 디자인을 '스타일링' 해주는 언어JS : 웹페이지를 사용자와 '상호작용'할 수 있게 해주는 언어HTML 오늘 배운 거 기억나는 Element'<div>' divi

페어 프로그래밍으로 계산기 만들기 과제 수행HTML과 기본 CSS는 제공받고 CSS수정 및 JS코딩으로 계산기 만들기 수행CSS에서 배운 점 1) Selector : hover {} 로 hover기능을 넣으면 마우스가 해당 Selector위에 위치할 때 색깔이 바뀌는

배열 vs. 객체배열 1) 순서 정해져 있음 2) 반복문 형식1: for(let i=0;i<arr.length;i++) 3) 반복문 형식2: for(let element of array)객체 1) 순서 정해져 있지 않음 2) 반복문 형식: for(let

변수 Scope (Local vs. Global)전역변수와 지역변수의 차이 1) 지역변수는 함수 내에서 선언된 변수로 함수 내에서만 참조 가능 2) 전역변수는 함수 안밖 어디서든 참조 가능변수선언문 var : Function Scope, 재할당 가능변수선언문 con

Mac OS에 Git 설치 후 CLI활용해서 Repositary 운영하기 배움기억나는 git 사용 명령어git add : Staging Area로 작업물 등재. 작업 전 후 변경 내용 비교할 수 있는 상태.git status : 현재 stating area에 등재됐는

어제 Koans Sprint를 미리 다 해버려서 오늘은 다시 복습하면서 꼼꼼하게 불확실한 부분 살펴보았다.얕은 복사(Shallow Copy) 1) 주소값을 복사하는 것 2) 엘리먼트가 여러 개인 객체형일 경우 하나의 엘리먼트만이라도 참조값이 있는 상태에서 그냥 Ob

HTML과 CSS를 이용해서 Tweet와 유사하게 글쓰면 공유화면에서 볼 수 있는 웹화면을 구성하는 연습 수행와이어프레임(Wireframe)을 Keynote에 구상하고 이걸 보면서 HTML로 구조잡은 후 CSS 작업 수행함Flex Box에 대해 공부할 수 있는 좋은 기

알고리즘 문제를 하나 풀다가 문득 궁금한 것이 생겼다.이렇게 문자열로만 이루어진 배열에서 문자열의 길이가 가장 긴 것과 가장 짧은 것을 빼고 나머지를 Return하는 removeExtremes란 함수를 만드는 문제였다.처음 내 함수 작성 구상은 for문으로 가장 짧은

Math.sqrt 메소드를 사용하지 않고 제곱근을 구하는 함수를 만들어 보는 시간을 갖았다.그렇다면 while문 이용해서 제곱근 \*\* 2 값이 함수의 매개변수와 동일할 때 까지 제곱근을 1부터 시작해서 올려가면 된다.매개변수가 무엇이냐에 따라 반복횟수가 크게 늘어날

지난 번에 만든 Twittler 과제(Tweet의 MVP 모델)의 Mock-up한 HTML 및 CSS를 기반으로 아래 4가지 기본 요구 사항을 만족하는 JS를 만드는 작업을 시작했다.1\. HTML에 트윗게시물을 보는 Reading Section에서 하드코딩한 부분을

베어 미니멈 조건 4가지를 만족하는 Twittler(Tweet의 MVP버전)를 모두 완성하고 github에 제출 완료 했다.미리 며칠 전에 직접 만들어 놓은 Mock-Up(HTML, CSS)에 생명력을 불어넣는 작업은 생각보다 재미있었다.한편, 아래 4가지 조건을 만족

자바스크립트 배열 내장 메소드들을 함수로 만들어 보면서 원리를 이해하는 시간을 갖았다.지금까지 당연한 듯 사용 예시를 보면서 별 생각없이 이렇게 하면 의도대로 작동하는 구나 하면서 써왔는데, 시간을 들여서 배열 내장 메소드가 어떤 원리로 작동되는 구나라는 걸 고민할 수

하루 종일 underbar lib함수들을 만들어보는 과제를 페어와 함께 수행했다.함수들을 만들 때 가장 많이 참조 됐던 underbar 함수는 \_.each 였다.그런데 레퍼런스를 보고 나서 reduce를 쓰면 훨씬 쉽고 명료하게 코드를 작성할 수 있다는 것을 알고는

설연휴 동안 심심해서 미리 오늘 할 내용이 주어진 시간 내에 할 수 있는 지 가늠해 보고 싶어 30분 정도만 코딩을 해보려고 VS code를 켰다. 하다보니 잘 안되는 부분에 오기가 생겨서 5시간 걸려서 그냥 미리 다 끝내 버렸다..서버와 통신을 위해 필요하여 객체를

https://openweathermap.org/ 에서 무료 API Key를 받아 JSON을 기반으로 실제로 작동하는 웹앱을 작성해봤다.서버에서 fetch로 받을 수 있는 JSON이 영어로만 되어 있어, 영어로만 도시 이름을 입력해야만 현재 날씨를 조회할 수

첫 째, 엘리먼트에 이벤트를 심을 때 인자가 있는 함수를 호출하려면?자바스크립트에서 클릭이벤트를 엘리먼트에 심을 때element.onclick = functionName;이런식으로 우측에는 함수명만 작성해야 한다.그런데 만약 클릭이벤트가 인자가 있는 함수를 실행하도록

git clone URL of repo. : => remote repo.의 파일을 local repo.로 이동git add file name : => staging area로 이동 및 변경 전 후 비교 가능git commit -m "commit name" : => st

CommonJS란 무엇인가?=> 브라우저 환경 밖인 Node.js에서 모듈 생태계를 구축하기 위해 만든 규칙들 이라고 말할 수 있다.모듈 생태계를 만들기 위해 어떤 것들이 필수적으로 요구되는 가?=> require 함수로 모듈을 불러와서 사용 (ex. require('

OOP 객체지향 프로그래밍이란 무엇인가?=> 재사용성을 극대화하기 위한 프로그래밍 설계 철학이다.재사용성을 왜 극대화 해야 하는가?=> 기존의 함수와 공통적인 부분이 있음에도 재사용하지 않고 조금 상이한 특징이 있는 함수를 처음으로 끝까지 새로 구현하는 일을 반복하게

proto, constructor, prototype 이 각각 어떤 관계를 가지고 있는지 조사해봅니다.function Animal() {} // 생성자 함수(constructor)let animalObject = new Animal(); // 인스턴스 생성위 그림에서

Stack은 First-In Last-Out / Last-In First-Out의 자료 구조로, 한쪽으로만 입출력이 가능한 구조예를 들어 프링글스를 먹을 때 통이 한쪽에만 구멍이 있어 먼저 넣어진 감자칩은 맨마지막에 꺼내먹을 수 있다.배열을 이용하면 push와 pop만

두 수의 최대공약수를 구해야 할 때, 방법은 크게 두 가지라고 할 수 있다.첫 째, 각 수를 소인수 분해해서 공통된 약수들 중 가장 큰 값을 할당한다.둘 째, 소인수 분해가 필요없이 유클리드 호제법을 이용한다.유클리드 호제법A % B === R 일 때,A,B의 최대 공

알고리즘 문제에서 종종 등장하는 소수 구하는 로직은 국룰처럼 알고 있으면 좋다.소수란 약수가 1과 자기자신뿐인 자연수를 뜻한다. (자연수란 1이상의 양의 정수)즉, 변수가 소수인지 판별하려면 2부터 시작해서 변수-1까지 나누어 떨어지는 지 확인하면 된다.나누어 떨어지면

구글의 여러 코드들을 보면 함수의 매개변수가 배열인 것을 명시하기 위해이렇게 둘 중 하나로 많이 사용한다.두 경우 모두 Array.isArray(args) === true 로 배열임은 분명하다.그러나 function doSomething(...args) 에서의 args

js를 공부를 시작하면서 가장 먼저 반복문의 기본중의 기본인 for문을 배우고 난 후ES6 문법인 고차함수 forEach를 배웠고잘못된 믿음 한 가지를 가지고 있었다.for문의 간결한 표현방식이 forEach구나!for문으로 구현한 모든 코드를 forEach로 바꿔서

모든 경우의 수를 고려해서 최적의 값을 찾아야 할 때 종종 사용되는 알고리즘이다.DP를 사용하기 위해서는 2가지 조건이 붙는다.첫 째, 큰 문제가 작은 문제로 분할될 수 있고 분할된 문제들은 서로 중복된다. (Overlapping Sub-problems)둘 째, 분할된

자바스크립트는 싱글스레드이지만 이벤트루프가 있어 비동기 실행이 가능하다.실생활에서 자주 접하는 어플리케이션들은 대부분 비동기 수행을 지원하고 있다. 왜냐하면 가장 대표적인 비동기 작업인 서버에 요청하고 서비스 받는 작업은 대부분 앱에서 필수적이기 때문이다.서버에 요청해

callback 함수를 매개변수로 가지고 있는 고차함수를 쓰면 callback 지옥이 발생해서 가독성을 떨어뜨리는 리스크가 있어 Promise 인스턴스를 리턴하는 함수를 대신 사용하고 있다.비동기 수행을 위한 고차함수는 아래와 같이 callback을 매개변수로 같는다.

클라이언트: 리소스를 사용하는 앱. 리소스를 서버에 요청하는 곳서버: 리소스의 원본이 존재하는 곳. 리소스 요청이 오면 응답하는 곳.API: 1) 프로그램들이 서로 상호작용하는 것을 도와주는 매개체 2) 클라이언트가 서버에 요청하는 방법 혹은 수단 3) 서

서버는 클라이언트에서 요청이 오면 어떤 요청인지에 따라 해당하는 응답을 주는 역할을 한다.서버는 보통 http 프로토콜 기반으로 생성되며, express framework을 사용하면 보다 쉽고 간결하게 웹 서버 구축을 할 수 있다.웹 서버 구축을 위해 필요한 것1) 서

리액트란 무엇인가?자바스크립트 ES6 기반의 프론트엔드(front-End) 프레임워크(라이브러리)리액트가 왜 필요 한가?고객과의 상호작용이 많은 앱에서 편리한 기능 제공귀찮고 복잡한 DOM관리와 상태(state)관리 최소화오직 기능 개발에만 집중할 수 있도록 고안됨리액

목업(Mock-Up) 만들기목업에서 컴포넌트 지정하고 계층 구조 정리하기계층 구조에 따라 State없는 정적인 컴포넌트 코딩하기최소한의 State만 찾아내기 (간단한 가공으로 계산될 수 있는 것은 별도의 State로 설정X!)State 기반으로 렌더링하는 컴포넌트 모두

Redux는 자바스크립트 상태관리 라이브러리이다.React의 데이터 흐름이 Top-down인 것과 Lifting State Up을 고려하면 컴포넌트가 상태를 공유하기 위해서 복잡한 과정의 Props 전달이 필요한데, 이런 문제를 신경쓰지 않고 컴포넌트 표현에만 집중할

단순히 React와 Redux만 가지고 In-memory 형식으로 데이터를 관리하면 새로고침하면 입력한 모든 데이터는 사라진다.Database가 있으면 영속성있게 데이터를 보관할 수 있다.File I/O 형식으로도 데이터를 보관할 수 있다. 하지만 데이터를 불러올 때

Model-View-Controller 의 약자로 각각의 역할에 맞게 프로젝트 구성 요소들을 구분하는 설계 방법론이라고 할 수 있다.Model : 애플리케이션에 필요한 모든 데이터를 관장하는 곳으로 스스로 데이터를 가지고 있거나 데이터베이스와 직접적인 상호작용하는 역할

클라이언트와 서버간의 연결 상태를 나타내는 개념적 용어어떤 정보가 어떤 자에게 유일하게 속한다는 것을 증명하는 행위서비스 제공자의 서비스를 이용하기 위한 조건을 만족시키는 행위회원가입을 해야 이용할 수 있는 웹사이트의 경우, 로그인 인증 절차를 거쳐야 서비스를 이용할

배포(Deployment)란? 개발한 서비스를 사용자가 이용 가능하게 하는 과정 AWS를 이용한 배포 1. 서버 배포 클라우드 가상서버인 EC2(Elastic Compute Cloud) 콘솔에서 인스턴스를 생성 인스턴스 생성 시 OS 선택 인스턴스 내에서 자동으로 만