영화 데이터를 보여주는 서비스는 이전에도 해보았지만 이번에는 검색 기능을 비롯하여 데이터를 다루는 방식에 대해서도 고민하게 만들었다.API 호출을 해서 데이터를 시각화 하는 것도 중요하지만 API를 호출한 데이터를 효율적으로 처리할 수 있어야한다.이번 포스트에서 내가 겪은 것은 아래와 같다. 위의 함수는 메인페이지에서 renderMovieCard 함수는 API로 받아온 데이터를 불러와 HTML에 추가하도록하는 코드이다. 원래는 데이터 호출과 렌더링을 같은 스코프 내에서 진행했지만 오늘은 코드를 분리시켜놓았다.분리시켜놓은 것은 함수의 Solid 원칙을 지키기위해서도 있지만 API 호출로 불러온 데이터를 export 시켜서 다른 JS 파일에서 해당 데이터를 쓸 수 있지않을까 싶었다. 그래서 전역 변수를 선언..

오늘도 실습을 하면서 엄청 깨졌다. 프로미스의 개념은 알아도 문법 사용이 정립이 되어있지를 않으니 일단은 내가 쓸 수 있고 알아볼 수 있는 코드로 쓰는 연습을 하자.   // - returnHello() -> "Hello"를 resolve하는 Promise를 반환하세요. //@returns {Promise} // TODO: returnHello 함수를 작성하세요.function returnHello() { return new Promise((resolve) => { resolve("Hello"); });} 위의 문제를 풀면서 어떤 식으로 프로미스를 쓸 것인지 갈팡질팡 했다. 일단 Promise라는 생성자를 통해서 비동기 작업을 통해 프로미스를 받고있다. 성공하면 resolve, 실패 시에는 ..

예전에 투두리스트를 실습하면서 로컬 스토리지를 다뤄본적이 있다. 로컬스토리지에 데이터를 저장하면 페이지를 새로고침하거나 재접속해도 해당 페이지에서 데이터가 유지된다. MDN의 Web Storage API에서는 이하의 내용으로 설명하고 있다. 2가지의 웹 스토리지가 존재하며 세션 스토리지, 로컬 스토리지가 존재한다. 세션 스토리지독립적인 저장공간을 페이지의 세션이 유지되는 동안 데이터를 유지시킨다. 브라우저가 닫힐때까지 데이터는 유지된다.서버로 데이터가 전송되지 않으며 최대 5MB를 저장. 로컬 스토리지데이터를 영구적으로 저장하고 자바스크립트나 브라우저 캐시 또는 저장된 데이터를 조작하여야 지워진다. 공통적으로 웹 스토리지 객체는 네트워크 요청 시에도 서버로 전송되지 않는다는 점이 있으며 쿠키를 이용한 방..

중첩 구조 분해 할당이 어려워서 오늘 실습때 반 문제밖에 못 풀었다. 배열속의 객체, 객체 속의 배열이 해결하기 어려웠는데 생각보다 단순하게 다루는 것이 가능했다. const users = [{ age: 20 }, { age: 30 }, { age: 40 }, { age: 25 }, { age: 35 }];let ageArr = [];ageArr = users.map(({ age }) => age);console.log(ageArr); 배열 속의 객체에서 특정 키들의 값을 담고 싶다고 했을때 위와 같이 접근해서 사용하는 것이 가능하다. 객체의 키 값을 대상으로 하므로 객체 리터럴의 표현을 외부로 가져온다고 이해해야한다.메서드 중첩을 사용하는 예시는 다음과 같았다. const persons = [ { n..

https://school.programmers.co.kr/learn/courses/30/lessons/134240 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.krhttps://school.programmers.co.kr/learn/courses/30/lessons/181898 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 가까운 1찾기문제 설명정수 배열 arr가 주어집니다. 이때 arr의 원소는 1 또는 0입니다. 정수 idx가 주어졌을 때, idx보다 크면서 배열의 값이 1인 가장 작은 인덱스를 찾..

2025.01.03 - [내일배움캠프] - TIL - 실행 컨텍스트(1) TIL - 실행 컨텍스트(1)3주차 강의를 마쳤다, 1월달에는 코딩보다는 지식 채워넣기가 급급한 것 같다. 다음주부터는 라이브로 실습하면서 코딩도 할텐데 아마 그때 코딩과 프로그래머스에서 문제푸는걸로 만족해야겠redpome.tistory.com지난 실행컨텍스트에 이어서 클로저에 대해 정리한다.실행 컨텍스트는 콜스택에서 함수가 실행되는 환경하에서 변수나 기타 설정 요소들을 참조하여 실행된다. 이때 함수가 실행되는 환경을 '렉시컬 환경'이라 하였다.const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } inn..

객체 복사자바스크립트 관련 실습을 진행하면서 깊은 복사와 얕은 복사에 대한 코드를 접해보았지만 확실히 심화되면 어렵다.두 복사의 차이점이라면 참조에 의한 값 복사를 할 경우 객체들이 가리키는 주소의 위치가 어디냐에 따라 얕은 복사인지 깊은 복사인지 차이를 두고있다.얕은 복사는 배열이든 객체든 다양한 메서드가 존재한다. 하지만 깊은 복사는 C언어의 포인터를 이용해 주소값을 다루는 것처럼 객체에 의한 참조를 다루는 것이기 때문에 까다롭다. 깊은 복사를 하기 위한 조건은 두 객체가 가리키는 주소가 다르기만하면 된다. 나는 이를 재귀함수로 강의를 하는 것을 보았고 똑같이 따라했지만 다음의 코드에서는 재귀함수를 통한 복사가 어려웠다. function applyCoupon(cart, coupon) { cart.i..

3주차 강의를 마쳤다, 1월달에는 코딩보다는 지식 채워넣기가 급급한 것 같다. 다음주부터는 라이브로 실습하면서 코딩도 할텐데 아마 그때 코딩과 프로그래머스에서 문제푸는걸로 만족해야겠다.오늘 배운 것만해도 기록할 것이 많다. 실행 컨텍스트자바스크립트의 엔진은 자바스크립트 코드 실행 이전에 앞서서 코드를 실행 전의 준비가 필요하다. 소스코드의 평가와 소스코드의 실행으로 나뉘며 평가 과정 중 실행 컨텍스트를 생성한다.실행 컨텍스트는 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 동일한 환경에 있는 코드들을 모아서 컨텍스트를 구성하고 콜스택에 넣어 스택 자료구조가 실행되는 것처럼 코드의 환경과 코드 실행 순서를 보장할 수 있다. var a = 1;function outer() { function inn..

https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr지금 Lv.1 풀 단계도 아닌 것 같은데 일단 강의 마지막때마다 주는 과제이니 일단 풀어보았다.문제의 풀이는 다음과 같았다. function solution(strings, n) { return strings.sort((a,b)=>{ if(a[n]b[n]) return 1 if(ab) return 1 return 0 });} 처음 문제를 보면서 떠올린 생각은 다음과 같았..

벨로그에서 작성하다가 카테고리 분류를 편하게 할 수 없는것 같아서 티스토리로 변경했다. 앞으로의 계획리액트는 2월부터 커리큘럼이 시작이니 1월에는 자바스크립트 문법과 메서드 사용을 많이 연습해야겠다. 무언가 작게 만들 수 있으면 좋겠지만 시간이 될 지 모르겠다. 몇 시간안에 만들 수 있는게 무엇이 있나 연습하면 좋을것 같다. MapMap 은 비교적 최근에 생긴 자료구조로 객체와 배열을 적절히 섞은 자료구조라 할 수 있다.키-값 쌍을 가지는 것은 객체와 비슷하면서 키가 정렬된 순으로 저장되는 것은 순서가 존재하는 배열의 특징이라 할 수 있다.객체 생성처럼 사용할 수있다.let myMap=new Map();myMap.set("first",1);myMap.set("second",2);myMap.set("str..