비전공 8

자바스크립트는 어떻게 HTML을 조작하는 것일까? (feat. DOM)

자바스크립트의 가장 중요한 역할 중 하나는 HTML 문서를 조작하는 것이다. 그래 그건 알겠어. 그런데 정확히 어떻게 조작해? 이것에 대해서 의문점을 가져본적이 없다. 그냥 태그 써서 요소를 불러왔지. (이 글은 계속 업데이트 될 예정이니 내용이 빈약하더라도..걱정 말아라) MDN 문서를 살펴보니, 어떻게 조작하는지를 알려면 DOM의 개념을 이해해야 한다고 한다. 한번 살펴보자. Introduction to the DOM The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. -> DOM 일단 그자체에서 유추해보..

📙 (JAVASCRIPT) 2021.11.26

Known to unknown! 📚 당연한것을 당연하지 않게!

현재 시간 새벽 6시 11분. known to unknown 프로젝트의 서막을 알린다. 멋쟁이 사자처럼 프론트엔드 스쿨 멘토 Gary님과 개발자 조은님의 추천으로 시작하게 되었다. 🙇‍♀️ known to unknown 프로젝트는 아는 것에서부터 시작해서 당연하게 생각한 지식에 한 번더 의문을 품는 것을 목적으로 한다. 즉, 당연한 것을 당연하게 여기지 않는 비판적인 자세로, 더 딥하게 컴퓨터 언어를 이해하고자 한다. 그 시작은 자바스크립트로 하려고 한다 (나는 자바스크립트 전문가가 되고 싶다. 자바스크립트와 사랑에 빠지고 싶다) 이 글을 보는 사람들이여. 부디 내가 잘못 이해한 개념이 있거나, 피드백이 있다면 환영이다. 나는 마음을 따뜻하게 해주는 위로보다, 진심 어린 팩트 폭력을 선호한다. (댓글로 ..

📙 (JAVASCRIPT) 2021.11.26

번아웃이다. 내일부터 난 죽은 몸이다.🤪

지금 너무 힘들다. 내일부터 노마드코더 챌린지 시작이다! 너무 처음부터 힘빼기 싫다. 오늘은 일찍 자려고 한다. 더 이상 집중도 안되고! 오늘은 거의 함수랑 씨름하느라 시간 다 보낸거 같다. 들어도 들어도 return이 이해가 잘 안갔는데 지금은 조금 이해했다. 오늘 배운 내용 1. a**b -> a의 b제곱 2. return은 함수를 호출한쪽으로 데이터를 전달한다. 3. prompt() -> 사용자에게 입력값을 받을 수 있는 창을 띄울수 있도록 한다. 4. parseInt() -> string을 number로 변환해준다.

📓 개발 일지 2021.07.25

자바스크립트 챌린지를 신청하다!!

7월 26일부터 자바스크립트 챌린지를 한다! 너무 퀴즈도 없고 지루해서 그냥 힘들어도 신청해버렸다. 이렇게 된 이상 난 두개의 챌린지를 진행해야하는 운명에 놓인 것이다. 이거를 하느냐 못하느냐에 따라서 나의 운명이 결정될것 같다. 오늘 배운 내용 1. html 파일에서 어떻게 css와 JS를 끌어오는지 배웠다. html 파일에서 ! 누르면 기본값 세팅된다. link:css 선택하면 알아서 css파일 연결해준다. 2. Data type 두가지 문자: string 숫자: integer 3. console.log와 const의 의미에 대해서 배웠다. 4. 기본적으로 const를 사용하되, 업데이트 필요할 때는 let을 이용하자 ex) let myName="Jung" 업데이트 하구싶으면 myName = "Jun..

📓 개발 일지 2021.07.24

너무 많아서 머리 아파 ㅠ (position / pseudo selector)

뭐가 이리 많을까? 아 그리고 너무 이론만 배우는 느낌이라 빨리 클론을 해보고 싶다. 약간 실전에서 적용하구 싶은데 이것저것 다양한 키워드만 배우는 느낌이라 솔직히 학습하기 조금 부담스럽다. 재미도 좀 떨어지고. 그래도 잘 견뎌보자. 지금 팥빙수 먹으면서 개발일지 쓰고있다. 이 슈퍼에서 파는 팥빙수 아는가? 나 훈련소있을때 먹고 처음이다. 훈련소에서 진짜 맛잇게 먹었는뎈ㅋㅋㅋ 설빙 저리가라였다. 오늘 배운 내용 1. position -> 위치를 움직일때나 고정시킬 때 사용 ex) div {position fixed;} -> 이거하면 스크롤 내려도 계속 상자가 보인다. 굉장히 유용하다고 생각한다. 왜냐하면 스크롤 내려도 계속 유지하게끔 하고 싶을 때가 있으니까 움직이게 만들 수도 있다. ex) {posit..

📓 개발 일지 2021.07.23

복습겸 나만의 웹사이트 만들기

지금까지 배운것을 바탕으로 사이트를 만들어보려고 한다. 왜냐하면 계속 강의만 듣고 진도만 나가는건 의미가 없다고 느꼈기 때문이다. 일단 연습겸 에 타이틀이랑 파비콘을 넣었다 그리고 구글,네이버에 검색할 수 있는 간단한 meta 정보도 넣었다. 또한 브라우저로 하여금 이 사이트의 언어가 한국어라고 알려주었고, 특수문자나 한글이 깨지지 않도록 charset도 설정했다. 에는 이미지를 클릭하였을 때, 나의 티스토리 블로그로 넘어가게끔 설정을 해두었다. 그리고 간단한 회원가입 느낌을 만들었는데, 아이디는 최소8자, 비밀번호, 생년월일, 파일첨부, 범위 설정 등 다양한 attribute를 사용해보았다. (만약 이 항목 중 어떤것도 설정을 안했을 시에 넘어가지 않도록 설정해놓았다.) 보잘것 없지만,, 귀엽게 봐줬으..

📓 개발 일지 2021.07.17

태그가 너무 많아서 혼란스러워~!!! 😞

오늘 진짜 집중 별로 못했다. 너무 정보도 많고 자신감도 살짝 떨어지는 날이다. 이럴때 나를 잘 다독이고, 오늘은 일보 후퇴해야겠다. 오늘 배운 내용 1. -> 컴퓨터 파일안에 있는 이미지를 넣는법 (단!vsc 같은 카테고리 안에 있어야 한다) 2. -> 브라우저에게 이건 text파일이 아니라 html 문서라고 알려준다. 이건 앞에 무조건 쓴다 3. 이 안에 있는건 모두 html 코드가 된다. 4. 웹사이트는 head 와 body로 나뉜다. ex) 모든 content 내용 -> 이거하면 위에 상단에 링크 제목을 수정할 수 있다. 5. meta 태그 -> 부가적인 정보를 뜻한다. meta 태그는 self closing tag이다 두개의 attribute가 있다 content 와 name으로 나뉜다. ex)..

📓 개발 일지 2021.07.15

아이코 변수가 생겼네!! (2021.7.13 화)

오늘은 변수라는 것에 대해서 처음 알았다. 아니 근데 용어가 너무 낯설다???!! 변수 / 선언 / 할당 이게 다 뭐람?? 내가 평소 쓰는 용어랑 다른 느낌이기도 하다. 변수로 작용했다? 이런건 많이 들어봤지. 오늘 배운 내용은 1. let -> 변수를 선언할때 사용 2. const -> let 과 유사하지만, 다시 할당할 일이 없을 때 사용 문득 공부하면서 예제? 같은게 있으면 좋겠다는 생각이든다. 너무 강의가 설명만 해서, 내가 적용할 수 있는 무언가가 없고, 그냥 이론만 배우는 느낌? 굉장히 공허하다. 이건 내가 처음에 목표했던 것과는 거리가 멀다. 어떻게든 예제를 만들어야 겠다는 생각을 했다. 내가 직접 찾아 본 결과 용어는 다음 뜻과 같았다. 변수: 데이터를 담기 위한 메모리 공간 => 그릇/ ..

📓 개발 일지 2021.07.13
1