JavaScript11 [Chrome Extension] 구글 딥다이브 크롬 확장 프로그램 제작기 구글 크롬 확장 프로그램을 제작하자. 나는 이걸 왜 만들었을까?구름 풀스택 과정 10기를 참여하면서 강의 리스트 중 중복되는 강좌가 있었다.중복되는 강좌를 식별하기 위해서 만들어봤다.ResultHow?우선 docs를 찾아봐야한다.https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ko여기서 잘 설명되어있다.요약해보자manifest.json 이라는 파일과background.js, 그리고 동작을 할 js들이 필요하다. 자세한 코드는 git에 작성해두었다.이제 리팩토링을 해보자.https://github.com/groom-study-team1-project/chrome-extension GitHub - groom-st.. 2024. 8. 7. [React] 환경설정 원래 리액트는 웹팩이라는 Bundler로 실행한다.이 강의는 리액트 문법과 리액트를 이해하기 위함이므로 React를 실제로 사용하는 환경설정은 하지 않는다. 1. React 리액트를 사용하기 위해서 기본적으로 환경설정이 되어야하는데 리액트에서 제공하는 개발용 cdn 링크가 있다. 리액트에서도 직접 개발용으로만 쓰라고 명시되어있고 배포용으로는 추천하지 않는다. CDN 링크 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 나는 배포까지 할 내용이 아니므로 강의와 동일하게 cdn을 이용한다.react.js 는 react 기능인 컴포넌트, 가상돔 등을 지원한다. 2. React-Dom React Dom은 가상 DOM을 실.. 2024. 8. 4. [React] Intro 리액트는 크게 세가지 개념이 중요하다.1. Reactive2. Virtual DOM3. Component Reactive는 특정 값에 의존해 자동으로 반응하는 것을 의미한다.Vanila js로 검색 서비스를 만들면서 값을 변경하게 되면(검색 등) 다시 rendering을 하는 과정이 필요했었다.하지만 리액트는 값을 변경하면 다시 rendering 할 필요가 없도록 설계되었다. react는 DOM API를 호출하면서 성능 저하가 발생하는 문제를 해결하기 위해 Virtual DOM을 제공한다.Virtual DOM에서 변경된 부분을 확인하고 바뀐 부분만 확인하여 DOM에 제공한다.이런 특성 때문에 reactive 하다고 할 수 있다. 아래는 참고하면 좋은 예시 영상이다.https://www.youtube.co.. 2024. 8. 3. [Vanila js] 최근 검색 구현하기 ResultViewexport default class HistoryListView extends KeywordListView { constructor() { super(qs("#history-list-view"), new Template()); } bindEvents() {} handleClickRemoveButton() {}} HistoryListView를 보면 KeywordListView 와 매우 유사하다.추천검색과 차별점을 생각하면, 검색기록을 지우는 작업이 추가로 수행되니까. 새로운 이벤트를 바인딩 해준다.또, KeywordListView를 상속받으므로 KeywordListView의 생성자의 구조 변경이 발생한다.Controllerexport defaul.. 2024. 8. 2. [Vanila js] 키워드 검색 구현하기 ResultViewexport default class KeywordListView extends View { constructor() { super(qs('#keyword-list-view')); this.template = new Template(); this.bindEvents(); } show(data = []) { } bindEvents() { } handleClick(event) { }} 앞선 기능들과 마찬가지로 keyword-list-view에 적용할 interface다.Result를 보면 키워드를 클릭하는 이벤트가 발생하니까 이벤트를 바인딩해주는 것이 필요하고keyword 목록들을 보여주어야 하므로 show().. 2024. 8. 2. [Vanila js] 탭 구현하기 ResultViewexport default class TabView extends View { constructor() { super(qs('#tab-view')); this.template = new Template(); } show() {} bindEvents() {} } 정적 페이지의 tab-view id를 가진 태그에 작업을 수행한다.Result와 같이 탭을 보여줄 기능과, 탭을 누르는 행위를 하는 기능이 필요Controllerexport default class Controller { constructor(store, {searchFormView, searchResultView, tabView}) { this.store.. 2024. 8. 1. [Vanila js] 검색 결과 기능 구현 Viewexport default class SearchResultView extends View { constructor() { super(qs("#search-result-view")); this.template = new Template(); } show(data = []) { if (data.length > 0) { this.element.innerHTML = this.template.getList(data); } else { this.element.innerHTML = this. template.getEmptyMessage(); } super.show(); }}.. 2024. 7. 31. [Vanila js] 검색 기능 구현하기 Branch - ready/search-form-1앞선 포스팅의 작업이 제대로 되었다면 main 브랜치에서1. git checkout -b ready/search-form-12. 코드 작성3. git add .4. git commit -m "feat: 내용"5. git push origin ready/search-form-1이후 PR 날리고 Rebase Merge 하기.git bash에서 코드로 할 수도 있지만, 협업 중 코드 리뷰를 하는 과정이 있음.그래서 직접 github 사이트에서 Merge하는 것에 익숙해지기 앞으로 모든 작업은 위 과정을 반복해서 branch를 업데이트 할 예정 // index.html // main.jsdocument.addEventListener("DOMContentL.. 2024. 7. 31. [Vanila.js] 사전 코드 이해하기 강사님이 미리 구현해 둔 서비스 branch : ready/scaffodingIn Memory DB추천 검색어, 검색 기록, 상품 데이터Utility시간관련 UtilDOM Event를 활용한 Util기본적으로 JS에서 제공하는 기술들을 모듈화했다고 보인다.Model이후에 비즈니스 로직 및 중요 로직이 담길 것으로 보임.View정적 페이지 정보를 렌더링(수정)하는 페이지Utility를 활용해 기본적인 기능이 제공된다.ControllerView에 작성될 내용을 제어Model의 비즈니스 로직을 활용하거나 따로 서비스 로직을 작성할 듯 2024. 7. 31. 이전 1 2 다음
