devBlog
Frontend 글 모음
기업 기술블로그의 Frontend 관련 글 580개
Webpack dev server를 이용한 개발 환경 구성 Part2
Part1에서는 JS파일을 이용한 프론트엔드 단독 개발 모드 publish 모드에 대해 설명드렸고, Part2에서는 리버스 프록시를 활용하여 백엔드와 연동하는 dev 모드에 대해 설명드립니다. 이번 예제도 Webpack4, Vue-CLI2, Axios를 이용합니다. 다시 들어가며… Part1에서 설명드린 publish 모드는 개발 편의성을 위한 설정에 가까웠습니다. 이미 많은 개발자들이 하고 있었던 방식일 것이구요. Part2에서는 조금 색다른
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Part1에서는 프론트엔드 단독 개발 모드를 구성하는 방법을, Part2에서는 백엔드 연동 개발 모드를 구성한 방법에 대해 공유합니다. 설명드릴 예제 코드는 Webpack4, Axios를 이용합니다. 목차 들어가기 전에 도입 배경 NPM 스크립트 소개 각 모드별 구성 방법 4-1. publish 모드 4-2. dev 모드 정리 마치며 1~4까지는 Part 1, 5~7은 Part2로 나누어 설명을 진행하겠습니다. 1. 들어가기 전에 최근 Gith
게시판 CMS - 파일럿 프로젝트
입사일부터 일주일간 세팅 및 적응기간을 마치고 팀에서 실무를 하기 위한 전반적인 웹 기술들을 숙지하고자 하는 목적을 가지고 4주간 파일럿 프로젝트를 진행하였습니다. 이 글에서는 제가 파일럿 프로젝트를 진행할 때 사용한 기술들 , 진행하면서 어려웠던 점을 어떻게 해결하였는지 , 프로젝트를 마친 뒤 느낀 점에 대해 공유하고자 합니다. 1. 프로젝트 주제 제가 전달받은 프로젝트 주제는 소셜 로그인을 이용한 게시판 서비스 및 CMS시스템 구현이었습
CSS3 Transform 3D - part1
CSS 3 Transform 3D CSS 3 기술의 구체적인 사용법이나 활용보다는 웹에서 이러한 방식으로도 표현이 가능하다는 것을 공유하고자 글을 작성하였습니다. 크롬이나 파이어폭스에서 확인해주세요 ^^
(HTML/CSS) Vertical-Align(1) - Line Box
안녕하세요 지그재그에서 프론트엔드 개발을 하고 있는 태재영입니다. 프론트엔드 개발자에게 중앙 정렬을 어떻게 하냐고 물어보면 inline 요소는 text-align 속성을 center로 지정하고, block 요소는 margin 속성을 auto로 지정한다고 대답할 겁니다. 그런데 좌우가 아니라 위아래 수직 정렬을 어떻게 하겠냐고 물어보면 대답을 선뜻 못하거나 굉장히 다양한 답변들이 나옵니다. 그 여러 방법들 중에 개발자들이 사용하면서도 “왜 되는거
카페 형식 게시판 구현 - 파일럿 프로젝트
줌인터넷에는 “파일럿 프로젝트” 라는 좋은 개발 문화가 있습니다. 신입 개발자들이 실무에 들어가기 전 전반적인 웹 서비스 개발 기술을 숙지하고 개인 및 업무 역량을 강화할 수 있도록 도와주는 것이죠. 파일럿 프로젝트를 통해서 앞으로 사용할 기술에 대한 두려움을 없앨 수 있었고 실무에서 수도 없이 많이 마주하게 될 문제들을 미리 경험해보면서 스스로 해결할 수 있는 능력을 강화시키고 위기를 극복함으로써 개발에 대한 자신감을 얻을 수 있었습니다. [
페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션 만들기
GatsbyJS와 react-transition-group을 사용해서 간단한 페이지 전환 애니메이션을 구현하는 법을 짚어봅니다.
쪼그라드는 웹페이지
모바일 반응형 웹페이지를 쉽고 빠르게 구현하기 위해 저희가 고안한 방법을 소개합니다.
HTML Canvas로 기가 픽셀 데이터 시각화하기
Context API가 Redux를 대체할 수 있을까요?
Google Fonts + 한국어 알아보기
Redux가 필요하다는 것을 언제 알 수 있나요?
당신에게 Redux는 필요 없을지도 모릅니다.
티몬 라이브 플랫폼 제작기
티몬 라이브 플랫폼 제작기 신사업개발랩 김영은 여러분, 스마트폰으로 동영상 많이 보시나요? 출퇴근길에 오며 가며 보면 많은 사람들이 유튜브로 콘텐츠를 보거나 생중계 스포츠, 좋아하는 TV 프로그램을 봅니다. 티몬 앱을 들어와보시면 이미지 대신 동영상으로 설명을 대신하는 상품들도 많아졌죠. 그렇다면 라이브 동영상을 보며 상품을 사는 건 어떨까요? 이미 TV 홈쇼핑을 통해 구매해봤던 분이시라면 익숙한 경험일 수도 있습니다. 제가 속한 신사업개발랩에
[알쓸신팁-부록] Javascript 성능 저하 방지법
Front 개발을 하다가 작은 실수 하나로 화면의 성능이 확 떨어지게 되는 경우들이 있습니다. 이런 상황을 미연에 방지하기 위하여, 간단한 3가지 방법을 알려드립니다.1. 전역변수 및 Element를 지역변수화 하여 캐싱 먼저 지역변수를 활용하는 방법입니다.(무슨 말인지 0.1도 모르겠네요.ㅠ^ㅠ) 역시 개발자는 코드로 이야기를 해야겠죠~ㅎㅎ위의 코드를 보면, asisFunction의 안에서 document라는 javascript 전역 객체에
[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!
시대가 갈수록 Server 개발자는 API 위주의 개발을 하고, Front는 Front 전문 개발자의 영역으로 굳어지고 있습니다. 티몬 또한 이와 다르지 않게 기존 PHP 소스 이외에 Java API로 전환되는 화면은 점차 Front와 Server의 영역이 확연히 구분되고 있습니다. 하지만, 기존 소스 수정 또는 각종 어드민 등의 개발에서는 여전히 서버 개발자가 Front를 컨트롤 할 경우가 있고, 서버 개발 역량 강화를 위해 병행되는 간단한
Typescript로 Local Storage 안전하게 사용하기
최근…