개발/Frontend (5) 썸네일형 리스트형 [모던 자바스크립트 Deep Dive] 22. this this 키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.동작을 나타내는 메서드는 자신의 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 재귀적으로 참조할 수 있다.const circle = { radius: 5, // 프로퍼티 getDiameter() { return 2 * circle.radius; // 메서드에서 자신이 속한 객체를 재귀적으로 참조하고 있다. }};console.log(circle.getDiameter()); //10 1. 자바스크립트 엔진에서.. 모듈 번들러란? (부제: Webpack vs Vite) 이번에는 모듈 번들러에 대해서 그리고 대표적인 툴인 Webpack과 Vite에 대해서 써보려고 한다. https://sh-tg.tistory.com/11 React로 프로젝트를 시작 할 때1. 프로젝트 구조먼저, 프로젝트의 구조부터 살펴 보겠습니다.아래의 레포지토리는 지인이 공유해준 React 프로젝트 템플릿인데, 지인에게 미리 사용, 공유해도 된다는 허락을 받았다!https://github.sh-tg.tistory.com위의 포스트에도 웹팩, 컴파일러 등에 대해 대략적인 설명이 있지만 해당 포스트에서는 모듈 번들러에 대해서 좀 더 자세히 설명할 예정이다. 모듈 번들러란?브라우저를 구성하는 자원으로는 HTML, CSS, Javascript, 정적 자원(이미지) 등이 있다. 웹 애플리케이션이 커지고 복잡해.. SSR과 CSR의 차이 (부제: React vs Next.js) SSR은 뭐고 CSR은 뭘까? 그리고 각각의 차이점은 무엇일까?CSR의 대표(?) 라이브러리이자 프론트엔드에서 많이 사용되는 React와 SSR 프레임워크인 Next.js를 사용하면서 느낀점도 적어보려고 한다. SSR이란?SSR(Server Side Rendering)이란 서버에서 렌더링 준비를 마친 후 클라이언트에 전달하는 방식이다. 번역하자면, 1. 사용자가 웹 사이트에 요청을 보낸다.2. 서버에서 즉시 렌더링 가능한 HTML 파일을 만든다. 3. 브라우저(클라이언트)에서 HTML을 렌더링하지만 상호작용(조작) 할 수 없다.4. 브라우저(클라이언트)에서 Javascript를 다운 받는다.5. 이때 사용자는 렌더링 된 HTML (콘텐츠)를 볼 수 있다. 만약 사이트를 조작한다면 이 행동은 기억된다.. React로 프로젝트를 시작 할 때 1. 프로젝트 구조먼저, 프로젝트의 구조부터 살펴 보겠습니다.아래의 레포지토리는 지인이 공유해준 React 프로젝트 템플릿인데, 지인에게 미리 사용, 공유해도 된다는 허락을 받았다!https://github.com/WantedTeam17/Project-Starter-With-JS GitHub - WantedTeam17/Project-Starter-With-JS: WebPack, Babel, JS를 이용한 리액트 프로젝트 세팅WebPack, Babel, JS를 이용한 리액트 프로젝트 세팅. Contribute to WantedTeam17/Project-Starter-With-JS development by creating an account on GitHub.github.com이 외에도 깃헙에 'react.. [Window 10] VSCode 초기 세팅하기 for React 원래 맥북을 사용하다가 이번에 window 환경에서 VSCode를 사용하게 되어서 기록합니다.VSCode로 React 또는 프론트엔드 개발을 하기 위한 초기 세팅입니다!1. (선택) 우분투 또는 리눅스 환경 만들기 윈도우에서 VSCode를 설치 후, 터미널을 열면 기본적으로 powershell이 열리는데 익숙한 명령어를 사용하기 위해 우분투를 따로 설치했다.*git bash 등 다른 프로그램을 사용해도 된다. 먼저 powershell을 통해 wsl을 설치해 준다. wsl --install VSCode의 터미널을 열어서 "+"를 누르면 wsl이 있는 것을 알 수 있다. * 추가로 zsh를 설치해도 된다 (아래 레퍼런스 참고) 2. Git, nodejs 설치하기- git 설치sudo apt install.. 이전 1 다음
