JoonDevBlog

10.9(월) ~ 10.15(일) 기간동안 프론트엔드 데브코스 4주차를 보냈다. 이렇게 한 주를 꽉 채운적이 있던게 신교대 훈련소 때 이후로 처음 아닌가 싶은 생각이 든다. 1주일간 배운 내용 & 느낀내용📖 우아한 형제들 사옥탐방 Simple TodoList 구현 프로미스, 제너레이터와 async, await 스터디 fetchAPI, historyAPI 강의 및 실습 블로그 레이아웃 수정 커피챗 라이브 코드리뷰 광휘님 특강(블로그, 개발자의 자세) TodoList에 User추가 + fetchAPI, localStorage, historyAPI 추가 1.우아한 형제들 사옥탐방 월요일은 한글날이었지만 데브코스는 쉬지않는다... 멘토님이 쉬시는 날이었는데 잠실 롯데타워에 있는 우아한 형제들 사옥을 구경시켜주셨..

공부한 내용 📖 제너레이터 스터디 - 직접 출제한 헷갈리는 문제! 강의 - fetch api를 활용하여 json데이터를 화면에 출력하기 궁금한 내용/부족한 내용🤔 api를 자유롭게 활용하기 위한 promise및 fetch api 활용 능력이 부족하고, 훈련이 되어야 하는 부분인 것 같다. 느낀점✍ fetch api에 들어오니 강의 내용이 확 뛰어서 실습을 많이 따라가며 익히는게 최우선 인것 같다. 실습을 따라칠 땐 이게 의미가 있는건가? 싶었지만 몇 번 비슷한걸 치다보니 다른걸 개발할 때에도 대략 어떤식으로 초기상태를 설정하고 렌더링을 할 것인지 감이 잡히는걸 보니 클론코딩도 의미가 크다.

모던JS 제너레이터 챕터를 학습하며 예제를 직접 만들고, 헷갈릴만한 문제를 정리해보았다. 스터디때도 팀원들에게 도움이 많이 된 것 같아 블로그에도 글을 남겨본다. 문제1 function* genFunc(){ const x = yield 1; const y = yield (x+10) yield x+y } const gen = genFunc() 위 코드에 대하여 gen.next() gen.next(10) gen.next(30) 를 실행하였을 때 반환되는 객체의 형식은 {value: @, done: @} 입니다. 마지막 gen.next(30) 대하여 예상되는 반환객체를 작성해주세요. 답: {value: 40, done: false} 문제2 function* genFunc(){ const x = yield 1;..

공부한 내용 📖 Module index.html에 추가한 많은 script파일은 main.js에 묶고 export default와 import를 통해 모듈화 할 수 있다. 비동기와 promise, async await를 통한 실습 더미데이터를 가진 todoList를 만든 후, XMLRequest를 통해 todoList를 외부에서 api호출을 통해 받아오기. export function request(url) { return new Promise((res, rej) => { const xhr = new XMLHttpRequest(); xhr.addEventListener("load", (e) => { if (xhr.readyState === 4) { if (xhr.status === 200) { res(J..

프로미스가 나오게 된 배경 이전까지 학습을 하며 Ajax와 RestAPI에 대해 학습하였고, 이를 토대로 어떤 url에 GET요청을 보내 데이터를 출력해보려고 한다. // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; }; // id가 1인 post를 취득 ge..

9월 19일에 시작한 데브코스가 어느덧 3주차를 지나 4주차를 향해간다. 1,2주차는 한 주를 채운적이 없지만 이번엔 꽉 채운 한 주를 보냈고 어떤 한주를 보냈는지 돌아보려고 한다. I. 1주일간 배운 내용 & 느낀내용📖 1.알고리즘 3주 2일차까지 진행하며 알고리즘이 마무리 되었다. 백트래킹 N-Queen 문제 해결 코딩테스트 준비 방법과 유형 파악 시간복잡도로 문제 유형을 파악하는 방법, 일관성 있게 코드를 짜는 법 등.. 2. 자바스크립트 VanillaJS를 시작하기 전 JS 사전 퀴즈를 통해 박살이 나고 겸손해졌다. This와 클로저, 호이스팅에 대해 다시한번 다루는 시간이 되었다. DOM 실습을 시작하였고, 이 과정에서 즉시실행함수의 형태와 호이스팅의 실 사용 예시를 접할 수 있었다. 선언형 프..

공부한 내용 📖 명령형프로그램 명령형 프로그램은 컴퓨터가 수행할 명령을 순서대로 써놓은 것. '어떻게 구현하는가' 가 초점이 맞추어져있다. 내가 써본 언어중 C가 대표적이다. 선언형프로그램 명령형과 반대되는 개념 '어떻게 하느냐' 라기보단 '무엇을 나타내냐'에 초점. HTML은 대표적인 선언형 방식. 어떤 태그들을 나열해서 나타낼 것인지에 대해 초점이 맞춰져있고 '어떻게 렌더링을 구현하냐'에 초점을 두었다. 가장 간단하게 배열을 예시로 들면 for문과 index를 활용한 반복문에서 forEach를 활용하는 반복 메소드를 활용하는 것이다 선언형 프로그래밍 실습 버튼을 클릭시 버튼에 삭선이 on/off되는 기능을 명령형 프로그래밍으로 시작하여 점차 선언형으로 바꿔나가는 작업을 하였다. 다음은 html 뼈대 ..

공부한 내용 📖 생성자함수의 올바른 사용으로 객체를 생성하는법 function Car(name, brand) { this.name = name; this.brand = brand; } const Kia7 = new Car("K7", "KIA"); console.log(Kia7.name); new를 붙여준다. 즉시실행함수의 사용방법과 뒤의 소괄호에 들어가는게 인자로 들어가서 매개변수로 전달된다. this의 범위는 객체 내에서 보유여부를 통해 판단 var, let, const의 차이 클로저를 사용한 은닉화 복습 이벤트 캡처링과 버블링 아래 코드는 fruits라는 id를 가진 ul아래에 one이라는 id를 가진 div 아래에 two라는 id를 가진 span을 넣고 fruits->one->two->two->on..

공부한 내용 📖 브라우저 렌더링 원리(DOM, CSSOM, JS엔진 제어권) DOM에 접근하여 조작할 수 있는 방법들 DOM조작 실습 - 간단한 텍스트 에디터 만들어보기 DOM조작과정에서 JS 함수 작성 문법에 의문이 들었고, 즉시실행 함수와 호이스팅에 대해 깨달음을 얻을 수 있었다. DOM을 활용해 실전에서 익히는 호이스팅, 즉시실행함수 위 링크에 포스팅 해두었다. 궁금한 내용/부족한 내용🤔 확실히 자유롭게 DOM을 조작하는데에 아직 미숙한 것 같다. html과 css도 VanillaJS를 공부하며 더 해야겠다. 느낀점✍ 가장 크게 느낀점은 공부하며 도대체 어디에 써야할지 감도 안오고 외워지지도 않는 개념을 계속 익히다보면 언젠가 깨달음을 얻는다는 것이었다. JS를 공부하며 호이스팅과 즉시실행함수가 그..

html,css,JS로 DOM에 접근하여 이벤트를 발생시키는 실습을 하다가 의문을 발견했고, 그 의문을 따라가다보니 이론으로 알고있던 호이스팅과 계속 헷갈리던 즉시실행함수를 익히는 경험을 하여 글을 작성한다. bold라는 className을 가진 버튼을 클릭시 alert가 뜨게 하려고 한다. 원래 하려던 예제의 html은 다음과 같았다. Bold Italic dddd 그리고 JS는 다음과 같았다. (() => { document.querySelector(".bold").addEventListener("click", () => { alert("hello"); }); })(); className이 bold인 Bold버튼을 클릭하면 alert창이 hello가 정상작동하도록 함수를 작성하였다. (css는 임의로..