본문 바로가기

개발(Develop)82

코딩을 위한 글꼴 설치하기/ 코딩용 글꼴 가독성, 문자열 자간 폭, 들여쓰기 완벽/D2Coding 글꼴/ 글꼴 추천 코딩을 하다보면 에러가 나는 경우가 한 번 이상은 있을 것이다. 그럴 때 아무리 봐도 코드에 이상이 없는데, 에러를 나타내는 경우가 많다. 어떤 경우는 알파벳 엘(l)과 대문자(I), 숫자(1)을, 또는 숫자(0)과 알파벳 오(o, O)를 헷갈려 잘못 입력해 오류가 난 경우가 있다. 이를 위해 비슷하게 생긴 글자들을 쉽게 구분할 수 있는 '코딩용 글꼴'을 설치하고자 한다. 우선 아래 주소에 있는 깃허브 페이지에 접속한다. https://github.com/naver/d2codingfont naver/d2codingfont D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com.. 2021. 7. 21.
웹 / 메타태그(meta tag) 수정하기/ 내 쇼핑몰 카카오톡에 공유했을 때 나타나는 썸네일 수정하기 /og:title, og:image, og:description 이번 글에서는 내 쇼핑몰을 카카오톡에 공유했을 때 나타나는 '메타태그(meta tag)'를 바꿔보도록 하겠다. 메타태그는 이전 글에서도 다룬 적이 있는데, 한번 더 다뤄보도록 하겠다. 이전 글이 궁금하다면 아래를 클릭하도록 하자 ▼ 메타태그란 무엇인가?/ 메타(meta)태그 크롤링하기/ 네이버 영화 크롤링해서 웹에 메모하기 메타태그란? '메타(meta) 태그는 HTML을 통해 만든 웹 페이지를 브라우저가 개괄적으로 판단할 수 있도록 도움을 주기 위해서 사용하는 태그'이다. 그리고 메타 태그는 부분에 들어가서 사이트의 속성을 설명해준다. 예시로, 우리가 카카오톡으로 URL을 보냈을 때의 생김새를 보면 된다. 아래 예시는 내 티스토리 블로그를 카톡으로 전송했을 때의 사진이다. 카카오톡은 썸네일과 디스크립션을.. 2021. 6. 26.
웹서버 / 서버 컴퓨터에 도메인 주소 적용하기/ 가비아(gabia) 도메인 구매 후 도메인(domain) 적용하는 방법/ 도매인 구매대행 서비스 서버를 돌려 내가 만든 쇼핑몰을 13.124.8.152:5000이라는 IP 주소를 입력해 들어가보았다. 여기까지 오지 못 했다면 이전 글을 참고해서 따라오도록 하자 ▼ AWS서버 컴퓨터 DB에 접속하기/ mongoDB 서버 데이터베이스에 접속/ 컴퓨터 꺼둔 채로 서버 돌리는 방법 웹서버 / AWS서버 컴퓨터 DB에 접속하기/ mongoDB 서버 데이터베이스에 접속/ 컴퓨터 꺼둔 채로 서버 자. 아마존웹서비스(AWS) 사이트에서 구입한 서버 컴퓨터의 포트까지 열여주었다. 포트를 열어주어야 5000포트, 80포트로 서버에 들어갈 수가 있다. 거기까지 안 되어 있다면 아래를 참고해 포트를 parkjh7764.tistory.com 그런데 ! 만약에 내가 만든 웹 사이트라고 친구한테 '13.124.8.152:50.. 2021. 6. 22.
웹서버 / AWS서버 컴퓨터 DB에 접속하기/ mongoDB 서버 데이터베이스에 접속/ 컴퓨터 꺼둔 채로 서버 돌리는 방법/ nohup 설정, kill -9, 포트포워딩 자. 아마존웹서비스(AWS) 사이트에서 구입한 서버 컴퓨터의 포트까지 열여주었다. 포트를 열어주어야 5000포트, 80포트로 서버에 들어갈 수가 있다. 거기까지 안 되어 있다면 아래를 참고해 포트를 열어주자 ▼ AWS 포트 개방/ 리눅스 환경 Flask 프레임워크, pymongo 설치/ AWS에서 구입한 인스턴스 포트포워딩 서버 컴퓨터 IP의 포트까지 열어주었다면, 이번에 할 것은 다른 사람들이 내가 만든 웹 사이트를 볼 수 있도록 내가 만든 프로젝트를 서버 컴퓨터에 올려 띄우는 작업을 해보겠다. 우선, 내가 아닌 다른 사람들에게 보여줄 웹페이지가 있어야 한다. 나는 이전에 만들어두었던 '나만의 쇼핑몰'을 가져올 것이다. 필요하다면 아래에 있는 이전 글을 참고해 코드를 가져와 사용하도록 하자. ▼ 쇼핑몰.. 2021. 6. 20.
웹서버 / AWS 포트 개방/ 리눅스 환경 Flask 프레임워크, pymongo 설치/ AWS에서 구입한 인스턴스 포트포워딩 이 글을 보기 전에 웹 서버 컴퓨터의 개발환경을 세팅해주어야 한다. 이유는, 그래야 이번 글에서 몽고DB 데이터베이스를 다루고 pip나 python 명령어가 이전에 세팅해준 것으로 다룰 것이기 때문이다. 세팅은 이전 글에서 하고 오자 ▼ 리눅스 환경의 서버 컴퓨터 개발환경 세팅하기/ 서버 환경 명령어 통일하기/ pip, mongoDB, 시간 동기화, python3 웹서버 / 리눅스 환경의 서버 컴퓨터 개발환경 세팅하기/ 서버 환경 명령어 통일하기/ 환경설정 우선 파일질라(FileZilla) 프로그램을 켜서, 서버 컴퓨터에 접속을 한다. 접속하는 부분은 이전 글을 참고해서, 거기까지 완료하고 이 글을 보도록 하자 아래 참고 ▼ 파일질라(Filezilla)로 서버 접속 parkjh7764.tistory.co.. 2021. 6. 19.
[HTML] 웹페이지 콘텐츠 섹션(section) 나누기/ 콘텐츠 판별을 위한 태그(tag)/ 태그로 콘텐츠 틀 잡기 웹 페이지를 만들 때 섹션(section, 구획)을 나눠야 한다. 예를 들면 네이버의 모바일 화면을 살펴보자. 네이버가 검색엔진이다 보니, 검색을 하는 부분이 가장 중요해 '검색어를 입력해주세요'를 가장 우선적으로 두었고, 맨 아래에 이용약관, 개인정보처리방침, 고객센터 등 사용자가 잘 이용하지 않는 부분은 맨아래(footer)로 작게 두었다. 우선순위에 따라 콘텐츠들을 다르게 배치하였고 해당 콘텐츠 요소들마다 섹션(section)이 나눠진 것을 볼 수 있다 ! 네이버의 화면을 HTML 태그로 단순하게 표현을 하면 아래와 같이 나타낼 수가 있다. 영어로 적힌 부분은 HTML에서 사용할 수 있는 '태그(tag)'이다. 콘텐츠들의 섹션(section)을 나누는 태그(tag)들에 대해서 알아보도록 하겠다. 제.. 2021. 6. 18.
[웹기초] 브라우저란 무엇인가, HTML이란, CSS란, JavaScript란 무엇인가/ 웹개발 기초부터 공부 기본기를 갖추지 못 하면 나중에 어려운 문제에 직면했을 때 무너질 가능성이 크기에 이제부터는 정말.. 우리가 흔히 사용하는 브라우저가 무엇이고.. 등등 기초부터 차근차근 공부해 가보도록 하겠습니다. 우리가 사용하는 크롬, 인터넷 익스플로러, 사파리 등을 뜻하는 '브라우저'는 무엇일까? 브라우저에는 아래와 같은 종류가 있다. 여기서 1개 이상은 사용해보았을 것이다. '브라우저(Browser)'란 무엇인가? 브라우저는 간단히 말하면 '웹 정보를 화면에 표시하는 소프트웨어'를 말한다. Browse 는 둘러보다, 훑어보다, 인터넷을 돌아다니다라는 뜻을 가지고 있는 영어단어로, 브라우저가 무엇인지 영어 해석으로 조금 유추해볼 수 있을 것 같다. 조금 더 깊게 들어가면 브라우저는 인터넷 상에 연결된 '웹 서버'에 .. 2021. 6. 17.
깃허브(GitHub) 쉬운 설치/ 회원가입부터 초보자 눈높이에 맞춘 깃허브 설치/ 깃 허브(GitHub) 무엇인가? 개념부터 이해하기/ 분산 버전 관리시스템(DVCS) 오늘은 개발자라든가, IT 분야에 관심을 가지고 있는 분이라면 한 번쯤 들어봤을 법한 깃 허브(GitHub)를 알아보고, 다운로드도 받아보겠다. 그 전에 깃 허브(GitHub), 허브라는 단어는 어디서 많이 들어봤지 않은가? 그렇다면 깃(Git)은 무엇일까? 깃(Git)이란? 소스코드 관리를 위한 '분산 버전 관리 시스템(VCS)'를 말한다. 그렇다면 버전 관리 시스템(VCS)란 무엇인가? 이름에서 알 수 있듯이 파일들의 '버전'을 관리하기 위한 시스템으로 개발 도중에 발생하는 문제들을 해결하고자, 개발 중인 파일들의 변경 사항들을 저장한다. 코드를 추가하거나 수정할 때마다 변경 사항이 저장되기 때문에 저장했던 과거의 어떤 시점으로 되돌릴 수 있어 오류가 발생하면 복구가 가능하다는 장점이 있다. 또한 소.. 2021. 6. 16.
웹서버 / 리눅스 환경의 서버 컴퓨터 개발환경 세팅하기/ 서버 환경 명령어 통일하기/ 환경설정 쉘 명령어/ pip, mongoDB, 시간 동기화, python3 우선 파일질라(FileZilla) 프로그램을 켜서, 서버 컴퓨터에 접속을 한다. 접속하는 부분은 이전 글을 참고해서, 거기까지 완료하고 이 글을 보도록 하자 아래 참고 ▼ 파일질라(Filezilla)로 서버 접속하기/ 서버에 파일 전송해 서버 컴퓨터로 파일 실행시켜보기 웹 / 파일질라(Filezilla)로 서버 접속하기/ 서버에 파일 전송해 서버 컴퓨터로 파일 실행시켜보기 파일질라(FileZilla)라는 FTP 프로그램을 통해 가상 컴퓨터, 즉 만들어둔 서버(server) 컴퓨터에 파일을 전송하고, 서버 컴퓨터에서 파일을 실행하는 과정을 해보자. FileZilla가 내 컴퓨터에 설치가 안 parkjh7764.tistory.com 이번 글에서 할 것은 서버 컴퓨터의 개발 환경을 세팅할 것이다! 이유는 우리.. 2021. 6. 15.

티스토리툴바