본문 바로가기

웹 프로그래밍168

[모던 자바스크립트 Deep Dive] 5장. 표현식과 문 5.1. 값 👾 값 식(표현식)이 평가되어 생성된 결과. 평가: 식을 해석해 값을 생성하거나 참조하는 것 모든 값은 데이터 타입을 가지며 메모리에 2진수(비트)의 나열로 저장된다. 🐱‍🏍 변수: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름 → 변수에 할당되는 것은 값이다. 5.2. 리터럴 리터럴: 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호('', "", [], {}, // 등)를 사용해 값을 생성하는 표기법 5.3. 표현식 표현식 값으로 평가될 수 있는 문(statement). 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 5.2.의 리터럴은 값으로 평가되므로, 리터럴도 표현식이라고 할 수 있다. .. 2024. 3. 20.
리액트 공식문서 읽기 - 주요개념(State) State `state`: 리액트 컴포넌트에서 동적으로 변화하는 값을 관리하기 위해 사용되는 객체 State를 올바르게 사용하기 `setState()`: 컴포넌트의 state 객체에 대한 업데이트를 실행하는 함수. state가 변경되면 컴포넌트는 리렌더링 된다. setState()에 대해 알아야 할 것 1. 직접 State 수정 금지 //❌ this.state.comment = 'Hello'; //⭕ this.setState({comment: 'Hello'}); `setState()`를 이용해 state 값을 변경해야 한다. `this.state`는 constructor에서만 지정할 수 있다. 2. State 업데이트는 비동기적일 수 있다. React는 성능을 위해 `setState()` 호출을 단일 업.. 2024. 3. 19.
리액트 공식문서 읽기 - 주요개념(Lifecycle) Lifecycle const root = ReactDOM.createRoot( document.getElementById('root') ); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 이전 섹션(엘리먼트 렌더링)에서 다루었던 시계 코드는 렌더링 된 출력값을 변경하기 위해 `root.render()`를 호출한다. 위 코드를 재사용 및 캡슐화 하면 아래와 같다. const root = ReactDOM.createRoot(document.getElementById("root")); function C.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(Components와 Props) Components와 Props 컴포넌트 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다. 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉 `props`라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. //함수형 function Welcome(props) { return Hello, {props.name}; } //클래스형 class Welcome extends React.Component{ render(){ return Hello, {this.props.name} } } 👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트 컴포넌트 렌더링 React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(엘리먼트 렌더링) 엘리먼트 렌더링 엘리먼트 (!== 컴포넌트) React 앱의 가장 작은 단위, 리액트 앱을 구성하는 요소 화면에 표시할 내용을 기술한다. const element = Hello, world!; 브라우저 DOM 엘리먼트(브라우저 환경에서 웹 페이지의 구성요소를 나타내는 특수 객체)와 달리 React 엘리먼트는 일반 객체(plain Object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. DOM에 엘리먼트 렌더링하기 루트(root) DOM 노드: root 안에 들어가는 모든 엘리먼트는 React DOM에서 관리한다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 존재한다. React 엘리먼트를 렌더링하기 위해서는 우선 DOM.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(Hello World, JSX 소개) Hello World 가장 단순한 React 예시 JS(Babel) const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Hello, world!); html JSX 소개 React의 특성 렌더링 로직이 UI로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임. 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 `컴포넌트`라는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX가 필수는 아니다. JSX cost element = Hello, world!; JavaScript를 확장한 문법 js 코드 내에서.. 2024. 3. 18.
[땅콩코딩] 타입스크립트 강좌 내용정리(함수의 타이핑, 선택적 매개 변수와 기본 매개변수 / 클래스와 오브젝트 ) 보호되어 있는 글 입니다. 2024. 3. 14.
[땅콩코딩] 타입스크립트 강좌 내용정리(열거형과 리터럴 타입) 보호되어 있는 글 입니다. 2024. 3. 14.
[땅콩코딩] 타입스크립트 강좌 내용정리(TS의 특성, 설치 및 환경설정, 타입추론, 타입명시, 인터페이스) 보호되어 있는 글 입니다. 2024. 3. 11.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 배포 (서버: Koyeb, 프론트: vercel) 진행 중인 프로젝트의 기본적인 기능이 모두 마무리되어 배포를 해보기로 했다. 🎍 백엔드 서버 배포 😀 서버 배포 서비스 결정 전에 Heroku를 이용해 서버 배포했다가 과금 맞은 경험이 있었기에(Heroku는 완전히 유료전환되었다고 한다. 전에 그것도 모르고 강의에서 하라는 대로 Heroku에서 배포했더니 일주일 남짓한 기간 동안 배포한 비용을 지불하게 되었다....😂) 찾아보니 Heroku의 대체 배포 서비스로 Koyeb과 fly.io가 유명한 것 같다. fly.io는 도커를 이용해서만 배포가 가능한데 Koyeb은 깃헙 레파지토리를 연결해서 간단히 배포가 가능하다고 한다. 나는 도커를 한 번도 사용해 본 적이 없어 도커를 사용하려면 또 도커를 배워야 하는데... 서버 배포와 도커 사용은 내게 있어 우선.. 2024. 3. 7.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 리덕스(Redux)로 가계부 데이터 상태 관리 1(리덕스 선택이유, 리덕스 정의 및 스토어, 액션, 리듀서 정의, 덕스패턴 적용까지) 리덕스 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있게 도와준다. 글로벌 상태 관리도 손쉽게 할 수 있다. 미들웨어로 다양한 작업(비동기, 로깅) 가능 🤔 왜 상태관리 라이브러리로 리덕스를 선택했는가? npmtrends를 통해 살펴보면, Redux는 다른 상태관리 라이브러리보다 월등히 높은 사용률을 보이고 있다. 요즘 채용공고를 보면 recoil, zustand도 제법 보이는데 recoil의 경우 1년 전이 마지막 update라 관리가 안 되고 있는 느낌이었고, zustand는 다른 프로젝트에서 한 번 다루어보려고 계획하고 있다. Redux는 Context API가 지금 형태로 사용되기 전(`useReduce.. 2024. 3. 7.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 몽고DB 연동 후 데이터 전송하기 (입출금 내역 POST, GET, PATCH, DELETE 요청) 🚧 사전 작업 필요한 패키지 설치 npm install dotenv mongoose dotenv: 환경변수 .env를 관리해 주는 패키지 computer-science-student.tistory.com mongoose: 비동기 환경에서 작동하도록 설계된 MongoDB 객체 모델링 도구 https://velog.io/@soshin_dev/Node.js-Mongoose-%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90 MongoDB 드라이버 설치 npm install --save mongodb 데이터베이스와 상호작용할 수 있는 sdk 설치 MongoDB 아틀라스 접속 및 회원가입, 데이터 베이스 만들기 MongoDB 연결하기(1) 회원가입 로그인 부분은 생.. 2024. 1. 28.
반응형

티스토리툴바