FE개발 공부 시작: 23년 4월 10일

1. 에러 발생 모듈화하는 과정에서 맞이한 수많은 에러 중 하나.. 모듈은 정말 개복치 급이었다. 뭐만 하면 에러나고 이것도 싫어 저것도 싫어 징징ㅉㅉ 아무튼 전엔 잘 동작하던 코드가 모듈로 쪼개니까 onclick이벤트로 걸어놨던 function들이 동작하지 않음 [에러메세지] ...is not defined at HTMLButtonElement.onclick 2. 내가 시도해본 것들(중요, 자세히) 구글링.. 3. 어떻게 해결했는지 기존의 인라인 이벤트를 addEventListener 메서드를 통해 이벤트 등록하는 방식으로 변경 4. 뭘 새롭게 알았는지(중요, 자세히) tag의 onclick 이벤트 핸들러는 전역(global)함수만 찾기 때문에 id나 class로 이벤트 처리해서 함수를 호출하는 방식으..

문제 위 샘플파일의 app.js에서 수정하기 구현 1. 남아있는 숫자(남은 기회)를 보여줄 수 있도록 해당 영역을 작성해주세요! 구현 2. 유저에게 메세지를 보여줄 수 있도록 해당 영역을 구현해주세요 구현 3. 유저가 원의 크기로 정답을 유추하기 쉽도록 showCircle 함수를 이용해서 해당 부분을 구현해주세요 showCircle 함수의 "작업"이 끝나면, 해당 div에 원의 이름을 입력해주세요 내가 작성한 코드 [app.js] let randomNumber = parseInt(Math.random() * 100 + 30); // DOM 관련들은 보통 변수명 앞에 $기호를 붙이기도 합니다. const $submitButton = document.querySelector('#submitButton'); ..

문제 이번 주차의 문제는 아래의 코드를 async/await 로 리팩토링 하기 입니다. class HttpError extends Error { constructor(response) { super(`${response.status} for ${response.url}`); this.name = 'HttpError'; this.response = response; } } function loadJson(url) { return fetch(url) .then(response => { if (response.status == 200) { return response.json(); } else { throw new HttpError(response); } }) } function narutoIsNotOtaku..

문제 출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요 주의사항 : 브라우저에서 테스트해주세요(Chrome → 개발자 도구 → 콘솔에 입력하여 실행) var fullname = 'Ciryl Gane' var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; }, getLastName: (function() { ret..

문제 가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요 var user = { name: "john", age: 20, } var getAged = function (user, passedTime) { // 여기를 작성해 주세요! } var agedUser = getAged(user, 6); var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { console.log("Failed! user2 doesn't exist!"); } else if (user1 !== user2) { console.log("Passed! If you become older, you will b..

문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 내가 작성한 코드 이번에도 문제설명이 따로 제공되는지 모르고 문제자체만 읽고 풀어버려서 문제..

문제 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. https://school.programmers.co.kr/learn/courses/30/lessons/76501 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 내가 작성한 코드 프로그래머스 링크가 있는지 모르고 문제만 읽고 풀었더니, 문제를 잘 못 이해해서 풀어버렸다 ㅎ ㅋ let absolut..

문제 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. https://school.programmers.co.kr/learn/courses/30/lessons/12916 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. pr..

클로저(Closure) outer는 이 함수가 실행될 때의 렉시컬 환경을 갖고 있음 즉, 이 함수가 실행될 때 당시의 변수 정보(당시의 outerFunc() x는 10이었음)나 이런 것들이 들어있다 함수가 선언된 렉시컬 환경!!! 함수가 선언될 당시의 외부 변수 등의 정보!! 렉시컬 스코프 1. JS 엔진은 함수를 어디서 '호출' 했는지가 아니라 어디에 '정의'했는지에 따라서 스코프(상위 스코프)를 결정한다. 2. '외부 렉시컬 환경에 대한 참조값' => outer 함수 정의가 평가되는 시점!!!에 결정된다 const x = 1; // outerFunc내에 innerFunc가 // '호출'되고 있음에도 불구하고 // 선언은 밖에서 했기 때문에 scope를 공유하지 않음 // innerFunc()에서는 o..

Class는 객체를 생성하기 위한 일종의 템플릿. Class를 생성하기 위해서는 class 키워드를 사용 new 키워드를 사용하여 Class의 인스턴스를 생성 Constructor는 Class의 생성자 함수입니다. 생성자 함수는 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 합니다. constructor 키워드를 사용하여 정의합니다. constructor 메소드는 name과 age를 인자로 받아 this.name과 this.age 속성을 초기화합니다. class Car { // 모든 클래스는 생성자함수가 있어야 함 // 생성자함수답게 함수 모양을 갖춰야 됨 // 필수값 넣기 : 필수 요소들을 반드시 넣어줘야됨. constructor(){} 생성자에게 이것을 넣어줌. 매개변수 자리에 필수로 넣어야되..