본문 바로가기
TIL/코드스테이츠 TIL

코드스테이츠 소프트웨어엔지지어링 부트캠프 +6일

by 안뇽! 2021. 7. 25.
반응형

코드스테이츠에서의 첫번째 토요일

 

첫번째 토요일이다. 정해진 스케쥴이 없는 상태에서 뭘 할까 인터넷만 뒤적뒤적하느라 2시간은 보낸것같다.

 

코플릿 반복문을 한바퀴 돌리면서 2중반복문을 집중해서 다시 보았다.

 

많이봐서 내가 생각하는게 외운걸 기억하는건지, 진짜 알고 생각하는건지 모르겠다.

 

바로 생각나는 의식의 흐름들을 무시한 채, 일부러 실수했던 코드들을 적고 종이에 나름의 순서도를 그려가며 하나하나 정리했다.

 

종이에 끄적끄적 2중반복문

 

헷갈렸던 2중반복문 코플릿을 복습하고, w3school 홈페이지에서 html을 공부하다가 block, inline 특성 이라는 개념을 알게 되어 정리한 후 게시글을 올렸다.

https://wnsdufdl.tistory.com/17

 

HTML요소의 block 특성과 inline 특성

1. 크기 block은 화면 크기 전체의 가로폭을 차지하고 항상 새로운 라인에서 시작한다. inline은 문장의 중간에 들어갈 수 있다. content의 너비만큼 가로폭을 차지한다. 계산기 dasdfasdfasdfa

wnsdufdl.tistory.com

 

html로 이것저것 끄적끄적 만들어보다가 w3school에서 dom을 공부했다.

예전에 코드스테이츠 시작하기 전에 합격 기다리는 동안 노는게 불안해서 니꼴라스 무료강의 바닐라js를 들었었다.

그때 innerText, textContent로 html에 content를 입력하는 방식을 배우긴 했지만 정확히 알고 있지 않았다.

이번에 구글링을 하면서 innerText, textContent, innerHTML에 대한 개념을 정리하고 직접 키보드를 두드리며 연습했다.

그 후 게시글을 썼다.

 

블로깅을 하면 확실히 개념정리가 잘된다. 설명하는 글을 적으려면 먼저 내가 정확히 알아야 하니깐

https://wnsdufdl.tistory.com/18

 

Javascript : innerText와 textContent 차이

innerText와 textContent 차이 innerText와 textContent 의 값은 모두 text/plain 으로 파싱한 결과이다. 그래서 혼동하기 쉬우나 중요한 차이점이 있다. innerText는 화면에 보이는 내용만 보여준다. CSS등의 스..

wnsdufdl.tistory.com

w3school 목차



w3school에서 DOM의 기본적인 내용들을 따라하며 빠르게 흝다가 CSS에서 엄청난 시간을 소모했다.

 

<input button value = 'color'/> 인 버튼을 여러개 만들고 각 버튼을 클릭하면 그 버튼의 value로 제목색깔이 변하는 것을 만들고 싶었다. 버튼1개당 1개의 함수를 일일이 만들어서 기능구현을 할 수 있었지만, 생활코딩 이고잉님의 말마따나 1억개의 기능을 한번에 좌지우지 할 수 있는 함수를 만드는게 맞다고 생각했고 괜한 오기가 생겨서 열심히 구글링을 했다.

https://www.codeinwp.com/snippets/add-event-listener-to-multiple-elements-with-javascript/

위 홈페이지에서 forEach()란걸 알게 되었고 복붙해서 변수이름만 조금씩 바꾸고 이러쿵 저러쿵 했더니 완성이 되었다!

이게 코드스테이츠에서 원하는 방식인가 싶기도 하다.

'하 이게 될까?? 어떻게 찾지??' 라는 생각을 비웃듯 내 상황에 딱 맞는 내용이었다.

 

'나의 고민은 이미 누군가 해본 고민이다' 라는 말이 정말 맞는 말인가보다.

 

https://wnsdufdl.tistory.com/19?category=1013101 

 

forEach() : 버튼을 누르면 버튼에 적힌 색깔로 제목 색깔이 변하는 코드

여러개의 속성(버튼)에 하나의 이벤트핸들러 추가하기. w3school홈페이지를 보면서 혼자 DOM CSS 를 공부하다가 이 코드를 만들게 되었다. 버튼개수만큼 함수를 일일이 여러개 만들면 쉽게 기능을

wnsdufdl.tistory.com

 

 

우선 내일도 공부를 해야하니 forEach()에 대한 개념정리는 내일의 나에게 맡기고 자자.

반응형