전체 글 (23) 썸네일형 리스트형 React를 사용하는 이유? - 1 ) SPA과 VirualDOM React를 사용하는 이유에 대해서 프론트엔드 데이터 처리를 쉽게 도와주는 라이브러리 정도로만 알고 있어 React가 뭔지는 알겠는데 왜 사용하는지? 어떤 문제점을 해결하기 위해 만들어젔는지 알지 못해 찝찝했다, 그 찝찝함을 덜기위해 React를 좀더 자세하게 알아볼려고 한다. 이번 포스팅에선 React를 사용하는 이유에 대해서 알아 보기전에 숙지해야될 개념인, SPA와 VirualDOM에 대해서 알아보고자 한다. React는 SPA방식에 최적화된 라이브러리다! SPA (Single Page Application) SPA는 웹사이트 구성방법중 하나로 1개의 페이지만 있는 어플리케이션이라 정의 할 수 있다, 보편적인 웹 사이트 처럼 회원가입, 글쓰기 등 복잡한 기능을 지원하지만 처음에 호출된 HTML상에서.. CSS ) Flexbox 기본적으로 주 컨텐츠 내포하는 태그들은 block 성질을 가지고 수직으로 배치 되게 된다, 웹사이트 자체로만 봐도 컨텐츠 배치를 수직으로 제작한 경우가 대부분이다, 하지만 메뉴바와 같은 수평적으로 작성되는 컨테츠들이 존재하게 되는데, 기존 방법으로 float 속성을 사용하거나 display: inline으로 block 성질 컨텐츠를 수평으로 배치하였다, 하지만 해당 방법들은 다양한 문제를 발생시켰던 차선책에 불가하였다. flexbox는 수직수평 구조 조정의 적합한 기능들을 가지고 레이아웃을 보다 쉽게 구성할 수 있게 도와주는 개념(속성들)이라 보면된다. flexbox는 크게 container(부모)와 item(자식)으로 나눤 구조를 가지고 있다. flexbox는 item의 부모인 container클래스의.. 이벤트 처리기로 등록하는 세가지 방법 이벤트 처리기란? 이벤트가 발생했을떄 실행되는 함수를 말한다, 이벤츠 처리로 등록하는 방법으로 세가지가 존재한다 1. HTML요소의 속성으로 등록하는 방법 2. DOM 요소의 프로퍼티로 등록하는 방법 3. addEventListener 메서드를 사용하는방법 HTML 요소의 속성으로 등록하는 방법 type = 액션의 타입을 지정한다 value = 지정값 (view의 보여지는 값) onclick = 이벤트 처리기의 종류를 나타내는 이름으로 onclick을 포함한 여러가지 이벤트 처리기가 존재한다. (onclick, ondblclick, onmousedown 등등) 위와 같은 선언으로 input 태그는 버튼이 클릭되었을때 이벤트처리기 뒤에 선언되는 함수의 기능을 실행하게 된다. displayTime() 위와 .. CSS) box model CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다. HTML 요소의 height와 width 속성으로 설정된 높이와 너비에 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않는다, 그러기 때문에 요소들 마다 값을 지정해줘야 된다 * 익스플로러 8과 그 이전 버전에서는 width나 height를 지정할때 요소값도 포함되어 지정 되었었다, 이러한 차이점을 없애기 위해서는 반드시 HTML문서에 태그를 삽입해야만 한다. margin 특성상 backgrund 속성을 가지지 못하기 때문에 요소의 컨텐츠가 서로 떨어져 보이게 되는데 요소를 다른 요소의 위에 겹치게 하기 위해선 margin의 속성값을 음수로 .. HTML5 )Semantic HTML 사용이유와 태그 왜 시멘틱 태그를 사용해야되는가? 일반적으로 웹 페이지의 레이아웃을 잡기위해 div 태그를 사용하여 id이름으로 해당 레이아웃에 정보를 담아 사용하였다, 그로인해 개발자 간 협업 과정에서 각기 다른 해석과 분석으로 커뮤니케이션의 불편함이 존재했다, 그래서 W3C에서는 HTML5부터 의미요소(Semantic Element) 태그를 정의하여 각기 다르게 정의한 id 값을 역할에 맞는 태그로 명명 하여 기존에 발생한 문제점을 계선 해주었다. 의미요소(Semantic)의 사용은 이러한 커뮤니케이션에서 발생하는 문제 뿐만아니라 검색 엔진 최적화(SEO)에도 영향을 미친다, SEO가 기능을 할때 Semantic한 문서는 검색엔진이 결과 도출이 정확하고 빠르게 되어 시스템 부분에 긍정적인 영향도 나타나게 된다. HT.. HTML ) 엔티티 (Entity) html 태그 작성중 html에서 정의한 기호를 문자셋으로 사용하기 위해서 대체대는 기능이다. 추가적인 엔티티를 알고싶다면 아래 링크를 이용하기 바람 tcpschool.com/html/html_text_entities JavaScript ) 객체 리터럴 일반 문자열과 템프릿 리터럴의 차이점 작성방법 : 일반문자열 "..." , 탬플릿 리터럴 ` ... ` 1. 일반 문자열은 줄바꿈을 표한할때 시퀸스(/n)을 사용해야되지만 탬플릿 리터럴 ``은 일반적인 줄바꿈이 가능하다. var normal = "aaaaa aaaa" => 오류 발생 / (\n)시퀸스를 사용해야됨. var template = `aaaaa aaaaaaa` => 정상 동작 2. 탬플릿 리터럴 안에는 플레이스 홀더( ${...} )를 넣을 수 있다. var a = 1, b = 2; console.log(`${a} + ${b} = ${a+b}`); => 1 + 2 = 3 정상출력 플레이스 홀더 ${...}란 입력 값처럼 실행시점 외부에서 주어지는 값을 표현하는 식 객체 JS에서 객체란 이름(Pr.. WebSite가 생성되는 과정 ( 렌더링 과정 ) 웹 서버와 웹 브라우저의 통신 방법 웹 서버에 위치한 index.html파일을 웹 브라우저가 해당 웹서버의 IP주소로 요청을 한뒤 html결과값을 웹 브라우저로 받아와 렌더링과정을 거쳐 화면에 뛰어주게 된다. 랜더링이란 html,css,JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 아래 이미지는 웹이 만들어지는 일련의 과정이다 Backend Time(서버)과 Frontend Time(브라우저)으로 구분하여 웹 이 어떻게 화면에 표시되는지 보여준다. 기본적으로 브라우저마다 렌더링을 수행하는 렌더링 엔진이 존재한다, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표현한다 웹 프로그래밍 하며 사용되는 도구(태그,선택자)들 마다 엔진에 호환범위가 다르기 때문.. 이전 1 2 3 다음
