금일 핵심 내용
모듈화, 비동기, CSS grid & background, nextsibling nextsibling 공식 mdn previoussibling previoussibling 공식mdn, after after 공식 mdn, before before 공식 mdn
의도한 바는 아니지만, 객체와 배열을 마구마구 쓰면서 객체와 배열을 다루는 것에 점점 숙련이 되어가고 있다. 하지만 여전히 파라미터로 전달하는 방식에서는 음? 하는 부분이 있다. 즉 아직까지는 의문점이 있다는 거라서 자만하지말고 복습해야겠다.
아 그리고 TIL DayCount는 앞으로 데브코스의 Day를 따라가기로 했다. 나 혼자 따로 독고다이로 가니까 너무 헷갈린다.
깊은 고민
운동
운동을 어떻게 해야할 지 고민이다. 지난 주는 운동을 중간중간 열심히 했는데 요 며칠은 또 안했다. 확실히 운동을 할때랑 안할때랑 차이가 좀 있는데 집중하는 기간이 길어지다보면 또 운동할 시간을 잘 못잡게 된다. 아침에 좀 더 일찍 일어나야하나..? 저녁에 시간 투자를 해야하나..?
학습 시간
사실 평일에는 하루 종일 학습만 할 수 있는데 주말이 문제다. 주말에 나갔다오면 아무것도 하기 싫어져서 그냥 공부 자체를 안한다. 특히 상대적으로 여유로운 주말 오전!!! 깃허브 잔디 심기도 그냥 1시간 정도 투자해서 문제풀면 되는건데 그것조차 안한다. 평일에 너무 공부만해서..? 라기에는 여전히 간간히 휴식시간을 가지고 있어서 아닌 것 같고...어떻게 하면 지속적으로 절대적인 학습시간을 확보할 수 있을까
얕은 고민
일단 만들고 리팩토링?
팀원들과의 사이드 프로젝트도 그렇고 강의에서 배운대로 바로 추상화하고 모듈화하고 선언형 프로그래밍을 실천하는 게 쉽지는 않다. 그러면 일단 만들고 리팩토링하는게 맞을까 아니면 시간이 걸려도 처음부터 기능 완성을 하는게 우선일까? 후자쪽으로 실행하고 있긴 한데 계속 뭔가 걸린다.
유혹을 떨쳐내기
유튜브는 뭐 거의 나한테는 악마고 인스타랑 각종 웹에서 들려오는 세상 소식을 지금의 90프로는 끊고 싶다. 특히 쉴 때 안보려고 한다. 데브코스 동기분의 조언에 따르면
그리고 공부중 쉴때는 무언가를 잘 하지 않습니다! 쉴때는 그냥 쉬어줘야 그나마 집중이 잘 되더라구요라고 하셔서 앞으로는 쉴 때도 그냥 베란다가서 먼산이나 보려고 한다. 근데 그러면서 휴대폰의 유혹을 잘 떨쳐낼 수 있을까..?
데브코스
모듈화
리액트에서 그렇게 썼던 모듈!!!
최근 로토님 강의는 리액트의 느낌을 강하게 받는다. state랑 렌더, 그리고 오늘 배웠던 모듈까지!모듈의 장점
- 모듈을 명시적으로 가져오기 때문에 사용하지 않는 스크립트를 추적할 수 있다.
- 스크립트로 로딩하는 경우 불러오는 순서가 중요하지만 IMPORT의 경우에는 순서가 상관 없다
- 전역 오염이 일어나지 않는다!
주의해야할 점
웹 서버가 필요하다.(npx serve or live server로 간단하게 해결) 그리고 보통 import후 tab 하는 자동완성 코드로는 파일명 뒤에 .js가 생기지 않는데 .js를 명시해주지 않으면 에러가 나기에 이부분을 신경써야 한다.export default
한 스크립트에 한 가지 함수(기능)을 가진 경우에 이렇게 선언할 수 있다. 유지보수가 매우 쉬워지고 import/export가 매우 간편해진다는 장점이 있지만 API를 담당하는 스크립트 같이 여러 함수를 포함한 스크립트에서는 사용할 수 없다.
비동기 처리
비동기 처리란?
어떤 함수나 코드를 실행할 때 연산이 끝날때까지 멈추지 않고 다음 코드를 먼저 진행하는 자바스크립트의 특성
ex1) addEventListener 함수 두번 째 인자로 넘겨진 함수는 바로 실행되지 않고 이벤트 리스너가 정의한 이벤트(클릭 등)가 발생할 때 실행된다.
ex2)settimeout, setinterval 첫 번째 인자 함수는 바로 실행되지 않고 특정 시간이 지난 후에 실행된다.
관련해서 이해하는데 도움받은 사이트
자바스크립트의 특징 중 하나는 단일 스레드로 동작하는 것이다. 즉 한번에 하나의 일 밖에 처리하지 못한다. 이때 동기적으로 일을 처리하게 된다면 오래 걸리는 작업이 걸릴 시 전체적인 프로세스의 시간 증가를 야기한다.
이때 해당 작업은 그냥 두고 다음 작업을 진행하는 비동기적으로 작업을 진행하여 그런 문제를 해결했다.
개인 공부
CSS grid & background
도움받은 사이트
퍼즐 게임을 구현하던 중 면접때 질문받았던 그리드를 사용해보았다. flex보다 더 복잡한 레이아웃 표현이 가능하다. 아래 코드를 통해 총 16개의 li태그를 4 x 4 형태로 표현해줄 수 있었다.display: grid; /* 총 16개의 li를 한 줄당 4개씩 배치하는 코드 */ grid-template-columns: repeat(4, 1fr);nextsibling, previoussibling
퍼즐을 구현하기 위해 만든 li태그를 객체 형식으로 console.log()를 하게 되면 저렇게 객체 정보가 다 출력된다.
실제 html을 뜯어보면 현재 list12번 li의 이전, 이후 요소를 잘 알려주고 있다.
after, before
더 좋은 글이 있어서 링크로 대체한다.
after, before 관련 포스팅쉽게 말하면 after은 선택한 요소 뒤로, before은 앞으로 컨텐츠가 삽입된다.
오늘의 후기
오늘은 열심히 했다. 정말 열심히 했다. 그래도 시간이 부족하다..! 그러면 내일은 더 시간을 깎아야 겠다. 세상에 관심을 끊자.
OKKY 고졸 국비에서 네카라 개발자가 되기까지
어제도 올렸지만 오늘도 올린다. 좋은건 2번 봐야한다
나도 저분이랑 계기는 다르지만 목표는 같다. 컴퓨터, 소프트웨어 분야를 좋아하지만 지금처럼 투자하고 열정을 쏟았던 적이 없다. 부끄럽다고까지는 생각하지 않지만 한 번 사는 인생에서 한 번쯤은 진짜 열심히 하고 싶다. 그게 이번 데브코스에서의 경험이 되었으면 좋겠다. 특히 방향이 잡히고 함께하는 사람들이 있다는 사실이 나를 매우 고양되게 한다. 오늘 팀원들이랑 함께 야근폐관수련을 했다. 이런 분들이 있어서 더 동기부여가 되는 것 같다.
매일 TIL 푸념이나 늘어놓는 것 같은데 내 TIL이니까 내맘대로...헤헤 그래도 이렇게 써서 내가 동기부여가 되고 내일은 더 나은 하루를 지낼 수 있다면 쓸거다. 그리고 내일도 열심히🔥🔥🔥🔥
