Web API LocalStorage 활용해서 데이터 저장하기 Web API인 LocalStorage를 활용해서 브라우저 상에 데이터를 저장하고 저장한 데이터를 활용하는 방법을 공부하기 위해 내용을 정리하고 복습하려 한다. LocalStorageLocalStorage는 브라우저 내에 데이터를 키-값의 형태로 저장할 수 있도록 해준다. LocalStorage를 사용하면 웹 페이지를 끄고 다시 브라우저를 실행해도 데이터가 지워지지 않고 그대로 유지된다. 또한 브라우저를 여러 탭 혹은 여러 창을 띄워놔도 서로 데이터가 공유된다. 다만 이러한 데이터가 공유되고 유지되는 것은 같은 브라우저를 사용하는 경우에 해당한다. 데이터 저장하기localStorage.setItem(키, 값)localStorage.setItem('movie', '해리포터')localStorage.set.. HTML, CSS, JS만을 활용한 영화 검색 페이지 구현 + 반성문 독학으로 여러 강의들을 들으며 공부를 할 때 클론 코딩으로 쉽게 만들었던 영화 검색 페이지를 클론 코딩이 아닌 아는 지식을 활용해서 구현하는 과제를 받았다. 클론 코딩으로 공부하면서 당연히 다 완벽하게 할 줄 아는구나라고 생각했는데 이번 과제를 구현하면서 정말 수박 겉 핥기 식으로 공부했다는 걸 다시 한번 뼈저리게 느꼈다. 우선 각각의 역할을 분리하고 분명히 하라는 조건을 받았다. 모듈화를 통해서 코드의 재사용 성과 유지 보수성을 높이기 위해서 나름의 구조를 아래와 같이 분리했다. SPA를 만들어봐야 하나 MPA를 만들어야 하나 많은 고민을 하다가 여태까지 해왔던 기초적인 부분들을 다시 한번 다지고 따라간다는 마음으로 MPA를 만들었다. styles 디렉토리에 각 구역별로 css 파일을 분리하고 fon.. 누군가에게 지식을 공유한다는 것 누군가에게 내가 알고 있는 지식을 상대방이 이해할 수 있도록 전달하는 것은 어렵다는 것을 느꼈다. 처음에는 이 정도면 알아들을 수 있겠지라는 생각으로 나의 지식을 전달했는데 생각보다 전달력이 부족했다. 그러다 보니 점점 같은 말을 해도 어떻게 좀 더 쉽게 이해할 수 있도록 전달할 수 있을까 라는 생각을 하게 되었고, 다행히도 팀원들이 잘 이해해 주고 따라와 주었다. 같은 것을 공부하고 같은 행동을 하기에 쉽다고 생각했던 것이 나의 크나큰 착각이었다. 내가 알고있는 것과 내가 알고 있는 것을 상대방에게 전달한다는 것에는 큰 차이가 있다. 알고 있었던 사실이었음에도 오늘은 많이 와닿은 말이었다. 앞으로는 더욱더 생각하게 될 것이다. 목표가 생겼다. 정확한 지식과 정보를 누구든지 이해하고 알 수 있도록 정.. Git, GitHub 입문을 기초 CLI 명령어 정리 Git, GitHub의 개념과 기본적인 명령어를 공부하면서 프론트엔드 개발자라면 이 정도는 알아야 하는 명령어들이 몇 개 있다. 개인적으로 공부하면서 쉽게 넘어갔던 부분이었는데 이번에 다시 한번 보게 되어 정리하며 복습하려 한다. 리눅스리눅스는 OS 오픈소스로 누구나 무료로 사용할 수 있다. 이러한 리눅스는 CLI 명령어를 통해 제어할 수 있는데 이러한 명령어들 중 자주 사용되는 몇가지들만 정리하고 다음 명령어로 넘어가려 한다. pwd (Print Woring Directory) : 현재 작업 경로를 확인할 수 있는 명령어 ls, ls -a, ls -l : list의 약자로 현재 위치한 디렉토리 내에 있는 파일이나 디렉토리 목록을 출력하는 명령어ls 명령어의 옵션으로 -a, -l을 주로 사용하는데 -a는.. 개발 환경 ESLint 공부 및 설정하기 ESLint를 프로젝트에 적용하면서 제대로 적용하고 사용하고 있는지 다른 프로젝트에서는 개발 환경 설정을 어떻게 해야 하는지 어떠한 규칙들이 있는지 제대로 알고 공부하기 위해 ESLint를 한번 정리하고 넘어가려고 한다. ESLintESLint는 ES(Ecma Script) + Lint를 합친 말로 자바스크립트 에러를 나타내주는 도구이다. 자바스크립트는 대표적인 인터프리터 언어로 런타임 환경에서 코드를 해석하고 한 줄 한 줄 실행하는데 이때 런타임 에러들이 자주 발생한다. 그래서 이러한 Lint 도구들을 통해 사전에 에러를 잡기 위한 도구이다. Prettier가 코드의 스타일을 잡아주었다면 ESLint는 코드의 품질을 보장할 수 있도록 도와준다. 예를 들어 어떠한 함수를 만들 때 누구는 function.. 개발 환경 Prettier 공부 및 설정하기 개발 환경을 설정할 때 Eslint, Prettier 를 많이 사용한다. 그런데 설정을 하다보면 오류도 많이 나고 둘의 정확한 차이가 무엇인지 헷갈리는 경우가 많다. 이러한 경우로 많은 시간을 낭비하게 되기 때문에 여기서 확실하게 공부하고 정리하는 시간을 가지려고 한다. PrettierPrettier는 코드 포맷터로 작성한 코드가 정해진 코드 스타일을 따르도록 자동으로 변환해 주는 도구이다. 좀 더 쉽게 표현하면 에디터 내에 줄 바꿈, 공백, 들여 쓰기와 같은 코드 텍스트를 일관되게 작성하도록 도와주는 도구이다. 예를 들어보면 A 개발자는 세미콜론을 사용하고, B 개발자는 세미콜론을 사용하지 않는다. 또 A 개발자는 문자열을 큰따옴표( " )를 이용해 감싸주지만 B 개발자는 작은따옴표( ' )로 감싸준다.. 이전 1 다음
