본문 바로가기

분류 전체보기

 (114)
팀 프로젝트 - 영화 검색 페이지 빌드업 (240731~240807) tmdb 영화 api 를 불러와 만든 영화검색 페이지 개인과제에서 팀원 중 1명의 과제를 빌드업하여 리뷰, 상세페이지, 정렬 등 기능들을 추가한 첫 팀 프로젝트 ■  배포링크 👉 바로가기 1. 와이어프레임 제작figma 링크프로젝트의 필수 구현 기능들을 넣어서 메인페이지와 상세페이지, 리뷰작성부분, 정렬 등 전체적인 구조를 잡았다.  2. 역할 분담팀장메인페이지 영화카드 정렬기능 구현 (최신순, 인기순, 별점순)팀원1상세 페이지 영화 리뷰 작성 기능 구현팀원2메인페이지 영화카드 클릭 시 상세페이지 이동 기능 및 영화 포스터 슬라이드 기능 구현팀원3메인페이지 업버튼 (스크롤) 기능, 검색 추가 기능 구현팀원4 (나)상세페이지 구현 (타이틀, 이미지, 줄거리, 평점 등)  3. 내가 맡은 기능 : 상세페이..
분수의 덧셈 문제첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항0  입출력 예numer1denom1numer2denom2result1234[5, 4]9213[29, 6] 입출력 예 설명#11 / 2 + 3 / 4 = 5 / 4입니다. 따라서 [5, 4]를 return 합니다.#29 / 2 + 1 / 3 = 29 / 6입니다. 따라서 [29, 6]을 return 합니다. ■  문제 이해하기■  코드로 작성// 1. 분모덧셈// 2. 분자분모의 최대공약수로 나누기fun..
얕은복사, 깊은복사, 구조분해할당 ■  얕은복사외부 객체만 복사되고 내부 객체는 참조 관계를 유지하는 복사 ☛  ... 연산자(스프레드 문법) : 기존 객체의 속성을 새 객체에 대입할 때 사용    배열은 [ ...배열 ]    /    객체는 { ...객체 } 로 사용 ☛  concat( );  , slice( );  : 배열 메서드 사용   (예시)      const array = [ { a : 'b' }, { c : 'd' } ];    const light = array.slice();  메서드의 인수로 아무것도 넣지 않으면 됨 ☛  for ~ in 구문 : 객체의 모든 프로퍼티에 접근    객체를 복사 한 다음, 복사를 완료한 객체의 프로퍼티를 변경  ■  깊은복사외부 객체 뿐만 아니라 내부 객체(중첩)까지 참조 관계가 끊기면..
Promise / async & await Promise 는 데이터를 주고받는 약속이다. [ promise 의 3가지 상태 ]1.  pending (요청중) - 요청을 한 상태2.  fulfilled (성공) - 완료됨3.  rejected (실패) 우리가 코드에서 비동기 관련 처리를 한다.  =  'promise' 객체를 이용하여 코딩을 한다.[ promise 를 핸들링 할 수 있는 방법 중 큰 2가지 ]1.  then,  catch2.  async,  await ■  fetch의미 : 알을 품다.외부로부터 데이터를 가져와서 품고있는 것 = 데이터를 외부로부터 요청하는 것 ■  async,  await * JSON Placeholder 로 test 해보기// await 을 가지고 있는 함수를 가지기 위해서는 그 함수 앞에 async 가 있어야 ..
쿼리스트링과 URLSearchParams 어제 시작한 팀프로젝트에서 영화 상세페이지 구현 부분을 맡게 되었다.기본 메인페이지의 영화 이미지를 클릭하면 이미지에 있는 id 값을 받아와서 클릭한 영화와 일치하는 정보의 상세페이지가 나오도록 구현하기 위해서 이것저것 찾아보며 새로 공부한 내용들을 정리해보자. ■  쿼리스트링(?page=3)http://127.0.0.1:5500/?name=John&age=20http://127.0.0.1:5500/detail.html?id=238 쿼리스트링이란?물음표? 뒤에 키 = 값 & 키 = 값 형식으로 주소에 데이터를 붙여줄 수있다.데이터 쌍이 여러개 일때는 & 로 구분!주소에 데이터를 전달하는 가장 쉬운 방법, 서버도 알아들을 수 있음 쿼리스트링의 정보는 location 의 search 에 있다.console...
Git & Github 복습 및 협업 개념 내용 정리 " branch === 복사본 "▪️  branch 생성 명령어▪️  branch 확인 명령어   git branch 브랜치이름   git branch▪️  branch 이동 명령어 (2가지)▪️  branch 만들면서 이동 (2가지)▪️  branch 합치는 명령어 - git switch 브랜치이름 - git checkout 브랜치이름 - git switch -c 브랜치이름 - git checkout -b 브랜치이름  ① git switch 최종브랜치이름(main)  ② git merge 합칠브랜치이름(login)   * 터미널에서 말고 github에서 합칠 것!     (코드 확인 및 재앙을 피할수있다!) * git switch/ git checkout 차이 ?  : 디테일하게 설명하자면 너무 어렵고..
논리연산자와 배열 메서드 forEach 연습 ■  논리합연산자(||) OR피연산자 중 하나 이상이 true 인 경우 true 반환, 나머지의 경우 false 반환console.log( true || true );   // trueconsole.log( false || true );  // trueconsole.log( true || false );  // trueconsole.log( false || false ); // false  ■  논리곱연산자(&&) AND피연산자 모두 true 인 경우 true 반환, 나머지의 경우 false 반환console.log( true && true );   // trueconsole.log( false && true );  // falseconsole.log( true && false );  // falseco..
배열 메서드 정리 ■  push : 배열에 값 추가기존 배열의 뒤에 삽입const fruits = ["사과", "바나나"];fruits.push("포도");console.log(fruits); // [ '사과', '바나나', '포도' ]fruits.push("키위");console.log(fruits); // [ '사과', '바나나', '포도', '키위' ]  ■  pop : 가장 끝에 있는 요소를 꺼내줌꺼내서 return 해줌const arr = [30, 1, 2, 5, 40];const test = arr.pop();console.log(test); // 40  ■  forEach  각 배열 요소에 대해 제공된 함수를 한 번씩 실행함const fruits = ["사과", "바나나", "키위"];// for문으로 표현f..

티스토리툴바