전체 글50 Vanilla javascript 영화 프로젝트 + 모달창 구현하기 아래 영화 프로젝트를 바탕으로 기능을 추가적으로 구현하는 것이이번 팀 프로젝트! 이번 프로젝트에서는 로컬스토리지를 사용하라고 안내가 나왔다나는 파이어베이스가 더 익숙하고 편해서 파이어베이스 사용해도되는지 여쭤봤다.로컬스토리지 사용을 권장하셨고... 이유는 다음과 같았다. 해당내용을 보니 가끔 어떤 사이트들은내가 회원가입을 하지도 않았는데 내가 살펴본 상품을 기억하고 있거나계정도 없는데 장바구니에 일단 내가 고른게 담겨져 있는? 신기한 곳이 종종 있었는데웹 스토리지가 이런곳에 쓰였겠구나 하고 생각이 들었다. 그리고 팀원과의 회의결과! [추가 구현할 기능 ] 1. 회원가입/로그인/로그아웃 (페이지 이동하지 않고 모달창 구현)2. 마이페이지3. 상세페이지4. 다크모드5. 페이지네이션6. 리뷰남.. 2024. 5. 3. localStorage 웹 스토리지(web storage)에는 세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)가 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 로컬스토리지 사용하는 방법에 대해 학습해보겠습니다. MethodDescriptionsetItem()로컬 스토리지에 키, 값을 추가한다.getItem()키에 맞는 값을 찾는다.removeItem()키에 맞는 값을 삭제한다.clear()로컬 스토리지에 저장된 모든 내용을 삭제한다. // 키에 데이터 쓰기localStorage.setItem("key", value)// 키로 부터 데이터 읽기localStorage.getIte.. 2024. 5. 2. 나의 첫 팀 프로젝트 회의 최근에 만든 개인 프로젝트인"순수 바닐라 자바스크립트만으로 구현한 영화 리스트 조회 및 검색 UI 구현"이 프로젝트에 추가 기능을 넣어서 팀프로젝트를 진행하게 되었다. 나의 첫 팀 프로젝트...그동안 혼자서 또는 2명이서 뽀짝뽀짝 개발한 경험만 있었지팀프로젝트는 처음이다. 깃허브로 협업해본적도 없고누군가와 프로젝트 관해 얘기를 나눠본적도 없어서조금 겁났지만 배우러온거니까!회의에 열심히 참여했다. 기존 프로젝트에서 업그레이드 하는 것이다보니기존에 했던 작업물들중에 ui/ux적으로 좋았던프로젝트를 대표로 선정해야했다. 아래는 나의 프로젝트다. 나름 기대를 했지만 1표 차이로내 프로젝트는 떨어지고 그분의 프로젝트로 정해졌다. 그리고 끝없는 회의의 연속...뭔가 정해졌다 싶다가도이건어떻게 하지? 어?.. 2024. 5. 1. prettierrc와 settings.json 자바스크립트 개발자들 간에 선호하는 코딩 스타일이 다를 수 있죠? 예를 들어, 개발자 A는 문자열을 쌍따옴표(")로 감싸줘야 한다고 주장하는 반면에, 개발자 B는 홑따옴표(')를 사용해야 된다고 주장합니다. 이러한 두 개발자가 한 팀에서 일하면 코드 리뷰 중에 이러한 사소한 코딩 스타일 차이로 키보드 배틀이 일어나는 걸 보게 되죠… 😅 그런데 대게 이런 코딩 스타일에 대한 논쟁은 정답이 없을 분더러, 괜히 소모적인 자존심 싸움으로 번지기 쉬워서 팀워크와 생산성에 나쁜 영향을 줄 수 있습니다. 이번 글에서는 협업 프로젝트에서 이러한 포맷팅 고민을 해결해주는 편리한 개발 도구인 Prettier에 대해서 소개해드리겠습니다. 코드 포맷터(Code Formatter)개발자가 작성한 코드를 정해진 코딩 스타일을.. 2024. 4. 30. 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. ES6 문법 📌ES6 문법 ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었습니다..ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였습니다. 2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급이 되곤 합니다. 1. let, const2. 화살표 함수3. 삼항 연산자4. 구조 분해 할당5. 단축 속성명6. 전개 구문7. 나머지 매개변수8. 템플릿 리터럴9. named export vs default export (1) let, const 기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드입니다.var, c.. 2024. 4. 23. 이전 1 2 3 4 5 6 다음
