[2022.06.27~2022.07.03]

2주 차에는 JavaScript 기초 제어문, HTML, CSS기초에 대해서 배웠다. 아직은 초반이라 독학 할 때 미리 배운 내용들이 많긴 했다. 그중에서 새롭게 배운 것들이나 헷갈렸던 개념들을 확실하게 잡는데 신경을 썼다. 그런데 배운 것들을 응용하는 건 역시 다른 문제였다. 코플릿(코딩 문제 풀이 플랫폼) 문제가 저번 주보다 확연하게 어려워졌다. 알고리즘 형식의 문제풀이를 처음 풀어봤는데, 중간 정도 난이도만 가도 구조를 짜는데 시간이 꽤 오래 걸렸다. 그래도 희망적인 건 이틀 동안 문제와 씨름하니 처음보다는 익숙해졌다는 점? 계속 많이 풀어보는 게 답인듯하다.

 

 

한 주간 얻은 것들

 

Unit3. JavaScript 기초 제어문

1. 조건문

  • 조건문: 조건의 참 거진 여부에 따라서 체망으로 걸러서 코드 실행 여부를 결정한다.
  • 기억해야 할 6가지 falsy값
    • false
    • null
    • undefined
    • 0
    • NaN
    • ""(빈 문자열) ↔ 반대로 비어있지 않은 모든 문자열은 truthy 한 값으로 간주됨

 

2. 문자열

  • str[index] : index로 문자열에 접근이 가능하지만 수정은 불가능하다.(Read only)
let str = "apple"
console.log(str[0]); // output: "a"

str[0] = "i";
console.log(str); // output: "apple"
  • string타입과 다른 타입을 + 연산자로 합치면 string타입으로 변환된다.(toString)
  • indexOf 메서드를 사용할 때 찾고자 하는 문자열이 없으면 -1을 반환한다.
'red green'.indexOf('blue'); // output: -1
  • str.split(separator) : csv형식을 데이터 처리할 때 유용하다.
    csv문서에서 ','기준으로 분리하기 전에 줄 바꿈으로 먼저 분리해야 하는데 줄 바꿈은 ‘\n’으로 표현할 수 있음
var str = 'Hello from the other side';
console.log(str.split(' '));
//['Hello', 'from', 'the', 'other', 'side']
  • string method들은 immutable 하다 = 원본을 변경하지 않는다.
    ↔ array method들은 mutable여부를 잘 알고 사용해야 한다.

 

3. 반복문

  • for문은 반복 횟수가 명확할 때 쓰이고 while문은 반복 횟수가 불명확할 때도 주로 쓰인다.
  • 소수 판별 알고리즘을 풀 때 제곱근(sqrt(n))을 사용하면 효율적으로 풀 수 있다.
  • tip. 콘솔에서 debugger; 를 실행하면 코드 실행 순서를 확인하면서 오류를 발견할 수 있다.
debugger; function();

 

 

Unit4. HTML기초

시멘틱 요소

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시된다고 한다. 시맨틱은 '의미가 있는'이라고 해석할 수 있는데, div요소 남발을 자제하고 의미를 가진 요소의 사용을 권장한다.(div지옥 방지)

 

시맨틱 요소를 사용해야 하는 이유

가장 주요한 이유는 검색 엔진이 시맨틱 요소를 중요한 키워드로 고려하기 때문에 시맨틱 하게 잘 잘 작성된 문서가 상위 노출될 가능성이 더욱 높다. 또 다른 이유는 여러 개발자가 함께 협업할 때 의미 있는 코드 블록을 찾기가 쉽고, 요소 안에 채워질 데이터 유형을 예측하기가 쉽기 때문이다.

 

ID와 CLASS의 사용 시기

id: 고유(unique)한 이름을 붙일 때

class: 반복되는 영역을 유형별로 분류할 때

 

기타

Textarea : 줄 바꿈이 되는 입력 폼이다. 버튼과 함께 폼 태그 안에 넣어놓으면 input처럼 사용 가능하다.

 

 

Unit5. CSS기초

CSS는 좋은 사용자 경험을 제공하기 위한 도구이다.

CSS 스타일을 적용하는 방법은 3가지가 있다.

  1. 스타일을 적용하려는 요소 안에 직접 작성하는 인라인 스타일
  2. <style> 요소 내에 작성하는 내부 스타일 시트
  3. CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하는 외부 스타일 시트

하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않는다.

 

절대 단위와 상대 단위

화면 크기 등 크기를 다룰 때는 크기의 단위가 중요한데, 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.

  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등

일반적으로 글자 사이즈의 단위는 rem을 사용하는 것이 좋다고 한다. 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르기 때문에 접근성이 좋다.

 

vw, vh

웹사이트의 보이는 영역을 Viewport라고 한다. vw, vh는 각각 viewport width와 viewport height를 뜻한다. 1vw는 보이는 영역 너비의 1/100이고, 1vh는 보이는 영역 높이의 1/100이다.

 

 

Tracking

이건 좀 잘했다

  • 코플릿 문제를 레퍼런스를 보지 않고 끝까지 페어님과 함께 풀어보려고 노력했다.

시간이 너무 많이 걸리면 레퍼런스를 보고 이해한 후에 다시 풀어보는 방식도 좋다고 듣기는 했지만 여기서부터 자꾸 답지를 보는 버릇을 들이면 안 될 것 같다는 생각에 구조가 깔끔하지 않아도 최소한 통과가 되는 코드를 만들어봤다. 혼자였으면 시간이 너무 오래 걸려서 포기하고 그냥 레퍼런스를 봐버렸을 수도 있는데 페어분 께서도 열의가 있으시고 나보다 훨씬 잘 푸셔서 포기하지 않았던 것 같다(페어님 감사합니다🙏).

  • 배운 내용들을 노션에 잘 정리하고 있다.

생활코딩이랑 노마더 코더 강의를 들을 때부터 정리하던 습관을 잘 잡아놔서 거의 집착에 가깝게 필기를 하고 있다. 지금은 마구잡이로 쑤셔 넣는 식이라서 나중에 찾기 쉽도록 구조를 바꾸려고 노력 중이다.

 

이런 건 아쉽네

  • 시간관리!

시간을 좀 더 효율적으로 쓰지 못하는 건 항상 아쉽다. 앉아있는 시간은 많은데 집중력을 잃어서 앉아만 있는다던지, 자꾸 딴짓을 하게 되는 게 문제다.

  • 하나에 집착

시간관리랑도 연결되는 내용이다. 하나에 개념이 이해가 안 가면 좀 명쾌하게 답이 나올 때까지 찾아보는 편이라서 거기에 시간을 너무 많이 투자하고 다른 중요한 것들에 소비하는 시간이 상대적으로 줄어들어 버린다.

 

다음엔 이렇게 하자

  • 비동기적 학습

막히는 개념이 있으면 30분 정도 찾아보고 이해가 가지 않으면 일단 킵해두자. 지금은 좀 막히지만 나중에 보면 의외로 쉽게 이해가 가는 것일 수도 있다. 지금 가장 중요한 일을 먼저 처리하고 상대적으로 중요도가 낮은 일은 좀 미뤄두자.

  • 시간을 기록해보자

공부시간을 기록하는 어플을 써서 순 공부시간을 알아봐야겠다. 내가 집중한 시간과 그렇지 못한 시간을 파악하면 개선할 방법이 나오지 않을까..?

티스토리툴바