인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9

etc.

Critical Rendering Path 지난 글에서 웹 브라우저가 어떻게 일하는지 간략하게 알아보았습니다. 구글에서는 이를 Critical Rendering Path(CRP, 주요 렌더링 경로)라고 부르며, 이를 최적화하는 방법에 대한 강의와 문서도 있습니다. 사이트 최적화를 하는 방법 중 하나는 이 CRP를 간결하게 하는 것입니다. HTML 다운로드 Hello, world 우리가 웹 사이트에 접속하면 브라우저는 우선 서버에 페이지를 요청합니다. 이후 html에..

2020.06.12

etc.

프롤로그 아직 개인홈피*^-^*가 유행하던 시절, 저도 홈페이지를 만들고 싶어서 금손님들의 스킨을 다운받곤 했었는데요. 그때 css파일을 보고 이건 뭘까... 얘는 왜 메모장으로 열리지... 했던 기억이 납니다. 네, TMI였습니다. 그래서(?) 오늘은 CSS를 배웠습니다. 익숙치 않은 개념이라 혹시나 잘못된 내용이 있으면 언제든 말씀 부탁드립니다. (천사님들 사랑합니다!) CSSOM CSS로 트리 만들기 지난 글에서 브라우저는 HTML..

2020.06.09

etc.

프롤로그 저는... 처음으로 HTML 파일을 봤을 때... '이게 뭐지?' 싶어서 더블 클릭했더니 브라우저가 열려서 놀랐던 기억이 있습니다ㅋㅋㅋㅋ 사실 지금도 신기해요. 진짜 멋지죠. 그런고로 오늘은 이걸 공부해봅니다! 그래서 말입니다. 브라우저는 어떻게 동작하는 걸까요? (feat. 그알) *이 글은 구글링을 바탕으로 작성했습니다. 추가/수정/삭제가 필요한 부분을 말씀해 주시면 감사하겠습니다 :) 브라우저 브라우저란 브라..

2020.06.07

Framework

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(3) 8. Vuex 도입 이번 파트에서는 Vuex를 써봅니다 👐 이 어플리케이션은 너무너무너무 간단해서 라이브러리를 도입할 필요가 없지만, 이왕 배운 거 정리하면 좋을 거 같아서요! Vuex란 Vuex에 대한 설명은 공식 문서에 멋지게 정리되어 있습니다. Vuex는 상태 관..

2020.06.03

Framework

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(2) 7. UX 업그레이드 이제부터는 꼭 필요한 기능은 아니지만, 있으면 사용자 경험을 개선하는 데 도움을 주는 기능을 개발합니다. 이름 저장하기 저는 서비스의 트렌드 요소 중 하나는 '개인 맞춤'이라고 생각합니다. 로그인 한 사용자에게 맞는 홈 화면을 보여주..

2020.05.30

Framework

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(1) 5. 할 일 목록 구현하기 지난 글에서 퍼블리싱까지 마쳤으니, 이제부터 기능을 개발할 차례입니다. 🚀 할 일 추가하기 TodoInput은사용자가 입력한 내용을 받아와 localStorage에 저장하는 기능을 담고 있습니다. Web Storage API는 직관적으로 key/value ..

2020.05.28

Framework

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 내용입니다. 멋진 강의 감사합니다 (__) 1. 프로젝트 구상 Todo List를 보여주는 간단한 웹 페이지를 만들어보겠습니다. localStorage를 활용해 리스트를 추가/삭제하려고 합니다. 얍, 이런 느낌으로 만들어보려고 해요 🙋‍♀️ (디자인은 미래의 나에게 맡긴다!) 여기에 필요한 컴포넌트를 나열하면 이렇겠네요. - header : 웹..

2020.05.26

Framework

이 글은 Vue.js 시작하기 - Age of Vue.js 강의를 보고 작성한 노트 필기입니다. 뷰는 1도 모르지만 친해지고 싶은 사람이 공부를 위해 작성한 글입니다 :-9 필요할 때마다 수정/보완해 나갈 예정입니다.              Vue.js 소개 Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 공식 페이지 - vuejs.org - kr.vuejs.org (한국어) 위 사이트에서 상세한 공식 문서를 제공하고 있..

2020.05.21

CSS

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

2020.05.17

JavaScript

ES6에서 추가된 const 와 let 에 대해 정리해 봅니다. 예전 블로그 내용을 가져와 살짝 다듬었습니다. const와 let 키워드를 처음 접하는 초보자가 보시면 좋을 것 같아요 :) 프롤로그 예전에 자바스크립트 강의를 듣다가 스크립트 파일에 적힌 const와 let이란 키워드를 보고, '허허허 강의 잘못 클릭했네 이건 JS강의가 아니잖아 허허' 이러고 뒤로가기를 누른 적이 있습니다. 그때 var 말고도 다르게 변수를 선언할 수 있다..

2020.04.29

JavaScript

this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 this가 어디에 바인딩되는지 알아봅시다. 1. 단독으로 쓴 this 묻지도 따지지도 않고 this를 호출하는 경우엔 global object를 가리킵니다. 브라우저에서 호출하는 경우 [object Window]가 되겠죠? 이는 ES5에서 추가된 strict m..

2020.04.28

JavaScript

문제 ReferenceError: primordials is not defined in node 라고 에러가 뙇! 떠서 당황당황 😣 검색해본 결과, Gulp 3 버전은 node 12 버전에서 제대로 동작하지 않는다고 합니다. 제가 작업한 환경은 node@11.13.0에 gulp@3.9.1였기에 잘 동작했는데, 최신 node 버전(12 이상)이 설치된 환경에서는 프로젝트가 실행이 되지 않았습니다(ㅠㅠ) 방법1 node 버전을 11로 다운그레이드하거나, gulp 버전을 4로 업그레이드합니다. (참..

2020.04.24

etc.

프롤로그 처음 Git을 알게 됐을 때 든 생각은 이거였죠. "이렇게 좋은 걸 왜 아무도 안 알려준 거야ㅠㅠㅠㅠ" 과거로 돌아가면 제 자신한테 "야야 이거 먼저 써 봐!!!"라고 말해주고 싶을 정도.... 하지만 저는 웹 퍼블리싱 파트만 따로 작업하는 경우가 많아 다른 팀과 함께 쓸 일이 잘 없었습니다. 저 혼자 브랜치 만들어서 북치고 장구치고 작업하는 게 대부분이었죠 허허허 (외롭...) 그래도 개발자와의 협업을 위해 한 번..

2020.04.16

etc.

뒤도 안 돌아보고 백업없이 포맷하는 바람에 적어보는 익스텐션 리스트 🤓 웹 퍼블리셔가 설치해 두면 좋은 확장 프로그램을 모아봤습니다. 멋진 익스텐션을 발견할 때마다 수시로 수정할 예정입니다. 범용 익스텐션 Prettier - Code formatter [링크] 추천 1순위!!! 꼭꼭 설치하세요! 주요 문법(HTML, SCSS, JSON 등)을 예쁜 형태로 정리해 줍니다. Beautify [링크] Prettier와 비슷한 익스텐션입니다. 에디터 내 코드를 예쁘..

2020.04.05

Markup

웹 퍼블리셔로 일하면서 '뭔가 알고는 있는데.... 뭐라 설명하면 좋지🙄' 싶은 것들이 있더라구요. 그래서 이번 기회에 기본적인 것들을 한 번 되짚어보려고 합니다. 결국 기본이 제일 중요한 거니까요 :> 웹 표준이란 웹 표준이란, 웹의 표준입니다. 어....... 그러니까.... 웹에선 이 규칙을 표준으로 삼고 따르세! 라고 정한 것입니다. 이렇게 표준을 정해놓는 이유는, 그래야 사용자들이 어떤 운영체제나 브라우저로 접속하..

2020.04.04

Markup

HTML(Hyper Text Markup Language) HTML이란 흔히 마크업 언어라고 합니다. 집을 지을 때 쓰는 철골에 비유할 수 있어요. 웹의 구조를 담당하기 때문에 튼튼하게 짓는 게 중요합니다. 최대한 구조에 맞게, "시멘틱하게" 마크업하는 것이 제일 중요합니다. 내가 바로 HTML5 현재 표준화된 HTML은 HTML5입니다. 5라는 건 버전을 말하는데요, 이 최신 버전은 기존의 XHTML이나 HTML4 등과 차이점이 있습니다. 어떤 새로운 모습..

2020.04.04

JavaScript

+ 이 글은 노마드 코더의 [유튜브 클론 코딩] 내용을 담고 있습니다. (2-0) What is a Server 소프트웨어 의미의 서버란, URL에 응답하고 접속을 허락하는 일을 해줍니다. 예를 들어, nykim.net 이란 웹 사이트도 서버가 있을 텐데요, 이 서버는 누군가 접속하길 기다리고 있다가 요청이 들어오면 갖고 있던 정보를 알려줍니다. 요약하자면, 서버란 접속을 Listen하는 무언가👂라고 할 수 있죠 (2-1) What is Express Express...

2020.02.24

Design

일러스트레이터 튜토리얼 (2019.11) Retro Text Style 20.02.02 (링크) 더보기 ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ 패턴이 될 이미지를 swatch(견본)에 넣어두면 손쉽게 사용할 수 있다. 텍스트 스타일을 그래픽 스타일에 넣어두면 다른 문자에도 쉽게 적용할 수 있다. ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼..

2020.02.02

CSS

프롤로그 레이아웃을 구현할 때 flexbox를 쓰면 참 편합니다. 플박만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에는 그리드가 좋다는 소문(?)을 들었거든요. 그래서 이번에는 grid를 배워서 좀 더 업그레이드를 해보려고 합니다. 아, 당연하지만 구 버전 IE에 대한 지원은 눈물을 머금고 포기해야 합니다. caniuse에 따르면 IE 11부터 부분 지원하고 있는데요, 그냥 Edge부터 잘 먹겠구나~..

2020.01.29