본문 바로가기

분류 전체보기50

Vanilla Javascipt로 영화 리스트 조회 및 검색 UI 구현 Vanilla Javascript로영화 리스트 조회 및 검색 UI 구현   이번 프로젝트에서는 순수 자바스크립트만으로영화 정보를 검색하고 표시하는 간단한 웹을 개발했다.  오로지 순수 자바스크립트 (바닐라js) 만으로 만들 줄 알아야정말 자바스크립트를 잘 쓸 줄 알게 된다고 한다. 혼자 공부할 때는 무조건 리액트 프로젝트로 만들어서 했는데이번 프로젝트로 많이 배운다고 생각이 든다. 프로젝트 파일은 이런식으로 나누었다.   기본적인 홈페이지 틀을 잡아주기 위해header, main, footer영역으로 나누어 주었다. 상단 메인 하단  이런식으로 role속성을 이용해서 만들어도 가능하지만html5 이후로는 role속성 대신,랜드마크 요소(header, main, footer, section, nav)를.. 2024. 4. 29.
콜백함수와 동기/비동기 콜백 함수와 동기/비동기 처리   🚩 [학습 목표]자바스크립트의 콜백함수의 개념과 예시에 대해 학습해요.어떤 항목에서 콜백함수를 전달받은 함수에게 제어권이 이양되는지를 이해하고 그 예시를 테스트해볼 수 있습니다.비동기적인 코드 작성에서 발생할 수 있는 콜백지옥을 예방하고 비동기제어를 할 수 있는 Promise, async/await 등의 기술을 이해하고 활용하는 능력을 배양합니다.  1. 콜백함수 이번 시간엔 콜백 함수에 대해 배울거에요. 앞 시간에 수 차례 우리는 콜백 함수를 이미 사용해 왔습니다.가령 예를 들면, setTimeout, 배열에 대한 forEach 등에서요.// setTimeoutsetTimeout(function() { console.log("Hello, world!");}, 100.. 2024. 4. 26.
호이스팅, 스코프 체인, this 바인딩 (5) 불변 객체 불변 객체의 정의개념은 알겠는데, 그 개념이 왜 필요한지 알겠나요? 아래 예시를 통해서 “불변하다”. 혹은, ‘불변객체’의 개념이 왜 필요한지를 한번 알아보도록 합시다 🐱우리는 앞선 과정에서, **가변하다**와 **불변하다**의 개념을 배웠습니다. 다시 살짝 정리해서 객체를 예로 들면, 객체의 속성에 접근해서 값을 변경하면 가변이 성립했었죠. 반면, 객체 데이터 자체를 변경(새로운 데이터를 할당)하고자 한다면 기존 데이터는 변경되지 않습니다. 즉, 불변하다라고 볼 수 있습니다.불변 객체의 필요성다음 예시는 객체의 가변성에 따른 문제점을 보여주고 있어요 🙄// user 객체를 생성var user = { name: 'wonjang', gender: 'male',};// 이름을 변경하는 .. 2024. 4. 25.
Javascirpt 데이터 타입 1. 데이터 타입 심화 (1) 데이터 타입의 종류(기본형과 참조형)자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분됩니다.기본형과 참조형의 구분 기준은 값의 저장 방식과, 불변성 여부입니다. 💡 [기본형과 참조형의 구분 기준]복제의 방식기본형 : 값이 담긴 주소값을 바로 복제참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제불변성의 여부기본형 : 불변성을 띔참조형 : 불변성을 띄지 않음자, “불변성을 띈다” 이 말을 이해하기 위해서 우리는 메모리와 데이터에 대한 내용을 이해해야만 합니다.  (2) 메모리와 데이터에 관한 배경지식메모리, 데이터비트컴퓨터가 이해할 수 있는 가장 작은 단위죠0과 1을 가지고 있는 메모리를 .. 2024. 4. 24.