June Dev Blog June's Dev World

분류 전체보기

• [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사이 값으로 입력하세요") 저만..

• [GAS] 구글 앱스 스크립트를 이용해 구글 설문 결과 슬랙 알람을 만들어보자(Feat. django)

  Dev 2021. 1. 12. 01:52

  안녕하세요. 오늘은 구글 앱스 스크립트(GAS)를 이용하여 구글 설문 콜백을 통해 알람을 구현해보겠습니다. 구글 설문의 제출 결과를 구글 스프레드시트에 연동하는 것은 아주 간단하지만, 그러면 꼭 시트를 주기적으로 확인해봐야 모니터링할 수 있다는 단점이 있었습니다. Gmail로도 연동도 가능하나, 저희 팀에서는 슬랙을 공용 업무 툴로 사용하고 있기 때문에 업무 쓰레드를 통일시키기 위해 슬랙 알람으로 메시지를 보내도록 구현해보았습니다. 🧐 GAS란? Google Apps Script는 Google Workspace 플랫폼(스프레드시트, 워드 등등)에서 사용하기 위해 사이드 프로젝트로 개발한 스크립팅 플랫폼입니다. 경량화된 앱을 만들기 위해 많은 기능을 제공하고 자체 서버에서 Event, Trigger 처리를..

• 자바스크립트의 간단하면서도 트렌디한 문법 모아보기

  Coding/JavaScript 2021. 1. 5. 20:44

  안녕하세요. 이번 포스팅에서는 자바스크립트를 보다 더 깔끔하게 사용할 수 있게 도와주는 문법들에 대하여 포스팅합니다. 저도 자바스크립트를 사용하면서 문자열, 배열, 객체에 대하여 처리할 때 보다 더 간결하고, 트렌디하게 작성할 수 있도록 하는 문법에 대해 자주 포스팅해왔고, 시간이 지나 결과적으로 가장 자주 사용하게 되는 문법들에 대하여 정리해보았습니다. 🧐 다른 코드와 비교해보자 템플릿 리터럴 템플릿 리터럴은 내장된 표현식을 허용하여 문자열 보간과 여러 줄로 이루어진 문자열을 동시에 사용할 수 있게 도와주는 문법입니다. 파이썬의 format과 비슷한 개념으로, 함수의 매개변수에도 사용할 수 있습니다. $('.container').append( ' ' + car + '' + name + ' ' ) 다음과..

• [CSS] transform scale을 이용한 Image Zoom 애니메이션 넣기

  Dev 2020. 12. 29. 11:16

  안녕하세요. 오늘은 이미지 Zoom 효과를 주는 법에 대해 포스팅합니다. 이 포스팅에서 최종적으로 구현해 볼 효과는 다음과 같습니다. 고정된 요소에 마우스를 올렸을 때 이미지만 확대되는 것처럼 보이는 효과입니다. 저는 Album이나 Article 형태의 퍼블리싱을 작업하면서 간단한 hover 효과를 주고 싶을 때 자주 사용합니다. 우선 기본적인 컨테이너와 이미지, 텍스트 배치를 해 봅시다. .container { width: 700px; height: 700px; border: 1px solid #222; } .parent { width: 100%; height: 500px; } .child { width: 100%; height: 100%; } 핑핑이 자, 핑핑이가 화면에 나타나지만 아무런 효과가 일어..