본문 바로가기

분류 전체보기130

JS : 비동기 처리 & 콜백 공부 II Promise (참고) 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 어떤 함수를 실행할 때, 나중에 이어지는 메소드들을 실행하기로 약속(프로미스)하는 것으로 이해하면 될 것 같습니다. new Promise(resolve, reject)를 통해 선언할 수 있으며, 선언된 결과에 맞는 resolve와 reject인자를 사용할 수 있습니다. 프로미스 객체는 세 개의 상태를 가지고 있는데, Pending(대기), Fulfilled(이행), Rejected(실패)로 나누어 집니다. Pending, Fulfilled, Rejected 프로미스를 처음 선언하면, 해당 메서드는 대기 상태가 됩니다. 프로미스 메서드를 호출할 때, 콜백 함수를 선언할 수 있는데, 이 콜백 함수의 인자는 성공시(resolve.. 2020. 8. 24.
JS : 비동기 처리 & 콜백 공부 I 동기/비동기 자바스크립트는 한 번에 한 이벤트만 처리할 수 있는 single-threaded 언어로, 기본적으로 위에서 아래로 코드가 실행됩니다. 이를 동기적 (Synchronous) 이라고 하는데, 해당 방식에서는 먼저 선언된 코드가 실행되기 전에는 이후에 선언된 코드가 실행되지 않고 기다립니다. 이 때문에 많은 양의 데이터를 서버 쪽에서 불러오는 경우에 문제가 발생할 수 있습니다. // ajax(..) is some arbitrary Ajax function given by a library var response = ajax('https://example.com/api'); console.log(response); // `response` won't have the response 위 코드의 경우,.. 2020. 8. 24.
wecode +5 (8/22) 배운 것/개발한 것/정리한 것 - JS DOM GET API repl.it 완료 - JSDOM, event, AJAX, JSON 복습 후 블로그 정리 (링크) - JS fetch 블로그 정리 (링크) - 웹사이트 뜯어보기 (웹기반 비즈니스) : 핀터레스트, 프로덕헌트 회고 이미 알고 있다고 생각한 개념을 깊게 파고 들어가는 것이 더욱 필요하다. 잘 되지 않을때는 책이나 유튜브를 보면서 머리를 좀 식히거나, 잘 만들어진 웹사이트를 들어가보면서 구조같은 거를 보는게 도움이 될 것 같다. 내일 할 것 오전 : React 공부 (가볍게 시작하기 위해 책, codecademy 수업) 오후 : 솔지 책상 갖다주기 저녁 - 축구 - 챔스 결승 시청 (4시) 기다리며 코딩 공부 2020. 8. 22.
JS : Event, AJAX, JSON Event HTML 문서를 객체화하는 DOM으로 인해, 자바스크립트와 같은 스크립팅 언어를 통해 HTML 문서 내에 특정 요소에 접근할 수 있게 됐다. 문서 전체를 다시 로딩하는 대신, 특정 요소에 접근 후 event를 부여하여 일부분만 변경할 수 있다. 클릭 이벤트, 마우스 이벤트, 스크롤 이벤트 등의 이벤트를 감지하고 그에 맞는 함수를 실행할 수 있다. Addeventlistener 특정 요소에 이벤트를 부여할 때 사용하는 함수. 요소.addEventlistener (이벤트 종류, 함수)의 형태로 지정할 수 있다. 감지할 수 있는 이벤트의 종류로는 : click, dblclick, mousedown, mouseenter, mousemove 등이 있다. (참고) AJAX ajax는 Asynchronou.. 2020. 8. 22.
wecode +4 로그 (8/21) 배운 것/개발한 것/정리한 것 1. 오전 - 개발자도구 비디오 강의 시청 (정리) - 백엔드 개발자는 무엇을 하는가 세션 2. 오후 - 개발자도구 팀별 과제 - JS DOM Repl.it 완료 (내일 DOM, event, AJAX, JSON 블로그 정리) - JS Async/await 강의 수강 (드림 코딩) - JS Promise 복습 3. 블로깅 (저녁) - CSS Flex I - TIL 블로깅 회고 수업이나 공부를 한 후 정리하는 과정에서 더 많은 공부가 된다. 내일은 JS 비동기 실행과 관련한 세가지 블로그 (비동기 처리와 콜백 함수, 프로미스, async/await) 관련하여 정리를 꼭 해보고자 한다. 내일 할 것 오전 : 솔지 병원, 솔지랑 점심 오후 : 민영/서용 저녁(삼성역) 저녁(위코드).. 2020. 8. 21.
CSS : flexbox I Flexbox flexbox는 웹페이지의 레이아웃을 지정하는 방식 중 하나로, 웹페이지 내의 요소들을 부모 컨테이너의 row와 column을 기준으로 배치하는 방식입니다. 기존에는 웹사이트의 레이아웃을 표현하기 위해 CSS의 float, inline block등을 사용했지만, flexbox가 도입된 이후 컨테이너 내의 요소들 사이의 간격을 빠르게 계산해서 요소들을 분산시키는 작업, 자식 요소 내의 컨텐츠의 수직/수평 맞추기 등의 작업을 빠르게 수행할 수 있게 되었습니다. Flexbox 선언 웹사이트 내의 모든 요소가 flexbox가 될 수 있습니다. CSS 파일 에서 display : flex; 를 선언하면 적용됩니다. * display: inline-flex를 사용할 경우, 선언한 요소는 inline .. 2020. 8. 21.
개발자 도구 : 팀별 과제 🥨 프레즐팀 - Console panel 화면을 새로고침 해도 콘솔이 지워지지 않고 남게 해주세요. console.log() / console.error() / console.warn() 콘솔에서 warn 내용만 제외하고 보는 방법 다른 패널(ex. Elements panel)에서 콘솔 패널 같이 보는 방법 1. 화면을 새로고침 해도 콘솔이 지워지지 않고 남게 해주세요. 크롬 개발자 도구 우측 상단의 톱니바퀴(설정) 클릭하여 'preserve log' 체크 설정 시 브라우저 새로고침하여도 콘솔 로그 보존 더보기 기록 유지 콘솔 맨 위에 있는 Preserve log 확인란을 활성화하여 페이지 새로고침 또는 변경 사이에 콘솔 기록을 유지합니다. Console을 지우거나 해당 탭을 닫을 때까지 메시지가 저장됩.. 2020. 8. 21.
크롬 개발자도구 1. option + command + i : 브라우저에서 개발자도구 단축키 2. 문서 내 이미지 등 요소 바로 확인하기 - 개발자 도구 상단 좌측에 select element from browser to inspect 버튼 클릭 후 요소 클릭 3. elements 패널 - 문서의 html, css 요소 확인 가능 - css의 경우 바로 수정하여 변동사항 확인 가능 3. console 패널 - 간단한 Javascript 테스트시 활용 - function 작성시 shift + enter로 줄바꿈하여 코드 작성 가능 4. source 패널 - 해당 사이트의 폴더 트리 구조, 파일, 소스 확인 가능 - 디버깅 : 소스 패널의 JS 파일 내에서 코드를 선택시 해당 코드까지만 실행하고 멈춤. 소스 코드의 문제를 .. 2020. 8. 21.
wecode +3 로그 (8/20) 위코드 +3 (8/20) 배운 것/개발한 것/정리한 것 1. 오전 : 가구 픽업, 독서 2. 오후 - JS Repl.it 완료 - 프론트엔드 세션 (프론트엔드 개발자가 할 수 있는 일) 내일 할 것 아침 : 개발자도구 비디오 강의 시청, 오전 세션(백엔드) 오후 : JS promise 블로깅, async/await 공부하고 블로깅 오후 : Repl.it JS DOM, codecademy react 공부해보기 * 맥북 모니터 HDMI 케이블 구매 2020. 8. 21.