카카오 지도 API를 처음 사용해본다면 이런 에러를 볼 수도 있을 것이다. 우리가 카카오 api를 쓸 수 있는 과정을 쉽게 설명해보면, 일단 스크립트를 추가하게 되면 kakao라는 객체가 window(전역 객체)에 등록이 되기 때문에 그 안(maps)에 지도를 그려주는 메서드들을 호출해서 사용할 수 있는 것이다. kakao.maps.LatLng is not a constructor라는 에러가 발생하는 이유는 LatLng이라는 메서드는 아직 로딩이 끝나지 않아서 존재하지 않는데 생성자 함수 (constructor)로 사용하려고 하기 때문에 발생하는 오류다. kakao 맵 공식문서에서는 아래와 같은 방법으로 지도를 그리도록 안내하고 있다 const container = document.getElementBy..

TMI일수는 있지만, 필자는 웹에 관심을 갖게 된 게 CSS 라이브러리/프레임워크 덕분(?)이기도 하다. 대학생 때 처음 웹 관련 과목을 들었을 때 Bootstrap이라는 CSS 프레임워크를 처음 접했는데, HTML/CSS를 완전히 이해하지 못한 상태임에도 빠르게 결과물이 잘 나와서 자신감도 붙고 재미도 붙일 수 있었다. 물론 기본기도 중요하지만 CSS 라이브러리의 도움 없이 처음부터 모든 걸 직접 만들어야 했다면 중간에 좌절했을 수도 있을 거란 생각이 든다. 또 여러 CSS 라이브러리를 쓰다 보면 컴포넌트에 어떤 props가 있으면 좋을지, 디자인 패턴은 어떻게 가져가면 좋을지에 대한 안목(?)도 생기게 되는 것 같다. 그래서 새로운 미니 프로젝트를 할 때는 항상 새로운 CSS 라이브러리/프레임워크를 ..

BFC란 용어는 들어보지 못했어도 아마 html/css로 레이아웃 작성을 해봤다면 이미 BFC의 원리는 알고 있을 가능성이 크다. Normal Flow 일단 html에 작성된 요소들의 위치를 정하는 방법은 여러 가지 있는데, 일반적인 상황에서 각각의 요소들이 배치되는 순서를 normal-flow(일반적 흐름) 라고 한다. 이런식으로 블록 요소들은 기본적으로 위에서 아래로 배치되고 인라인 요소들은 왼쪽부터 시작해 오른쪽으로 배치된다. BFC & IFC normal flow에는 두 가지 배치 방식이 있는데 그중 한 가지가 Block Formatting Context(BFC) , 그리고 Inline Formatting Context(IFC) 다. 전자는 영역에 포함된 요소들을 세로로 배치할 수 있도록 도와주는..

이번 포스트에서는 CSS 방법론중 하나인 BEM(Block Element Modifier)에 관해서 알아보겠습니다. CSS방법론이라고 하면 뭔가 거창해 보일수도 있지만 그냥 클래스네임을 짓는 여러가지 방법들이라 볼수 있고 BEM은 그 여러 방법중에 자주 채택되는 방법중 하나 입니다. 사실 요즘은 클래스 이름을 아예 신경쓰지 않도록 CSS Module이나 Styled Component 등을 더 많이 사용해서 잘 안쓰이긴하지만... 아무튼 정해진 표기법이 있다면 팀원들끼리 의사소통을 원활하게 할수 있고 또 유지보수도 더 쉽게 할수 있다는 장점이 있겠죠? 만약 다른 프로젝트에 참여하게 된다해도 BEM으로 작성된 코드를보며 어떤 요소들이 어떻게 연결되어있고 작동 하는지 더 쉽게 이해할수도 있습니다. BEM은 B..

본 포스트는 예전에 다른 블로그에 올렸던 포스트를 수정해서 다시 올렸습니다 Position 속성은 html문서내 요소를 배치하는 방법을 지정해주는 속성으로 static, relative, absolute, fixed 그리고 IE에서는 지원하지 않는 sticky 이렇게 5가지의 값을 줄수있고 기본값으로는 static으로 설정됩니다. 오늘은 sticky를 제외한 4가지 속성을 구체적으로 살펴보면서 각자의 특성을 이해해보도록 하겠습니다. Static position: static 앞에서 말했듯이 포지션 속성(position property)의 기본값입니다. 다른 속성보다 눈에 익숙하지않는 이유는 기본값이라 굳이 명시를 하지 않기 때문입니다. static 요소를 만들면 일반적인 흐름을 (normal flow) ..

새로운 노트북이 도착한 관계로, 오늘은 git 사용법을 다시한번 복습해보면서 적용해보았다 버전확인 필자는 macOS를 사용하고 있었기에 별도의 설치는 필요없었지만 (MAC OS는 기본적으로 설치되어있음). 윈도우라면 여기서 git을 깔고 진행하면 된다. 설치 완료후 terminal(맥)이나 git bash(윈도우)에서 버전 체크를 해보자 $ git --version config 정보 입력/변경 이제 사용자이름과 이메일주소를 입력해보자. 이정보는 Github의 유저이름과 이메일 주소와는 무관하다 (물론 같아도 상관없지만). Git을 통해 커밋 할때마다 이 정보가 사용되고 github에 이 내용이 표시가 된다. 그럼 설정을 해주자 $ git config --global user.name "내 유저이름" $ ..