Dev/Knowledge 12

모바일 전용 사이즈로 제작된 웹페이지라면...

가끔 프로젝트 진행하다보면 반응형 웹앱이 아닌 모바일 전용으로 기획하고 구현할 때가 있습니다. 모바일에 맞춘 좁은 너비만 가지고 있기 때문에 웹에서 보여줄 일이 생기면 매우 보여주기 민망한 상황이 자주 발생하는데, 그러한 경우 무리해서 반응형으로 만들기보단 아래와 같이 간단한 배경만 추가해주는 정도로 꽤 깔끔한 반응형 웹앱처럼 보여줄 수 있습니다. 위와 같이 실제로 구현한 부분은 고정폭으로 하여 중간 또는 어느 한쪽에 적당히 자리만 잡아주고, 남는 부분은 관련 배경이나 내용으로 채워 미디어 쿼리 설정만 해주면 큰 노력없이 깔끔한 사이트를 만들 수 있습니다. 샘플 페이지 보러가기 >

Dev/Knowledge 2022.08.08

커밋 메시지 작성 방법(Conventional Commits)과 템플릿 적용하기

글을 시작하기에 앞서... 개인 프로젝트들을 진행하면서 Github의 저장소에 작업물을 올리다보면 매번 반복적으로 나오는 패턴이 있습니다. (1) git add . (2) git commit -m "커밋할 내용" (3) git push origin master 혼자서 작업할때는 이정도로도 충분하기도 하지만, 이래저레 웹서핑을 하다보면 커밋을 하는 방법에 관한 글들을 많이 볼 수 있습니다. 수많은 사이트들이 대부분 동일한 내용의 글들을 작성하고 있는데 대략적인 내용은 다음과 같습니다. - 커밋의 기본 형식은 타입(제목) / 본문 / 꼬리말 3개로 나뉜다. - 제목과 본문, 꼬리말은 중간에 빈줄을 넣어 구분한다. - 제목은 50자 이내로, 본문은 72자마다 줄바꿈을 한다 등 - 제목의 첫글자는 대문자로, ..

Dev/Knowledge 2022.07.21

헤로쿠(heroku) H10 App Crashed 오류 해결하기

헤로쿠(heroku)를 사용하다보면 매우 쉽게 만날 수 있는 H10 App Crashed의 다양한 오류 해결 방법 중 2가지에 관한 내용을 정리해 봅니다. #1 오류 메시지 확인 분명 local에서는 잘 작동하던 것들도 heroku에 업로드하면 위와 같이 어플리케이션 에러를 쉽게 만날 수 있는데, 위에서 알려주는 다음 명령어인 "heroku logs --tail"을 작업중인 터미널에서 입력하여 원인을 찾아봅니다. 날짜 어쩌구 저쩌구 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sws-wiki.herokuapp.com request_id=4a1aba64-a4c0-4a1e-8bb4-231d3cc51bbb fwd="..

Dev/Knowledge 2022.07.19

VS Code - 잘 사용하던 단축키(Emmet)이 동작하지 않는다면...?

몇가지 간단한 코드만 입력해도 자동으로 완성해주는 플러그인 기능인 에밋(emmit)은 VS Code에서 추가적인 설정을 하지 않아도 자동으로 지원하고 있습니다. 이 글은 딱히 뭔가를 건든적이 없는거 같은데... 갑자기 에밋 기능이 작동하지 않을때 확인해 볼 수 있는 방법 중 하나입니다. #1. 설정으로 이동 VS Code에서 톱니모양 아이콘을 눌러 설정으로 이동합니다. 단축키 ctrl + , (맥은 command + ,) #2. Emmet: Trigger Expansion On Tab 검색창에 emmit을 입력하고 스크롤을 내려 Emmet: Trigger Expansion On Tab이라는 체크박스를 확인해 봅니다. 체크가 해제되어 있다면 체크를 해주게 되면 Emmit 기능이 활성화 됩니다.

Dev/Knowledge 2022.07.17

구글 맵을 이용하여 위도와 경도 쉽게 확인하는 방법

구글맵을 이용해 특정 지점을 검색하면 주소창의 가장 뒤쪽에 d35.8538161!4d128.5918331 같은 형식으로 나타나는 것을 이용해 위도와 경도를 확인할수도 있지만, 설정을 조금만 바꿔주면 매우 편리하게 확인할 수 있는 방법이 있습니다. 설정방법 (1) 구글맵 오른쪽 아래에 있는 설정되어 지역(대한민국)을 클릭합니다. (2) 지역 설정을 대한민국이 아닌 해외로 설정합니다. *여기서는 일단 가나로 설정하였습니다 설정은 여기까지만 하면 끝입니다. 위도, 경도 확인 방법 (1) 지도의 원하는 위치를 클릭하게되면 좌표가 찍히면서 아래쪽에 위도와 경도가 나타납니다. (2) 마우스 오른쪽 버튼을 클릭할 경우 메뉴에 바로 좌표가 나타나며, 해당 좌표를 클릭하면 내용이 클립보드에 복사가 되어 다른곳에 바로 붙..

Dev/Knowledge 2022.07.07

웹 개발자/디자이너가 사용하면 좋은 Google의 Tools

#1 모바일 친화성 테스트 모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다. 사용 방법은 매우 간단합니다. 테스트 하려는 웹페이지의 전체 URL만 입력하면 됩니다. 모바일 친화성 테스트 페이지로 바로가기 > #2 PageSpeed Insights 웹페이지의 전반적인 속도를 측정하여 사이트 성능을 파악할 수 있습니다. 사이트를 로드하여 시뮬레이션을 한 후 속도에 관한 다양한 분..

Dev/Knowledge 2022.05.08

임팩트 있는 코딩을 해보자: Power Mode

쓸데없지만 멋있는!? 마치 스타벅스 한복판에 자리잡고 이걸로 코딩을 하고있으면 주변의 이목을 끌수있을거 같은. 그런 확장앱을 하나 소개해보고자 합니다. #1 Power Mode 당신의 코드가 파워풀해진다! Power Mode는 VSCODE, Brakets 등에서 사용할 수 있는 확장 툴입니다. 코딩을 할때 지진과 같이 화면이 흔들리면서 이펙트와 콤보수(연속 타이핑수)를 표시해 줍니다. #2 설치 방법 확장 마켓 플레이스로 이동한 후, power mode를 검색하면 쉽게 설치 할 수 있습니다. #3 사용방법 (1) 설정 창으로 이동 하여 power mode를 검색합니다. (2) 가장 위쪽에 위치한 powermode: Enabled를 체크해주면 사용 상태가 됩니다. 설정을 통해 찾아 들어가는게 귀찮다면 명령..

Dev/Knowledge 2022.05.02

웹 페이지의 목적별 분류

웹페이지의 목적을 어떻게 설정하였는지에 따라 다음과 같은 형식으로 나눌 수 있습니다. 제작자의 성향과 특성에 맞게 세분화하여 막연하게 '웹 사이트를 만든다'라고 하기보단 '웹 사이트를 만들고 있으며 특히 쇼핑몰을 잘 만듭니다' 같은 식으로 전문성을 어필하는 것도 좋습니다. #1 기업(corporate) 사이트 기업에 대한 정보를 게시하고 전달 "우리 회사를 알리고 싶다" #2 브랜딩 사이트 기업 및 상품의 이미지를 향상시키는 목적 "우리의 회사(브랜드)와 상품의 이미지를 향상하고 싶다" #3 서비스 사이트 서비스나 상품을 알리기 위한 사이트 "우리의 서비스(상품)를 알리고 싶다" #4 랜딩 페이지 구입 등의 액션을 노린 원페이지 형식의 완결형 사이트 "빠르게 고객을 집중시키고 싶다." #5 캠페인 사이트..

Dev/Knowledge 2022.04.19

기본적인 마크다운 작성 방법

기본적인 마크 다운 사용 방법입니다. *하단의 적용 결과는 모두 이미지 파일입니다. #1 기본 문법 1) 제목 # 다음 한 칸 띄우고 작성 # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 2) 굵게 하기(Bold) 텍스트 앞 뒤에 ** 작성 **bold text** 3) 이탤릭체 텍스트 앞 뒤에 * 작성 *italicized text* 4) 인용문 > 한 칸 띄우고 내용 > The overriding design goal for Markdown's > formatting syntax is to make it as readable > as possible. The idea is that a > Markdown-formatted document should be > publi..

Dev/Knowledge 2022.04.12

[Visual Studio Code] Live Server 크롬으로 열기

Visual Studio Code의 Live Server는 기본적으로 설정되어있는 브라우저를 이용하여 열리게 되어있습니다. window라면 Edge가 별로라 기본을 Chrome으로 설정하는 경우가 많으니 큰 문제가 안될 것인데, Mac 같은 경우엔 safari가 충분히 매력적이기에 Chrome을 메인으로 쓰는 사람은 잘 없을 것입니다. 이럴 때 라이브 서버를 크롬 브라우저로, 혹은 원하는 다른 브라우저로 설정하기 위해선 다음과 같은 방법으로 라이브 서버의 설정을 변경해 주면 됩니다 # Live Server Config Step 1. '설정'으로 이동합니다. Mac은 "Code > 기본 설정 > 설정"(단축키 cmd + ,) 윈도우는 "파일 > 기본 설정 > 설정"(단축키 ctrl + ,) Step 2. ..

Dev/Knowledge 2022.04.10
반응형