FrontEnd (10) 썸네일형 리스트형 앞으로 공부할 것 정리 https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook/ CSS 방법론이란? (OOCSS, BEM, SMACSS) CSS 방법론 CSS 에서 클래스 네임을 지을 때 작성하는 방식으로 일종의 naming convention 이다. 쉽게 말해 CSS방법론이란 웹에서 CSS의 영향력이 높아지게 되면서 CSS사용시 클래스 이름을 어떻게 작성할지, 어떠한 방식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하기 위해 정의된 일종의 규칙이다. CSS 방법론에는 다양한 방법론이 존재한다. 크게는 OOCSS, BEM, SMACSS로 나누어지며, 상황에 따라 다르게 적용된다. 하나하나 알아보자~! 1. OOCSS OOCSS(Object Oriented CSS)는 CSS를 모듈(module) 방식으로 작성하여 중복을 줄이는 방식의 방법론 OOCSS는 가장 많이 사용되는 방법론으로 구조와 스타일을 분리하여 작성한다. 중복되는 디.. [FE] Vuex 시작하기 - 개념과 핵심 속성 Vue를 사용하여 프로젝트를 할 때, Vuex를 사용하게 되는 데 사용하는 이유와 Vuex가 무엇인지 이번 포스팅에서 정리해보자. Vuex 목차 1. Vuex 란? 2. Vuex는 언제, 왜 필요한가 3. Vuex 설치하기 4. Vuex의 핵심 속성 1) State 2) Getters 3) Mutations 4) Actions 5) Modules 1. Vuex 란? Vuex는 한마디로 말하자면 상태(STATE)를 관리하는 라이브러리이다. 여기서 상태란 무엇일까? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 여기 간.. [FE] SPA vs MPA? 이전에 SSR과 CSR의 렌더링 방식을 알아보았다. 이번에는 이 방식을 사용하는 Application - SPA와 MPA의 정의와 차이를 알아보자! SPA vs MPA 1. SPA와 MPA의 기본 정의 2. MPA 란? 3. MPA의 장단점 4. SPA 란? 5. SPA의 장단점 1. SPA 와 MPA의 기본 정의 SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다. 반면 SPA는 웹 에플리케이션에 필요한 .. [FE] SSR과 CSR 이란? CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척관계로 장단점이 뚜렷하다. 프론트엔드 개발을 하면서 프로젝트에 성향에 따라 어느 방식으로 구현해야할 지 생각하는 것이 중요하다. 실제로 데이터가 많이 사용되는 프로젝트에서 이런 방식을 생각하면 구현하고, 또 변경한 적이 있어 정확한 개념을 숙지하는 것이 중요할 것 같아 글로 작성해본다. 글의 목차 1. 기본적인 브라우저 동작 방식 2. SSR 이란? 3. CSR 이란? 4. 각각의 차이 5. 각각 사용한 적절한 예시 1. 기본적인 브라우저 동작 방식 브라우저는 어떻게 동작할까? 브라우저 동작방식은 자세하게 알아보려면 브라우저 동작원리를 알아야하니 그 부분은 따로 글을 작성해야겠다. 우선 기본적으로 브라.. [FE] 기초부터 완성까지 프론트엔드 2장 HTML 과 CSS 2. HTML 과 CSS 이 책의 2장 HTML과 CSS 부분은 기본적이면서도 필수적인 내용들로 이루어져있다. 두 분야의 구문작성법과 핵심 키워드를 주로 설명하는 것에 주력한다. 정리를 하면서 실무적으로 당연하게 느꼈던 지식들을 정리해 볼 수 있었고, Flex와 같은 CSS 속성을 깊게 알아갈 수 있었다. 2.1.1 - 2.1.3 HTML HTML 은 Hyper Text Markup Language 의 약어로 마크업에 구성에 많이 사용되는 언어이다. HTML 요소는 크게 3가지로 나뉜다. Content, StartTag, EndTag 로 나뉜다. HTML 요소를 각 특징에 따라 분류하면 블럭 요소와 인라인 요소로 나눌 수 있다. 두 분류에 따라 지정하는 스타일과 영역 지정법, 정렬법이 다르니 각요소의 특.. [FE] 기초부터 완성까지 프론트엔드 00 - 목차 및 책 소개 프론트엔드 관련 공부할겸 여러 책들을 살펴보다, 5월 달쯤 전 회사 선배님의 추천으로 이 책을 구입했다. 목차와 내용들이 프론트엔드의 기초를 쌓거나, 알고있는 내용을 한번 정리하기에 좋은 책이다. 구글에 프론트엔드 공부 순서 등 보면 로드맵이 자세하게 작성되어 있다. 로드맵을 다 알기에는 복잡하고 순서를 뭐부터 해야할지 모르는 경우가 많다. 하지만 이 책에는 그 로드맵에 관한 많은 내용을 가지고 있어,나같은 주니어 개발자가 전반적인 흐름을 알고 방향을 잡기에 적합한 것 같다! 또한 최신 프론트엔드 개발에 대한 트랜드 기술도 반영되어 있어, 최신 기술을 알아보고 파악하기에 효과적이다! 필요한 부분들만 살펴보다 이제부터 정리하며 다시 읽어보려고 이렇게 블로그에 끄적인다! 책 소개는 다음과 같다 책소개 컴퓨터.. [GraphQL] GraphQL / Apollo 는 무엇이고 쓰는 이유? 1. GraphQL이 등장하기 전 - Rest API 클라이언트 개발을 하면서 서버와 통신을 해야할 때, 서버가 구현해놓은 API를 호출하여 데이터를 보내거나 받아온다. Representational State Transfer(REST)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처이다. REST API는 서버가 균일한 인터페이스로 정보를 전송할 수 있게 하는 대표적인 표준 형식과 같은 것이다. 즉, 우편을 보낼 때 '보내는 분', '받는 분'등의 균일한 형식으로 보내는 것처럼 데이터를 클라이언트와 서버간 주고 받을 때 일정한 형식으로 보내는 것을 REST API라 할 수 있다. REST API는 URL형식 ( 어떤 정보 ) * 요청 방식 (어떻게 할 것인가 - 용도) 로 구성되어있다. .. 이전 1 2 다음
