프로젝트

    210718 [수튜브] - 브라우저의 저장소

    학습 시간 약 3시간 To Do 아래 이슈를 해결 학습 내용 수튜브에서 사용자가 같은 광고를 중복 시청하지 않도록 방지하기 위해, localStorage를 사용하고 있습니다. 이번 학습시간에는 localStorage에 대한 이해를 높이기 위해 sessionStorage, cookie와 비교해보겠습니다. 그리고 브라우저별 실제 저장 위치와, 각 도메인별 저장용량 및 위치가 구체적으로 어떻게 되는지 알아보겠습니다. | 브라우저의 저장소 localStorage sessionStorage cookie 공통 - 데이터를 문자열 형태로 저장 (객체를 저장하고 싶다면 JSON 또는 store.js 활용) - key & value로 이루어짐 - same-origin policy에 따라, 도메인별로 다르게 관리 특징 -..

    프론트엔드 개발환경 구축 - VScode + React

    설치 작업 | VScode 먼저 VScode를 설치하고 몇 가지 Extension을 설치했습니다. 코드 뒤에 남는 불필요한 공백을 삭제해주거나, 괄호가 제대로 짝지어져 있는지 색상을 표시해주는 기능 등 편의성을 위한 것부터, 디버깅 기능까지 추가할 수 있습니다. | node.js, npm, yarn node.js, npm, yarn을 설치했습니다. 각각의 역할은 다음과 같습니다. node.js : Jabascript 런타임. Babel, Webpack 등의 모듈을 가지고 있음 npm : Node Package Manager. Node.js의 패키지를 관리 yarn : npm에 비해 속도가 향상된 패키지 매니저 React 개발환경 구축 | create-react-app (CRA)로 개발환경 구축하기 아래와..

    프론트엔드 개발환경 구축 - React vs Vue

    컴포넌트 단위의 개발 방식과 Virtual Dom이라는 이점 때문에 React나 Vue.js를 사용하는 것이 좋겠다는 결론을 내렸습니다. 두 가지 모두 비슷한 장점을 가지고 있고, 성능 면에서도 큰 차이는 없기 때문에, 이후에는 직접 간단한 Todo List를 작성해보며 차이점을 비교해보았습니다. Todo List 작성하기 | 구성 참고 : 벨로퍼트와 함께하는 모던 리액트 위 자료를 참고하여 작성했던 React의 Todo List와 거의 동일한 것을 Vue에서도 만들어보았습니다. 왼쪽이 Vue.js, 오른쪽이 React로 만든 Todo List입니다. 몇 가지 CSS적용을 누락한 것을 제외하면 완전히 똑같이 작동하고 있습니다. 리액트는 create-react-app으로, 뷰는 vue-cli로 간단하게 프..

    프론트엔드 개발환경 구축 - 프레임워크란? 바닐라 JS vs 프레임워크

    지난 시간에 이어, 이번에는 프레임워크를 조사해보았습니다. 평소에 저는 팀 프로젝트 외에는 주로 바닐라 JS로 개발을 진행하기 때문에, 프레임워크를 썼을 때의 장점은 무엇인지, 쓴다면 무엇을 선택하는 것이 좋을지를 중점적으로 살펴보았습니다. 프레임워크(Framework) 또는 라이브러리 프론트엔드 프레임워크는 컴포넌트별 개발을 용이하게 도와주며, 유저 인터랙션에 따라 반응하는 웹을 구현해야 할 때 DOM과 state의 처리를 도와줍니다. 주로 많이 사용되고 있는 것으로는 라이브러리인 React와 프레임워크인 Vue.js, Angular가 있습니다. 우선 Angular는 러닝 커브가 크고, 장기 프로젝트 또는 대형 프로젝트에 좀 더 알맞기 때문에 제외하였고, Vue.js와 React를 비교해보았습니다. V..

    프론트엔드 개발환경 구축 - IDE/편집기 조사 및 장단점 비교

    개발환경 구축이란? 개발에 필요한 컴파일러, IDE, 라이브러리, 프레임워크 등을 컴퓨터에 세팅하는 것을 의미합니다. 저는 크게 다음 3가지로 나누어서 조사한 뒤 직접 비교해보고, 최종적으로 환경 구축을 진행할 계획입니다. IDE(통합개발환경) 또는 편집기 WebStorm, VScode, Sublime Text, Atom 등 프레임워크 React, Angular, Vue.js 등 그 외 Babel, Webpack 등 IDE(통합개발환경) 또는 편집기 먼저, 조사를 시작하면서 IDE와 편집기가 서로 구분된다는 것을 알게 되었습니다. IDE 대규모에 적합 / 디버깅 가능 VScode, Atom, IntelliJ, WebStorm 편집기 소규모에 적합 / 가볍지만 다양한 확장기능 보유 VScode, Atom,..

    210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링

    학습 시간 약 7시간 To Do 이슈트래커 설정 및 Issue와 PR 템플릿 작성 아래 이슈를 해결 학습 내용 제가 개발하고 있는 커스텀 컨트롤러는 전체 controls영역(보라색)과 그 내부에 위치한 버튼 영역(연두색)의 클릭 이벤트를 구분해야 합니다. 전체 영역(보라색) : video 화면 위에 controls를 보여주거나 숨김 각 버튼 영역(연두색) : 해당 버튼의 기능 수행 각 클릭 이벤트를 구분해야 하지만, 모든 버튼이 전체 controls 영역 내부에 위치하기 때문에 코드가 복잡하고, 조금만 수정해도 동작이 꼬이는 문제가 있었습니다. 이벤트 위임을 적용한 코드 controls.addEventListener('click', function(e) { // ...생략 let target = e.ta..

    커스텀 액자/앨범 쇼핑몰 PHOTOS ver2 개발 도전

    소개 | PHOTOS 2016 PHOTOS는 2016년 진행했던 개인 프로젝트로, 커스텀 액자/앨범을 주문하는 쇼핑몰입니다. 장바구니와 유사한 '내 디자인'이라는 기능을 통해 원하는 디자인 옵션을 선택하여 보관할 수 있으며, 담아놓은 디자인을 주문할 수 있습니다. | 사용기술 JSP Apache Tomcat 8.5 MSSQL 기존 설계 | 구조 | DB 물리 모델링 | 메인 레이아웃 | 내 디자인 추가 기능 순서도 ver2를 개발하는 이유 | 나의 첫 프로젝트 포트폴리오를 작성하기 위해 지난 프로젝트를 정리하면서 PHOTOS도 다시 돌아보게 되었습니다. 첫 개인 프로젝트이자, 첫 웹 개발이었던 만큼 저에게는 의미가 있는 프로젝트이고, 그만큼 부족한 점이 많았기 때문에 이를 개선해보기로 했습니다. | 아쉬..