김평범's OrdinaryCode

🔠 타이포그래피 웹 상에서 타이포그래피의 중요성은 항상 언급이 되고 있다. (타이포그래피는 활자 서체의 배열을 뜻함) 감각적인 타이포그래피를 홈페이지에 사용하기 위해서 이미지로 만들어서 올릴 수도 있으나, 이런 이미지로 만든 텍스트는 사용자의 요구사항에 대응하기 어렵다. 문구가 바뀔 때마다 디자이너의 재 작업이 필요하며, 반응형에도 대응하기 어렵기 때문이다. 오늘은 아래의 폰트를 css를 이용해서 Text를 감각적으로 꾸며보고자 한다. 오늘 이용할 기본 코드를 먼저 복사해서 실행해보자. 텍스트는 본인 입맛에 바꿔도 좋다. 기본 코드 ORDINARY CODE https://ordinary-code.tistory.com/ 🐣 웹 폰트 준비하기 웹 폰트를 활용하면 홈페이지 상에서 내가 원하는 폰트를 이용할 수..

😮 들어가기 전 개발 N연차 동안 메인 언어를 자바스크립트를 사용하고 있다. 개발자 주니어 시절에는 내가 쓰는 코드가 올바른지 맞는지 모르고 일단 되게 하는데에 급급했다. 3년 차를 넘어가면서 주니어 시절 짠 내 코드를 유지보수 하기 시작하면서 중복제거의 중요성을 뼈저리게 느끼기 시작했다. (사용자들은 이렇게 만들어달라고 했다가 사용 후 이게 생각보다 불편해니 바꿔달라는 경우가 매우 많았다.) 내가 작성한 돌아가기만 하는 코드는 사용자의 요구사항으로 작은 게 하나 바뀌어도 모든 페이지에 들어가서 검색 찾기로 해당 코드가 들어간 부분을 찾아서 수정하는 불편함을 감수해야 했다. 그래서 이후 공통 함수를 만들거나, 자주 쓰는 UI는 컴포넌트로 만들어 관리하기 시작했다. 이것만으로도 나는 이제 좀 내가 발전했다..

💜 2020 State of CSS Survey 1편에서는 레이아웃 중 가장 사랑받는 flexbox를 살펴보았다면 이번 편에서는 grid를 살펴보려고 한다. 사실 실무에서 flexbox를 너무 잘 활용하고 있었고, flexbox로 아쉬운 부분들은 기존 float방식으로 충분히 원하는 레이아웃을 짤 수 있었기에 새로운 layout에 대한 필요성을 아직 느끼지 못했다. flexbox 사용이 궁금하다면 전의 포스팅을 먼저 참고하고 오자! [css/layout] CSS Layout 방법 - 1️⃣ flexbox 💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된..

💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된다. 이럴 때 도움이 되는 것은 Survey! 2016년부터 시작된 State of Javascirpt 설문조사가 성공적으로 이뤄짐에 따라 2019년도부터 CSS Survey도 시작하게 되었다. (결과는 아래 링크를 참조해보자. 오늘도 모르는 게 너무 많은 나를 반성하게 된다.😓) The State of CSS 2020 Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've ..

Vue error 해결방법 Vue packages version mismatch vue 프로젝트 내에 package.json파일을 이용하고 있을 때, 새로 프로젝트를 가져오거나, npm update를 진행한 뒤 해당 에러를 만날 때가 있다. 원인 현재 사용하고 있는 npm 라이브러리의 의존성이 깨질 때 해당 에러가 발생한다. vue에 의존하는 vue-server-renderer의 버전이 높기 때문이다. 해결방법 해결은 간단하다 vue-server-renderer와 vue의 버전을 맞춰주면 해결 된다. npm install vue-server-renderer로 설치 시 자동적으로 최신 버전이 설치된다. 하지만 우리는 vue와 버전을 맞춰서 설치해야 되기 때문에 특정 버전을 지정해서 npm을 설치하도록 한다..

현업 개발자가 소개하는 vue.js 유용한 라이브러리 필자는 현재 Vue.js를 주 언어로 사용하는 프런트 앤드 개발자이다. 오늘은 현업 시 유용하게 사용하고 있는 Vue.js 라이브러리 들을 소개해보려고 한다. 누구나 보기 좋은 웹 화면은 만들기 위함이나, 까다로운 코드들을 해결해주는 라이브러리 들이다. 사용법이 매우 편해 Learning Time(학습시간)이 적지만, 웹에서는 드라마틱한 효과를 내주는 소중한 라이브러리이다. 🖱 Vuebar License : MIT Demo : github.serafin.io/vuebar/ Vuebar Other than examples below - this site itself is an example of Vuebar usage. If you look to the..

JavaScript의 Array 메서드 중 강력한 기능 Map, filter 활용하기 최근 프로젝트 개발 중 DBQuery를 통해 받은 결과를 재가공하는 일이 많아졌다. 해당 값에서 중복을 제거한다던지, 특정 조건을 만족하는 값으로 새로운 배열을 만들어야 할 경우가 생겼는데, 이 경우 많은 선배 개발자들은 Array 메서드인 map과 filter를 활용하는 것을 알 수 있었다. 오늘은 이러한 Array에서 Map과 Filter가 무엇인지, 어떤 식으로 이용해야 될지 공부를 해보기로 했다. 💎Array.prototype.map() ES5에서는 Array method 중 Map이 추가되었다. map()을 활용할 경우, 특정 배열을 for문을 도는 것처럼 각각의 요소에 대해 함수를 호출하여, 해당 함수를 실행..