본문 바로가기

Hello World !

(6)
commit을 하나로 합친다? git rebase !! 일을 하다보면 하나의 프로젝트에서 branch를 왔다갔다 해야하는 일이 많다.그러다보면 하나의 issue에 여러 commit이 있으면 보기 안좋고 관리도 어려워진다. git에 익숙하지 않아 commit을 합치는 방법이 있을까 하고 구글링을 하다가 git rebase라는 명령어를 접하게 되었다.git rebase는 많은 기능을 가지고 있지만 이번 포스팅에서는 commit을 합치는 방법만 작성한다. * 스크린샷의 가려진 부분은 경로 및 날짜 등 저에게 민감한 부분이라 가린 점 양해 부탁드립니다. 준비단계! 먼저 여러개의 commit을 찍는다. git log를 통해 commit 내용을 확인 할 수 있다. 첫번째! git rebase --interactivegit rebase --interactive 혹은 gi..
Vue.js : 시작하기 1.Vue.js 란Vue.js는 UI 를 만들기 위한 자바스크립트 프레임워크입니다.기존의 JSP로 구현되어 있는 사이트에도 쉽게 적용가능하며, vue-router와 같은 라이브러리를 사용하면 SPA(Single Page Application) 아키텍처 구성 또한 가능합니다. 또한 ES6와 Webpark의 번들링을 통해 대규모 애플리케이션을 단일 파일 컴포넌트(Single File Componemts)로 빌드하여 복잡도를 줄일 수 있습니다. 데이터 바인딩 과 화면 단위를 컴포넌트 형태로 제공하며 관련 API 를 지원Angular 에서 지원하는 2 way data bindings 을 동일하게 제공다른 Front-End FW (Angular, React) 와 비교했을 때 훨씬 가볍고 빠름러닝커브가 낮고, 쉽게..
웹표준(Web Standards) 과 웹호환성(Cross Browsing) 1. 웹표준(Web Standards) 이란? 웹 표준(Web Standards) 이란 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화 되어 치우치지않도록 공통요소를 사용하여 웹페이지를 제작하는 기법을 의미합니다. 웹표준(Web standards) 을 준수해야하는 이유 국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있습니다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이..
SPA (Single Page Application) 이란 ? SPA (Single Page Application) 이란 ? 일반적으로 우리가 알고있는 웹 서비스는 어떠한 링크 (예:) 를 클릭하면 페이지가 이동하는 형식이며 조금 더 자세히 설명하자면요청시마다 리소스를 받아 전체 페이지를 다시 랜더링해주고 이를 통해 새로고침이 발생되어 사용성이 좋지않습니다. 그리고 변경이 필요없는 부분을 포함하여 전체페이지를 갱신하므로 비효율적입니다. 이러한 웹의 방식은 현재의 풍부한 웹환경을 표현하기에 속도적인 측면에서 많은 리스크를 가지고있었고 이를 해소하기위해 캐싱과 압축이라는 방식으로 어느정도 해소하였지만 결국 브라우저는 모든 CSS, 자바스크립트, HTML을 해석한뒤에 이들을 화면에 렌더링합니다. 반면 SPA(single page application) 는 기본적으로 브라..
CSS : 요소 및 레이어 중앙정렬 방법 퍼블리싱을 진행하다보면 레이어를 가운데정렬 할 일이 빈번하게 일어나는데요, 텍스트의 중앙정렬은 text-align 이나 line-height 를 이용하지만 레이어 중앙정렬은 어떻게 해야할까요? 하단에보이는 박스로 예시를 보여드리겠습니다. BOX position:absolute 와 margin 마이너스값 을 이용한 방법 우선, 가장 일반적이면서 간단한 방법입니다. 60px 이라는 정사각형 박스라고 가정하에 부모요소인 wrap 에 position: relative 로 기준을 잡고, 박스에 position: absolute 를 50% 씩 걸면 좌표의 기준이 박스 상단으로 잡히기때문에 기준점은 박스 상단을 기준으로 정렬이되어 중앙정렬이 되지않습니다. 이러한 경우에는 margin 값으로 박스의 절반만큼 마이너스 ..
meta tag : 메타태그란 ? 메타태그(meta tag)란? 메타태그(meta tag)란 이름에서 볼수있듯 (x)html 문서의 특수태그이며 반드시 안에 보다 상단에 위치해야합니다. 메타태그는 이 (x)html 문서가 어떤내용을 담고있고 핵심키워드는 무엇이며 누가만들었는지 어떤 언어코드로 설정되었는지의 정보를 담고있습니다. 화면에 표시되지는 않지만 검색엔진이나 브라우저에 읽힙니다. 이러한 메타태그로 charset, description, keyword, author, refresh, mode, viewport 등의 정보를 표기할수있습니다. 1.메타태그(meta tag)의 속성 메타태그는 http-equiv, name, content 세가지의 속성이있습니다. http-eqyiv이속성은 문서에서 초기정보를 나타내는 속성으로 메타요소에서 ..