Codestates/06.15 - 07.10 42

2020.06.30 [TIL] CSS

What is CSS? Cascading Style Sheets의 약자 웹 페이지 구성요소의 스타일을 정의하는 언어 HTML EXAMPLE 로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치 웹 페이지의 요소(element)들을 구성하는 역할 CSS EXAMPLE 로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치 검색창의 너비 버튼의 크기 구성요소를 어디에 위치할 것인가 How to use CSS? CSS를 HTML에 적용하는 세가지 방법 1. inline 2. HTML 내부에 stylesheet 작성 3. HTML 외부에 stylesheet 작성 1. INLINE HTML의 특정 태그에 직접 style을 적용

2020.06.30 [TIL] HTML

HTML과 CSS는 웹브라우저 상에서 화면에 보여지는 사이트 혹은 웹 앱을 표현하는 도구입니다. 각 영역을 구분할 줄 알고, 각 영역마다 의미를 담아내는것은 잘 구조화된 HTML을 만드는 과정입니다. 이를 통해 프론트엔드 개발을 하기 위한 설계를 배울 수 있습니다. 웹 앱을 만들기 위해서 HTML을 programmable하게 작성하는 것은 문서로 만드는 것과는 또다른 차원의 문제입니다. 그러기 위해 Selector라는 개념을 이해해야 합니다. 이는 CSS, 즉 기본적인 스타일링을 하기 위해서도 반드시 알아야 할 개념입니다. Achievement Goals HTML & CSS HTML 구조를 programmable하게 기획할 수 있다 CSS를 HTML에 적용할 수 있다 w3school 등의 referenc..

2020.06.29 solo / checkpoint - 객체지향 JavaScript, Value vs. Reference

https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/ JavaScript Primitive vs. Reference Values This tutorial shows you the differences between a primitive value and a reference in JavaScript by an easy-to-understand illustration. www.javascripttutorial.net 참고사이트 이지만 영어에 취약한 나는 한글로 따로 찾아서 정리를 해야할 것 같다. https://velog.io/@jakeseo_me/2019-04-01-1904-%EC%9E%91%EC%84%B1%EB%90%A..

2020.06.29 pair / Testbuilder Step1 - Step3

김태원님과 함께 Testbulder 작업을 진행하였습니다. 진행할 때 도움을 많이 받고 왠지 첫 시작을 알리는 포문을 대부분 pair분께 도움을 많이 받고 시작했습니다. Testbuilder라서 그런지 작업 시 다양한 방법이 나오고 있는 것 같다. 다양하게 시도해보려고 한다 검사의 끝을 보여주는 작업이였던 것같다. detectNetwork(' ') 만 기억에 남아진다. 너무 많이 쳐서 그런가? git에서 재작업이 필요해서 다시 수정했다. 재작업하면서 보는데 주석 다시한번 살펴보기바란다.. 아니 그냥 걸리라고 만든문제에 그냥 내가 걸려버렸네 대단한 자식 그래서 작업을 두번이나 햇지 .. 짜식.. 06.26 첫번째 작업 Step 1. /** * 아래의 detectNetwork 함수는 어떤 카드 번호를 inp..

2020.06.25 [⭐️TIL] 객체지향 JavaScript & 매개변수

객체지향 JavaScript - Object Oriented JavaScript 객체지향 - 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴 Car [ blueprint ] - 카의 종류들은 Avante,Mini,Beetles [ object ] 이것을 다시 보면 Car는 class, object들은 instances라고 부른다. ES5 클래스는 함수로 정의할 수 있습니다. function Car(brand, name, color) { // 인스턴스가 만들어질 때 실행되는 코드 } ES6에서는 class라는 키워드를 이용해서 정의할 수도 있습니다. class Car(){ constructor(brand, name, color)..

2020.06.25 [TIL] Closure

Lesson - Closure Scope의 연장이라고 생각하면 된다. 다음 코드에서 innerFn 함수에서 접근할 수 있는 Scope는 총 몇개인가요? 접근할 수 있는 3개이다. function outerFn() { let outerVar = ' outer'; console.log(outerVar); function innerFn(){ let innerVar = 'inner'; console.log(innerVar); } } let globalVar = ' global'; outerFn() ; 여기에서 만약에 return을 해주고 싶다면 return innerFn; 함수 자체를 return하게 만드는 경우가 생기게 된다. function outerFn() { let outerVar = 'outer'; c..

2020.06.25 [TIL] Scope

이제 프로그래밍의 아주 기초적인 부분들을 벗어나 JavaScript의 기초 문법이 어느정도 익숙해지셨을 것으로 기대합니다. 앞으로의 목표는 단순히 잘 작동되도록 구현하는 것을 넘어, 기본적인 작동 원리와 규칙을 이해하고 이를 통해 좀 더 나은 코드를 작성할 수 있도록 하는 것입니다. 그러기 위해서는 JavaScript의 scope, closure, callback과 같은 개념을 익혀야 합니다. 이는 JavaScript 뿐만 아니라, 함수형 프로그래밍을 할 수 있는 기타 다른 언어들에서도 발견할 수 있는 특징입니다. 이를 잘 이해하면 여러분은 Underbar 과제를 풀 수 있게 될 것입니다. 이 파트를 꼼꼼히 학습하세요. closure와 scope에 대해 구체적으로 이해하는 것이 JavaScript 초보자..

2020.06.24 [TIL] Intro to JavaScript Koans 쓰고 vs code라고 읽는다.

https://github.com/codestates/PRE-JavaScriptKoans 들어가서 오른쪽에 있는 Fork 버튼을 클릭합니다. 그리고 자신의 GitHub ID를 눌러 완료합니다. 이렇게 Fork 한 것을 컴퓨터로 가져오려면 clone 누른 후 링크 copy를 한다. 그런 다음 터미널을 실행 시킨 후 cd desktop, 그리고 mkdir로 새로운 폴더를 만듭니다. mkdir (파일명) 완료후, cd (파일명)을 들어갑니다. 그런 다음 git clone 아까 복사했던 링크를 복사해줍니다. enter를 입력 후 코드를 가져오고 ls를 입력 후 폴더 안에 어떠한 것이 있는지 확인합니다. 그러면 폴더확인후 cd로 실행시켜 Koans 폴더로 들어간 후 code. 을 입력하면 해당 코드를 vs cod..