072DATA

안녕 개인 프로젝트 진행중 쿼리 스트링으로 URL에서 id 값을 가져와서 값에 해당하는 상세 페이지를렌더링하도록 코드를 짰는데 어째서인지 상세 페이지가 보이지 않는 것이다.. const searchParams = new URLSearchParams(location.search);//////////////////범인 검거/////////////const pokemonId = searchParams.get("id");////////////////////////////////////////console.log(typeof pokemonId);  콘솔 창에도 아무런 정보가 나오질 않아서 혹시나 하고 id 값에 타입을 확인해 보았더니String이 나오는 것이었다.. !  const searchParams = n..

오류 내용 선택한 포켓몬이 selectedPokemon에 추가는 되는데 렌더링이 안됨 알고보니 map 메서드 안에서 {} 중괄호를 사용하면, 코드 블록은 실행되지만아무것도 반환하지 않기 때문에 실제로 렌더링할 JSX가 없음map 메서드는 배열의 각 요소에 대해 함수를 실행하고그 함수가 반환한 값을 새로운 배열에 담아 반환함코드 확인 ㄱㄱ올바른 코드 selectedPokemon.map((pokemon, index) => { if (pokemon) { return ( ); } else { return ( ); }});  이렇게 하면 return 값인 jsx가 정상적으로 반환되지만  잘못된 코드 selectedPokemon.map((po..

인터넷 프로토콜 스택의 4계층애플리케이션 계층 - HTTP, FTP전송 계층 - TCP, UDP인터넷 계층 - IP네트워크 인터페이스 계층  IP(인터넷 프로토콜)  IP - 인터넷 프로토콜의 역할지정한 IP 주소(IP Address)에 데이터 전달패킷(Packet)이라는 통신 단위로 데이터 전달 IP 프로토콜의 한계비연결성 - 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송비신뢰성 - 중간에 패킷이 사라지거나 여러 개의 패킷이 순서대로 안올 수 있음프로그램 구분 - 같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상일 수 있음  TCP - Transmssion Control Protocol (전송 제어 프로토콜)   TCP 특징연결 지향 - TCP 3 way handshake ( ..

템플릿 리터럴(Template Literal) 안녕하세요 오늘은 자바스크립트 ES6부터 제공된 템플릿 리터럴에 대해서 알아보겠습니다. 템플릿 리터럴은 자바스크립트에서 문자열을 좀 더 유연하게 다루고 싶을 때 유용하게 쓸 수 있는 문법입니다기존의 문자열 표현 방법보다 편리하고 코드도 훨씬 깔끔하게 작성할 수 있습니다.템플릿 리터럴은 백틱(``)으로 감싸서 사용합니다.      주요 기능   변수 삽입 const name = "이태규";const greeting = `안녕, ${이태규}!`;console.log(greeting); // "안녕, 이태규!"  문자열 안에 변수를 넣을 수 있습니다.${} 구문을 이용해서 변수나 표현식을 그대로 문자열에 삽입합니다.    다중 행 문자열 const multilin..

걷기반 실습에서 받은 실습 문제인데자바스크립트로 API 데이터를 불러와서DOM에 추가하는 과정을 정리해봤음.비동기 함수, 오류 처리, 데이터 정제를 다룸   비동기 함수 만들기먼저 fetchComments라는 함수를 비동기로 만들어야 함.async와 await 키워드를 활용해서 API 호출이 완료될 때까지 기다릴 수 있도록 해야 함.이렇게 하면 데이터가 다 로드된 다음에야 그 다음 작업을 진행할 수 있음. async function fetchComments() { try { const response = await fetch(apiUrl); const comments = await response.json(); // 이후 코드는 여기서 작성됨 } catch (error) { co..

콜백 함수란?  콜백 함수는 다른 코드에 인자로 넘겨주는 함수임예를 들어, forEach, setTimeout과 같은 함수들이 콜백 함수를 사용함콜백 함수는 특정 작업이 완료된 후, 또는 특정 조건이 만족되었을 때 호출되는 함수로,필요에 따라 적절한 시점에 실행될 수 있음  콜백함수 제어권콜백 함수는 제어권이 넘겨받는 코드에 의해 제어됨 이 제어권은 크게 두 가지로 나뉨  호출 시점에 대한 제어권콜백 함수가 언제 호출될지는 콜백을 전달받은 코드가 결정함예를 들어, setTimeout의 콜백 함수는 지정된 시간이 지난 후 호출됨 인자에 대한 제어권콜백 함수가 호출될 때 전달되는 인자는 콜백을 호출하는 코드가 결정함콜백 함수는 특정 데이터를 인자로 받거나, 특정 컨텍스트에서 호출될 수 있음콜백함수에서 thi..

안녕  안녕하세요 오늘은 프로젝트 진행 중 오류가 발생했던 건을 기록해 보려고 합니다!      일단 각 영화 카드를 선택하면 해당하는 카드의 id 값으로 상세페이지가 불러와져야 합니다. 하지만 이중 중첩 forEach문을 잘못 사용하게 되어 같은 id값의 상세페이지가 로드 되었습니다.  틀린 예시 X올바른 예시 O 이렇게 각 카드에 해당하는 id 값을 적용시켜야 하는데  1번 id 값을 모든 카드에 다 넣어주고 2번 id 값을 모든 카드에 다 넣어주었기 때문에 결국 마지막 id 값을 모든 카드가 가지게 되어 같은 상세페이지가 나오는 것 입니다. 기존 코드 data.results.forEach(movie => { document.querySelectorAll(".movie-card").forEa..

async function printTest() { // await라는 키워드를 가지고 있는 공간은 반드시 비동기함수를 핸들링 할 수 있는 async 표현 필요 console.log("안녕하세요. 함수입니다!"); //fetch(알을 품다) : 데이터를 요청하는 것 //.json도 완성된 결과를 받으려면 기다려야 하는구나.. try{ //비동기 함수에 동기적 표현 // 데이터가 fullfile되기 위해서는 3초정도 시간이 걸리기 떄문에 // await를 이용해서 pending -> fullfill이 될 떄 까지 기다리기 const result = await fetch("https://jsonplaceholder.typicode.coma/users"); // .json도 비..

자바스크립트에서 함수는 일급 객체라고 합니다. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있습니다.일반 객체와 달리 함수는 특별한 능력을 갖고 있다고 하네요 "일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다 "여기서 다른 객체 들은 매개 변수로 전달 될 수도 return 문으로 출력 하기도 하며모든 연산이 가능한데 함수도 다른 객체들 처럼 가능 하다는 의미입니다.(함수를 매우 유연하게 사용 가능) 함수의 특징 1. 변수에 함수를 할당 가능    const sayHello = function (){ console.log("Hello");}   이렇게 우측에 있는 함수를 좌측의 변수로 할당 가능합니다.함수가 마치 값으로 취급되어 함수가 나중에 사용될 수 있..

this객체지향언어에서는 클래스를 정의한 인스턴스를 의미하는데자바스크립트의 this는 독특하게 어떤 상황에서는 a라는 의미였다가어떤 상황에서는 b라는 의미가 될 수 있습니다. this는 실행 컨텍스트가 생성될 떄 결정되는데 이 말을 this를 bind된다 라고 합니다this는 어떤 것을 가리키는지 윈도우와 노드에서 this를 확인해봅시다.    브라우저의 개발자 도구에서 this를 출력해보고this와 window가 같은지 확인했더니 true가 반환됐네요브라우저에서 this는 윈도우 객체라는 것이 확인 되었습니다.  그럼 Node에서도 this는 윈도우 객체인지 확인 해보겠습니다.   노드에서의 this는 글로벌 객체라는 것이 확인 되었습니다.이 두 사실은 자바스크립트 코드의 동작 방식과 컨텍스트에 큰 영..