Coding
-
[Typescript] 옵셔널 체이닝(Optional Chaining) 파헤치기Coding/TypeScript 2021. 4. 20. 17:28
Typescript에는 옵셔널 체이닝이라는 문법이 있다. null이나 undefined가 반환되면, 즉시 중단하고 undefined를 반환하는 문법이다. Javscript와 달리 Typescript는 컴파일 언어이기 때문에 undefined로 예상되는 객체에서 메소드를 사용하거나 하는 경우 오류를 발생시킨다. Javscript에도 존재하는 문법이지만 실험적으로 존재하는 기능이고 Typescript에서는 3.7 릴리즈 버전으로 도입되었다. Swift나 Kotlin 같은 신세대(?) 언어에서도 널리 사용되고 있는 기능이다. const response = // API를 통해 데이터를 불러온다 const { data } = response.data; if (data && data.person) { return ..
-
(내가 보려고 만든) Web/App UI 용어 & Component 정리Coding/etc 2021. 4. 13. 17:43
🥲 계기 프론트엔드 개발자로 일하다보면 디자이너&퍼블리셔 뿐 아니라 개발 용어에 무지한 팀원들과도 소통을 해야 할 때가 많았다. 예를 들어 이번에 배포하면서 수정되는 UI나 주요 Feature에 대해 정리하여 전달해야 하는데, Header, Footer, Radio 등등 퍼블리싱 경험을 통해 얻은 용어를 무의식적으로 사용하다보면, 의사소통이 원활하게 느껴지지 않는다고 느꼈다. 이번 프로젝트에서 실제 발생한 대화를 극단적인 케이스로 각색해 공유해보겠다. 🧑🏻💻 개발자 : 이번에 요청주신 기획안 바탕으로 Header 영역을 개편하는데, 링크 버튼을 몇개로 줄이고 대신 메인 영역에 Primary Button을 추가하기로 했습니다. 🧑🏻🎨 디자이너 : 상단 메뉴바의 GNB 개수 수정하고, CTA를 메인으로 ..
-
[Javascript] 유사배열 파헤치기(Feat. Object, Dictionary)Coding/JavaScript 2021. 4. 6. 17:25
Javascript에는 유사배열이(Array-Like)라는 개념이 존재한다. 이름 그대로 배열인 척 하는 객체라고 생각하면 된다. 유사배열에 대해 다루기에 앞서 Javascript의 Object 개념에 대해 자세히 파헤쳐보아야 한다. 명쾌한 설명을 위해 내 경험을 공유해보겠다. Python의 Dictionary, Java의 HashMap.. 최근에 PS와 함께 알고리즘을 공부하면서 자료구조에 대해 다룰 일이 많아졌다. Iterable한 객체의 대표격인 배열만으로도 반복되는 데이터를 다룰 수 있지만, 메모리와 시간에서 극한의 효율을 끌어내야 하는 PS에서는 Key, Value를 사용하는 Dictionary 형태의 자료구조로 Iterable을 표현해야 할 때도 많다. 고유한 Key를 통해 Value를 호출하..
-
웹사이트에서 Video 태그 Autoplay 이슈 해결하기Coding/etc 2021. 3. 30. 20:18
안녕하세요. 오늘은 웹사이트에 동영상을 띄우기 위해 Video 태그를 사용할 때 생길 수 있는 이슈에 대해 정리해보겠습니다. 🧐 동영상을 자연스럽게 렌더링하기 이번에 웹사이트에 동영상을 추가하기 위해 대중적으로 많이 사용하는 Video 태그를 사용하게 되었습니다. S3으로부터 비디오 파일을 받아온다음 렌더링해야하기 때문에 아무래도 로딩 시간이 너무 오래 걸리면 안된다는 점이 중요했습니다. 그러다보니 자연스레 4k 영상이라 용량이 매우 높았던 것을 압축해야 했습니다. 기본적으로 동영상이 용량이 이미지보다 훨씬 높을 수 밖에 없었기 때문에, 최대한 유저가 자연스럽게 동영상 로딩을 받아들일 수 있는 장치가 필요했죠. Video 태그에는 'poster' , 'autoplay'라는 attribute를 추가할 수 ..
-
[django] Model IntegerField에 최소/최대값 지정하기Coding/Python 2021. 1. 19. 18:49
안녕하세요. 오늘은 장고의 Model을 사용하면서 정수를 입력받는 IntegerField에서 최소/최댓값을 지정하는 방법에 대해 포스팅합니다. 👀 배경 저는 장고의 기본 어드민을 그대로 사용하고 있기 때문에, validation 처리를 하면서 장고의 기능을 전적으로 활용하는 수 밖에 없었습니다. 그러던 와중 정수의 최소, 최댓값을 0~5로 지정해야 하는 이슈가 발생했습니다. help_text를 이용하면 사용하는 유저에게 0~5 사이 값을 입력해야 한다고 권고할 수는 있지만, 확실한 validation 처리는 불가능했습니다. class Post(models.Model): num = models.IntegerField("숫자", default = 0, help_text="0~5사이 값으로 입력하세요") 저만..
-
자바스크립트의 간단하면서도 트렌디한 문법 모아보기Coding/JavaScript 2021. 1. 5. 20:44
안녕하세요. 이번 포스팅에서는 자바스크립트를 보다 더 깔끔하게 사용할 수 있게 도와주는 문법들에 대하여 포스팅합니다. 저도 자바스크립트를 사용하면서 문자열, 배열, 객체에 대하여 처리할 때 보다 더 간결하고, 트렌디하게 작성할 수 있도록 하는 문법에 대해 자주 포스팅해왔고, 시간이 지나 결과적으로 가장 자주 사용하게 되는 문법들에 대하여 정리해보았습니다. 🧐 다른 코드와 비교해보자 템플릿 리터럴 템플릿 리터럴은 내장된 표현식을 허용하여 문자열 보간과 여러 줄로 이루어진 문자열을 동시에 사용할 수 있게 도와주는 문법입니다. 파이썬의 format과 비슷한 개념으로, 함수의 매개변수에도 사용할 수 있습니다. $('.container').append( ' ' + car + '' + name + ' ' ) 다음과..
-
[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..
-
[SEO] 네이버 서치 어드바이저에서 내 사이트 최적화 만점을 받아보자Coding/etc 2020. 11. 18. 17:28
안녕하세요. 오늘은 SEO 최적화를 위해 네이버에서 제공하는 네이버 서치어드바이저를 사용해보도록 하겠습니다. 🧐 SEO가 뭔가요 ? SEO(Search Engine Optimization)는 검색 엔진 최적화라는 뜻으로, 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말합니다. 검색 엔진 최적화가 잘 된 사이트일수록, 검색 엔진에 노출되는 빈도가 높아지겠죠. 보통 많이 사용하는 검색엔진인 구글, 네이버 모두 SEO를 위한 툴을 제공하는데 구글의 경우 Google Search Console(구글 웹마스터), 네이버의 경우 네이버 서치어드바이저라는 툴을 제공합니다. 한번 이 서치어드바이저라는 걸 사용해 볼까요? 🕹 내 사..
