꿈소년의 개발 이야기

스터디 그룹에 대한 정보를 얻은 게 아마도 1월이였던 것 같다.X 에서 알게 되서 디스코드에 들어와서, 책 확인한 후 구매한 다음에 인증 받아서 스터디 참가 신청한 게 엊그제 같은데...이렇게 오늘 마무리까지 하게 됐다. 나는 풀스택 개발을 해야 하는 상황이라 준비가 좀 필요했다.15년 경력의 앱 개발자였지만 시대는 바뀌고 나도 변화해야 한다.한번도 생각해본 적도 없고, 들여다 볼 생각도 안한데다가 대학 졸업 이후로 본 적도 없는 HTML, CSS, JS 를 다시 하려고 해도이미 기억이 없는 나에게는 그냥 하는 건 시간 낭비가 크다고 판단했다.원래 나는 기초 위에 쌓아 나가는 형태를 좋아하는지라, 그렇게 하지 않으면 내 궁금증 때문에 계속 찾아볼 것이고...그러면 그 시간이 너무 오래 걸릴 테니, 차라리..

DAY 30🔖 오늘 읽은 범위 : 📢2/13(금) 마지막 진도표 알림▶️공부 내용: Do it! 실전 프로젝트 - 넷플릭스 사이트 따라 만들기▶️쪽수: 679쪽[QR코드]😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**디자인 기획실제 서비스를 바탕으로 디자인 기획하기구조 해석 → 구성 계획으로 진행.개발 환경 만들기헤더 영역 만들기배너 영역, 멤버십 영역 만들기선택 가이드 영역 만들기FAQ 영역 만들기푸터 영역 만들기영역마다 사용할 id 들을 미리 생각해 두기. class 보다는 id로 앵커 메뉴에 사용하므로 크게 묶는 영역에는 id 를 지정하는 것이 좋음.구현 실습 진행https://github.com/dreamboy1339/Bitflix🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**..

DAY 29🔖 오늘 읽은 범위 : 📢2/12(목) 진도표 알림▶️공부 내용: 19 문서 객체 모델(DOM) 다루기(3)▶️쪽수: 670~678쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**class 속성 추가 • 삭제하기class 선택자의 다양한 활용.한 요소에 여러가지 클래스 스타일 적용할 수 있음.스타일을 추가하거나 삭제하거나.토글 방식도 할 수 있음.classList 프로퍼티웹 요소에 사용한 클래스 속성들을 보여줌. document.querySelector('h1').classList // DOMTokenList ['drawBorder', value: 'drawBorder']목록 항목들에서 확인하기 document.querySelectorAll("ul > li")[2].classL..

DAY 28🔖 오늘 읽은 범위 : 📢2/11(수) 진도표 알림▶️공부 내용: 19 문서 객체 모델(DOM) 다루기(2)▶️쪽수: 644~669쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**DOM 에 이벤트 처리기를 연결하면 HTML 태그와 스크립트 코드를 분리할 수 있음.복잡한 프로그램을 관리하기 편해짐.DOM 요소에 함수 연결하기간단한 이벤트 처리 함수 연결하기 // 이미지 클릭 시 실행 함수 작성하기. let cat = document.querySelector('#cat'); cat.onclick = () => alert('이미지 클릭!!'); //------------------------------------------ // 이미지 클릭 시 실행 함수 이름 지정하기. let..

DAY 27🔖 오늘 읽은 범위 : 📢2/10(화) 진도표 알림▶️공부 내용: 19 문서 객체 모델(DOM) 다루기(1)▶️쪽수: 632~643쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**문서 객체 모델DOM : document object model자바스크립를 사용하는 이유 : 조건이나 동작에 맞게 웹 문서 전체 또는 일부분이 동적으로 반응하도록 만들기 위함.웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법.웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 객체로 정의함.DOM 트리DOM 으로 어떻게 표현되는가?문서 안의 요소들의 부모-자식 관계를 반영.각 요소에서 사용한 내용과 속성도 자식으로 나타냄.이러한 트리 구조를 ‘DOM 트리’ 라고 한..

DAY 26🔖 오늘 읽은 범위 :📢2/9(월) 진도표 알림▶️공부 내용: 18 자바스크립트와 객체▶️쪽수: 589~630쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**자바스크립트 객체객체 : 프로그램이 인식할 수 있는 모든 대상에 대한 개념.사실 세계와 관념 간의 맵핑.내장 객체(Built-in object) : 자바스크립트에서 미리 객체로 정의되어 있는 객체.문서 객체 모델(DOM) : 웹 문서 자체에 대한 객체. 포함된 이미지를 비롯한 요소들도 각각 별도의 객체.웹 브라우저 객체 : 웹 브라우저에서 사용하는 정보에 대한 객체.사용자 정의 객체 : 사용자가 직접 만들어 정의한 객체. let book = { title: "Javascript", pages: 500, }객..

DAY 25🔖 오늘 읽은 범위 : ☃️2/6(금) 진도표 알림❄️공부 내용: 17 함수와 이벤트(2)❄️쪽수: 570-586쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**재사용할 수 있는 함수매개변수, 인수, return매개변수 : Parameter인수 : Argumentreturn : 값을 반환한다.매개변수 기본값 지정하기 function multiple(a, b = 5, c = 10) { return a * b + c; }익명 함수이름 없는 함수. // 익명 함수 function(a, b) { return a + b; }함수 자체가 Expression(식) 이다.그래서 변수에 할당할 수 있다.다른 함수의 매개변수로 사용할 수 있다.함수 간에 실행 순서를 제어할 때..

DAY 24🔖 오늘 읽은 범위 : ☃️2/5(목) 진도표 알림❄️공부 내용: 17 함수와 이벤트(1)❄️ 쪽수: 556~569쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**함수alert() 함수 ⇒ 내장 함수 : 자바스크립트에서 미리 만들어 놓은 함수.필요한 명령들의 묶음.함수 선언 또는 함수 정의. function addNumber(a, b) { let sum = a + b; alert(sum); }함수 이름을 사용하는 것 ⇒ 함수를 호출한다 / 함수를 실행한다💡함수 선언과 실행 순서웹 브라우저에서 자바스크립트 코드 가운데 함수 선언 부분을 가장 먼저 해석함.어느 곳에 함수를 선언해 놓아도 위치에 상관없이 함수를 실행할 수 있음.선언 위치는 영향을 주지 않음.보통 앞이..

DAY 23🔖 오늘 읽은 범위 : ☃️2/4(수) 진도표 알림❄️공부 내용: 16 자바스크립트 기본 문법❄️ 쪽수: 508~554쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**기본 문법변수자료를 담아두는 공간.용도재사용성가독성변수 선언특정 값이나 식, 문을 할당할 수 있음.let width;let height;width = 200;height = 50;let area = width * height;console.log(area);상수 선언한번 값을 할당하면 변경이 불가함. const PI = 3.14; let radius = prompt('반지름 입력해라~'); let area = PI * radius * radius; console.log(area);변수 ..

DAY 22🔖 오늘 읽은 범위 : ☃️2/3(화) 진도표 알림❄️공부 내용: 15 자바스크립트와 첫 만남❄️ 쪽수: 486~506쪽😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**자바스크립트의 역할웹의 요소를 제어한다.스타일의 변경이나 움직임 제어.ex) 메뉴 - 하위 메뉴 노출, 탭 구성, 회원 가입, 상품 주문, 입력 정보 유효성 체크, 마우스나 키보드 동작 제어 반응 등등웹 애플리케이션사용자와 실시간 정보 처리.다양한 라이브러리React, Angular, Vue.jsD3.js, DOM 조작JQuery서버 개발Node.js : 자바스크립트로 백엔드 개발을 할 수 있도록 만듬.기존 서버 개발 언어는 PHP, 자바, 닷넷이나 자바스크립트로 서버개발 영역을 확대함.웹 브라우저와 자바스크립트웹 브라우..