본문 바로가기
반응형

전체 글

 (115)
[팀 프로젝트] 영화 검색 사이트 회고 Keep (현재 만족하는 부분) 😁적극적인 피드백모르는 부분이나 로직이 생겼을 때 팀원들과 공유해 문제를 해결해 나아가는 모습이 좋았습니다. 역할 분담역할 분담이 잘 된 것 같아 기능 개발을 순탄하게 진행했던 것 같아서 좋았습니다! 네이밍 컨벤션 및 주석네이밍 컨벤션을 정하고 시작해서 변수명이나 함수명에서 충돌이 발생하지 않아서 좋았습니다! 그리고 주석을 적재적소에 잘 사용해 코드를 이해하는데 도움이 많이 됐습니다! 마감 시간 준수제시간에 제출하는 게 다하지 못 하더라고 중요한 것이었는데 프로젝트 구현사항에 버그가 없이 완벽하게 구현사항을 해결하고 제출했다는 점에서 좋았습니다!  Problem (불편하게 느꼈던 부분) 😥초기 세팅각자 다른 prettier를 사용하여 공백이나 여백이 달라 머지 시 문제..
javascript 심화 7 (클로저) 클로저 📖1. 개념`클로저`는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 2. 렉시컬 스코프어디서 `호출했는지`가 아니라 어디에 `선언`했는지에 따라서 상위 스코프가 결정되는 것입니다!const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo(); // 1bar(); // 1 bar 함수는 foo 함수 내부에서 `호출`됐지만 전역에서 `선언`되었기 때문에 전역변수 x를 참조하게 돼서 1을 출력하게 됩니다! 3. 함수가 선언된 렉시컬 환경간단하게 설명하면 `클로저`란 외부 함수의 변수에 접근할 수 있는 내부 함수입니다!function outerFunc() { // 외부 함수의 변수 var x..
[트러블 슈팅] 영화 검색 사이트 (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가..

티스토리툴바