[React] 토이 프로젝트 - 유튜브 목록 페이지(1)
스터디 토이 프로젝트로 유튜브 목록 및 동영상을 플레이할 수 있는 SPA를 제작했다. 상단 검색창에서 원하는 키워드를 검색하면 해당 키워드와 일치하는 비디오 리스트가 화면에 렌더링되며, 각 비디오를 클릭했을 때 상세설명과 함께 유튜브 영상을 보여줄 수 있도록 했다. 프로젝트의 작업 순서는 다음과 같다. 작업은 리액트 작업환경이 설정되어 있으며, 프로젝트 폴더가 생성되어 있다는 가정 하에 진행된다. API로 유튜브 목록 불러오기 1.1 API 설치 커맨트 창에서 프로젝트 폴더로 위치를 지정하고, npm으로 youtube-api…
Read Article →
하드코딩하는 사람들 오픈 세미나
일시 : 2018. 11. 24 (sat) / 장소 : 서울특별시 서대문구 연희로 한빛빌딩 퍼블리셔 / 프론트엔드 개발자들이 모인 네이버 카페인 ' 하드코딩하는 사람들 (약칭 하코사)'의 2018 연말 세미나에 참가했다. 세미나 참가는 처음이라 이해를 못하면 어떡하지 하는 걱정이 내심 있었는데, 강연 내용도 모두 유익했고 같이 참가하신 회원 분들과 서로 직업에 대한 이야기도 나눌 수 있어 의미있는 시간이었다. 퍼블리셔의 취업과 성장, 그리고 이직 by…
Read Article →
React 톺아보기 1. 설치, JSX, props/state
현재 시장에 나와있는 자바스크립트 프레임워크/라이브러리 중 하나를 배워보려고 생각했는데, 원래는 vue.js를 처음으로 공부하려고 생각했다가 react 로 마음을 돌렸다. 둘 중 어느 것이 뛰어난지는 초심자인 나로선 실감하기 어렵지만 공부하는 데 있어 react는 라이브러리기에 ES6과 같은 다양한 js 생태계를 조금씩 맛볼 수 있다는 장점이 있다고 생각했기 때문이다. 공부는 저번 달부터 진행한 리액트 스터디와, 책, 그리고 velopert님의 블로그 를 참고해 진행했다. 시작하기 jQuery처럼 cdn…
Read Article →
[JavaScript] Layer Pop-up02
가상의 팝업 공간을 만들고, 버튼을 클릭하면 버튼과 매칭되는 컨텐츠를 팝업 공간 안에 보여주는 팝업을 제작했다. 이 때 접근성을 고려하여 탭이 팝업창 안에서만 돌아갈 수 있도록 하는 함수를 추가했다. Markup CSS JavaScript 작업물은 추후에 정리해서 codepen에 업로드할 예정이다.
Read Article →[jQuery] Scroll Event
jQuery 메서드를 이용하여 원하는 위치로 스크롤을 이동시키는 이벤트를 만들었다. 이벤트를 만드는데 충족시킨 기본 조건은 아래와 같다. 조건 버튼 및 섹션 컬러 설정 버튼을 클릭하면 매칭된 div 위치로 스크롤 이동 스크롤을 내릴 때 화면에 노출된 div와 일치한 버튼 컬러 변경 스크롤이 최상단에서 일정 높이까지 내려갔을 때 버튼 바 컬러 전체 변경 title 버튼에 마우스가 진입했을 때 애니메이션 진행 버튼 및 섹션 컬러 설정 버튼을 클릭하면 매칭된 div 위치로 이동 스크롤을 내릴 때 화면에 노출된 div…
Read Article →[JavaScript] Layer Pop-up
버튼을 클릭하면 화면을 꽉 채운 팝업이 나타나고, 우측 상단의 X버튼을 클릭하면 닫히는 형태의 팝업을 생성했다. 이 때 포커스는 접근성을 고려하여 레이어 안에서만 돌아야 하며, X버튼을 클릭했을 때 팝업 노출을 시켰던 버튼으로 다시 포커스가 돌아올 수 있도록 추가했다. 먼저 html로 레이아웃을 만든다. script로 넘어와서 팝업 이벤트를 추가할 생성자 함수와 비어있는 객체를 생성한다. prototype으로 이벤트를 실행했을 때 적용할 메서드를 추가한다. 마지막으로 생성자함수인 PopUp을 호출하여 인스턴스인 fullPopup…
Read Article →
[Disqus] 블로그 댓글 기능 추가하기
서론 Disqus란 2007년에 만들어진 소셜 댓글 서비스로 다양한 소셜 네트워크의 사람들이 서로 생각을 공유할 수 있도록 만들어진 도구이다. 회원가입 후 api를 연동시키기만 하면 개인 블로그에 빠르고 쉽게 댓글 기능을 달 수 있기 때문에 전세계의 수많은 블로거들의 사랑을 받고 있다. github blog처럼 정적 블로그를 사용하면 원하는대로 커스텀할 수 있다는 장점이 있긴 한데, 나같이 귀찮음이 온몸에 밴 사람들에겐 그 장점이 바로 단점으로 돌아온다... 지금 사용하고 있는 Jekyll 테마는 기본으로 disqus…
Read Article →