FE
-
비동기FE 2023. 5. 16. 19:46
동기 (synchronus) : JavaScript의 동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것' 비동기 (asynchronous) : JavaScript의 비동기 처리는 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것' 타이머 관련 API setTimeout (callback, millisecond) 일정 시간 후에 함수를 실행 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초) return 값: 임의의 타이머 ID setTimeout(function () { console.log('1초 후 실행'); }, 1000); // 123 clearTimeout (timerId) setTi..
-
UnderbarFE 2023. 5. 15. 22:45
// forEach ==> 똑같은 역할을 하는 함수 //each를 잘 구현하면 얘를 그대로 재사용해서 리턴한 결과값을 모은 새로운 배열을 반환하도록 만들면 // 배열메소드 forEach와 다르게 입력값으로 객체도 받는다. // _.each는 명시적으로 어떤 값을 리턴하지 않습니다. _.each = function (collection, iteratee) { if(Array.isArray(collection)) { for (let i= 0; i < collection.length; i++) { // for문을 이용해서 배열 전체를 순회한다 iteratee (collection[i], i, collection); } } else if (typeof collection === 'object') { for (l..
-
프로토타입FE 2023. 5. 12. 17:32
JavaScript는 프로토타입(Prototype) 기반 언어이다. 프로토타입은 원형 객체를 의미한다. 객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용한다. let kimcoding = new Human('김코딩', 30); // 속성 kimcoding.age; kimcoding.gender; // 메서드 kimcoding.eat(); kimcoding.sleep(); DOM과 프로토타입 브라우저에서 DOM을 이용하면 document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있다. 이렇게 생성된 div 엘리먼트는 HTMLDivElement라는 클래스의 인스턴스이다. 모든 클래스의 조상은 Object가 존재한다. 인스턴스의..
-
객체 지향FE 2023. 5. 11. 19:47
메서드 호출은 객체.메서드()와 같이 객체 내에 메서드를 호출한다. 메서드 호출 방식을 이용할 때는 화살표 함수를 쓰지 않는다. 객체 지향 프로그래밍 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 하나의 모델이 되는 청사진(blueprint) ➡️ class 청사진을 바탕으로 한 객체(object)를 만드는 ➡️ instance (object) 객체는 일반적인 함수를 정의하듯 만든다. ※ 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하여 일반 명사로 만들고 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작한다. function Car (color) { } ➡️ class let avante = new Car ('blue'); let mini..
-
고차함수FE 2023. 5. 10. 18:54
일급객체 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로써 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성 값으로 저장할 수 있다. 함수를 데이터처럼 다룰 수 있으며 변수에 저장된 데이터를 전달 인자로 받거나, 리턴 값으로 사용할 수 있다. 고차함수 고차함수는 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수이다. 함수는 변수에 저장할 수 있으며 함수를 담은 변수를 전달인자로 받을 수 있다. 함수 내부에서 변수에 함수를 할당할 수 있고 이 함수는 변수를 리턴할 수 있다. 변수에 할당하지 않고 함수를 바로 이용할 수 있는데 어떤 고차 함수에 함수를 전달인자로 전달하고, 고차 ..
-
Section1 회고FE 2023. 5. 9. 14:20
Keep 블로깅 그날 배운 것들 개념이나 깨달았던 것, 내가 어려움을 느꼈던 부분, 힘들었던 감정들을 매일 정리하는 기록을 남기려고 노력함 Problem 수면패턴 못다한 것들을 하다보면 늦게 자는 경우가 많은데 아침에 일어나기가 힘들고 점심시간에 틈내서 자게 됨. 학습방법 단순히 개념만 이해하고 넘어갈 것이 아니라 왜 이렇게 되는지, 정확히 알고 넘어가야 하는데 흐름만 이해하면 넘어가려함. 복습하는시간 이 시간이 제일 중요하고 많이 보내야 하는 시간인데 과제라는 핑계로 못함 문제풀기 코딩테스트는 제일 부족한 부분. 개념을 알고 있어도 코드 구현하는 것이 아직 많이 부족함 Try 점심시간에 자는 것이 습관이 되고 밥 먹는 시간도 불규칙해짐. 이 시간을 잠을 자지 않고 시간표대로 움직이기 이해가 안 되거나 ..
-
아고라스테이츠 만들기2FE 2023. 5. 9. 00:55
결국 js는 구현하지 못하였고 실시간세션 때 알려주신 코드로 dom과 렌더링을 구현할 수 있었다 .. discussionInformation.textContent = `${obj.author} / ${new Date( obj.createdAt ).toLocaleTimeString()}`; discussionAnswered.append(discussionTitle, discussionInformation); const checked = document.createElement("p"); checked.textContent = obj.answer ? "☑" : "◻︎" ; discussionAnswered.append(checked); const ul = document.querySelector('ul.di..
-
아고라스테이츠 만들기FE 2023. 5. 4. 17:33
필수 구현기능 디스커션 나열 기능 script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. CSS 아고라스테이츠 질문 리스트가 중앙으로 와야 합니다. style.css를 수정하여 멋지고 아름답게 나만의 아고라스테이츠를 꾸밉니다. colorhunt, dribbble에서 적절한 색 조합, 디자인을 참고합니다. 디스커션 추가 기능 script.js를 수정하여 디스커션 추가 기능을 구현합니다. section.form__container 요소에 새로운 아고라스테이츠 질문을 추가할 수 있는 입력 폼을 제작합니다. 형식은 자유입니다. 아이디, 본문을 입력하고 버튼을 누르면 실제 화면에 디스커션이 추가되어야 합니다. agoraStatesDiscussions 배열..