Be lazy, Be crazy

이 글에서는 javaScript가 어떻게 동작하는지 그리고 이벤트루프는 무엇인지 알아봅시다. js언어를 사용해 코딩을 하면서 주먹구구식으로 코드를 작성해서 기능이 동작하는데 초점을 맞추다 보니 사용하는 언어에 대해서 동작방식을 소홀히 여기게됬다. 그러나 조금 더 좋은 코드를 작성하고 싶어서 동작방식에 대해서 공부를 하게 되었다. 출처는 유튜브 https://www.youtube.com/watch?v=QFHyPInNhbo&t=66s 영상을 보시면 아주 도움이 될것같습니다. Memory Heap => 메모리 할당이 일어나는 곳 Heap => 구조화 되지 않은 넓은 메모리 영역 | 객체(변수,함수 등)들이 담긴다. Call Stack(호출스택) => 실행될 코드의 한 줄 단위로 할당된다. 자바스크립트는 인터프..

MPA(Multiple Page Application) ✔️ MPA의 개념 여러 개의 페이지로 이루어진 애플리케이션 정적 정보가 포함된 여러 페이지와 다른 페이지에 대한 많은 링크로 구성된 전통적인 웹 애플리케이션 전체 페이지를 다시 로드하고 사용자가 웹 앱과 상호 작용할 때 새 페이지를 표시한다. 주로 Amazon, eBay 및 기타 전자 상거래 사이트와 같은 대규모 웹 사이트를 위해 설계되었다. SSR(Server Side Rendering) 방식으로 렌더링한다. *SSR : 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 (지난 포스팅 참고) GET, POST? (REST API - HTTP method) GET : 정보를 가져올 때 사용 (어떤 값이나 내용, 상..

SSR(Server Side Rendering)이란? ✔️ SSR 개념 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 페이지를 이동할 때마다 서버에 새로운 페이지를 요청한다. 모든 페이지는 서버 연산을 통해 렌더링하고 완성된 페이지 형태로 응답한다. 👍 SSR 장점 SEO(Search Engine Optimization, 검색엔진 최적화)관점에서 유리하다. (완성된 형태의 HTML 파일을 서버로부터 받으므로 검색엔진이 페이지를 크롤링하기에 적합) 첫 로딩 시간이 매우 짧다. (서버에서 이미 렌더링해서 가져오므로) 👎 SSR 단점 페이지 이동시 화면이 깜빡거리는 현상을 겪을 수 있다. (페이지 요청 시 서버에게 페이지를 받아오는 시간이 필요) 화면에서 바뀌지 않아도 되..

리액트 개발환경 세팅하고 App.js 파일을 열었는데 분명 같은 코드도 있고 HTML 형식 같은데 class가 아니라 JS처럼 className이 적혀있네요? HTML인 것 같지만 이것은 JSX (JavaScript eXtension) 라는 문법입니다. JS파일 안에서 HTML을 작성하기 위해 도와주는 리액트 기본 내장 문법이라 생각하시면 됩니다 일종의 JS이기 때문에 className이라고 써야 CSS의 class명과 연결할 수 있습니다 리액트에서는 HTML 대신 JSX라는 문법을 사용할 수 있습니다 그렇다면 HTML이 아닌 JSX 문법을 사용하는 이유가 무엇일까요? 바로 데이터바인딩 때문입니다. (JS 데이터를 HTML에 넣는 작업을 뜻합니다) 예를 들어, 변수를 div의 내용으로 넣고 싶다고 할 때..

리액트 개발환경을 빠르게 셋팅 해봅시다 셋팅을 위해 필요한 건, 3가지 1. Node.js 최신버전 2. VSCode 3. create-react-app 라이브러리로 프로젝트 생성하기 순서대로 해봅시다 1. Node.js 먼저 Node.js는 홈페이지가서 가장 최신 버전(오른쪽꺼)으로 설치합니다 맥북 M1은 가끔가다 라이브러리 이용에 어려움이 있을 수 있으니 LTS버전을 추천합니다 2. VSCode 운영체제에 맞는걸루 깔아주세요 3. create-react-app 라이브러리로 프로젝트 생성하기 작업할 폴더 하나 생성해서 VSCode 에서 열어주고 VSCode 터미널 열기 (상단 탭 메뉴에 Terminal - New Terminal 또는 단축키 ctrl+shift+`) npx create-react-app..

웹사이트는 HTML/CSS, JS로도 충분히 기능구현이 가능한데 왜 리액트를 써야하는걸까요? React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다. 리액트를 사용하는 이유는 상호작용이 많더라도 효율적으로 작동하는 웹앱 개발을 위해서라고 요약할 수 있겠네요 리액트를 배우는 궁극적인 목표는 리액트 문법으로 멋진 웹앱을 보다 편하게 제작하기 위해서 웹앱(Web App)? 웹 기술로 구현한 앱입니다 (말 그대로 앱 같은 느낌이 나는 웹) 웹앱은 포스팅하거나 다른 페이지로 이동하거나..