본문 바로가기
반응형

공부

 (106)
[트러블 슈팅] 영화 검색 사이트 (TypeError, 애니메이션, 이미지 로딩) [팀 프로젝트] 영화 검색 사이트팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/  요구 사항 📌필수 구mingos-habitat.tistory.com영화 검색 사이트 개발을 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다. 1. TypeError: Cannot read properties of null (reading 'addEventListener')발생한 오류 🔥`common.js`에서 사용하는 formatMovie 메서드를 `detailPag..
javascript 심화 6 (이벤트 루프) 이벤트 루프 📖자바스크립트의 특징이벤트 루프를 설명하기 전에 자바스크립트의 특징에 대해 간단히 알아보겠습니다. ❗중요 키워드 `싱글 스레드`, `비동기` 자바스크립트는 한 번에 하나의 작업만을 처리하기 때문에 싱글 스레드 언어입니다. 비동기로 동작하기 때문에 싱글 스레드임에도 불구하고 동시에 작업을 수행할 수 있습니다.그러나 `비동기로 동작하는 핵심 요소`는 자바스크립트가 아닌 `브라우저`가 가지고 있습니다! 브라우저의 기본 구조 구성 요소`Heap` : 메모리 할당이 발생하는 곳입니다. `Call Stack` : 실행 컨텍스트를 저장하는 자료구조(LIFO)로 함수를 호출하면 Call Stack에 push 됩니다. `Web APIs` : 브라우저에서 제공하는 API로 DOM, AJAX, setTimeo..
슬랙(Slack)에 깃허브(Github) 알람 연동하기 오늘은 Slack에서 Github commit, pull, pr 등 알림을 받을 수 있는 방법에 대해 소개해보려고 합니다! Slack 📖1. Github 설치우선 slack에 접속하셔서 Github App 설치를 해주셔야 합니다. 더보기 -> 자동화 -> github 검색 -> 추가  그리고 액세스 권한 설정을 하시고 허용 버튼을 눌러주시면 됩니다.  2. 레퍼지토리 연결 github를 설치하셨다면 github 앱에 접속해 주시면 됩니다. 채팅창에 알림을 받길 원하는 git repository 주소를 입력해 주시면 됩니다./github subscribe https://github.com/smu06030/movie-app-team12  그리고 `Connect Github account` 버튼을 눌러 Gi..
Git & Github 협업하는 방법 (Pull Request) 실전 가이드 📖1. 초기 세팅초기 세팅이 궁금하시면 아래 글을 읽어주세요 24.07.19 Git 팀 프로젝트 진행초기 세팅을 해야 되는 이유 📖1. 초기 파일 생성초기 세팅을 해야 하는 이유는 프로젝트의 일관성을 유지하고 모든 팀원이 동일한 환경에서 작업할 수 있도록 하기 위해서 진행합니다!index.htmlmingos-habitat.tistory.com  로컬에서 dev 브랜치를 생성해 줍니다.  그리고 push를 통해 github에 반영시켜줍니다.  github 홈페이지에서 `Settings`에 들어가 `Default branch`에 아이콘을 클릭해 줍니다.  `dev`브랜치 선택 후 `Update`버튼을 눌러줍니다.   메인에서 `dev`브랜치가 `default`로 설정된 걸 확인할 수 있습니다..
[개인 과제] 영화 검색 사이트 프로젝트 회고 개인 과제 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app배포 링크 : https://smu06030.github.io/movie-app/ 요구 사항 📌필수 구현 사항✅ 순수 바닐라 자바스크립트 사용✅ TMDB API 인기 영화 데이터 가져오기✅ 영화 정보 카드 리스트 UI 구현✅ 영화 검색 UI 구현✅ javascript 문법 요소를 이용해 구현document.getElementById()document.querySelector()document.createElement()setAttribute()addEventListener()appendChild()preventDefault() 선택 구현 사항✅ CS..
javascript 심화 5 (Promise, async, await) Promise란 📖Promise는 비동기 작업의 결과에 대한 상태를 나타내는 객체입니다. 아래 예시에서 new 연산자로 Promise의 인자로 넘어가는 콜백은 바로 실행됩니다. 내부에서 비동기 작업이 완료될 때 `resolve()`를 호출합니다.new Promise(function (resolve) { setTimeout(function () { var name = '에스프레소'; console.log(name); resolve(name); }, 500);})  Promise 상태`대기(Pending)` : 비동기 함수가 아직 시작하지 않은 상태`성공(Fulfilled)` : 비동기 함수가 성공적으로 완료된 상태`실패(Rejected)` : 비동기 함수가 실패한 상태 Promise가..
javascript 심화 4 (콜백함수) 콜백함수 📖다른 함수가 실행이 끝난 뒤 실행되는(=callback) 함수를 말합니다! 그리고 다른 함수로 인자를 넘겨주는 함수입니다! 즉, 콜백 함수는 다른 함수에 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행하게 됩니다.function func(callback) { callback();}function callback() { console.log("callback 함수입니다.");}func(callback);// 결과 : callback 함수입니다. ❗간단하게 설명하면 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수! 제어권 📖1. 호출 시점콜백 함수의 제어권을 ..
Github Pages 사이트 배포하기 오늘은 Github Pages로 사이트를 배포하는 방법애 대해 소개해 보려고 합니다.우선 github에 push가 되어 있는 걸 가정하고 설명하겠습니다! 사이트 배포하기 📖1. github 이동우선 배포하고 싶은 github 레파지토리로 이동해서 Settings 버튼을 눌러 이동합니다.2. PagesSetting -> Pages 페이지로 들어와 main 브랜치와 /(root)로 설정 후 save 버튼👆을 누르면 됩니다.3. 배포 링크Save 버튼을 누르고 조금의 시간을 기다리면 내 사이트가 배포가 된 걸 확인할 수 있습니다! 😄About 설정 📖1. AboutAbout에 배포된 링크를 넣으려면 오른쪽 위 톱니바퀴 아이콘⚙️을 눌러주세요! Use Your GitHub Pages Website를 ✅체..

티스토리툴바