양털의 개발 블로그52 Semantic HTML Sematic이라는 단어는 '의미론적인'이라는 뜻을 가지고 있다. 즉, Semantic HTML은 의미론적인 html이라는 뜻으로 정보를 문서의 의미 또는 어플리케이션 의미에 맞게 html을 작성하는 것을 말한다. 개발자와 브라우저에게 의미있는 태그를 제공한다고 이해할 수 있다. 시멘틱 태그를 통하여 태그 자체만 보더라도 어떤 의미로 사용된 태그인지 알 수 있고, 기계(브라우저) 또한 우리가 의도한 대로 웹 문서를 읽도록 할 수 있다. 시멘틱 태그를 통한 마크업 작성의 장점은 다음과 같다. 접근성이 좋아진다 검색엔진최적화 (SEO) 코드의 가독성이 좋아진다 코드와 데이터의 재사용성이 높아진다 웹 표준에 대해서 공부할 때 웹 접근성을 고려해야하고 이러한 웹 표준을 지킬 때 검색엔진 최적화를 할 수 있다고 .. 2020. 4. 26. 웹 표준 웹 표준의 정의 웹 표준이란 이름 그대로 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하고 정상적으로 작동해야함을 의미한다. 특정 브라우저에서만 사용되는 비 표준화된 기술을 배제하고 W3C에서 나온 권고안을 사용하여 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다. 내용은 HTML, 표현은 CSS, 동작은 Script로 구현하는 것으로 생각할 수 있다. 즉, 웹 표준을 준수한다는 것은 웹 사이트가 W3C 표준안에 따르는 HTML과 CSS, Script를 사용함을 의미한다. 웹 표준의 중요성 웹 표준이 중요한 이유(만화) : http://www.thisisgame.com/webzine/nb.. 2020. 4. 26. REST API REST API, RESTful API에 대해서 알아보려고 한다. 평소에 RESTful한 API로 구성한다, 만든다라는 것을 많이 접했는데 정확히 어떤 것을 의미하는지 알아보았다. REST REST는 Representational State Tranfer의 약자이다. 자원(리소스)를 자원의 표현(또는 이름)으로 구분하여 해당 자원의 상태를 주고 받는 것을 의미한다. 즉, 모든 자원에 고유한 URI을 부여해 활용하는 것으로 자원의 표현에 의한 상태 전달로 말할 수 있다. RESTful API는 이러한 REST 특징을 지켜서 API를 제공하는 것을 의미한다. 어플리케이션의 복잡도가 증가하면서 어떻게 어플리케이션을 분리하고 통합하는지가 주요 이슈가 되었고, 최근에는 SPA를 이용하여 클라이언트를 구현하기 때문.. 2020. 4. 10. 넷플릭스 클론 - 3 넷플릭스 처음 들어갔을 때 초기화면을 구현하는 중이다. 사실 초기 화면 구현을 다 했었는데 구현한 코드가 마음에 들지 않아 한번 갈아엎고 다시 만드는 중이다. 그리고 원래는 Mobx를 적용하려 했으나, Redux를 사용해보고 싶어 다 갈아엎은 것도 있다. 그래서 디렉토리 구조도 조금 바꾸었다. redux를 적용하기 위해 redux, react-redux를 받았다. 그리고 store 폴더를 만들어 주었다. 원래는 action과 reducer 등을 따로 만들어주는 것으로 알고 있는데 나는 Ducks 패턴으로 리덕스를 구현하기 위해서 store에 modules라는 디렉토리를 만들어 주었다. ducks 패턴의 경우, 한 파일에 구현할 기능과 관련된 액션타입과 액션 생성함수, 리듀서를 함께 만들어주고 모듈화 시켜.. 2020. 4. 9. React - Life Cycle velopert님의 https://velopert.com/3631와 React 공식문서를 참고하였습니다. 리액트의 Life Cycle API에 대해서 정리하려고 한다. 이 API는 리액트의 컴포넌트가 브라우저에서 나타나고, 사라지고, 업데이트 될 때 호출되는 API이다. 각 시점에서 호출될 때 내가 실행하고 싶은 기능이나 코드가 동작하도록 할 수 있다. 리액트의 라이프사이클은 크게 mount, update, unmount의 3가지로 나눌 수 있다. 예제를 만들어서 각 시점에 어떻게 호출되는지 알아보려고 한다. $ npx create-react-app react-life-cycle Mount 컴포넌트가 만들어지고 렌더링 되는 과정이다. 여기에는 다음과 같은 method가 순서대로 호출된다. construc.. 2020. 3. 24. 넷플릭스 클론 - 2 프로젝트의 초기 셋팅을 해주었다. React + TypeScript 우선 CRA를 통해 리액트 프로젝트로 만들어주었는데, CRA에 Typescript옵션을 주어서 Typescipt + React 프로젝트로 생성을 해주었다. 그리고 tsconfig를 기존의 BillyZip 프로젝트에서 사용하였던 옵션을 참고하여 내 입맛에 맞게 바꾸어 주었다. Prettier + ESLint 그 다음 해준 것은 prettier 설정이다. prettierrc 설정파일을 통해 내가 자주 사용하는 옵션으로 설정을 해주었다. 그리고 그 다음은 ESLint 설정인데 평소 즐겨사용하는 airbnb 스타일로 설정해줄 것이다. 그리고 typescript와 prettier도 같이 사용하기 때문에 관련 설정도 해주었다. ESLint 설정을 .. 2020. 3. 22. 이전 1 2 3 4 ··· 9 다음
