정골라코딩

1. React Styling 방법론 소개 -React + styling 도구 목록 -CSS Module Class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능 스타일링 직접 하나하나 해야함 -UI framewordk (ex. Ant Design, Material UI) 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천 해당 framework의 디자인철학을 벗어나기 쉽지 않음 컴포넌트들을 커스터마이징 하기 어려움 -CSS framework (ex. W3CSS, TailwindCSS) 거대한 CSS 파일 하나를 가..

1) React 앱 배포 -React 앱 배포 overview • 인터넷에서 내가 만든 앱에 접근할 수 있어야 함. • 지속적으로 앱을 수정하고 배포해야 함. • Public IP 주소로 직접 접근할 수 있도록 함. • IP를 부여받은 서버에 React 앱을 배포. • 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달. • 사용자는 IP를 통해 앱에 접근. -React 앱 배포 프로세스 • IP를 부여받은 서버(VM)에 React 앱을 배포. • 앱을 빌드하고, 웹서버를 세팅. • 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달. • 사용자는 필요한 데이터를 받아 앱을 로딩. -프론트엔드 앱 배포 시 유의할 점 • 서버와 통신 시, CORS가 허용되었는지 점검. • 브라우저, 디바이스별로 앱이 정상적으..

1. Server Side Rendering 소개 -Server Rendering • React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드. • 클라이언트는 별도의 처리 없이 웹페이지 노출. • 이를 Server Rendering이라고 함. -Client Side Rendering • Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여, 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 됨. • 데이터는 XML, JSON 형태로 클라이언트에 전송. • 이를 CSR(Client Side Rendering)이라고 함. -CSR 의 장점 • CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있음. • 자바스크립트를 최대한도..

1. React 테스팅 -코드 테스트가 필요한 경우 • 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 함. • 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 함. • 코드를 리팩토링 하면, 원래대로 동작하는지 테스트함. • 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐. • 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있음. -테스트 코드 작성의 이점 • 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지. • TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상. • 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 됨. • 테스트가 용이하게 코..

1. 상태관리 • 상태관리 기술이란 앱상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것. • 한 컴포넌트 안에서의 상태,여러 컴포넌트 간의 상태,전체 앱의 상태 관리를 모두 포함. -MPA 와 SPA 에서의 상태 관리 • MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음. • SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리. 그 외의 데이터는 Client만의 데이터로 유지. -상태 관리 기술의 도입 • 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분함. • 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 ..

1. 자바스크립트 비동기 1 -자바스크립트 비동기의 등장 • 초기 웹 환경에서는, 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에는 별도의 비동기 처리가 필요하지 않음. • Ajax(Asynchronous JavaScript and XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨. • XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨. -자바스크립트와 비동기 자바스크립트는 single-threaded language이므로, 만일 서버 요청을 기다려야 한다면 유저는 멈춰있는 브라우저를 보게 될 것. 따라서 동기가 아닌 비동기 처리를 이용해 서버로 통신할 필요가 있음. 비동기 요청 후, main..

1. SPA 와 라우팅 -Single Page Application • SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식. • 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌. -Multi Page Application • MPA(Multi Page Application)은 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달. • 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨. • 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리함. • 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘듦. -SPA 의 특징 • Client-side routing 기술을 활..

-스타일링은 왜 중요할까? -좋은 앱을 만드려면? • 번들 사이즈에 대한 고려 > CSS 코드가 차지하는 사이즈는 무척 중요한 요소. • 앱성능에대한고려 > animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요 요소. • 사용자에게 유리한 UI/UX를 고려 > 스타일링에 대한 지식으로, 고급 테크닉을 적용하여 더 나은 UI/UX를 반영. • 자바스크립트를 이용한 다양한 스타일 기법 > UI 토글링, 애니메이션, 다크모드, 복잡한 UI 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듦. • 유지보수가 용이하고 확장 가능한 코드를 작성 > 스타일에 관련된 코드를 어떻게 작성하고 관리하는가에 대한 지식이 필요. 1. React 앱에서의 스타일링 방법 -CSS im..

1. State State는 Component 내에서 유동적으로 변할 수 있는 값을 저장합니다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다. State 값이 변경되고 재렌더링이 필요한 경우에 React 가 자동으로 계산하여 변경된 부분을 렌더링 합니다. -State를 변경하는 두 가지 방법 setState 함수에는 변경할 값을 직접 넣는 방법이 있고, 함수를 넣는 방법이 있습니다. 함수를 넟는 경우 함수가 반환 (return) 하는 값으로 State가 변경됩니다. 위 예시처럼 현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 권장합니다. -이벤트 처리 (핸들링) 방법 React 에서 이벤트를 처리하는 방법은 크게 두 가지 ..

1) Hooks 란? : 컴포넌트에서 데이터를 관리 (State) 하고 데이터가 변경될 때 상호작용 (Effect) 을 하기 위해 사용합니다. -Hooks의 등장 배경 : 기존에는 컴포넌트 내에서 State와 생명 주기를 관리하기 위해서 반드시 클래스 컴포넌트 (Class Component) 를 사용하여야 했습니다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트 (Class Component) 를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가된 것이 바로 Hook 입니다. -유의 사항 Hook 은 React 함수 (컴포넌트, Hook) 내에서만 사용이 가능합니다. Hook 의 이름은 반드시 'use' 로 시작해야 합니다. 최상위 level 에서만..