본문 바로가기

분류 전체보기168

React - virtual DOM의 개념 React를 위한 DOM개념 DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법입니다. DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수 있습니다. DOM은 동적인 UI에 최적화가 되어 있지 않기 때문에 JQuery를 사용하여 동적인 효과를 줄 수 있습니다. 하지만 큰 규모의 웹 어플리케이션(ex) 트위터,페이스북) 에서는 스크롤을 내리다 보면 정말 수많은 데이터가 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 됩니다. 이와같은 요소의 갯수가 몇백개 몇천개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주다보면 성능상 이슈가 발생하게 됩니다. 이는 DOM자체가 javascript엔진에 비해 느려서 그런 .. 2018. 10. 28.
if kakao - 기조연설 카카오는 변화의 시기에 성장한 회사이다. 카카오가 집중하고 있는 기술 1. 안정성2. 사용자경험 3. Data4. next innovation집안에서 차안에서 어디에서든 인공지능 서비스를 제공하기 위해 노력하고 있다. 카카오와 AI - Kakao I 플랫폼의 성장 인공지능의 성공에는 알고리즘과 양질의 데이터가 필요하다. open builder AI를 인공지능 서비스화 하는 기능Open Builder를 사용하면 여러 분야에 쉽게 AI를 접목시킬 수 있다쳇봇과 카카오 미니 두가지 플렛폼을 동시에 사용 할 수 있다.현재 약 40여개의 서비스가 open builder로 지원되고 있다. (6개월만에)카카오 i 플랫폼의 성장 / 확장 카카오 i는 집과 자동차로 확장할 계획을 가지고 있다.자동차카카오 네비와 카카오 .. 2018. 10. 1.
text-indent 속성 CSS text-indent text-indent 속성을 들여쓰기 효과를 지정합니다. 즉 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 한다고 생각하시면 됩니다. 2018. 10. 1.
PWA란? PWA의 특징 PWA란? 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념입니다. 궁극적으로 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다. Progressive Web App은 웹의 장점과 웹의 장점을 결합한 환경입니다. PWA의 특징 이것은 사용자가 브라우저 탭을 맨 처음 방문할 때부터 유용하고, 설치가 필요 없다는 장점이 있습니다. 시간의 흐름에 따라 사용자가 앱과의 관계를 점진적으로 쌓아갈수록 성능이 더욱 강력해질 것입니다. 이 웹앱은 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송하며, 홈 화면에 아이콘이 있고, 최상위의 전체 화면 환경으로 로드됩니다. 즉 PWA는 확장성이 좋고 깊이 있는 앱같은 웹을 만드는 것을 지향합니다. 모바일을 중심으로 하는 인터넷 서비스는 크게.. 2018. 9. 28.
nodejs의 모듈 시스템 : export, import 모듈 시스템 자바스크립트는 예전부터 리소스 관리가 어려운 문제가 있었습니다. 리소스는 웹페이지를 구성하는 자원들인데 현재 웹에서는 해당 페이지에 필요한 모든 파일을 불러 와야 하고 그 파일들이 곂치지 않는지 잘 살펴봐야 합니다. 하지만 npm 과 같은 패키지 관리 툴을 사용하여 여러 자바스크립트 라이브러리들을 개발자들이 쉽게 사용할 수 있도록 구현하였고, 자신이 구현한 자바스크립트의 리소스들도 쉽게 다른 파일에서 사용할 수 있게 관리 할 수 있습니다. 기존의 모듈 시스템 require require React from 'react'; require from 'react-dom' 과 같은 형태로 이용이 가능합니다. 모듈 시스템 import import React from ‘react’; Import fro.. 2018. 9. 27.
React의 개념, 역사 간단한 정리 React의 역사? React는 facebook의 소프트웨어 엔지니어 Jordan Walke에 의해 만들어 졌습니다. React는 Facebook, AirBnb, Dropbox, Twitter, Evernote Uber등 수많은 사용자들이 사용하는 Facebook이 만는 자바스크립트 라이브러리 입니다. React는 PHP의 Html컴포넌트 프레임워크인 XHP의 영향을 받았고 2011년 페이스북에 처음으로 개시하였고 2012년에 인스타그램에 배치 이후 2013년 5월 미국 JSConf에서 오픈소스로 제작 되었습니다. 2017년 4월 18일에 페이스북은 사용자 인터페이스를 위한 React 프레임워크 라이브러리 알고리즘인 React Fiber을 발표하였고 계속 발전중입니다. React 간단한 정리 react는.. 2018. 9. 16.
HTTP 와 TCP의 Keep-Alive HTTP의 Keep-Alive HTTP 프로토콜의 Keep-Alive는 Http의 Header의 일종입니다.. 이는 HTTP/1.0에서 지원하지 않던 지속 커넥션을 가능하게 하기 위해서 쓰였습니다. 그렇다면 지속 커넥션이 뭔지부터 알아보겠습니다.. 지속 커넥션을 보기 전에 HTTP 커넥션에 대해 알아보도록 하겠습니다.. HTTP/1.1 이전에는 클라이언트와 서버 사이에 트랜잭션 한번이 일어나면 HTTP Connection 이 끊어졌었습니다. 이렇게 되면, TCP 커넥션을 맺는데 발생하는 지연과 느린 시작 지연이 트랜잭션마다 발생하기 때문에, 한 웹페이지에서 여러 이미지와 HTML을 요청해야 하는 경우 성능이 매우 안좋아지게 됩니다. 그래서 이런 커넥션을 맺고 끝는데서 발생하는 지연을 없애기 위해서 한번 .. 2018. 9. 6.
HTML - fieldset 태그란 웹사이트에는 다양한 정보를 전달하기 위한 수 많은 입력 폼이 존재합니다. 예를들어 회원가입 페이지만 해도 사용자의 다양한 정보를 입력해야 하는데요, 이러한 정보를 그룹화 한다면 더욱 편리하게 관리 할 수 있습니다. 이에 html에는 fieldset이라는 태그가 존재하고, 이 태그를 사용할 경우 다수의 입력 폼들을 그룹화하여 관리 및 컨트롤 할 수 있습니다. fieldset 태그란? fieldset 태그는 몇가지 속성을 지정하여 사용할 수 있는데 각각의 속성의 특징은 다음과 같습니다. 아래처럼 이 태그에 사용 가능한 태그는 무척 한정적입니다. 이 태그의 가장 큰 장점중 하나로 권한에 따른 선택 그룹 전체르 비활성화 처리가 가능하다는 점을 들 수 있습니다. 예를 들어 권한이 없는 사용자에게 입력폼의 수정을 .. 2018. 9. 3.
jquery - html과 text 메소드의 차이 text 어떤 내용이 예를들어 p같은 문자 태그 안에 있다면 text를 사용해서 변경할 수 있습니다. 그냥 text() 이런식으로 사용한다면 오히려 해당 요소의 text를 가져오는 역활을 합니다. 위의 예제는 hello를 출력합니다. html html도 text와 비슷한 기능인데요, text는 텍스느만 불로오지만 html()은 html 태그도 불러옵니다. http://www.everdevel.com/jQuery/text-html.php 2018. 8. 30.
CSS - 자손 선택자와 자식선택자 비교 CSS의 자손선택자와 자식선택자 차이 css 선택자 중에 자손선택자와 자식 선택자를 알아보겠습니다. 자손선택자 자손 선택자(descendant selector)는 문서 구조에서 특정 요소의 자손을 선택하는 선택자입니다. 자손은 자식, 손자, 그리고 이후에 후손을 모두 포함합니다. 자식선택자 자식 선택자(child selector)는 특정 요소의 직계 자식만 선택하는 선택자입니다. (자식 이후 손자, 후손들 포함하지 않음) 참조) http://aboooks.tistory.com/286 2018. 8. 14.

티스토리툴바