분류 전체보기
-
내 사이트 이미지 로딩속도는 왜 느릴까?Dev 2020. 12. 22. 20:40
SPA가 대세로 자리매김한 요즘 사이트 최초 로딩 속도는 사이트의 품질 뿐만 아니라 프론트엔드 개발자의 실력까지 볼 수 있는 지표가 되었습니다. SPA에서는 페이지가 로드되었을 때 바로 VIews의 Interaction이 가능하도록 페이지 로드에 필요한 모든 것들을 맨 처음에 한번에 로딩하기 때문이죠. 구글은 최초 페이지 로딩이 3초 이상 걸릴 경우 50%의 사용자가 이탈한다는 분석값을 내놓았으며, 페이지 로딩 시간이 긴 경우 검색 순위를 낮추겠다는 말까지 나왔습니다. nownews.seoul.co.kr/news/newsView.php?id=20180123601013 https://nownews.seoul.co.kr/news/newsView.php?id=20180123601013&rftime=201506..
-
내 맘대로 추천하는 프론트엔드/리액트 개발자를 위한 편리한 VSCode Extension(확장 프로그램) 모음Dev 2020. 12. 15. 20:00
이번 포스팅에서는 제가 Vscode에서 자주 사용하는 확장 프로그램에 대해 공유하려고 합니다. 저는 자바스크립트나 타입스크립트 뿐 아니라 대부분의 개발을 VSCode로 하는 편이라 설치한 것들이 프론트엔드 개발 관련 확장 프로그램 위주이긴 하지만, 추가로 사용해보면 좋을 듯 한 확장 프로그램도 함께 소개하려 합니다. ESLint, Prettier는 너무나도 많이 사용되고 있기도 하고, 다른 포스팅에도 소개한 사례가 많아 제외하였습니다🙂 1. Beautify marketplace.visualstudio.com/items?itemName=HookyQR.beautify Beautify - Visual Studio Marketplace Extension for Visual Studio Code - Beautif..
-
[django] Admin 페이지를 이쁘게 커스텀해보자 1) 한글화, CSS, HTML 접근하기Coding/Python 2020. 12. 6. 22:06
안녕하세요. 오늘은 장고에서 기본으로 제공하는 Admin 페이지를 커스텀하는 방법에 대하여 포스팅합니다. 🧐 배경 제 프로젝트의 관리자 페이지는 장고의 Admin 템플릿을 그대로 사용하고 있습니다. 우선 장고의 ORM 방식을 채택한 DB Modeling을 사용하고 있다면, Admin에서 대부분의 CRUD 작업과 나아가 유저 관리, 권한 부여 등 아주 일반적인 기능을 모두 제공합니다. 빠르게 웹 페이지를 빌드하고 DB를 관리해야 한다면 굳이 관리자 페이지를 따로 제작하기보다 장고의 Admin을 그대로 사용해도 무방합니다. 물론 불편함은 존재합니다. 기본 Admin 페이지에 접속해 봅시다. 👇아직 Admin 페이지를 연결하지 않았다면, 잘 정리된 다음 포스팅을 참고해주세요! doorbw.tistory.com..
-
[django] shell 스크립트를 이용해 배포 자동화하기Dev 2020. 11. 30. 21:47
안녕하세요. 오늘은 장고에서 bash 스크립트를 사용하여 배포 과정을 간결하게 만든 경험에 대해 공유합니다. 웨? 귀찮으니까!😉 현재 제 프로젝트는 정적 파일은 Amazon s3에, 데이터베이스는 mysql로 관리하고 있습니다. 장고 프레임워크를 사용하고 있기 때문에 settings.py에 s3과 mysql 정보가 들어가 있고 기본적으로 python manage.py runserver 명령어를 통해 서버를 시작하면 해당 setting에 따라 s3, mysql에 접근하게 되죠. 따라서 dev에 작업(머지)된 내용을 master에 합치고 aws ec2에 배포를 하려면 다음과 같은 과정을 지나게 됩니다. * Github의 기본 브랜치는 이제 master에서 main으로 바뀌었습니다! 제 프로젝트는 git fl..
-
[SEO] 네이버 서치 어드바이저에서 내 사이트 최적화 만점을 받아보자Coding/etc 2020. 11. 18. 17:28
안녕하세요. 오늘은 SEO 최적화를 위해 네이버에서 제공하는 네이버 서치어드바이저를 사용해보도록 하겠습니다. 🧐 SEO가 뭔가요 ? SEO(Search Engine Optimization)는 검색 엔진 최적화라는 뜻으로, 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말합니다. 검색 엔진 최적화가 잘 된 사이트일수록, 검색 엔진에 노출되는 빈도가 높아지겠죠. 보통 많이 사용하는 검색엔진인 구글, 네이버 모두 SEO를 위한 툴을 제공하는데 구글의 경우 Google Search Console(구글 웹마스터), 네이버의 경우 네이버 서치어드바이저라는 툴을 제공합니다. 한번 이 서치어드바이저라는 걸 사용해 볼까요? 🕹 내 사..
-
아직 타입스크립트 사용을 고민 중이라면 (타입스크립트를 1달 간 사용해본 후기)Coding/TypeScript 2020. 10. 27. 00:51
안녕하세요, 오늘은 자바스크립트에서 타입스크립트로 넘어가면서 제가 개인적으로 느낀 점에 대하여 포스팅해보려 합니다. 아무래도 사용 기간이 짧고, 리액트에 대한 지식도 완전하지 않기 때문에 타입스크립트에 대한 분석보다는 여과없는 의견이 들어간 글이 될 것 같습니다. 🥺 편한 듯 불편한 너.. 저는 리액트를 사용하면서 자바스크립트만 사용하다가 최근에야 타입스크립트를 접하게 되었습니다. 최근에 회사에서 도입한 프로젝트를 타입스크립트 + 리액트로 구성하게 되었기 때문이죠. 확실히 타입스크립트를 시작하면서 공부하였을 때 알아본 것처럼, 타입스크립트는 장점이 확실하면서도 그 장점을 감당하기 위한 어쩔 수 없는 불편함이 존재하는 언어인 것 같습니다. 자바스크립트와 타입스크립트의 가장 큰 차이점은 뭘까요? 자바스크립트..
-
자바스크립트에서 세미콜론(;)을 꼭 사용해야 하는 이유가 있다?Coding/JavaScript 2020. 10. 16. 21:08
안녕하세요. 오늘은 자바스크립트에서의 세미콜론 사용 여부에 대한 재밌는 글을 발견하여 포스팅합니다. Shruti Kapoor의 why-are-expliit-semicolons-important-in-javascript라는 글을 읽어보면, 자바스크립트에서 세미콜론을 명시하는 것에 대한 중요성에 대해 다루고 있습니다. www.freecodecamp.org/news/codebyte-why-are-explicit-semicolons-important-in-javascript-49550bea0b82/ Why explicit semicolons are important in JavaScript > I am in "Effective JavaScript" training at @PayPalEng [https://twi..
-
[React][Typescript] 이벤트 타입을 외우지 않아도 되는 이유Coding/React.js 2020. 10. 14. 23:38
안녕하세요😄 오늘은 타입스크립트에서 이벤트 핸들링을 할 때 종종 발생하는 문제에 대해 포스팅하겠습니다. 타입스크립트는 어떠한 것이든 타입을 명시해 주어야 합니다. 타입을 모른다면 any라도 해줘야겠죠? 하지만 타입을 모른다고 무작정 any로 채워넣는 건 좋지 않습니다. 그럴 바에 그냥 자바스크립트로 리액트를 사용하는게 훨씬 편하겠죠. Vscode와 같은 IDE가 있다면 다른 인텔리전시 플러그인 없이도 타입을 알아낼 수가 있습니다. 다음 코드를 한 번 보겠습니다. const TelArea: React.FC = () => { const [value, setValue] = useState(''); const onChange = (e) => { const { value } = e.target; } return ..
