20201012 TIL

20201012 TIL

HTML

Semantic 태그

• 기능이 있는 것은 아니나 페이지의 특정 부분이 어떤 정보를 내포하는지에 대한 의미를 가진다.
• header, nav, section, article, footer

 

Viewport

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"

• 이게 항상 뭐에 쓰는 코드인진 모르고 그저 양식에 있길래 그런가보다 하고 넘어간 코드였는데 모바일 환경에서 크기 조정을 해주는 코드였다.
• 부트스트랩 쓸 때마다 나는 반응형을 의도하고 만들지 않았는데 반응형이길래 뭘까.. 했는데 이거였나 ㅎ

 

 

 

---

 

JS

es6중 하나인 Template Literal

function hello(name){
  return `Hello ${name}!`;
}

const result = hello('soyoung');
console.log(result); // 결과 : Hello soyoung!

 

 

화살표 함수 문법

const add = (a, b) =>{
  return a + b
}

• 이때 화살표 함수의 경우 함수 내부에서 바로 원하는 값을 return 할 수 있다.

  const add = (a, b) => a + b

• 같은 함수지만 코드 길이에 차이가 생긴다.

 

 

배열의 내장함수, forEach

const array  = [1, 2, 3, 4, 5];

• 다음과 같은 배열이 있다 가정해보자.

for (let i = 0; i < array.length; i++){
 console.log(array[i]); // 결과 : 1 2 3 4 5  
}

• 위의 코드는 아래의 forEach코드로 바꿀 수 있다.

  array.forEach(i => {
  console.log(i); // 1 2 3 4 5
  })

 

---

 

React

• 처음 공부해보는 리액트라 생소하지만 상당히 재밌다. (아직까지는)
• 가령 html을 몇번 더럽게 만든 경험이 있었는데 그때 리액트를 알았더라면 같은 부분을 여러번 반복해서 만들 필요도 없었고 더욱 깔끔하고 간결하게 만들 수 있었구나 깨달았다.

리액트 컴포넌트 개념 정리

 

 

리액트 사용으로 인한 장점

1. 가독성이 올라간다. (컴포넌트의 이름에만 집중하게 함으로써 복잡도가 내려감)
2. 재사용성이 올라간다. (남이 만든 컴포넌트 사용도 용이해진다.)
3. 유지보수가 편리해진다.

 

---

 

오늘의 정리

- 리액트를 잘 써보고싶다...! 잘하면 좋겠다. 

- 몇달만에 다시 시작해보는 TIL인데 (진짜 몇달만인가..?) 이제 진짜 꾸준히 써야지 제발~ 

- gis공부도 다시 복습해봐야겠다.. 전공자인데도 정말 전공자급으로 아는 지식이 없는거같다. 

- 공부는 항상 밑빠진 독에 물붓는 느낌이다. 근데 또 붓다보면 꽤 차있는거같다. (근데 진짜 많이 부어야 꽤 차있어보이는거같다.ㅋㅋ)

- 수고했어 오늘도~!