리액트를 쓰는 이유? 함수형 컴포넌트를 쓰는 이유?

리액트를 쓰는 이유 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 난 전문가가 아니니 강사님의 고견을 그대로 수용하도록 하자. 간략하게 보면, 1. 광대한 커뮤니티 - 도움 줄 사람이 많다. 2. 확장성 - 머 사람이 많으니 확장성도 높다. 이미 만들어진 라이브러리가 강력하다 3. 리액트 네이티브 지원 - 앱으로의 확장이 가능하다 4. 경쟁상대 (?) - 상대 우위에 있다는 말씀이신듯... 5. 채용에 유리하다 - 공부하시는 분들이 워낙 많으니깐... 리액트 함수형 컴포넌트의 대두~~~ 함수형 컴포넌트를 쓰는 이유는? Hooks 를 통해 life cycle 을 해결할 수 있다. => 그리고, custom Hooks 를 별도의 함수로 만들고 여러 곳에서 불러 쓸 수 있다. 비즈니스 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms

서버사이드 렌더링 SSR

이제 서버사이드 렌더링 SSR 에 대해서 간략하게 들은 것을 정리해보자 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 이것도 용어에 적힌 대로 이해하면 된다. 서버쪽에서 렌더링을 해서 html을 내려 보내주므로 클라이언트에서 리소스를 할당해서 렌더링을 할 필요가 없다는 것. 일반적으로 서버의 성능이 아주 빠르므로, 렌더링을 강한쪽에서 해주고 결과만 내려줘서 뿌려주는 역할을 하게 해서 일을 분산 시킬 수 있다는 것이다. 여기에 쓰이는 기술로 소개한 것이 Next.JS 자세한 내용은 더 알아보도록 하고, 이것 말고도 서버사이드에서 렌더링 할 수 있도록 하는 기법으로 - hydrate - React DOM - serverside rendering keyword 가 있다나 머라나 (왜..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

클라이언트 사이드 렌더링 CSR

이전 강의에 연속해서 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 클라이언트 사이드 렌더링 CSR 에 관한 내용이다. 브라우저 렌더링 101을 통해 전체적인 느낌을 알고 세부적으로 CSR, SSR, Static file 이렇게 설명하는 것 같다. 내용의 말미에 나오는 칠판을 아래에 공부용으로 스샷 강조하는 내용을 간략하게 정리해 보면, 브라우저의 JS (JavaScript) 엔진들이 각자의 Component 를 만들고 JSX 등을 활용해서 바로 DOM을 정의해서 구현하는 것, 이것이 CSR, 클라이언트 사이드 렌더링이라고 말 할 수 있다. 특징적인 내용은 실시간성을 원하는 경우, 자연스러운 페이지 이동을 원하는 경우 혹은 페이지의 일부만 변경되어 자연스런운 렌더링이 필요한 경우 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

브라우저 렌더링 101 - from 조은의 프론트엔드 실무 가이드

크롬 기준의 브라우저 렌더링 101 강의는 fastcampus 의 동영상 강의의 화면을 일부 캡쳐해서 정리해둔다. 전체적인 개요 같은 내용이다. 먼저 모르는 용어 Render Tree DOM 과 CSS 가 적용된 결과물 정도로 이해하고 넘어간다. 이 Render Tree 가 표현되기 위해 (렌더링을 위해), 아래와 같은 3단계의 일이 벌어진다고 알면 된다. 1. Layout 2. Paint 3. Render 라는 과정이 있다는 것을 기억하라는 강사분의 말씀. Layout 부분이 다시 불리게 되면 좀 느려질 가능성이 있으니 피해서 설계하는 것이 좋다. 대충 이해한 바로 써보면, (틀릴수도 있다.) 예제로는 애니메이션을 구현할 때 Position 을 변경할 수 있는데 이 부분은 layout을 변경하는 기술이..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

서버 React 설치 - 실제 설치 로그 남기기

서버 React 설치 설치전 아래 페이지를 꼭 참고한다. 우분투 Node.js 설치및 npm 환경구축 $ sudo apt-get install -y nodejs $ sudo apt install npm 설치 로그를 참고한다. twlabs01@twlabs01:~$ cd Projects/ twlabs01@twlabs01:~/Projects$ mkdir react twlabs01@twlabs01:~/Projects$ cd react twlabs01@twlabs01:~/Projects/react$ sudo apt-get install -y nodejs [sudo] password for twlabs01: Reading package lists... Done Building dependency tree Readi..

• format_list_bulleted Tech
• · 2021. 11. 5.
• textsms