Frontend(75)
-
[HTML] iframe 태그란?
Definition iframe이란 Inline Frame 의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다. 검색을 통해 다른 블로그의 게시물이나, 아티클들을 읽다 보면, 글 아래에 유튜브 동영상이 삽입되거나, 지도가 보여진다거나 하는 상황들을 경험해 보신 적이 있을 것입니다. 요즘에는 HTML5 가 차세대 웹표준으로 자리하게 되면서 태그나, 태그등 다양한 태그들이 iframe을 대체하고 있지만 이전의 많은 브라우저들, 그리고 아직 HTML5표준을 공식적으로 지원하고 있지 않은 브라우저들에서는 여전히 iframe이 사용되고 있습니다. (또한 다른 선택의 경우가 없는 경우에도 여전히 iframe..
2020.08.23 -
[Browser] Console 객체
Overview Javascript로 웹 개발을 해 보신 분들이라면, 혹은 브라우저에서 Developer Tools(개발자도구)를 사용해 보신 경험이 있으신 분들이라면 누구나 다음과 같은 명령어를 입력해보셨을 것입니다. React나, Angular 혹은 Vue프레임워크를 통해서 규모가 있는 웹 프로그램을 개발하다보면, 렌더링은 제대로 되는지, 서버와 비동기 통신을 진행할 때 서버에서 response가 제대로 할당이 되었는지 등 프로그램이 실행되는 동안의 내부 과정을 살펴보아야 할 일이 생깁니다. 이때 console.log(변수 이름) 이나, console.log('i'm here')등을 통해 개발자가 설계한 순서대로 프로그램이 제대로 동작하는지를 살펴보는 경우가 많습니다. 이번 포스팅에서는 이 conso..
2020.07.26 -
[OAuth] OAuth2.0 Facebook 로그인 구현
지난 포스팅에서 OAuth 표준이 무엇인지에 대해서 설명했습니다. 이번 포스팅에서는 직접 Expressjs에서 페이스북 로그인을 구현하는 과정을 설명하도록 하겠습니다. 간단하게 OAuth2.0 표준에 대해서 정리하고 넘어가자면, OAuth 2.0 표준이란 새로운 서비스(예를 들면 쇼핑몰)에서 사용자에게 간편한 회원가입 기능을 제공하면서 제한된 용도로만 사용자를 식별하고, 사용자의 정보를 사용할 수 있도록 하기 위한 프로토콜입니다. ID/PASSWORD를 사용자로부터 직접 입력받는 대신, Facebook, Google등의 사용자가 이미 가입한 인증 서비스로부터 AccessToken을 받아 사용자를 식별하도록 하는 것입니다. Process https://developers.facebook.com/ Faceb..
2020.07.05 -
[OAuth] OAuth 2.0
Overview 스마트폰이나 웹 브라우저를 통해서 회원가입을 할 때 다음과 같은 화면을 보신 적이 있으실 것입니다. 사용자로 하여금 이미 가입되어 있는 페이스북, 로그인, 트위터등을 통해서 클릭 한번에 간편하게 회원가입을 진행할 수 있도록 하는 것입니다. 이렇게 간편하게 회원가입을 할 수 있도록 하는 일련의 과정을 프로토콜로 정의해 놓은 것이 바로 OAuth 2.0 표준입니다. OAuth가 왜 필요할까? 웹 기술이 많이 발전하고, 프레임워크가 점차 사용자 친화적으로 발전해 나가면서 수많은 웹 서비스들이 런칭하고, 문을 닫고 있습니다. 대부분의 웹 서비스가 기본적으로 갖추고 있는 것이 "회원" 시스템이기 때문에 이들 사이트에서 회원가입 및 로그인은 필수적인 요소가 되었습니다. 문제는 다양한 웹 서비스를 사..
2020.07.04 -
JIT vs AOT 컴파일러
Overview 회사에서 개발하고 있는 Angular Landing 프로젝트에서 Angular 9 버전 업데이트를 하기 위해 Angular 공식문서를 살펴보게 되었습니다. 먼저 Angular 9 버전으로 업데이트를 하게 만든 Localize기능이 추가가 되었고(Localize 기능 업데이트로 인해서 다국어를 지원하는 경우 빌드 시간이 획기적으로 개선되었습니다), IVY 컴파일러로 업데이트 되면서 AOT 컴파일을 디폴트 옵션로 지원한다는 내용이 있었습니다. 웹 프레임워크에서 AOT 컴파일을 지원하게 될 경우에 갖는 장점이 있는데, 이번 포스팅에서는 AOT 컴파일은 무엇을 의미하는지, 그리고 AOT와 항상 같이 비교되는 JIT 컴파일은 무엇을 의미하는지에 대해서 살펴보도록 하겠습니다. (AOT 컴파일에 대한..
2020.06.16 -
[Crawler] Selenium으로 Everytime 크롤링하기
친구의 학부논문 연구를 도와주기 위해 웹 크롤링을 사용할 일이 생겨서 Selenium을 사용한 크롤링 개발 후기를 포스팅하게 되었습니다. 크롤링(Crawling)이란, 인터넷상에서 방대한 정보들 중 원하는 정보들을 분석하기 쉬운 형태로 수집하는 것을 의미하며 크롤링을 위해 웹 페이지를 돌며 자료를 수집하는 프로그램을 크롤러(Crawler)라고 합니다. 연구 주제가 '인스타그램과 에브리타임 등 인터넷 플랫폼에서 나타나는 종결어미의 형태변이'에 관한 것이기 때문에 이번에 제작한 크롤러는 에브리타임을 크롤링하며 사람들의 대화 목록들을 수집하고 딥러닝 프레임워크를 이용해서 이를 분석하여 형태 변이가 일어난 종결어미를 포함한 문장들을 필터링하여 텍스트 파일로 저장하는 역할을 수행합니다. 인스타그램을 이용한 크롤러..
2020.05.10