혼자 복습하고 필기하는

안녕하세요, 오랜만에 글을 쓰는 것 같네요. 저번에 말씀드린 DOM의 이벤트의 흐름부터 정리하려 합니다. 사실 이전에 작성하던 글이 있었는데 중간에 날아가서 다시 정리하는 시간이에요.. 덕분에 복습도 되고 좋은 것 같습니다 ^-ㅜ.. 이벤트 흐름 브라우저 화면에서 이벤트 발생 시 브라우저는 가장 먼저 이벤트 대상을 찾음 대상을 찾아갈 때 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려감 = 캡처링 단계라고 부름 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행 = 버블링 단계라고 부름 이러한 과정에서 이벤트 리..

벌써 8주 차의 오름캠프 생활이 시작된 지 어느덧입니다. 12월 28일, 23년도의 마지막 날에 첫걸음을 내디뎠습니다. 원래는 23년 4월부터 11월까지 현재 수강 중인 과정과 유사한 고객 경험 데이터를 활용한 백엔드 과정을 수강한 적이 있었는데, 그 경험을 통해 다양한 언어와 기술들을 습득했습니다. 하지만 그럼에도 불구하고 더 큰 도전과 성장을 원하게 되어 다른 과정을 찾아 나섰고, 그중에서 오름캠프에 지원하게 된 것이 떠오르네요. 이제는 이미 8주가 흘렀습니다. 매일 9시부터 6시까지의 수업 시간 동안 10분 간격으로 주어지는 짧은 쉬는 시간들은 마치 고등학교 시절로 돌아간 듯한 느낌을 주었습니다. 이 빠르면서도 뭔가가 아주 느리게 느껴지는 시간들을 돌아보면, 얼마나 많은 것을 배우고 성장했는지를 느..

DOM (Document Object Model) HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜 주는 역할 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드 (Node)라고 함 + API (Application Programming Interface) : 설명서 DOM 트리에 접근 document 객체를 통해 HTML 문서에 접근이 가능 (document : 브라우저가 불러온 웹페이지) = DOM 트리의 진입점 역할을 수행 // 해당하는 Id를 가진 요소에 접근 document.getElementById(); // 해당하는 모든 요소에 접근 document.getElementsByTagName(); // 해당하는 클래스를 가진 모든 요소에 접근 document.get..

오늘은 타입, This, 객체지향 프로그래밍에 대해 정리해 보겠습니다. 타입 (Type) 변수의 타입일 경우 다양한 데이터를 용도에 맞게 쓰기 위해 사용함 원시타입 : 단순 데이터 저장 참조타입 : 객체로서 저장 으로 크게 두 가지 타입으로 구별할 수 있음 String str = "Java"; // Java의 변수 선언식 System.out.println(str); 원시타입 (Primitive Types) 값이 변경 불가능함 값을 변수에 저장하거나 전달할 때 값에 의한 전달함 다른 변수에 원시 값을 할당할 때 값의 참조가 저장되는 것이 아닌 값 자체가 복사되어 저장 (가리키고 있는 값을 따라가기에 실제 메모리에 저장된 주소) let str1 = 'hello'; let str2 = str1; console..

오늘은 JavaScript의 변수, 함수, 조건문, 반복문, 타입에 대해 알아보겠습니다. 변수 변할 수 있는 값 (선언하고 할당하여 사용) var, let, const의 키워드 사용 var : 중복선언 가능, 재할당 가능 let : 중복선언 불가, 재할당 가능 const : 중복선언 불가, 재할당 불가 + 변수명 지정 1. $와 _를 제외한 여러 문자는 사용 불가능 2. 첫 글자는 숫자가 될 수 없음 3. 대소문자 구별 4. 예약어 사용 불가 5. 유니코드 문자 사용, 허나 주로 실무에서 영어를 사용 + 변수 특징 1. var, let 두 가지 키워드는 변수, const 키워드는 변경할 수 없는 상수를 의미 2. var, let, const 키워드는 변수를 선언할 때 한 번만 사용 3. var 키워드가 ..

어느덧 벌써 2월이네요, 어느덧 바람이 옅어지는 것을 보아 좀 있으면 다가올 봄이 기다려지는 하루예요. 오늘 오전 11시까지 LMS강의를 들었어요. HTML 강의를 시청하였고 관련 코드는 맨 아래에 GitHub 링크 올려놓겠습니다. HTML과 CSS다음으로 배울 것은 JavaScript입니다. 오늘은 간단하게 JavaScript가 무엇인지 알아보고 마무리하겠습니다. JavaScript HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어 따로 C, C++처럼 컴파일 없이 한 줄 한 줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트 (마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을..

Position HTML 태그의 위치를 지정해 주는 속성 (페이지의 레이아웃을 결정할 수 있음) 1. static = 따로 position 속성값을 주지 않았다면 static 값을 가짐, html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정되게 됨 2. relative = 원래 자신이 있어야 하는 위치에 상대적, 자신이 원래 있던 자리를 기억함 원래의 자리를 인식하지만 left, right, top, bottom 속성을 이용해서 움직일 때는 다른 콘텐츠들의 레이아웃에 영향을 미치지 않음 3. absolute = 부모 요소 내부에 속박되지 않고 독립된 배치 문맥 (my way), absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내..

어제 HTML에 이어서 오늘은 CSS에 대해 알아보았습니다. 일단 어제 주셨던 과제는 오름캠프 홈페이지를 HTML 속성을 표시하기였습니다. 왼쪽은 미숙한 제가.. 진행한 것이고 오른쪽은 강사님 파일입니다. 여기까지만 알아보도록 하겠습니다. ㅋㅋㅋㅋ CSS (Cascading Style Sheets, 낙하) 스타일이 적용될 때는 우선순위를 가지고 적용됨 = 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양 (Cascade라는 단어가 생김) 작성한 HTML의 스타일이나 레이아웃 등을 꾸미는 역할 CSS를 한 번 작성해 여러 HTML에 재사용할 수 있음 (반복 작업 감소) 선택자(Selector) 요소에 { 스타일 적용을 시작 속성(Property) - 이 속성에 : 대응 값은 속성값(Pr..

벌써 1월 마지막 주 월요일이네요. 어느덧 오름캠프를 시작한 지 두 달째 되었어요, 항상 느끼지만 시간은 정말 느린 것 같다가도 빠른 것 같아요. 오늘은 저번 HTML에 이어 기본 양식들에 대해 알아보며 VSCode에 직접 코드를 입력해 보며 배워보았어요. 까먹은 것들이 많지만 직접 쳐보니 또 새록새록 기억이 나네요. Form 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획 Q. 꼭 form 태그로 묶어줘야 할까? A. form 태그는 입력한 데이터를 제출 or 전송하기 위해 사용하는 태그, 별도 제출 필요가 없다면 사용하지 않아도 됨 = 단순히 입력받는 값을 화면에 나타내는 용도 1. Method 속성 양식을 제출할 때 사용할 HTTP 메서드 + GET https://exa..

이제 Python은 마무리 나고 다음 HTML 수업을 시작하였습니다. 지금은 Back-End에 관심 있었지만, 원래는 Front-End 쪽을 고민했었습니다. Back-End는 약간 아직 만들어지지 않은 것들을 구성하고 계획하여 만드는 것이 있는데, Front-End는 Back-End가 구성해 놓은 것들을 꾸미는 듯한 느낌이랄까? 요소들을 적용시킬 때마다 그때그때 즉각 나타나는 것이 굉장히 흥미로웠고 매력적이었어요. 하지만 제가 느낀 Front-End는 시대적인 트렌드에 민감하다고 해야 할까요. 그런 디자인 감각들을 표현하기엔 너무 어렵고 힘들더라고요, 그리고 디자인 경험은 한 번이면 족하는 이유도 있었어요. 그렇지만 오랜만에 진행하는 HTML은 언제 봐도 재밌고 그 처음 배웠던 설렘이 느껴져요 :) HT..