목표 상기하기 무적권 취업 Keep 밥 먹고 자는 시간 외의 대부분의 시간을 공부하는데 투자한 것.. 번 아웃은 오지 않았고 올 것 같으면 적당히 스트레스 해소를 해줄 생각이다. => 하루의 수면 패턴과 공부 패턴의 유지 (+커피 마시기..) Problem 평소에 잠을 많이 설치고 못 자는 스타일이라서 잠을 많이 못 잔다. 평일에 몰아서 자게 됨. 공부가 끝나고 (대충 2시) 바로 잠에 든다면 충분히 잘 수 있지만 그렇게 안 돼서 컨디션 관리가 약간 힘든 것 같다. 그렇다고 공부 시간을 줄이는 것은 아닌 것 같다. => 수면 부족으로 인한 컨디션 관리? Try 산책이나 달리기를 통해 몸을 더 피곤하게 만들어서 강제로 잠자기? 공부를 길게 잡아서 하는 중인데, 단순히 공부를 하기보다는 세부적인 계획을 짜고..
this this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수(self-referencing variable) 다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 함수 호출 방식 this가 가리키는 값(this 바인딩) 일반 함수로서 호출 전역 객체, strict mode(undefined) 메서드로서 호출 메서드를 호출한 객체(마침표 앞의 객체) 생성자 함수로서 호출 생성자 함수가 (미래에) 생성할 인스턴스 인스턴스가 정확히 누구일까? function Circle(radius) { this.radius = radius; this.getDiameter = function (){ return 2 * this.radius; }; } // 인스턴스..
Descriotion Section 1에서 배운 내용을 총 동원하여 나만의 멋진 아고라 스테이츠를 만듭니다. 배포링크 https://jiwonp12.github.io/fe-sprint-my-agora-states/ My Agora States jiwonp12.github.io Bare Minimum Requirement Self Checklist 스스로 구현 완료한 부분까지 체크하여 제출합니다. ✅ 디스커션 나열 기능 script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. ✅ CSS ✅ 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. ✅ style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다. ✅ colorhunt, ..
아고라 스테이츠 (미완) 사이버 펑크 느낌으로 만들어 보고 싶어서 꾸며보았다.. 근데 아직 디테일한 디자인이 많이 부족한 것 같다. submit버튼을 만들 때 기존에 있던 함수를 활용하지 않고 작성을 했다가 코드가 굉장히 지저분해서 다시 지우고 새로 작성을해주었다. // SUBMIT BTN const inputName = document.querySelector("#name"); const inputTitle = document.querySelector("#title"); const textInput = document.querySelector("#story"); const inputForm = document.querySelector(".form"); const now = new Date(); // I..
유효성 검사 후 회원가입 버튼을 구현하는 과제를 진행하였다! HTML 사용할 수 있는 아이디입니다 아이디는 네 글자 이상이어야 합니다 아이디는 영어, 숫자여야 합니다 영어, 숫자, 특수문자 미포함, 8자 이상 비밀번호가 일치하지 않습니다 회원가입 CSS main.move { transform: translateY(-350%); } body.dark { animation-name: brightness-animation; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes brightness-animation { 0% { filter: brightness(100%); } 100% {..
DOM 모자딥다 추가정리 getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 (live) DOM 컬렉션 객체다. const { childNodes } = $something; // childNodes 프로퍼티 또한 NodeList 객체(live)를 반환한다. Apple Banana Orange const $elem = document.getElementsByClassName("red"); // 이 시점에 HTMLCollection 객체이는 3개의 요소 노드가 담겨 있다. console.log($elem); // HTMLCollection(3) [li.red, li.red..
DOM Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법입니다. (CRUD를 이해한 다음에는 세세한 메서드들을 알아야 합니다.) document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법을 학습합니다. DOM에는 HTML에 적용(APPEND)하는 메서드가 따로 있으니 주의. Create document.createElement..
Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 합니다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있습니다. 하지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것입니다. Koans 문제 중에는 학습하지 않은 개념도 의도적으로 포함되어 있습니다. 페어와 함께 깊게 고민하고, 정답을 설명할 수 있도록 연습해 보세요. 헷갈렸던 부분 it("lexical scope와 closure에 대해 다시 확인합니다.", function () { let age = 27; let name = "jin"; let height = 179; function outerFn() { let age..