Chat 상우

시멘틱태그(Semetic tag) Html 시맨틱 태그는 웹 페이지의 구조를 더 명확하게 정의하고 검색 엔진 및 웹 브라우저에게 콘텐츠의 의미를 제공하는데 사용되는 html의 요소로 이러한 태그는 웹 접근성을 향상시키고 페이지의 구조를 이해하기 쉽게 만드는데 용이다. 시멘틱 태그 사용목적 앞으로 우리는 다양한 웹 서비스를 개발하게 될 것이다. 개발된 웹 서비스는 비 장애인과 장애인 모두 사용할 수 있어야 하는데 첫 번째 시멘틱 태그를 사용하는 첫 번째 목적은 비 장애인도 우리의 서비스를 이용할 수 있도록 제공하기 위함이다. 대표적으로 공공 기관의 웹사이트를 예시로 들 수 있다. html로 문서의 구조를 잡다 보면 점차 대표적인 블럭 요소인 div를 이용하여 구성하는 것을 많이 볼 수 있는데 이러한 방식으..

Html(Hypertext Markup Language) Html은 프로그래밍 언어라기 보다는 우리가 보는 웹페이지가 어떻게 구조화 되어있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. html은 elements로 구성되어 있으며 이들을 활용하여 컨텐츠의 여러부분을 감싸고 마크업 하는 언어라고 생각하면 된다. Html 구조 여는 태그(Opening tag) : 이것은 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성된다. 닫는 태그(Closing tag) : 이것은 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그(opening tag)와 같으며 이것은 요소의 끝에 위치한다. 닫는 태그를 닫지 않아도 문제가 없을 수 있으나 이것은 유지보수 성을 저하시키며 이후 spa 프레임워크와 같은 ..

React Class Component lifeCycle 리액트 공부를 하다 보면 우리는 lifeCycle를 접하게 되는 시점이 오게 된다. lifecycle이란 무엇일까? 그리고 이것을 왜 알아야 할까? 결론부터 이야기를 하자면 리액트의 컴포넌트는 각각 3가지 카테고리가 존재한다. 각각의 카테고리는 다음과 같이 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting) 세 가지 단계가 존재하며 각 단계에서 호출되는 메서드를 이용하여 컴포넌트를 관리하게 된다. 이러한 라이프 사이클을 이해하면 보다 최적화하여 사용자에게 높은 서비스 제공이 가능하다. 시작에 앞서 아래의 생명주기는 Class Component에서 사용이 되며 function Type Component는 다르다. 마..

React 컴포넌트 분리 시작에 앞서 React를 공부하면서 가장 어렵게 느꼈던(지금도 어렵지만...) 내용은 컴포넌트를 분리하는 것이다. 결론부터 이야기를 하면 전체 그림에서 최소 단위까지 컴포넌트를 분리하면서 State의 관리를 어떻게 할 것인가 생각을 하면된다. 더욱 좋은 것은 Reducs를 사용해서 다른 쪽으로 머리 아픔을 돌린다. 평소 프론트 엔드에 관심이 없으나 최근 브라우저 렌더링과 같은 내용을 공부하다 보니 생각보다 재미있게 느껴지게 되었고 백엔드 공부가 어느 정도 되면 이후에 프런트도 깊이 있게 공부하고자 한다. 시작에 앞서 React는 Facebook에서 만든 라이브러리로 자바스크립트의 가상Dom 기술을 적극 활용하여 만든 기술이다. React 컴포넌트 분리 리엑트를 처음 공부하였을 때..

웹 브라우저 동작 개념 개요 우리가 사용하는 브라우저는 사용자에게 화면을 보여주기 다음과 같은 구조를 갖고 있다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, 자바스크립트 인터프리터, ui 백엔드, 자료 저장소 브라우저가 각 계층에서 사용자의 화면을 그려주기 위해 어떠한 일을 하는지 간략하게 알아볼 것이다. 웹 브라우저 구조 시작에 앞서 이번 편에서는 간략하게 각 계층에서 다루는 내용을 볼 것이며 보다 상세한 내용은 따로 포스팅 예정이다. 우리가 사용하는 브라우저는 다음과 같은 구조를 갖고 있다. 위의 구조는 모든 브라우저가 동일하지 않지만 비슷한 구조로 되어 있으며 크롬의 경우 조금 다른 구조를 갖는다. 브라우저의 동작 개념은 앞으로 우리가 웹 개발을 함에 있어 보다 고려해야 하는 사항을 ..