본문 바로가기

Client

 (7)
시맨틱웹에 대한 너무 좋은 글 https://ideveloper2.tistory.com/164 Web - 시맨틱 웹 낱낱이 파헤치기 + React.Fragment에 쓰인 시맨틱 개념 Web :시맨틱 웹 낱낱이 파헤치기 + React.Fragment 에 쓰인 시맨틱 개념 | 시작하기에 앞서 팀 버너스리, 차세대 웹 - TED 강연 (웹에서의 데이터) https://www.ted.com/talks/tim_berners_lee_on_the_next_web?.. ideveloper2.tistory.com 좋은 글이라 두고두고 보려고함
Virtual DOM, Life Cycle, Hooks 그리고 State Management 리액트를 잘 다루기 위해서는 리액트의 탄생배경, 그리고 그에 따른 설계컨셉과 디자인들 순으로 이해를 해야 한다. 1. Virtual DOM 리액트라는 것은 왜 만들어졌는가? UI적인 이유도 있겠지만, Virtual DOM이 리액트의 탄생배경이라고 생각한다. JavaScript로 프론트를 동적으로 구성하다 보니, 점차 JavaScript가 HTML 요소를 점점 더 많이 건드리기 시작했다. JavaScript는 본래 이름이 LiveScript일 만큼, HTML이라는 문서를 동적으로 만들고 싶어서 탄생한 언어인데, 문제는 이 JavaScript라는 것이 너무나도 많은 HTML 요소를 건드리기 시작하면서 문제가 발생하였다. 그래서 JavaScript가 HTML 요소를 좀 더 적게 건드리게 할 수 없을까라는 고민..
CSS Layout - Float, Flex, Grid CSS는 Cascading에 대한 이해, 그리고 이를 바탕으로 셀렉터를 통해 색과 크기를 지정하고, 나아가 전반적인 레이아웃을 구성하는 것으로 나아간다. Bootstrap과 같은 것들은 이러한 설정을 미리 지정해두어서 단축키처럼 만들어 놓은 것이고. CSS를 통한 레이아웃에는 기본적으로 Float, Flex, Grid 방식이 존재한다. 각각을 어떻게 사용하는지는 이미 잘 나와있다. 그러나 CSS 레이아웃에 Float, Flex, Grid라는 세 종류가 있다는 걸 말해주는 곳이 없어서 이렇게 메모차 남긴다. 각각의 방식에 대해서는 그냥 다른 글들을 참조하면 된다.
SASS의 작동과정, 기본 개념 | CSS를 언어화 CSS를 사용하다가, SCSS를 알게되었다. 리액트로 링크드인 클론을 만들다가, SCSS를 자꾸 사용하길래, 한 번 익혀봐야겠다는 생각을 하게 되서, 기본 요소들을 정리하게 되었다. SCSS를 배우려고, 2시간, 3시간 들일 필요는 없는 것 같고, 기본 문법만 알면 되는 것 같다. 우선은 SASS는 CSS를 언어처럼 사용할 수 있게 해주는 것이다. 변수, 함수가 존재하듯이, CSS에서 변수, 함수를 정의해서 사용할 수 있게 해주는 것이 SASS다. 이 때 SASS를 브라우저 상에서 바로 사용할 수 없기 때문에 컴파일을 해주어야 한다. SASS를 사용하게 되면, 다른 언어를 사용할 때와 마찬가지로 변수, 함수가 존재한다. $로 변수를 정의하고, mixin과 include로 함수를 정의해서 사용하면 된다. ..
CSS, Bootstrap 기본 개념 정리 아무 생각 없이 Bootstrap 템플릿을 가져다 쓰다가, 좀 더 정교하게 만들어 보고 싶어서, 튜토리얼을 수강한 뒤 기본 개념을 정리하였다. CSS라는 것이 어떤 의미인지 처음 알았는데, Cascading Style Sheet의 줄임말이라고 한다. Cascading이 폭포를 의미하는데, DOM에서 상위 문서, 하위 문서의 트리 구조를 가지듯이 마찬가지로 CSS 속성을 정의하는 것에 있어서도 우선순위가 존재하기 때문에 Cascading이라는 용어를 사용한다는 것을 알 수 있었다. 이렇게 CSS를 사용해서 화면을 구성하게 되는데, CSS나 Bootstrap이나 기본적인 Flow는 동일하다. 1) 박스가 기본요소가 된다. 2) 화면을 분할해주고 (그리드) 3) 분할된 부분 각각에 (컨테이너) 4) 박스들을 ..
React Hook(useState)와 Redux를 비교하여 이해하기 Redux를 사용하면서, 다소 헷갈리는 부분이 있었기 때문에 이를 정리하는 것이 필요하다고 생각했다. 우선은 Redux가 왜 필요한지를 이해하는 것이 중요한데, 기존의 useState는 하나의 컴포넌트 안에서만 사용가능했다. 헌데 로그인이나, 혹은 다크모드(배경화면을 검은색으로 바꾸어 눈의 피로도를 줄이는)같은 다른 컴포넌트에서도 사용되는 상태변화를 관리하기 위해서는 useState의 대안이 필요했다. 그래서 나온게 Redux이다. 그렇기 때문에 useState와 Redux의 차이는 하나의 컴포넌트 안에서만 사용되는가 아니면, 다른 컴포넌트에서도 사용될 수 있는가만 다를 뿐 나머지는 똑같다고 생각한다. useState에서 State를 만들어 상태변화를 저장하듯이, Redux에서는 Store를 만들어 이러..
React의 큰 틀에 대해서 생각해본다 Vanilla JS로 시작한 나에게 React는 자칫 생소한 프레임워크로 느껴졌다. HTML/CSS와 완전히 분리하여 로직을 작성하였던 Vanilla JS와 달리, React.js는 UI와 EventHandle을 거의 동시에 진행할 수 있다는 측면에서 매력적으로 느껴졌다. 우선 React 프레임워크는 index.js라는 접착제를 가지고 index.html에 첨부를 하는 구조로 이루어져 있다. 여기서 우리가 보는 UI는 단순히 한 화면이 아니라 여러 화면으로 이루어져 있을 수 있기 때문에 이들을 관리해줄 것이 필요하다. 그게 React Router DOM이다. 또한 다양한 UI의 요소들이 변화함에 따라, Event들이 발생하는데, 그렇게 많은 UI의 상태변화를 관리해주는 것이 Redux라는 라이브러리다. ..

티스토리툴바