김평범's OrdinaryCode

🐣 들어가기 전 어제 진행된 Notion어워드 생방송을 보게 되면서, 많은 사람들이 Notion을 사용하고 있고 기업들도 많은 관심을 갖고 있다는 사실을 다시 한번 느끼게 되었다. 발표를 보면서 가장 인상 깊었던 것은 발표자료를 Notion을 활용해서 만들어와 주셨던 SK텔레콤 한보람 매니저님의 발표였다. 사실 몇 년간 모든 발표자료는 PPT가 가장 주류를 차지하고 있으나. 내 기준 많은 노력이 없이 만족스러운 디자인의 PPT가 나오기 힘들며, 만족스러운 디자인을 만들기 위해서는 너무 많은 시간이 필요한 방법이다. (PPT에 많은 템플릿이 있지만, 템플릿을 가지고 작업한다해도 작업시간이 매우 길다.🤣 물론 디자인에 욕심을 버리면 문제는 없다.) 예전에 이를 해결하기 위해 잠시 역동적인 느낌을 주는 Pre..

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

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

컴퓨터 작업을 하다 보면 이런저런 캡처 화면이 바로바로 필요할 때가 많다. 물론 윈도우 자체에 기본적으로 캡처 도구를 이용하면 간단한 캡처는 충분히 가능하다. 하지만 홈페이지 내 전체 페이지를 캡처를 한다던지 특정 부분을 캡쳐를 하거나 캡처 후 바로 텍스트 블러 처리를 하고 싶은 욕구들이 있어 캡처 도구 유목민 생활을 시작하게 되었다. 유목민 생활을 마치고 정착한 캡처 도구를 소개하려고 한다. 🌈Awesome Screenshot & Screen Recorder 처음 소개할 도구는 크롬 플로그인에서 제공하는 캡처 도구이다. 지금 사용하는 캡처 도구 중 마지막에 만나게 되었는데 가장 만족스러운 점은 홈페이지 등 브라우저 fullpage 캡처가 이제까지 만난 모든 도구 중 가장 잘 된다는 점에서 메인 캡처도구..

최근에 나의 필요에 의해서 Notion Template을 몇 개 만들었지만, 여러 사람들도 함께 이용하면 좋을 것같아 트위터나 오픈 채팅 쪽에 나의 노션 템플릿 링크를 공유해보았다. 🔗 노션 개인 공간 특정 페이지 공개하기 노션에서 개인공간에 만들어진 페이지는 기본적으로 나만 볼 수 있지만, 특정 사람들에게 공유하는 것도 가능하다. 우측 상단 공유 버튼을 클릭한 뒤 웹에서 공유를 활성화시키면, 해당 링크를 알고 있는 사람들은 내가 만든 페이지를 누구나 볼 수 있다. 편집과 댓글을 허용하면 다른 사람이 나의 페이지에 내용을 쓰는 것도 가능하며, 불특정 다수가 아니라 특정사람에게만 공개를 원할 경우는 이메일로 공유도 가능하다. 👩‍👩‍👧 노션 공개 페이지 방문자 확인하는 방법 그럼 이렇게 공개된 페이지는 얼..

WebStrom에서 플러그인 삭제하기 어제 무심코 뜬 WebStorm 2020.03 업데이트가 떴길래 그냥 무심코 확인을 누르며 계속 단계를 넘기며 업데이트를 진행했다. 업데이트 후 이상한 문제가 발생하기 시작하는데 Ctrl + A에 안내 창이 뜨거나, Drag 후 갑자기 마우스 커서가 insert 누른 커서처럼 변경된 후, 정상 커서로 돌아오지 않는 문제가 발생했다!😨 (아무거나 확인을 누르지 말아야 한다.) 후다닥 어떤 문제인지 찾아보니 업데이트하면서 무심코에 확인을 누르면서 Ideavim을 무심코 설치해 버린 것! 우측 하단에 처음 보는 V 아이콘이 보이면 IdeaVim이 설치된 것 Ctrl + A를 클릭하니 Using the Ctrl+A shortcut for Vim emulation 등의 안내 ..

💜 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 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된..

개인 프로젝트를 github를 새로 생성하고 오늘 첫 push를 시도했는데 처음부터 에러가 발생했다. 대략 뭐 내가 권한이 없다는 에러다. 맨 처음 github를 생성한 분들은 꼭 만나게 되는 에러지만 어렵지 않으니 같이 해결해보도록 하자. 🐹 Permission 에러의 원인은? github 서버는 보안을 위해 SSH키를 확인하여 접속이 가능하다. 현재 SSHKey가 없기 때문에 github에서 Push를 보낸 사용자가 인증할 방법이 없기 때문에 push가 거부된 것이다. 그렇기 때문에 github인증을 위한 SSH키를 만들어주면 해결이 된다. SSH키 확인하기 현재 나는 Window10을 이용 중이다. 편한 터미널 창을 열어준다. 나는 git bash를 애용하기 때문에 git bash창을 열었다. 내 ..

💜 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 ..

노션으로 이사 갑니다.👋 컨플루언스 → 노션 마이그레이션 방법 👧컨플루언스 1년 사용 후기 사내 협업 툴이 정립되지 않았던 재작년 업무 효율화를 위해서 다양한 업무 협업 툴을 찾아봤을 때, 처음 선택한 것이 아틀라시안(ATLASSSIAN) 제품군이었다. 아틀라시안을 선택한 이유는? JIRA - CONFLUENCE- BITBUCKET 등 개발에 필요한 다양한 제품군의 케미 기대 10인 이하에서 인원에서 연 솔루션 별 $100라는 합리적인 가격 당시 개발자라면 JIRA를 사용해야 한다는 사회분위기? (아무튼 그런 게 있었다😅) 위의 이유로 이슈 트래킹 도구인 Jira를 선택하면서 문서관리 도구로는 자연스럽게 Confluence가 도입되었다. 1년 동안 사용해본 Confluence의 단점은? 친절한 커스터마이..