기술 블로그 모음

컬리는 이렇게 일합니다

멜론의 ForU 서비스는 사용자가 앱에서 활동(좋아요, 팬맺기 등)하고, 음악을 감상하면 할수록 더더욱 정교해지는 개인화 음악추천 서비스입니다. 안녕하세요 이번에는 멜론의 5.0 업데이트에서 가장 뜨거운 반응을 얻고 있는 ForU의 사용성 변화에 대한 데이타를 들여다 보았습니다. 업데이트 이전에는  맞춤선곡, 날씨선곡, 셀프...

파일럿 프로젝트 줌인터넷 포털개발팀의 주니어 개발자가 수습 기간 동안 진행하는 파일럿 프로젝트입니다. 1. 프로젝트 개요 프로젝트의 목표, 개발 스펙, 그리고 기본적인 기능들에 대해 소개합니다. 목표 및 의의 모바일 웹 서비스 페이지 개발 외부 API를 이용한 데이터 획득 및 정제 Vue.js로 front-end 구성 front-end Vue-cli3...

안녕하세요. 오늘은 멜론 5.0 업데이트를 진행하며, 피드를 어떻게 개선하면 좋을 지 고민하고 반영한 이야기를 적어보려 합니다. 피드는 어떤 서비스인가요? 멜론 피드는 팬 맺은 아티스트, 팔로우 한 DJ나 매거진 등의 새로운 업데이트 소식을 알려주는 개인 맞춤 서비스입니다. 어떻게 하면 피드를 받아볼 수 있나요? 멜론을 사용하다 맘에 드는 아티스트 이름

이제 실시간차트 이외에다양한 차트도 즐겨보세요! 멜론은 기존에 오랫동안 제공해왔던 실시간차트 이외에도, 새로운 시각으로 발견한 다양한 주제의 차트를 소개하고자 계속해서 노력하고 있습니다. 이번 글에서는 멜론 5.0 버전에서 새로운 모습으로 트렌디하게 업데이트된 '멜론차트'에 대해 소개해 드리고자 합니다. 최신 음악 트렌드를 ...

올해도 멜론 한 해 최대의 행사 MMA(멜론뮤직어워드)가 돌아왔습니다! 올해는 MMA 브랜딩에 파격 변신이 있었습니다. 멜론의 아이덴티티와 빛이 겹친 느낌을 살려 동글동글하게 갔던 작년까지의 로고와는 달리, 새로운 변신을 맞이했지요. 그린, 블랙, 화이트 이 세가지 컬러로 MMA만의 강렬한 느낌을 잘 살리게 리뉴얼되었답니다. MMA 2019 ...

웹 프론트엔드 기술은 빠르게 발전하는 것만큼이나 유행에 민감합니다. jQuery로 대표되는 초기 프론트엔드 라이브러리를 시작으로 다수의 프레임워크(또는 라이브러리, 이후 프레임워크로 통칭)들이 나타나고 사라지기를 반복해왔습니다. 때로 이들은 개발자들에게 새로운 패러다임, 디자인 방식, 개념 등을 제시하기도 했습니다. 그러나 개발자 입장에서는 얼마나 도...

과거와 달리 최근에는 자바스트립트 진영에서도 프레임워크를 이용한 개발이 필수로 여겨지고 있습니다. 2017년까지만 해도 개발자들은 프로젝트에 Angular와 React 중 어느 것을 사용해야 하는지 여부를 주로 토론했으나 2018년 이후 Vue.js라는 새로운 프레임워크에 대한 관심이 높아지고 있는 추세입니다. 본 아티클에서는 웹 프론트엔드 영역에서 ...

Part1에서는 JS파일을 이용한 프론트엔드 단독 개발 모드 publish 모드에 대해 설명드렸고, Part2에서는 리버스 프록시를 활용하여 백엔드와 연동하는 dev 모드에 대해 설명드립니다. 이번 예제도 Webpack4, Vue-CLI2, Axios를 이용합니다. 다시 들어가며… Part1에서 설명드린 publish 모드는 개발 편의성을 위한 설정에...

Part1에서는 프론트엔드 단독 개발 모드를 구성하는 방법을, Part2에서는 백엔드 연동 개발 모드를 구성한 방법에 대해 공유합니다. 설명드릴 예제 코드는 Webpack4, Axios를 이용합니다. 목차 들어가기 전에 도입 배경 NPM 스크립트 소개 각 모드별 구성 방법 4-1. publish 모드 4-2. dev 모드 정리 마치며 1~4까지는 Pa...

줌인터넷에는 “파일럿 프로젝트” 라는 좋은 개발 문화가 있습니다. 신입 개발자들이 실무에 들어가기 전 전반적인 웹 서비스 개발 기술을 숙지하고 개인 및 업무 역량을 강화할 수 있도록 도와주는 것이죠. 파일럿 프로젝트를 통해서 앞으로 사용할 기술에 대한 두려움을 없앨 수 있었고 실무에서 수도 없이 많이 마주하게 될 문제들을 미리 경험해보면서 스스로 해결...

GatsbyJS와 react-transition-group을 사용해서 간단한 페이지 전환 애니메이션을 구현하는 법을 짚어봅니다.

모바일 반응형 웹페이지를 쉽고 빠르게 구현하기 위해 저희가 고안한 방법을 소개합니다.

깃허브에 있는 수천 개의 공용 자바스크립트 및 타입스크립트 프로젝트를 분석하여 정적 분석 도구로 수집한 코드 결함 사례와 정적 분석 도구를 선택할 때 고려해야 할 사항들을 살펴보겠습니다

정적 분석 도구가 자바스크립트 개발에 어떤 도움을 줄 수 있는지 살펴보도록 하겠습니다.

오늘은 디자인 편견 깨기 두 번째 시간으로 디자인에 대한 편견을 없애주는 프로토타이핑에 대해 이야기해보겠습니다. 디자인 편견 깨기 기사에서 언급했던 디자인에 대한 편견은 프로토타이핑을 하면서 깨어질 수 있습니다.

삼성SDS 소셜 미디어 팬 여러분~ 오늘은 머릿속에 리액트 프레임워크가 마구마구 떠오르게 만드는 책 한 권 소개해드립니다! 바로 삼성SDS 임직원이 집필한 머릿속으로 그리는 리액트 프로그래밍인데요. 실제 프로젝트를 진행하면서 얻는 경험과 꿀팁이 가득 담긴 리액트 바이블! 저자 인터뷰를 다 같이 살펴볼까요?

최근 AI(Artificial Intelligence, 인공지능) 분야에 대한 투자와 연구가 활발히 진행되고 있습니다. AI 기술 발달에 따라 개인 비서처럼 사용자에게 특화된 서비스를 제공하는 가상 개인 비서(Virtual Personal Assistants) 서비스도 급격히 증가하고 있는데요 이번 기사에서는 가상 개인 비서에 숨겨진 제로 UI(Use...

여러분은 스마트폰을 새로 구입할 때 어떤 부분을 가장 우선시하나요? 브랜드, 디자인, 가격 등 사람마다 선택 요소가 다른데요. 특히 요즘 스마트 기기 디자인은 외관뿐만 아니라 소비자가 얼마나 쉽고 편리하게 사용할 수 있는지를 포함하는 개념으로 바뀌고 있습니다.

티몬에 실시간 항공권 검색 서비스가 있다는 사실! 아시나요? : ) 티몬에서는 정해진 구간에 대한 항공권을 ‘딜’ 형태로 판매하는 상품도 있고, 내가 원하는 날짜와 여행지를 선택하여 항공권을 검색하는 ‘실시간 항공권 검색’ 서비스도 제공하고 있답니다. ▼ 항공권 검색 서비스에 대한 이용 방법은 여기서 확인해보세요! 항공권 검색 서비스 앞에 [실시간]이...

Front 개발을 하다가 작은 실수 하나로 화면의 성능이 확 떨어지게 되는 경우들이 있습니다. 이런 상황을 미연에 방지하기 위하여, 간단한 3가지 방법을 알려드립니다.1. 전역변수 및 Element를 지역변수화 하여 캐싱 먼저 지역변수를 활용하는 방법입니다.(무슨 말인지 0.1도 모르겠네요.ㅠ^ㅠ) 역시 개발자는 코드로 이야기를 해야겠죠~ㅎㅎ위의 코드...

시대가 갈수록 Server 개발자는 API 위주의 개발을 하고, Front는 Front 전문 개발자의 영역으로 굳어지고 있습니다. 티몬 또한 이와 다르지 않게 기존 PHP 소스 이외에 Java API로 전환되는 화면은 점차 Front와 Server의 영역이 확연히 구분되고 있습니다. 하지만, 기존 소스 수정 또는 각종 어드민 등의 개발에서는 여전히 서...

최근…

초기의 티몬 앱 화면 구성은 지금에 비하면 꽤 단순한 구조였습니다. 한 화면에서 특정 카테고리 상품 목록을 동일한 패턴으로 보여주고 배너 몇 개 들어가는 정도였으니까요. 하지만 더 나은 사용자 경험을 위해 한 화면에 다양한 타입의 뷰를 적용하기 시작했습니다. 슈퍼마트 탭의 홈 화면만 해도 이벤트 배너 목록, 슈퍼 프라이스 목록, 기획전 목록.. 등 노...

들어가며안녕하세요. 티몬에서 이제 1년차가 된 신입 개발자입니다! 그 동안 업무를 하면서 배운 것들이 많은데요, 최근에는 티몬의 상품을 관리하는 운영시스템 화면을 개발하면서 자바스크립트를 많이 알게 되었습니다. 안타깝게도 전 자바스크립트를 잘 알지도 못하는 ‘자알못’이었기 때문에 개발하면서 많은 시행착오를 겪었는데요. 특히 기대와 다르게 실행되는 비동...

들어가며웹 개발자라면 자바스크립트를 많이 사용하게 됩니다. 웹이 발전하면서, 예전에는 수십줄이면 충분했던 자바스크립트 코드가 이제는 수백, 수천줄 이상이 되었습니다. 클라이언트 개발을 하다보면, 오랜시간 동안 수행될 수 밖에 없는 기능을 구현해야 할 때가 있습니다. 웹 어플리케이션 서버와 주고받는 데이터 양이 매우 많거나, 서버에서 처리하기에는 부하가...

티몬의 자동완성ES플러그인 커스터마이징을 다루는 마지막 3부의 주제로 한글 검색에 필수적인 자모 분해 Filter에 대해 알아보겠습니다. 티몬에서는 사용자의 검색 편의성을 위해 질의어를 입력하면 연관된 검색어가 자동으로 추천되는 자동완성 서비스를 제공하고 있습니다. 현재 해당 서비스는 한글 자모 분석 로직이 API와 색인 배치에 함께 녹아 있어 API...

들어가며 티몬에서는 고객에게 검색 서비스를 제공하기 위해 검색엔진으로 엘라스틱 서치(Elasticsearch, 이하 ES)를 사용하고 있습니다. 고객과 기획자의 요구사항에 충족하는 검색 결과를 위해 티몬에서는 ES플러그인을 커스터마이징 하고 있습니다. 지난 1부에서는 특정 검색 키워드에 따라 제작형 컨텐츠를 추천하는 커스텀 분석기 플러그인의 개발 작업...

들어가며예상하셨겠지만 티몬에서는 고객에게 검색 서비스를 제공하기 위해 검색엔진으로 엘라스틱 서치(Elasticsearch, 이하 ES)를 사용하고 있습니다. ES는 Solr와 같이 Lucene 을 기반으로 개발되었기 때문에 별다른 추가 기능 없이 그 자체로도 웬만한 검색 서비스는 구현할 수 있는 수준입니다. 하지만 티몬 같은 커머스 검색은 고객과 기획...

나는 있잖아. 하루 종일 너만 생각해, 네가 어디에 있는지, 무슨 생각을 하는지, 나를 어떻게 생각하는지 말이야.. 내가 누구냐고? ‘너’만 바라보며 만들었어, 나는 UX 디자인이야.