본문 바로가기

FRONT

(5)
ECMAScript2021 - 최신 JS 기능 5가 보호되어 있는 글입니다.
Array prototype methods 들어가기 전.. 드디어 Array prototype methods 차례가 왔습니다! 빠바바밤~~! 기존 ES5에서 넘어온 것도, ES6, ES7에서 추가된 함수도 있습니다. 모든 method를 다 작성할 것은 아닙니다.. 제 기준으로 그저 자주 사용할 수 있는 ..? 주관적인 기준으로 몇 개 뽑았습니다. Array.prototype methods 배열은 Array 타입 객체입니다. Array.prototype의 프로퍼티를 상속받습니다. Array prototype에는 수 많은 method가 정의되어 있습니다. 모든 배열은 이 method를 사용할 수 있습니다. Array.prototype's method list 수정 메서드 원본 배열을 수정 접근자 메서드 배열을 다른 형태로 가공해 새로운 배열을 반환 ..
translate() 그리고 absolute positioning 들어가기 전.. 안녕하세요. 오늘의 주제는 absolute와 translate! 비슷비슷한 녀석들을 데리고 왔습니다. absolute positioning 가장 가까운 static이 아닌 조상 엘리먼트에게서 상대적으로 위치가 지정됩니다. ※ html ※ css .relative { width: 100%; height: 300px; position: relative; } .absolute { position: absolute; bottom: 40px; right: 40px; } ※ result position : relative 저는 relative 값을 갖고 있는 부모 엘리먼트입니다. 제가 static이였다면 제 자식 absolute 엘리먼트는 제 상위나 body를 기준 삼을 것입니다. position ..
Vuex : Vue.js 상태관리 패턴 라이브러리 이해하기 들어가기 전.. 작년 초 Vue 스터디를 했을 때 vuex에 대한 주제도 나왔었습니다. 다 같이 읽기는 했지만 당시에는 낯설었던 용어들에 이해를 제대로 하지 못한 상태로 넘어간 것 같네요. 그런 상태로 사용했었는데.. 제대로 이해하기 위해 오늘은 Vuex에 대해 적어볼까 합니다. Vuex? 상태 관리?? Vuex는 Vue.js 에 대한 상태 관리 패턴 + 라이브러리입니다. Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다. 또한, 애플리케이션에서 Flux 아키텍쳐를 구현하는데 도움을 주는 라이브러리이기에 Vuex를 제대로 설명하기 전, 상태 관리와 MVC 패턴과 Flux 패턴에 대해 가볍게 짚고 넘어가겠습니다. 상태 관리란? 상태(state)는 뷰 data 속성과 비슷합니..
css : Flex 알아가기 들어가기 전.. 제 첫 포스팅입니다. 이번에 프론트엔드 면접을 보면서 flex 관련 질문이 나왔고 시원하게 대답을 하지 못했습니다. ㅠ-ㅠ 반성하자는 의미에서 flex에 대한 포스팅을 적습니다.. FLEX? 너 뭐하는 놈이야? css의 flex. 이야기가 많이 나오죠. 요즘 흔히들 말하는 자랑할 때의 FLEX? 언어유희입니다. 하하..! (MDN曰) flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 적절한 정렬 기능을 제공했기 때문입니다. 물론, 이나 float inline-block 등으로 정렬하는 경우도 있지만, clear를 꼭 해줘야 하거나 inline-block의 기본 여백 등 문제가 있기에 우리는 flex 를 사용하는 것이 좋습니다. Flex(Flexible Box)는 엘리먼..