nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/etc.

프롤로그 저는... 처음으로 HTML 파일을 봤을 때... '이게 뭐지?' 싶어서 더블 클릭했더니 브라우저가 열려서 놀랐던 기억이 있습니다ㅋㅋㅋㅋ 사실 지금도 신기해요. 진짜 멋지죠. 그런고로 오늘은 이걸 공부해봅니다! 그래서 말입니다. 브라우저는 어떻게 동작하는 걸까요? (feat. 그알) *이 글은 구글링을 바탕으로 작성했습니다. 추가/수정/삭제가 필요한 부분을 말씀해 주시면 감사하겠습니다 :) 브라우저 브라우저란 브라우저는 서버에 자원을 요청(reqest)하고 그걸 응답(response)해 윈도우에 표시하는 역할을 합니다. HTML 파일이나 CSS 파일, 이미지 등이 서버에서 넘어오면 파싱(Parsing)이란 작업을 거쳐 화면에 그려냅니다. 이 과정에서 '어떻게 해석할까?'의 방식은 브라우저마다 조..

2020. 6. 7.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(3) 8. Vuex 도입 이번 파트에서는 Vuex를 써봅니다 👐 이 어플리케이션은 너무너무너무 간단해서 라이브러리를 도입할 필요가 없지만, 이왕 배운 거 정리하면 좋을 거 같아서요! Vuex란 Vuex에 대한 설명은 공식 문서에 멋지게 정리되어 있습니다. Vuex는 상태 관리패턴 + 라이브러리입니다. 프로젝트 내의 여러 컴포넌트를 쉽고 효율적으로 관리할 수 있도록 도와줍니다. 공통의 state(상태, 컴포넌트 간 공유할 데이터를 말합니다)를 사용하는 컴포넌트가 많아지면 prop가 장황해지고 유지보수가 힘듭니다. 만약 컴포..

2020. 6. 3.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(2) 7. UX 업그레이드 이제부터는 꼭 필요한 기능은 아니지만, 있으면 사용자 경험을 개선하는 데 도움을 주는 기능을 개발합니다. 이름 저장하기 저는 서비스의 트렌드 요소 중 하나는 '개인 맞춤'이라고 생각합니다. 로그인 한 사용자에게 맞는 홈 화면을 보여주는 네이버처럼요. 그래서 전 이름을 불러주는 서비스를 좋아합니다. (나에게로 와서 꽃이 되었다... 🌸) Momentum 서비스와 비슷하게, 처음 만난 사용자에게 이름을 묻고 저장하는 과정을 추가해 보겠습니다. 없던 기능이 추가된 거라 개발이 좀 꼬였는데 실무라 생각..

2020. 5. 30.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(1) 5. 할 일 목록 구현하기 지난 글에서 퍼블리싱까지 마쳤으니, 이제부터 기능을 개발할 차례입니다. 🚀 할 일 추가하기 TodoInput은사용자가 입력한 내용을 받아와 localStorage에 저장하는 기능을 담고 있습니다. Web Storage API는 직관적으로 key/value 데이터를 안전하게 저장할 수 있습니다. 로컬 스토리지는 브라우저를 종료해도 데이터가 계속 남아 있지만, 세션 스토리지는 세션이 종료되면 데이터도 사라집니다. 각각의 오리진에 대해 다른 스토리지 객체가 localStorage와 session..

2020. 5. 28.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 내용입니다. 멋진 강의 감사합니다 (__) 1. 프로젝트 구상 Todo List를 보여주는 간단한 웹 페이지를 만들어보겠습니다. localStorage를 활용해 리스트를 추가/삭제하려고 합니다. 얍, 이런 느낌으로 만들어보려고 해요 🙋‍♀️ (디자인은 미래의 나에게 맡긴다!) 여기에 필요한 컴포넌트를 나열하면 이렇겠네요. - header : 웹앱 이름과 오늘 날짜를 보여줍니다 - title : 몇 개의 할 일이 남았는지 보여줍니다 - input : 할 일을 입력받습니다 - controller: 필터와 모두 삭제 기능이 들어 있습니다 - list : 할 일 목록을 보여줍니다 - footer :..

2020. 5. 26.

Blog/Library

이 글은 Vue.js 시작하기 - Age of Vue.js 강의를 보고 작성한 노트 필기입니다. 뷰는 1도 모르지만 친해지고 싶은 사람이 공부를 위해 작성한 글입니다 :-9 필요할 때마다 수정/보완해 나갈 예정입니다. Vue.js 소개 Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 공식 페이지 - vuejs.org - kr.vuejs.org (한국어) 위 사이트에서 상세한 공식 문서를 제공하고 있습니다. Reactivity Reactivity는 Vue가 가진 가장 큰 특징이라고 할 수 있습니다. Vue가 하는 일을 흉내내보면 이렇습니다. 위 코드를 실행 후, 콘솔에 viewModel.str = "안녕하세요!"`와 같이 입력하면 해당 글씨가 화면에 바로 나타나게 됩니다. 이를 V..

2020. 5. 21.

Blog/CSS

오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려주세요! 감사히 배우겠습니다.) 1. BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻합니다. 저 세 가지로 구성된 이름을 짓는 거죠! 그리고 각각 __와 --로 구분합니다. 이렇게 생긴 클래스네임, 어디선가 본 적 있지 않으신가요? (너의 이름은...?!) .header__navigation--navi-t..

2020. 5. 17.