혼자 복습하고 필기하는

오랜만에 오름캠프에서 한 수업을 정리하는 것 같아요 :).. 최근에 이사를 진행하면서 이삿짐을 준비하고 이사하는 과정이 있어서 어렵게 쌓은 습관이 무너지고 말았네요. 하루 이틀 미루다 보니 벌써 몇 주란 시간이 흘러 더 이상 미룰 수 없을 것 같아요. 이사를 진행하면서 수업에 참여하지 못한 적이 몇 번 있었기에 자세하게 듣지는 못하였습니다. 오름캠프에서 제공해 주는 자료와 부족한 부분은 중간중간 인터넷을 통해 정보를 찾아 보충하여 작성하였습니다. 16일까지 미니 프로젝트를 진행한 후 19일에는 Bootstrap 수업을 진행하였습니다. 부트스트랩 (Bootstrap) 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것 웹 디자이너나 개발자 사이에서..

위 제목은 말 그대로 13일 화요일부터 16일 금요일까지 미니 프로젝트 기간이었습니다. 프로젝트는 HTML, CSS, JS를 사용하여 진행되었고 목표는 ChatGPT API를 활용하는 것이 기본 프로젝트의 목표였습니다. 저는 개인비서 서비스를 구현하는 것으로 진행하였고 앞으로 발전 가능성이 크다고 생각하고 있습니다. 서비스 명은 지니스트(Genist)로 Genius와 Assist의 합성어로써 뛰어난 개인비서의 의미를 담고 있어 매력적인 이름입니다. 사용자에게 스케줄 관리와 도움을 제공하는 목표는 효과적인 개발을 통해 실현될 것으로 기대됩니다. 개발 환경으로 Visual Studio Code를 선택한 것은 가벼운 환경에서도 효과적인 작업이 가능하다는 판단과 HTML, CSS, JavaScript로 파일을 ..

벌써 JavaScript 이론 시간의 마지막 단계인 Ajax입니다. 제가 처음 Ajax를 경험했던 건 Django 수업 때 같아요. 그때는 이게 무슨 말인가 했었는데 오랜만에 들어도 이게 무슨 소리인가 싶긴 했었습니다. 그래도 탄탄하게 이론을 다잡고 실습을 통해 직접 코드를 만져보면 괜찮아지겠다란 자신감은 품고 있어요 :) AJAX (Asynchronous Javascript And XML) 비동기식 JavaScript와 xml의 약자 JavaScript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고 페이지의 일부만을 위한 데이터를 로드하는 기법 = JavaScript를 통해 ..

안녕하세요, 오랜만에 글을 쓰는 것 같네요. 저번에 말씀드린 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 속성값을 가진 가장 가까운 부모의 박스 내..