코딩하는 호랑이.log

TIL17_코드카타 5

Mon, 04 Jan 2021 12:04:51 GMT

Week2_Day1

문제

1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요.

로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다.
- III = 3 XII = 12 XXVII = 27 입니다.
그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다.
I는 V와 X앞에 와서 4, 9 X는 L, C앞에 와서 40, 90 C는 D, M앞에 와서 400, 900

문제 접근 방식

로마자를 객체로 만든다
숫자 4와 9, 40, 90, 400, 900이 만들어지는 과정을 식으로 풀어준다

해결 코드

코드 해설

결과값을 담을 result를 생성해줬습니다.
인자값을 split() 함수를 사용해서 ''로 나눠줬습니다.
로마 숫자 표기법을 객체로 담아줬습니다.
배열이 된 인자값을 for문을 사용해서 반복해주고 그 안에 if문을 사용해서 로마자를 숫자로 변환하기 위한 조건문을 작성해줬습니다.
로마자 IV가 4가 되는 식은 앞에 있는 로마자 I가 뒤에 있는 라마자 V보다 작아서 뒤에 있는 로마자 V에서 앞에 있는 로마자 I자를 빼줬습니다. 9, 40, 90, 400, 900이 만들어지는 원리도 동일합니다.
이 식을 기본으로 for문과 if문을 사용해서 인자값에서 앞에 있는 로마자와 뒤에 있는 로마자를 비교하는 식을 만들어 줍니다.
식을 만드는 과정에서 인자 길이의 -1만큼 반복하는 이유는 두 로마자를 비교할 때 앞, 뒤의 로마자를 비교하는 것이기에 i 번째와 i+1 번째의 로마자를 비교하고 i번째 로마자가 나타내는 숫자를 result에서 빼하는 것인지 더하는 것인지 결정하게 되는 것인데 그렇다면 s.length만큼 돌면 마지막 로마자는 비교할 i+1 로마자가 게 됩니다. 그러므로 for문에서 s.length에서 -1을 해줘서 마지막 로마자는 for문과 if문에서 제외하고 마지막에 결과값을 반환할 때 더해줬습니다.

모델 솔루션

후기

모델 솔루션에 나와있는 것처럼 map() 함수를 사용할 수 있습니다. 코드가 깔끔해졌습니다.
하지만 모델 솔루션보다 map() 함수를 사용하지 않은 해켤 코드가 더 재미있어 보입니다.
map() 함수의 다양한 형태를 공부해야겠습니다.

TIL16_코드카타 4

Sun, 03 Jan 2021 08:14:16 GMT

Week1_Day4

문제

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요.

num: 숫자
return: true or false (뒤집은 모양이 num와 똑같은지 여부)
- 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문
  
  num = 1221 return true => 뒤집은 모양이 1221 이기 때문
  
  num = -121 return false => 뒤집은 모양이 121- 이기 때문
  
  num = 10 return false => 뒤집은 모양이 01 이기 때문

문제 접근 방식

숫자를 뒤집고(->문자->배열) 다시 모아서 숫자로 만들어준다
-부호까지 다 뒤집는다
원래 숫자와 뒤집은 숫자를 참/거짓으로 비교한다

해결 코드

코드 해설

숫자 num을 toString() split() reverse() join을 한 번에 해줘서 reNum에 담아줬습니다.
숫자 -> 문자 -> 배열을 거쳐서 join()을 해줬기 때문에 reNum의 type은 문자입니다. 따라서 Number()을 사용해서 숫자로 바꿔줬습니다.
if문을 사용해서 num과 reNum을 비교해서 참/거짓을 반환해줬습니다.

모델 솔루션

후기

숫자를 뒤집을 때 type을 바꿨는데 다시 숫자형으로 바꾸지 않고 num과 reNum을 비교해서 오류가 났는데 같은 팀인 인태님이 type을 비교해보라고 하셔서 typeof()를 사용해서 두 변수의 타입이 다르다는 것을 알았는데 이런 쉽게 놓칠 수 있는 부분을 조심해야겠습니다.
week1의 day2 문제처럼 reverse() 함수를 혹은 특정 함수를 풀어서 코드를 구현할 수 있는 연습을 해야겠습니다.

TIL15_코드카타 3

Sun, 03 Jan 2021 07:24:34 GMT

Week1_Day3

String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요.

str: 텍스트
return: 중복되지 않은 알파벳 길이 (숫자 반환)
- 예를 들어, str = "abcabcabc" return은 3 => 'abc' 가 제일 길기 때문
  
  str = "aaaaa" return은 1 => 'a' 가 제일 길기 때문
  
  str = "sttrg" return은 3 => 'trg' 가 제일 길기 때문

준비중

TIL15_코드카타 2

Sun, 03 Jan 2021 07:19:37 GMT

Week1_Day2

문제

reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.

x: 숫자
return: 뒤집어진 숫자를 반환!
- 예들 들어, x: 1234 return: 4321
  
  x: -1234 return: -4321
x: 1230 return: 321

문제 접근 방식

정수를 뒤집어야 한다
정수를 뒤집을 때 -부호는 앞에 그대로 있는다
뒤집었을 때 0이 앞에 오면 없애고 그 다음 숫자부터 나타낸다

해결 코드

코드 설명

정수는 뒤집힐 수 없기 때문에 문자로 type을 바꾸고/toString() 배열로 쪼개고/splite() 뒤집어야/reverse() 합니다.
뒤집은 x를 a에 담고 if문을 사용해서 정수 x 앞에 -가 붙었을 때, a의 첫 번째 요소가 0일 때, 그 외의 경우일 때 총 3개의 경우의 수로 나눠줬습니다.
현재 a는 배열이기 때문에 join()를 사용해서 문자로 바꾸고 Number()를 사용해서 숫자로 바꿘 값을 반환해줬습니다.

인태님의 풀이

모델 솔루션

후기

문제가 의도한 것은 revese() 함수를 사용하지 않고 해결하는 것이었습니다.
인태님의 코드와 모델 솔루션에는 reverse() 함수가 어떻게 동작하는지 나와있습니다. 이렇게 어떤 특정한 함수의 동작을 풀어서 설명할 줄 아는 능력을 키워야겠습니다.
데이터 Type에 대해 자세히 공부해야겠습니다.

TIL14_코드카타 1

Sun, 03 Jan 2021 06:48:05 GMT

Week1_Day1

문제

twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.

nums: 숫자 배열
target: 두 수를 더해서 나올 수 있는 합계
return: 두 수의 index를 가진 숫자 배열
- 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다. 가정 target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다.

문제 접근 방식

이중 for문을 사용해서 배열에서 두 개의 요소를 선택
target과 두 요소의 합을 if문을 사용해서 비교
그 결과 값을 배열로 반환

해결 코드

코드 설명

결과를 담을 빈 배열 result를 설정해줬습니다.
for문을 두 번 사용하면서 두 개의 요소를 찾았습니다.
찾은 요소를 더한 결과를 total에 담아줬습니다.
조건문을 사용해서 total과 target이 같으면 배열의 인덱스 값인 i와 j를 빈 배열 result에 넣어주고 결과를 반한했습니다.

인태님의 풀이

모델 솔루션

후기

이중 for문을 자세히 공부해야겠습니다.
인태님의 코드와 모델 솔루션처럼 빈 배열을 선언하거나 두 요소의 합을 선언하는 코드를 없애서 코드의 길이를 줄이는 것이 좋을 것 같습니다. 없어도 상관없는 코드를 줄이는 마인드와 연습이 필요합니다.

TIL13_React에 대해서

Sun, 03 Jan 2021 06:04:16 GMT

React의 등장 배경 🖼

초기 웹은 HTML/CSS, 순수한 JS, DOM, Event를 이용해 페이지를 만들었습니다. '초기'라는 단어가 붙은만큼 이후 시간이 지날 수록 웹이 점점 많은 동적인 기능 복잡해지고 DOM에 직접적으로 접근하는것이 번거로워지면서 이를 간략하게 해주는 jQuery가 등장했습니다.
jQuery는 HTML에서 클라이언트 사이드 조작을 단순하게 해주는 JS Library입니다. 하지만 이 jQuery를 요즘은 잘사용하지 않습니다. 속도가 순수 JS보다 빠르지 않고 코드가 단순해서 사용이 쉬웠지만 지속적으로 사용하다 보니 유지보수가 어려워졌다.
이러한 이유로 점점 DOM에 접근하는 다양한 라이브러리나 프레임워크가 등장했습니다. 그 중 하나가 React입니다.
- 클라이언트 사이드 : 사용자 측에서 수행하는 것들

React란⁉️

React도 Frontend Framework(Library) 중 하나입니다.
2013년 Facebook에서 “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것”을 목표로 개발한 Library입니다.
사이트에 들어가면 보여지는 것(UI) 과 할 수 있는 것(UX)가 있습니다. 그 중에서 React는 View만 담당합니다. 즉 보이는 것 User Interface을 만들기위한 JS Library입니다.

React의 특징 🌟

컴포넌트를 사용하여 재사용성이 뛰어납니다. 가상돔(Virtual DOM)기반으로 하기 때문에 가볍습니다.

Component : 재활용 가능한 UI 구성 단위
Virtual Dom : 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술 => 불필요한 UI 감소 및 성능 향상
- React와 관련해 자세한 Component, JSX는 뒤에서 다루겠습니다.

Node.js 🌿

Chrome의 V8엔진을 이용하여 브라우저에서 JavaScript를 해석하듯이 서버에서 JavaScript를 동작할 수 있도록 하는 플랫폼

Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경 => 자바스크립트의 "탈웹"
프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js 기반입니다.

npm 🛠 (node package manager)

Node 기반의 패키지를 사용하기 위한 패키지 도구

npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있습니다.

CRA 🛠 (Create-React-App)

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

React는 UI 기능만을 제공하기에 개발자가 직접 구축해야하는 것들이 많습니다. 전반적인 스스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다습니다. 이러한 문제를 해결하기 위해서 CRA가 만들어졌습니다.
CRA는 React로 웹 애플리케이션을 만들기 위한 환경을 제공합니다. CRA를 이용하면 하나의 명령어로 React 개발환경을 구축할 수 있습니다.
CRA에는 바벨과 웹팩과 같이 React 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 줍니다.
이러한 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야 합니다. CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 됩니다.

TIL12-HTML&CSS_7_flex

Wed, 23 Dec 2020 12:12:46 GMT

💵 Flex 💵

레이아웃 배치 전용 기능으로 고안된 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구

📍 flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다.

Flex 레이아웃을 만들기 위한 기본적인 HTML 구조


    helloflex
    abc
    helloflex

부모 요소인 div.container : Flex Container(플렉스 컨테이너)
자식 요소인 div.item : Flex Item(플렉스 아이템)

컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것

Flex 속성

컨테이너에 적용하는 속성
아이템에 적용하는 속성

컨테이너에 적용하는 속성

1. display

dispaly : flex를 사용하면 아이템들이 수평을 메인축으로 가로로 배치됩니다.

아이템들이 배치된 방향을 메인축, 메인축(main axis)과 반대인 축을 교차축(cross axis)이라고 합니다.

display : inline-flex도 있습니다. flex와 inline-flex의 차이는 컨테이너와 아이템 관계가 아니라 컨테이너와 주변 요소들과의 관계에 관련이 있습니다. flex는 block 속성처럼, inline-felx는 inline-flex 속성처럼 동작합니다.

2. flex-direction : 배치 방향

아이템들이 배치되는 축의 방향을 결정하는 속성

메인축의 방향을 가로로 할 것인지 세로로 할 것인지를 정해줍니다.

flex-direction: row; : 기본값입니다. 아이템들이 가로 방향으로 배치됩니다. 👉

flex-direction: row-reverse; : 아이템들이 역순 가로 방향으로 배치됩니다. 👈

flex-direction: column; : 아이템들이 세로 방향으로 배치됩니다. 👇

flex-direction: column-reverse; : 아이템들이 여순 세로 방향으로 배치됩니다. 👆

3. flex-wrap : 줄넘김

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

flex-wrap : nowrap; : 아이템들이 줄바꿈을 하지 않고 한 줄에 입력됩니다.

flex-wrap: wrap; : 아이템들이 자동적으로 줄바꿈을 합니다.

flex-wrap: wrap-reverse; : 아이템들이 역순으로 줄바꿈을 합니다.

4. flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

flex-direction, flex-wrap의 순으로 한 칸 떼고 써주시면 됩니다.

5. justify-content : 메인축 방향 정렬

메인축 방향으로 아이템을들 정렬하는 속성

justify-content: flex-start; : 아이템들을 시작점으로 정렬합니다.

justify-content: flex-end; : 아이템들을 끝점으로 정렬합니다.

justify-content: center; : 아이템들을 가운데로 정렬합니다.

justify-content: space-between; : 아이템들의 사이에 동일한 간격을 만들어 줍니다.

justify-content: space-around; : 이템들의 둘레에 동일한 간격을 만들어 줍니다.

justify-content: space-evenly; : 아이템들의 사이와 양 끝에 동일한 간격을 만들어 줍니다.

❗️space-around와 space-evenly의 차이점 : space-around는 아이템에 둘레를 만들고 그 둘레에 동일한 간격을 만들어주는 것이기 때문에 중앙의 간격은 A아이템의 오른쪽 간격과 B아이템의 왼쪽 간격이 겹쳐 나오지만 끝에 있는 아이템의 끝부분은 겹치는 부분이 없어 상대적으로 간격이 좁게 보입니다. 하지만 space-evenly는 전체적으로 동일한 간격을 주기 때문에 모든 간격이 동일하게 나옵니다.

6. align-items : 수직축 방향 정렬

수직축 방향으로 아이템을들 정렬하는 속성

align-items: stretch; : 아이템들이 수직축 방향으로 끝까지 늘어납니다.

align-items: flex-start; : 아이템들을 시작점으로 정렬합니다.

align-items: flex-end; : 아이템들을 끝으로 정렬합니다.

align-items: center; : 아이템들을 가운데로 정렬합니다.

align-items: baseline; : 아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

7. align-content : 여러 행 정렬

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

align-content: stretch; : 두 줄의 아이템들이 수직축 방향으로 끝까지 늘어납니다.

align-content: flex-start; : 두 줄의 아이템들을 시작점으로 정렬합니다.

align-content: flex-end; : 두 줄의 아이템들을 끝으로 정렬합니다.

align-content: center; : 두 줄의 아이템들을 가운데로 정렬합니다.

align-content: space-between; : 두 줄의 아이템들에 동일한 간격을 만들어 줍니다.

align-content: space-around; : 두 줄의 아이템들의 둘레에 동일한 간격을 만들어 줍니다.

align-content: space-evenly; : 두 줄의 아이템들의 사이와 양 끝에 동일한 간격을 만들어 줍니다.

✔️ 다음 시간에는 Flex 아이템에 적용하는 속성들에 대해 알아보겠습니다 !

TIL11-JS_basic 5_증가

Tue, 22 Dec 2020 00:18:20 GMT

증가

num++

let a = 1;
let b = a++;
console.log(a);
console.log(b);

a의 값은 2가 나오고 b의 값은 1이 나옵니다. a++;는 증가하기 전의 값을 반환하기 때문에 b의 값이 1이 나온 것입니다. 이후 a++;는 a = a + 1과 같은 의미로 a의 값에 +1을 한 것입니다.

위의 식은 아래와 같습니다.

let a = 1;
let b = a;
a++;

++num

++num; 도 있습니다.

let a = 1;
let b = ++a
console.log(a)
console.log(b)

a와 b의 값 모두 2가 나옵니다. b의 값에 +1을 하기 전의 a의 값이 아니라 +1이 된 a의 값을 반환하는 것입니다.

위의 식은 아래와 같습니다.

let a = 1;
a++;
let b = a;

📍 --도 동일한 방식으로 사용됩니다.

TIL10-JS_basic 4_함수

Mon, 21 Dec 2020 12:13:25 GMT

함수(Function)

하나의 특정한 작업을 수행하도록 설계된 독립적인 블록입니다.

함수의 형태

function 키워드로 시작하여
함수 이름을 지어주고
함수를 알리는 소괄호(() : parentheses)를 열고 닫고
함수의 시작을 알리는 중괄호({ : curly bracket)을 열어줍니다.
실행할 코드를 중괄호와 중괄호 사이에 작성합니다. 함수의 body 라고 부르기도 합니다. 이 부분에 들여쓰기가 되어있습니다. 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기 하였습니다.
return(반환) 할 것이 있다면 return문을 작성합니다.
중괄호(}: curly bracket)로 닫아줍니다. 함수의 작성이 끝났음을 알립니다.

함수의 호출과 반환

함수를 불러 실행시키는 것을 '함수 호출'이라고 합니다.

함수 이름을 부르면, 함수 내에 있는 코드가 실행됩니다.
```
unction checkCorrect() {
let hi = "안녕하세요";

return hi;
}
```

checkCorrect();


함수의 이름이 `checkCorrect`이고 `hi`를 반환하는 함수를 만들고 이름을 불러 실행시켰습니다.

-------

✔️`return`의 생략

- 모든 함수가 return을 포함해야 하는 것은 아니고 함수 내부에 return 키워드를 생략할 수도 있습니다. 

하지만 이 경우에도 undefined 라는 값을 반환합니다.

TIL9-JS_basic 3_변수

Mon, 21 Dec 2020 09:53:01 GMT

변수(Variables)

물건을 보관했다가 필요할 때 다시 꺼내 사용하는 일종의 창고입니다.

데이터를 저장하는 장소 or 데이터를 읽고 쓰게 할 수 있는 장소입니다.
변수의 생성과 값 할당

var name = "리오넬 메시";

var : variable의 약어로써, 변수 선언을 의미하는 키워드입니다.
- 키워드(keyword) : 이미 특정한 목적으로 만들어져 있는 자바스크립트 요소입니다.
- var 외에 let, const가 있습니다.
리오넬 메시는 name이라는 변수에 할당된 값입니다.

변수 이름

변수 이름은 원하는대로 정할 수 있지만 몇 가지 주의할 점이 있습니다.
- 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
- 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
- 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
- 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
- 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용합니다.

camelCase

변수(이름)의 생김새가 낙타 등처럼 울퉁불퉁하게 생겼습니다. 🐪
단어가 새로 시작할 때부터 대문자로 쓰면 됩니다. 📍 example
- firstSecond
- myProfileImg
- toDoListArray

snake_case

카멜 케이스와 달리 변수의 생김해가 뱀처럼 생겼습니다. 🐍
변수이름에 - 는 사용할 수 없으므로, _ 를 사용한 것입니다. 하지만 잘 사용하지는 않습니다! 📍 example
- first_second
- my_profile_img
- to_do_list_array

✔️ 변수명 짓기의 중요성

다른 개발자, 혹은 먼 훗날의 자기 자신이 이 코드를 더욱 쉽게 이해할 수 있습니다. (코드의 가독성)
커뮤니케이션에 들어갈 리소스를 줄일 수 있어 개발의 효율이 높아지게 됩니다.

그러므로 변수명을 지을 때는 모호하지 않고, 변수명 만으로도 의미가 추측 가능할 수 있도록 노력해야 합니다. @변수명 사이트

var, let, const

JavaScript 의 변수 선언은 var 키워드를 통해서만 가능했는데, 버전이 올라가면서(ES5 to ES6) let과 const라는 키워드가 새롭게 생겼습니다.
```
let name = "wecode";
const birthday = 19910223;
```
let : 키워드를 사용하면 변수 값을 수정할 수 있습니다.
const 키워드를 사용한 변수 값은 수정할 수가 없습니다.

변수 값 수정

let 키워드를 사용한 변수의 값을 수정

값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않습니다.

(이미 선언해둔) 변수명 = 새로운 값;

let name = "리오넬 메시";
name = "요한 크루이프";

TIL8-JS_basic 2_주석

Mon, 21 Dec 2020 04:04:05 GMT

🖋주석(Commenting)

'코드를 작성하긴 했지만 브라우저에서 해당 코드를 실행시키지 말고 무시하라'는 뜻으로 쓰입니다.

JavaScript 코드를 설명하고 더 읽기 쉽게 만드는 데 사용할 수 있습니다.
한 줄 주석과 여러 줄 주석이 있습니다.

console.log("이건 주석 처리가 안돼요 !")
-----------------------------------
// console.log("이건 한 줄 주석 !")
-----------------------------------
/* 을 사용하면  
여러 줄을
주석 처리 할 수 있어요 !
 */

한 줄 주석을 사용하는 것이 가장 일반적입니다. 여러 줄 주석(블럭 주석)은 종종 공식 문서에 사용됩니다.

주석을 사용하는 이유

🤝협업을 할 때 의사소통을 위해서 JavaScript 코드를 설명하고 더 읽기 쉽게 만드는 데 사용할 수 있습니다.
대체 코드를 📲테스트 할 때 JavaScript 주석을 사용하여 실행을 방지할 수 있습니다.
코드의 🚧유지보수를 위해서 사용할 수 있습니다.

TIL7-JS_basic 1_JS와 alert(), console.log()

Mon, 21 Dec 2020 03:00:58 GMT

JavaScript 소개

웹 페이지와 상호작용하도록 만들어진 언어

브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 역할을 합니다.
프론트앤드 개발자의 가장 큰 역할은 JavaScript 를 사용하여 웹페이지를 dynamic 하고 interactive 하게 만드는 일입니다.
JavaScript를 실행시키려면

브라우저가 존재해야하고, HTML파일이 있어야하고, HTML파일에서 JavaScript 파일을 연결시켜줘야 합니다.

alert( )

alert() 함수는 이름 그대로 사용자에게 중요한 내용이나 경고창을 띄워줄 때 주로 사용하는 함수입니다.
HTML, CSS 코드 없이 JavaScript 코드로 알림창을 띄울 수 있습니다.
```
alert("사용자에게 알릴 내용");
```


# console.log()
- `alert()` 함수가 사용자에게 내용을 보여줬다면 `console.log( )`  함수는 **개발자가 확인하고 싶은 내용을 출력**하는 함수입니다.

console.log(obj1 [, obj2, ..., objN]); console.log(msg [, subst1, ..., substN]);

------
# 📍약속어(Reserved Words)
> 자바스크립트에서 이미 정의된, 약속된 단어입니다.

- 위에서 살펴본 `alert()` 함수, `console.log()` 함수가 약속어 입니다.
- 두 함수 외에도 다양한 약속어들이 있습니다.
- 말그대로 자바스크립트에서 **'지정된'** 단어이기 때문에 **다른 함수의 이름으로 사용할 수 없습니다.**

TIL7- 개발자도구_1_개발자도구&Elements panel

Fri, 18 Dec 2020 14:49:32 GMT

개발자도구

개발을 도와주는 다양한 도구 브라우저에서 제공해주는 웹 저작 및 디버깅 도구

개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있다.
디버깅? : 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정
- 각 브라우저마다 개발자도구를 가지고 있다.
- chrome 개발자도구가 대표적이다.

크롬 개발자도구

크롬 브라우저에 내장된 개발 관련 도구

개발자도구 창 띄우는 방법

웹 페이지에서 마우스 우클릭 후 '검사' 클릭
웹 페이지 우측 상단의 Chrome 메뉴에서 '도구 더보기' 클릭 후 '개발자 도구' 클릭.
키보드 단축키 사용

Windows : Ctrl+Shift+I Mac : Cmd+Opt+I
개발자도구 화면

개발자도구 중 HTML 개발에 도움이 되는 기능

Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구 Sources : 현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구 Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구

Elements panel

Elements panel의 기능

HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널 DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인

DOM이란? : 문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface 이다.
NAVER의 Elements panel에서 HTML, CSS코드를 일부 수정한 화면

Styles 부분 순서의 의미

개발자가 입력한 CSS 순서와 무관하게 상단부터 CSS 선택자의 우선순위에 따른 순서
선택자 우선순위 순서 : !important > HTML에서 style을 직접 지정한 속성 > id > class > tag > 상속된 속성

user agent stylesheet

각 브라우저마다 기본적 가지고 있는 default stylesheet(브라우저가 기본적으로 주는 css값)

브라우저 마다 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업을 시작하면 브라우저의 종류에 상관 없이 동일한 화면 출력 가능 하다.

TIL6-HTML&CSS_6_컴포넌트

Thu, 17 Dec 2020 00:57:28 GMT

문제 : Color Hunt 컴포넌트를 만들자 !

조건

font Awesome을 이용
색상박스는 class 속성값이 'colorBox'인 div로 구현
'#709fb0' 컬러값이 적힌 작은 박스는 span 태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity CSS 속성을 이용
heart 버튼과 업로드 날짜 텍스트는 하단에 div 태그를 만들어 flex 속성을 이용해 간격을 유지
heart 버튼은 button 태그를 이용

문제풀이

접근

하나의 큰 div에 element를 구성
position 속성에서 relative와 absolute를 활용
opacity 속성 활용
- 색상박스에 커서가 갔을 때 컬러값이 보일 수 있도록 hover 속성에 알맞은 selector 지정
flex 속성을 가진 두 개의 element의 간격을 제어하기 위해 justify-content 활용

HTML

CSS

* {
    box-sizing: border-box;
}

.out-box {
    width: 400px;
    height: 500px;
    border-radius: 10px;
    background-color: #EBEFF3;
    position: relative;
}

.colorBox {
    width: 350px;
    height: 350px;
    border-radius: 10px;
    background-color: #719FB0;
    position: relative;
    top: 30px;
    left: 25px;
}

span {
    position: relative;
    top: 310px;
    left: 0px;
    background-color: #578291;
    color: white;
    opacity: 0;
}

.colorBox:hover span{
    cursor: pointer;
    opacity: 1;
}

button {
    padding: 5px;
    font-size: 15px;
}

.emo {
    font-size: 20px;
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

결과화면

TIL5-HTML&CSS_5_검색바

Wed, 16 Dec 2020 23:50:30 GMT

문제 : 검색바를 만들자 !

조건

CSS position 속성을 이용해서 아이콘들을 위치
두 회색박스에 같은 클래스이름을 사용해서 css를 한번에 이용
Enligh 는 a 태그를 이용해 구현
width, heigth, border-radius, font-size 등은 주

문제풀이

접근

Weegle 이미지, 검색바와 회색박스, 제공 서비스로 3등분
CSS position 속성에서 relative와 absolute를 활용
a 태그에서 underline 제거
'구글 검색바'와 유사하기 때문에 필요한 부분은 구글 페이지 '검색' 후 활용

HTML



  
    
    
    repl.it
    
  
  
    
    
    

    
      
       
       

       

       
      

      
       
       
      
    

    
      Weegle 제공 서비스 : English

CSS

* {
    box-sizing: border-box;
  }

  .wee {
    width: 300px;
    margin: 5px auto;
  }

  .one {
    margin: auto;
    width: 280px;
  }

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .key {
    width: 100%;
    border: solid 1px #bbb;
    border-radius: 8px;
    padding: 10px 12px 10px 12px;
    font-size: 14px;
  }

  img {
    margin: 0;
    width: 17px;
  }

  .sec {
    position: relative;
    margin: 0 auto;
    padding-top: 6px;
    width: auto;
    max-width: 484px;
  }

  .cir {
    top: 10px;
    left: 12px;
  }

  .kbd {
    top: 15px;
    right: 36px;
  }

  .mic {
    top: 10px;
    right: 12px;
  }

  center input {
    background-image: -webkit-linear-gradient(top,#f8f9fa,#f8f9fa);
      background-color: #f8f9fa;
      border: 1px solid #f8f9fa;
      border-radius: 4px;
      color: #3c4043;
      ont-family: 'Apple SD Gothic Neo',arial,sans-serif;
      font-size: 14px;
      margin: 11px 4px;
      padding: 0 16px;
      line-height: 27px;
      height: 36px;
      min-width: 54px;
      text-align: center;
      cursor: pointer;
      user-select: none;
  }

  .three {
    font-size: 10px;
    width: 150px;
    margin: auto;
  }

결과화면

TIL4-HTML&CSS_4_에브리띵 인 더 layout

Wed, 16 Dec 2020 06:56:40 GMT

Layout

웹페이지의 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업.

오늘 알아볼 레이아웃

Position
Display
Float

Position

태그를 어떻게 위치시킬지를 정의한다.

static

기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.

모든 태그들은 처음에 position: static 상태이다.

relative

원래 있던 위치를 기준으로 좌표를 지정한다.

태그의 위치를 약간 변경하고 싶을 때 사용한다.
top, right, bottom, left 프로퍼티를 사용해서 이동한다.

absolute

절대 좌표와 함께 위치를 지정해 줄 수 있다.

특정 부모에 대해 절대적으로 움직이는데 position: static을 가지고 있지 않은 가장 가까운 부모를 기준으로 움직인다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직인다.
일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 된다.
부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

fixed

스크롤과 상관없이 화면에 요소를 고정시킨다.

화면이 바뀌더라도, 스크롤을 내리더라도 고정된 위치를 설정할 수 있다.
브라우저 화면 크기만큼, 화면 내에서만 움직인다.

absolute와 fixed

포지션 고정이라는 공통점이 있지만 absolute는 position 속성을 지닌 부모를 기준으로 하고 fixed는 브라우저 화면을 기준으로 한다.

Display

요소를 어떻게 보여줄지를 결정한다.

inline

텍스트(컨텐츠)의 길이만큼 존재한다.
줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다.
inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시된다.
span 태그, b 태그, a 태그 등이 있다.

block

가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.
width, height 속성을 지정 할 수 있다.
div 태그, p 태그, h 태그, li 태그 등이 이에 해당됩니다.

inline-block

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.
inline처럼 줄 바꿈을 하지 않고 다른 요소와 함께 한 행에 위치할 수 있다.
block처럼 width, height 등 프로퍼티를 적용할 수 있다.
반응형 웹페이지에 작동되지 않는 큰 단점이 있다.

Float

정렬하기 위해서 사용하는 속성이다.

요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말한다.
문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있다.
float 속성 값에는 left, right, none이 있다.
float을 사용한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 겪을 수 있다. float를 해제하면 이런 문제를 해결할 수 있다.

float 해제

clear
clear 속성 값에는 left, right, both, none이 있다

left : 왼쪽에 floating 된 요소를 지정 해제 right : 오른쪽에 floating 된 요소를 지정 해제 both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제 none : 기본값(default), floating 을 해제하지 않음
clear를 사용하면 다음 요소는 float의 영향을 받지 않는다.

overflow

내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성이다.
종류

visible : 박스를 넘어가도 보여준다 hidden : 박스를 넘어간 부분은 보이지 않는다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나온다다. auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나온다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다.
여기서 overflow : hidden을 float 태그의 부모 태그에 적용한다.

TIL3-HTML&CSS_3_New things I learned

Tue, 15 Dec 2020 12:54:38 GMT

HTML tags

HTML태그가 아니라 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다.

< meta >

디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미이다.
모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보이다.
해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.

Text Style

텍스트 정렬

#index.html 
span의 오른쪽 정렬
#style.css 
.right {
  text-align: right;
}

결과
span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았다.
span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문입니다.
inline-element와 반대는 개념은 block-element이다. 참고 사이트

< indent >

#index.html 
 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 
#style.css
.js-description {
  text-indent: 50px;
}

결과
50px만큼 들여쓰기(공백)가 된다.
blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그이다.
브라우저에서 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용했다.

스페이스       넣는 예제

결과
"자바스크립트(영어: JavaScript)는" 다음에 스페이스를 10개 추가하여도 하나의 스페이스밖에 적용되지 않는다.
이럴 때는 스페이스를 의미하는 코드를 넣어주어야 한다.
가 스페이스를 의미하는 코드이다.

box-sizing

content-box : 콘텐트 영역을 기준으로 크기를 정한다.
border-box : 테두리를 기준으로 크기를 정합니다.
참고 사이트

TIL2-HTML&CSS_2_ vs
에 background-image

Tue, 15 Dec 2020 12:37:48 GMT

질문

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 img 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

답변

HTML에서 img 태그를 사용하는 방법
CSS에서 background-image를 사용하는 방법

두 방법의 차이점은 alt 속성의 유무이다.

아래 코드는 일반적인 img 태그 사용 방법이다.

img 태그는 alt 속성 즉, 이미지에 대한 설명을 기본적으로 가지고 있다. 이 alt 속성은 img 태그에서 사용되는 이미지 로드가 실패할 경우 broken image와 함께 alt 텍스트를 작성했다면 텍스트의 내용이 함께 보인다. 그러므로 에러난 이미지가 무엇을 나타내려고 했는지 알 수 있다.

하지만 background-image에 넣은 이미지가 에러가 나면 아무것도 나타낼 수 없다. background-image은 alt 속성이 없기 때문에 설명이 불가능하다. broken image도 나타나지 않아 결과적으로 이미지를 넣지 않은 것처럼 된다.

덧붙여 img 태그를 사용한다면 semantic element로서 '이미지'라는 의미를 가진 코드가 되지만 background-image의 경우 non-semantic element인 div 태그를 사용했기 때문에 아무런 의미를 가지고 있지 않다.

사용자의 컨텐츠 이해를 더 쉽게 해주고 싶다면 img 태그를 사용해 의미를 명확하게 해주고 alt 속성을 이용해 설명을 해주면 된다. 그렇지 않다면 background-image를 사용하면 된다.

TIL1-HTML&CSS_1_Semantic Web 그리고 Semantic Tag

Tue, 15 Dec 2020 08:42:43 GMT

단어

Semantic Web과 Semantic Tag에 대해 알아보기 전에 Semantic이라는 단어를 먼저 알아봤다.

형용사로서 의미의, 의미론적인

먼저 단순하게 단어로만 해석을 해본다면 Semantic Web은 의미있는 웹이고 Semanticc Tag는 의미있는 태그라고 생각해 볼 수 있다.

Semantic Web

by 위키백과

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

의미론적인 웹이란 무엇일까?

기존의 HTML로 작성된 문서는 컴퓨터의 해석보다는 사람의 시각적인 정보수용에 초점을 두었는데 시맨틱 웹은 컴퓨터의 해석 즉, 의미에 초점을 두었다.

#1 Hello
#2 Hello

두 개의 코드를 실행하면 화면에 보이는 결과는 동일하게 'Hello'가 출력되지만 큰 차이가 있다. 의미의 유무이다.

#1의 코드는 아무런 의미를 가지고 있지 않다. 그냥 Hello라는 단어일뿐이다. #2의 코드는 제목을 의미한다. Hello라는 제목을 나타내는 것이다.

사람이 볼 때는 동일한 값처럼 보여도 컴퓨터에게는 그렇지 않은 것이다. #1의 코드는 단순히 시각 정보에 대한 데이터만 제공하고 있다. 시각적인 것은 컴퓨터에게는 아무런 의미가 없다. 하지만 #2의 코드는 컴퓨터가 의미정보를 해석할 수 있는 메타데이터이다. 컴퓨터가 '제목'이라는 의미를 알 수 있게 해준다.

컴퓨터가 의미를 이해할 수 있다는 것은 큰 차이를 가져온다.

우리가 'Hello'를 검색을 했을 때 아무런 의미가 없는 #1의 코드를 가지고 있는 웹페이지는 컴퓨터가 중요하지 않다고 생각하고 '제목'이라는 의미를 가진 #2의 코드가 있는 웹페이지를 상단에 노출시켜준다.

Semantic Web

시맨틱 웹은 컴퓨터(기계)가 정보(의미)를 이해할 수 있는 웹이다. 컴퓨터가 정보를 이해할 수 있기 때문에 분석하여 의미론적인 자료를 만들어 거대한 데이터 베이스를 구축할 수 있다.

_본인은 진화된 웹이라고도 생각한다. 단순 정보전달의 역할을 하던 컴퓨터가 사람을 대신해서 분석하고 자료를 제공해주는 역할을 하기 시작한 것이라고 생각한다. _

#2의 코드에서 사용된 h1을 Semantic Tag라고 한다. 그렇다면 Semantic Tag는 무엇을까?

Semantic Tag

시맨틱 태그는 HTML5부터 도입되었다.

HTML5 이전에는 아무런 의미가 없는 div와 span 태그에 id, class 속성을 붙여서 임의로 구역 혹은 역할을 부여했지만 HTML5에서는 시맨틱 태그를 사용해서 코드의 의미를 부여해서 가독성을 높인다.

이해를 돕기 위한 이미지

HTML4에서는 div 태그에 id="header" 속성을 부여했다면 HTML5에서는 미리 정의된 header 태그를 사용한다. div 태그를 사용했을 때보다 코드의 길이 줄었기 때문에 가독성이 좋고 정의된 태그를 사용하기 때문에 누구나 파악할 수 있다. 그리고 코드의 의미를 사람뿐만 아는 것이 아니라 컴퓨터도 의미를 이해할 수 있게 된다. 그렇기 때문에 div를 의미없는 태그, header는 의미있는 태그가 된다.

의미있는 태그와 의미가 없는 태그는 무엇일까?

non-semantic elements : div, span semantic elements : header, article, secetion, footer...

두 요소의 차이점은 '의미의 여부'이다. 앞서 본 것처럼 div 태그는 아무런 의미를 가지고 있지 않지만 header 태그는 우리들이 봤을 때 바로 '머리글'이라는 의미를 가지고 있다는 것을 알 수 있다. 그렇기 때문에 header 태그와 같은 카테고리에 있는 태그들은 시맨틱 요소 즉, 의미있는 요소를 가지고 있고 있다.

'시맨틱 요소 = 시맨틱 태그' <- 이렇게 생각해도 좋을 것 같다.

중요한 부분은 시맨틱 요소는 사람뿐만 아니라 브라우저도 이해할 수 있다. 그러기에 시맨틱 요소를 사용한다면 브라우저와 개발자 모두가 이해할 수 있게 된다. 의미가 정확해진만큼 검색엔진을 활용할 때 시맨틱 태그가 활용된 웹사이트일 수록 효과적으로 크롤링이 될 수 있다.

Semantic Tag

시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 해서 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그이다.

용어정리

메타데이터

데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터. 또는 다른 데이터를 설명해주는 데이터.
크롤링

스크레이핑이라고도 하며 웹 페이지를 그대로 가져와서 거기서 데이터를 추출해 내는 행위.

코딩하는 호랑이.log

TIL17_코드카타 5

Week2_Day1

문제

문제 접근 방식

해결 코드

코드 해설

모델 솔루션

후기

TIL16_코드카타 4

Week1_Day4

문제

문제 접근 방식

해결 코드

코드 해설

모델 솔루션

후기

TIL15_코드카타 3

Week1_Day3

준비중

TIL15_코드카타 2

Week1_Day2

문제

문제 접근 방식

해결 코드

코드 설명

인태님의 풀이

모델 솔루션

후기

TIL14_코드카타 1

Week1_Day1

문제

문제 접근 방식

해결 코드

코드 설명

인태님의 풀이

모델 솔루션

후기

TIL13_React에 대해서

React의 등장 배경 🖼

React란⁉️

React의 특징 🌟

Node.js 🌿

npm 🛠 (node package manager)

CRA 🛠 (Create-React-App)

TIL12-HTML&CSS_7_flex

💵 Flex 💵

Flex 레이아웃을 만들기 위한 기본적인 HTML 구조

Flex 속성

컨테이너에 적용하는 속성

1. display

2. flex-direction : 배치 방향

3. flex-wrap : 줄넘김

4. flex-flow

5. justify-content : 메인축 방향 정렬

6. align-items : 수직축 방향 정렬

7. align-content : 여러 행 정렬

TIL11-JS_basic 5_증가

증가

num++

++num

TIL10-JS_basic 4_함수

함수(Function)

함수의 형태

함수의 호출과 반환

TIL9-JS_basic 3_변수

변수(Variables)

변수의 생성과 값 할당

변수 이름

camelCase

snake_case

var, let, const

변수 값 수정

TIL8-JS_basic 2_주석

🖋주석(Commenting)

주석을 사용하는 이유

TIL7-JS_basic 1_JS와 alert(), console.log()

JavaScript 소개

alert( )

TIL7- 개발자도구_1_개발자도구&Elements panel

TIL2-HTML&CSS_2_ vs
에 background-image