개발스터디일지

자바스크립트에서 사용하는 콜백 (callback) 함수와 콜백함수를 간결하게 보여주는 promise, promise의 .then 지옥을 벗어나게 해주는 async await에 대해 정리해본다. 비동기 처리란 무엇인가 비동기라는 말을 알기 위해서 동기의 뜻을 알아야한다. 자바스크립트는 맨위에 있는 코드부터 시작해서 아래의 코드까지 차례차례 순서대로 실행이 된다. (= 이를 동기적 처리라고 부른다.) 때문에 무거운 데이터 처리를 하는 코드를 실행하는 경우 시간이 오래 걸리게 되고, 아래에 있는 코드들이 실행되지 못하고 기다리게 된다. 반면, 비동기 처리는 위에 있는 코드들이 모두 처리될 때까지 기다리지 않고 실행되기 때문에 속도 저하를 방지할 수 있다. (비동기는 언제 실행이 되는 지 정확히 알 수 없다) ..

CS 스터디 스파르타클럽 리액트 강의 1주차 자바스크립트 지식 과제 제출 자바스크립트&리액트 지식 팀과제 CS 스터디 오늘 발표 담당이었던 스터디 멤버분이 어제부터 건강상의 이유로 항해를 퇴소했다. 내일은 내가 스터디 발표 차례이기 때문에 맡은 파트(0과 1의 세계) 정리를 마쳤다. 2022.05.20 - [CS 스터디] - [09] 0과 1의 세계 스파르타클럽 리액트 강의 1주차 맥 환경에서 vs코드를 실행하기 위해서는 xcode를 설치해야하는데 자꾸 에러가 나서 일단 노트북 윈도우로 수강을 진행했다. html / css / javascript / dom 에 대한 이야기를 담고 있는데 아래에 있는 자바스크립트 지식 과제 제출로 1주차 인강을 반정도밖에 듣지 못했다. 내일은 1 ~ 3주차를 들어야하는데 ..

프로그래머스 자바스크립트 9번 ~ 15번 오늘의 메서드 slice( ) const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // expected output: Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2));..

https://www.airbnb.co.kr/ 바닐라 자바스크립트로 에어비엔비 웹사이트 클론코딩을 진행했다. 에어비엔비를 선택한 이유 동적인 상단바가 간단해보이지만 간단하지 않을 것 같아서 도전!! 결론 생각보다 훨씬 더 많은 경우의 수가 존재한다.... 1 . html / css 로 정적인 부분들을 퍼블리싱했다. 2 . css / javascript로 메인메뉴를 클릭하면 각각에 해당하는 서브메뉴가 뜨도록 했다. 3 . 서브메뉴 클릭시 선택가능한 옵션창이 뜨도록 했다. (이 부분에서 한번에 실행되어야하는 부분은 아래 4가지 였다.) 3-1 . 각 서브메뉴를 클릭시 해당하는 옵션창 활성화 3-2 . 해당 서브메뉴 아래로 그림자가 생기면서 활성화 3-3 . 다른 서브메뉴와 옵션창은 비활성화 3-4 . 빨간 ..