실제 애플리케이션 개발 - 데이터 플로우, 유저 시나리오 작성

실제 서비스를 개발 하려면 필수적으로 2가지 작업을 해야 한다는 것 같다. 데이터 플로우 작성과 유저 시나리오 작성 머 대충 개발하면서 정리해 나가면 된다고 생각하는데, 많이 경험하신 분들은 이렇게 개발을 시작하나 보다. 꼭 따라 해보는 것이 여러모로 도움이 될 듯 한데 (ㅋㅋㅋ 하기 싫은 작업들이네) 암튼 조은씨의 실무 강의에서 설명된 부분은 몇가지 추려 보면 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 우선 데이터 플로우 Data Flow 판서 내용 서비스라면 인증 방식을 정해야 하고, 인증이 되냐 안되냐에 따라 다른 뷰를 보일 수 있으니 분리하고 데이터가 내부 데이터 인지 외부 데이터 인지 판단해서 구분해 두는 것도 중요하다. 여기서 내부 데이터라 함은 그냥 프로젝트 빌..

• 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