국내 IT 기업들의 기술 블로그 글을 한 곳에서 모아보세요
2014년 첫 출시된 Vue.js가 2020년 9월, 버전 3.0으로 업그레이드되었습니다. Vue.js 3.0의 개발이 시작된 지 약 2년 만이었습니다. Vue.js는 개발자에게 더 쉽고, 가볍고, 누구나 빨리 배울 수 있는 접근성이 뛰어난 프레임워크라는 방향성을 가지고 개발됐습니다. Vue.js는 기존 HTML 마크업 기반의 템플릿을 그대로 활용하며...
CSS in JS 라이브러리를 사용할 때 React Context API를 사용해 Theme을 Typesafe하게 관리하는 방법을 소개합니다.
올-하! 💚 안녕하세요. 여러분! 올리브영에서 모바일 앱 개발을 담당하고있는 개발요정입니다. 오늘은 올리브영의 신규 서비스인 '인마이백' 앱 개발기를 이야기해보려고 합니다. What's…
…
제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다.
일렉트론은 노드JS(Node.js)를 기반으로 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크입니다. 2013년 아톰 쉘(Atom Shell)이라 불리는 크로스 플랫폼 애플리케이션 쉘로 시작하였으며 오픈소스화, 명칭 변경 등을 거쳐 현재 깃허브(GitHub)에 의해 개발되고 있습니다. 윈도우(Windows)...
안녕하세요! 최근에 포털개발팀에서 Zum NewTab 이라는 크롬 확장프로그램을 만들었습니다. 4월부터 8월까지의 확장프로그램을 개발, 배포, 검수하는 과정에서의 삽질한 경험을 공유하고자 이렇게 글을 올립니다. 1. 프로젝트 개요 크롬 확장프로그램 확장프로그램은 사용자의 브라우징 경험을 긍정적으로 확장시킬 수 있는 작은 소프트웨어입니다. 이를 통해 사...
주문서비스 개발팀이 선물하기 서비스를 오픈하기 까지 여정
인터넷은 상용화된 지 30년이 채 안 되었지만, 전 세계 인구의 60%에 달하는 46억 명이 사용하면서 경제, 사회, 문화 전반에 걸쳐 막대한 영향을 끼치고 있습니다. 인터넷이 급속 성장할 수 있었던 배경에는 월드와이드웹(World Wide Web)과 웹브라우저(Web browser)의 역할이 컸습니다. 웹브라우저는 HTML로 작성된 웹페이지를 읽을 ...
React의 기본 개념에 대해 알아봅시다
Slack Block Kit을 활용해 배송팁 공유 기능을 개발한 경험을 공유합니다
혹시 다들 뱅크샐러드 채용 사이트 보셨나요? 🙋🏻♂️ 안녕하세요, 이번에 뱅크샐러드 채용 사이트와 기술 블로그를 새롭게 개발한 Web Engineer…
멜론의 기존의 노후화된 어드민 페이지에서 이번에 새롭게 제작한 체계적인 디자인 시스템 가이드인 UI Kit 제작기를 소개드리고자 합니다. 제작 목적 멜론 서비스 디자인을 하면서 백엔드의 운영이 어떻게 이루어지고 있으며 어떤 시스템으로 등록되고 있는지는 정확하게는 알지는 못했습니다. 이번에 멜론 어드민 2.0 리뉴얼 킥오프 회의에서 그동안 운영...
컬리는 이렇게 일합니다
멜론의 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 임직원이 집필한 머릿속으로 그리는 리액트 프로그래밍인데요. 실제 프로젝트를 진행하면서 얻는 경험과 꿀팁이 가득 담긴 리액트 바이블! 저자 인터뷰를 다 같이 살펴볼까요?