[220720] Daily Study Note

  Today's Plan  

Studying JavaScript knowledge   ✅

1.7 문서 수정하기

1.8 스타일과 클래스

1.9 요소 사이즈와 스크롤

1.10 브라우저 창 사이즈와 스크롤

1.11 좌표

 

Coding JavaScript   ✅

(1) Javascript Hangman Game Project

(2) 깃허브에 업로드하고 내용 정리

 

Training Coding Test with Python  ✅

(1) 삼성 기출 테스트 3문제

 

---

1.

https://ko.javascript.info/

모던 JavaScript 튜토리얼

 

(1) 문서 수정하기  

 

오 과제가 꽤 많은 챕터여서 시간이 좀 많이 걸렸습니다. 하지만 동적으로 노드를 만드는 중요한 부분이라 모두 수행했습니다.

 

과제 5번 풀이

<div id="container"></div>

<script>
    let data = {
        "Fish": {
            "trout": {},
            "salmon": {}
        },

        "Tree": {
            "Huge": {
            "sequoia": {},
            "oak": {}
            },
            "Flowering": {
            "apple tree": {},
            "magnolia": {}
            }
        }
    };
    let container = document.getElementById('container');
    createTree(container, data);
    function createTree(container, data){
        let currentList = document.createElement('ul');
        container.append(currentList);
        if(data){
            for (item in data){
            let currentItem = document.createElement('li');
            currentItem.textContent = item;
            currentList.append(currentItem);
            createTree(currentList, data[item]);
            }
        }
        else{
            return
        }
        return
    }

</script>

직접 푼 코드입니다. 예제에서 주신 소스코드랑은 조금 다르긴 하지만 거의 동작방식은 같습니다.

다양한 과제들 모두 도움되었지만 이렇게 객체 데이터를 받아와 동적으로 무언가를 생성하는 작동 방식은 유용하게 계속 쓰일 것 같아 따로 기록 남깁니다.

 

 

## 과제 문풀 

---

2.

아.. css 진짜 시간 오래 걸린다. 답답해서 정말.. 

내일이나 내일 모레 정리 한 번 해야겠다. JavaScript가 아니라 여기서 원하는 대로 구현 안 되면 페이스 확 잃는 것 같다.

 

2시간 작업

HTML/ CSS / Javascript까지 2시간 타임아웃을 두고 진행하는 것을 계획해서 시간이 종료된 후에 작업을 마쳤습니다.

더 빠른 시간 안에 아이디어를 떠올리고 구현 방법을 찾을 수 있을 것 같다는 기대에 기반한 계획입니다.

더불어 너무 붙들고 있는 것보다 다양한 예제를 많이 보는 것도 이 시점에서 괜찮을 것 같다고 생각했습니다. 

 

시간 내 구현 성공 사항

1. 알파벳 리스트 동적 디스플레이

2. 랜덤으로 도시 뽑기

3. 남은 목숨(기회) 카운트

 

구현 실패 사항

1. 행맨 사람 만들기

2. 힌트 버튼 기능

3. 게임 재시작 버튼 기능

4. 정답 단어 위치에 맞게 디스플레이(디스플레이는 되는데 순서에 맞게 구현하지 못 했습니다.

 

아쉬운 점

1. CSS 디스플레이에서 시간을 은근 뺏겼습니다. 이렇게 가벼운 건 기본으로 뚝딱뚝딱해야 하는데 어처구니 없는 실력입니다. 

2. 객체 데이터를 생성하고 함수에 건네는 등의 전체적인 구현 사항이 머릿 속에 바로 안 들어옵니다. 언어 문법에 덜 익숙하고 경험이 적어 그런 것 같습니다.

 

ㅡ

 

예제 풀이를 보고 접근 방향을 익혀 보겠습니다.

 

1. html

- <canvas> 행맨 그림 그리는 것에 솔직히 사용할 생각 못 했다. 

 

2. css

- css변수 설정을 나는 :root{} 에 설정했는데, 프로젝트 제공자는 $태그를 달아서 설정했다. 두 선언의 차이점 정리해야겠다.

- @mixin : 진짜 안 익숙한 문법이다. 처음 보는 듯 하다. @include 로 사용?

- &: after : 뭔지는 아는데 어떻게 사용하는게 확실하게 올바른 방법인 지 모른다.

- box-sizing: 매번 마음에 딱 들게 사용이 안 된다. 이번에도 마찬가지. 왜 그런지 이유를 짚어야 한다

- 왜 내 float:left는 제대로 동작하지 않은 것일까. 구글 검색에서도 그렇고 예제에서도 역시나 float:left를 사용하고 있다.

- @media (max-width:  ) 설정하기. 어떻게 사용하는지도 작동하는지도 알지만 자주 코드를 짜지 않아와서 정말 안 친숙하다. 거의 필수 사항이니 항상 생각하여 구현할 것.

 

3. javascript

: 이 프로젝트 다 좋은데 내가 배운 모던 자바스크립트 문법과 너무 대치되는 구식 문법을 사용한다. var를 사용해서 scope 그냥 무시하고 서로 변수 다 참조하고, 비추하는 메서드도 많이 사용한다. 덕분에 로직 대충 이해하고 처음부터 인수 넘기고 등등 거의 새로 짜야만 한다. 공부에 있어서는 최적의 장점이긴 하다. 

 

---

3.

큰일이다.. 코딩테스트 실력이 또 퇴보했다. 

어쩜 이러냐 진짜. 

진짜 언어 배울 때랑 똑같다. 조금만 연습 안 해도 입도 못 떼는 것처럼 어버버한다.

꺾어서 생각하면 진짜 언어랑 비슷하면 폼 올리는 것도 조금만 하면 되겠지 하는 기대 갖고 열심히 하면 된다.

지치지 말고 밀고 나가자.

 

[1] 

 

https://proprotrainee.tistory.com/82

 

[2]

 

https://proprotrainee.tistory.com/83

 

[3]

 

https://proprotrainee.tistory.com/84 

[ BOJ ] 13458 시험 감독