본문 바로가기

분류 전체보기153

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.
jquery의 chain Chain 이란 jquery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있습니다. 즉 자기 자신을 포함하는 래퍼를 모든 메서드가 반환합니다. 여러줄의 코드를 한줄로 표현 가능~ Chain의 장점 코드가 간결해집니다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 하나의 주어를 여러가지 서술어가 묘사 할 수 있습니다. 탐색 (traversing) chain의 대상을 바꿔서 채인을 계속 연장시킬 수 있습니다. 너무 복잡한 chain은 코드의 가독성을 떨어 뜨립니다. 예제) find(.foo) -> 주어진 래퍼의 자식 앨리먼트중 class명이 foo인 엘리먼트를 찾아라!end() -> 마지막으로 사용한.. 2018. 8. 13.
jquery의 선택자 선택자란? jquery 래퍼에는 CSS 선택자가 위치할 수 있는데, 이를 통해 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있습니다. jquery 공식 홈페이지 api.jquery.com -> jquery 공식 홈페이지 Selector 챕터의 Basic에 해당 선택자에 대한 설명이 나와있습니다. 예제를 실행해보며 공부해 볼 수 있습니다 기본 선택자 필터 선택자 대괄호로 시작하며 앞쪽에는 속성 이름이 들어가게 됩니다. = 앞에 어떤 연산자가 들어가느냐에 따라 동작의 차이가 발생합니다. 속성 선택자 폼 선택자 2018. 8. 13.
jquery의 래퍼 래퍼란? jquery라는 이름으로 시작되는 함수를 래퍼라고 합니다. jquery ( 앨리먼트 오브젝트 | 'CSS' 스타일 선택자') 의 형태로 사용됩니다. 보통 $로 많이 씁니다. 엘리먼트 오브젝트 => document.getElementById css 스타일 선택자 => . # 등의 css 문법 레퍼의 안전한 사용 jquery는 라이브러리로 재사용을 하기 위해 사용합니다. jquery는 다른 라이브러리와 같이 사용할 경우가 많습니다. 그럴경우 라이브러리의 변수명, 함수명등의 충돌이 발생할 수 있기 때문에 jquery는 이러한 충돌을 회피할 수 있는 기능을 제공합니다. (장점) $(엘리먼트)와 jquery(앨리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리와의 충돌 때문에 다음과 같은 방법을 사.. 2018. 8. 13.
Key-Frame 애니메이션이란? @keyframes 와 애니메이션 CSS 애니메이션의 중요한 요소는 @keyframes입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어 지는 부분입니다. @keyframes를 타임라인 안의 하나의 스태이지(구간)들 이라고 생각하시면 편합니다. 다음으로 CSS 애니메이션이 작동하도록 @keyframes를 선택자로 묶어주시면 됩니다. 이것은 마지막에 keyframes 선언 안의 모든 코드를 분석하고 각 스테이지에 따라 새로운 스타일로 변형시키게 됩니다. 참조) 0% 시작 => 100% 끝 from to 로도 사용가능 to로만 쓸수도 있음 Animation 속성 animation 속성은 예전에 @keyframes라고 불리며 CSS 선택자 안에서 존재했었습니다. animation은 여러개.. 2018. 8. 9.
SVG란? 기존에 알고 있던 SVG에 대한 상식 백터기반이기 때문에 사이즈가 변경되어도 안 깨지고 XHTML 문법으로 이루어져서 CSS 및 Event Handle이 가능하다. 정확한 개념 정리 SVG의 약자는 Scalable Vector Graphic 의 약자입니다. 2차원의 백터 그래픽을 표현하기 위해서 탄생하였고 XML 기반의 표현입니다. 1998년 W3C에서 개발을 하였고 그전에는 Microsoft의 "VML"와 Apple의 "PGML" 이라는 2차원의 백터 그래픽을 XML로 표현하는 언어가 있었습니다. 하지만 두개다 W3C에서 채택하지 않았고 W3C는 SVG를 개발하여서 표준으로 채택하였습니다. SVG의 장단점 장점으로는 백터기반이기 때문에 기존의 비트맵 기반의 포멧과 달리 사이즈가 늘어나도 사진이 깨지지 .. 2018. 8. 9.