Programming/TIL (33) 썸네일형 리스트형 HTML & CSS 오늘 배운 내용은 Javascript 와 깊게 연관성이 있는 HTML 그리고 CSS 다. 웹 또는 앱을 만들 때 꼭 사용되는 세 가지다. 오늘은 페어 프로그래밍 없이 혼자서 HTML & CSS 를 배우는 시간만 가지게 되서, 그 내용이 매우 길다. 그리고, Javascript 와는 조금 다른 분야이기 때문에 세부 내용 관련해서 따로 정리해서 올리겠다. 1. HTML 은 HyperText Markup Language, 즉 '구조를 표현하는 언어' 이다. 2. CSS 는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어이다. 2 - 1.줄바꿈이 되는 박스 (Block) vs. 옆으로 붙는 박스 (inline, inline-block) 2 - 2. 박스를 구성하는 요소 2 - 3. Border [테두리.. While 반복문 반복문은 크게 For 반복문과 While 반복문 두 가지가 있다. For 반복문 관련해서는 지난 주 작성한 TIL에 내용이 있기에, While 반복문에 대해 알아보자. 1. While 반복문 우선, For 반복문과 While 반복문은 똑같은 반복 작업을 한다고 볼 수 있다. 하지만, While 반복문이 유용한 경우는, 끝을 알수 없는 애매모호하거나, 그 끝을 명시적으로 알 수 없을 때 주로 사용한다. For 반복문의 경우, 보통 문자열이나 배열의 길이가 정해졌을 때 사용을 많이 한다. While 구문은 반복할 조건 중에 초기화, 증감문은 따로 적고, 괄호 안에는 조건식만 넣어준다. 예시로 아래 코드를 보자. let sum = 1; let n = 2; // 초기화 while (n String Methods 1. String Methods 문자열 메소드 모든 문자열 메소드들은 그 형태가 기본적으로 Immutable 하다. 즉, 원본의 형태가 유지된다는 의미다. 기본적인 문자열 메소드 먼저 알아보자. indexOf, lastIndexOf (includes) 문자열의 글자 하나하나에 접근 할 수가 있다. 예를 들어, str[index]. 자바스크립트는 첫번째 인덱스가 아닌, '0번째' 인덱스부터 시작한다. indexOf 메소드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환, 일치하는 값이 없으면 -1을 반환한다. length str.length 를 통해 문자열의 길이를 구할 수 있다. 예시로, 위 문자열 'hello'의 길이는 5 이다. 이 length 메소드는 배열(Array)의 .. 변수와 자료형 & 함수 & 조건문 이번 TIL에서 다룰 내용인 익숙한 개념이지만, 다시 나를 다시 돌아보는 마음으로 개념을 한번 다시 확인해보자. 1. 변수 (Variable) 변수는 이름이 붙은 값을 의미하며, 변수는 말 그대로 상황에 따라 변할 수 있다. 숫자 3까지의 간단한 구구단을 예로 들어보자. console.log(3 * 1); console.log(3 * 2); console.log(3 * 3); /// 한 번의 작업을 세번 혹은 9를 곱할 때까지 9번 수정해야하는 번거로움 발생 구구단을 효율적으로 출력하기 위해서, 아래와 같이 num이라는 변수를 선언하고 값을 할당해주는 코드가 편리하다. let num = 4 // num 변수는 계속 바뀔 수 있음 console.log(num * 1); console.log(num * 2).. Higher Order Function [고차함수] 1편 1. HOF (Higher Order Function) 오늘 알아볼 주제는 바로 HOF, 고차함수다. 고차함수란, 함수를 다루는 함수라고 말할 수 있다. 예를 들어서: 하나 이상의 함수를 인자로 받는다. 함수를 결과로 반환한다. HOF를 통해 우리는 더 유연하고 기능적인 코드를 사용할 수 있다. 고차함수의 간단한 예제를 먼저 살펴보자. const twice = function(f, v) { return f(f(v)); }; const plusOne = function(v) { return v + 1; }; console.log(twice(plusOne, 1)); // 3 위 예제에서 twice()는 HOF로 사용되는데, 함수를 인자로 받아서 2번 반복해준다. 이는 단 두번만 반복하는 함수지만, 인자로 받.. Recursion [재귀] 1. Recursion (재귀) 재귀 함수란: 함수 안에서 자기 자신을 다시 호출하는 것을 말한다. 1 - 1. Recursive vs Iterative 보통의 Recursion (재귀)를 사용할 수 있는 문제들은 Recursive 또는 Iterative 둘 중 어느 한 방법으로도 해결할 수 있다. 먼저, Iterative (반복적인) 함수는 우리가 일반적으로 사용하는 for문이라 forEach와 같은 반복연산을 사용한다. 반면에, Recursive 함수는 성능은 조금 떨어질지 몰라도 코드가 훨씬 가독성이 있다는 점에서 많이 사용된다. 1 - 2. What Is Recursion? 재귀 함수를 설명할 때 일반적으로 팩토리얼 (Factorial) 구하기를 예제로 많이 사용한다. 팩토리얼이란 자기 자신의 수.. textContent vs innerHTML 1. textContent와 innerHTML의 차이 (difference between textContent and innerHTML) Property textContect innerText innerHTML 값 raw text rendered text HTML parsed text 성능 좋음 보통 나쁨 보안 - - 취약 세 가지 혼동될 수 있는 property들을 위의 표로 비교해봤다. textContent는 컨텐츠 내용을 text/plain으로 파싱 (parsing) 한 결과다. 해당 요소의 내부는 원시 텍스트이므로 다른 프로퍼티들에 비해 파싱 속도도 빠른 편이라 성능이 좋다는 점이다. 참고원문: developer.mozilla.org/ko/docs/Web/API/Node/textContent in.. DOM 1. DOM (Document Object Model) 오늘 배운 개념은 DOM (Document Object Model), 문서 객체 모델이다. 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드 및 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하고 메모리에 적재한다. 이것을 DOM이라 한다. 즉, 모든 요소와 요소의 어트리뷰트 (Attribute), 텍스트를 각각의 객체로 만들고, 이 객체들의 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 바로 DOM이다. 웹 문서의 동적인 변경을 위해서 DOM은 프로그래밍 언어가 자신에게 접근하고 수정할 수 있는 방법을 제공하.. 이전 1 2 3 4 5 다음
