009_JavaScript 기초 (7/8-9)

@pinterest

험난했던 웹 프로그래밍 기초 끝!

  오늘까지의 자바스크립트 강의를 끝으로 프로그래밍 기초 과목이 끝이 났다. 매우 다양한 내용들을 짧은 기간동안 학습했는데, 그러면서 느낀 점은 개인적으로 공부를 더 많이 해야겠다는 점이었다. 아무래도 이 프로그램 특성상 짧은 기간동안 다양한 분야에 대해 가르치기 때문에 이것이 장점이 될 수 있지만 반대로 깊이 배우기가 힘들다는 점이 있기 때문에 예습 및 복습을 얼마나 철저히 하는지에 따라 6개월 후 레이서들의 실력이 많이 차이가 날 것이다. 내년 취업을 목표로 하고 있는만큼 스스로 정보도 많이 찾고 자습 시간도 충분히 가져서 취업할 자격을 당당히 갖춘 사람이 돼야지! 💪🏻

---

🚀  TIL에 들어가기 전 미래에 엘리스 ai 트랙을 듣게 될 프론트엔드 지망생들에게 드리는 팁(?)

이 프로그램에서는 프론트엔드 직군에서 무조건 사용하는 자바스크립트 대신 파이썬으로 교육을 시작한다. 그리고 자료구조와 알고리즘 파트도 파이썬으로 공부하고 풀었기에 코딩 테스트 준비를 위해 백준에서도 자연스럽게 파이썬으로 문제를 풀었다. 하지만 최근 들어 프론트엔드 직군에 지원하기 위해 코딩 테스트를 보려면 자바스크립트를 권장하거나 자바스크립트로만 문제를 풀어야 하는 곳들이 많아지고 있다는 사실을 (뒤늦게 🥲 ) 알게 됐다. 생각해보면 어차피 현업에 가더라도 자바스크립트를 주로 사용하게 될텐데, 왜 아무 생각 없이 파이썬으로 풀고 있었을까,,,😔  테스트를 보기 위해 준비하는 것도 있지만 언어를 다루는 법을 익힌다는 생각으로 자바스크립트로 알고리즘 문제를 푸는것을 (개인적으로) 추천한다 ✨

 

1. 자바스크립트

  1-1 . forEach

• JavaScript Array(배열) 객체의 메서드
• for문과 마찬가지로 반복적인 기능을 수행할 때 사용
• 하지만 for문처럼 조건식, 증감 여부, index 등을 정의하지 않아도 된다. 
• 대신 CallBack 함수 ( 나중에 호출되는 함수. 등록만 해놓고 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수) 를 사용한다.

const emails = ["seop@gmail.com", "jbl@naver.com", "hello@nate.com"]

emails.forEach(email => {
	console.log(email.split('@')[0]);
    });
    
// seop
// jbl
// hello

 

  1-2. map

• Array 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 만든다.

const emails = ["seop@gmail.com", "jbl@naver.com", "hello@nate.com"]

const cleared = emails.map(email => email.split('@')[0]);

console.log(cleared);

// ['seop', 'jbl', 'hello']

 

  1-3. this

• this는 기본적으로 window를 가리킨다.
• 그런데 사용하는 방법에 따라 this가 가리키는 대상이 달라지는데, 예를 들어 addEventListener 안의 function에서 쓰면 해당 HTML 태그를 가리키게 된다.

const button = document.querySelector("button");

button.addEventListener("click", function()
	console.log(this);
});

//<button>Click me</button>

 

2. HTML & CSS

  2-1. <section>   vs  <article>

• <section> 태그는 주제별 영역들을 그룹화하기 위해 사용한다.
• 영역을 감싸거나 구분할 때 사용한다.

<section>
   <h1>상품소개</h1>
   <ul>
      <li>상품1</li>
      <li>상품2</li>
      <li>상품3</li>
   </ul>
   <p>상품의 실제이미지와 다를 수 있습니다.</p>
</section>

• <article> 태그는 section 태그와 다르게 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙일 수 있는 영역을 그룹화한다.

<article>
   <h3>브랜드 페이스북</h3>
   <ul>
      <li>포스팅1</li>
      <li>포스팅2</li>
      <li>포스팅3</li>
   </ul>
</article>

 

따라서 <article> 태그 안에 <section> 태그가 들어가는 것이 자연스럽다.

<article>
  <h1>Article1 Heading</h1>
  <section>
    <h2>Section1 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section2 Heading</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Section3 Heading</h2>
    <p>Content...</p>
  </section>
</article>

 

  2-2. background-attachment

• 배경 이미지를 뷰포트 내에 고정시킬지, 아니면 스크롤과 함께 움직이게 할건지 지정.
• scroll : 배경이미지가 펭지와 함께 스크롤한다. 
• fixed : 배경이미지가 페이지와 함께 스크롤하지 않는다. (즉, 배경 이미지는 그대로 있고 안의 컨텐츠만 스크롤을 따라 움직인다.)
• local : 배경이미지가 요소 내용과 함께 스크롤한다.