Daily/Today I Learned10 원시 타입(Primitive type)과 참조 타입(Reference Type) Javascript의 변수 타입 자바스크립트의 변수 타입에는 크게 '원시 타입'과 '참조 타입'으로 나뉜다. 원시타입의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장하며, 참조타입은 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근한다는 특징이 있다. 원시 타입 원시타입에는 아래와 같은 변수들이 있다. 숫자(Number) 문자열(String) 불리언(Boolean) null undefiend 심볼(Symbol) : ES6에서 추가된 원시타입으로, 유일하고 변경 불가능한 값을 생성하는 데 사용된다. 원수 타입은 변수에 직접 값을 저장한다. 즉, 변수에 원시 값을 할당하면 해당 변수에는 실제 값이 저장되며, 변수 간에 값 복사가 이.. 2023. 8. 2. 상태관리도구 Redux Toolkit 리덕스툴킷(Redux Toolkit) 리덕스툴킷은 리덕스 사용 시에 아래와 같이 우려되는 것들을 해결하기 위해 만들어졌다. "저장소를 설정하는 것이 너무 복잡하다" "쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다" "보일러플레이트 코드를 너무 많이 필요로 한다" 리덕스를 만든 Dan Abramov는 모든 리덕스 앱에 리덕스 툴킷을 사용하기를 강력히 권장하고 있다. 리덕스툴킷은 무슨 장점을 가지고 있기에 이렇게 강력추천 하는 걸까? 리덕스툴킷의 장점 초기 설정이 매우 간편하다. 더 이상 다양한 패키지들을 설치하지 않아도 된다. 기존에는 반복되는 코드가 많아 코드가 복잡해지고 실수를 많이 유발했지만, 이런 부분들이 많이 개선되었다. 리듀서, 액션타입, 액션 생성함수, 초기상태를 하나의 함수로 편하게.. 2023. 8. 1. 단반향 바인딩과 양방향 바인딩 데이터 바인딩(Data Binding)이란? 화면상에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다. 예를 들어 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주었을 때, 해당 값이 변경될 경우 다시 HTML상에 데이터를 변경된 값에 따라서 맞추어 주는 동작을 데이터 바인딩이라고 한다. 단반향 바인딩 장점 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능하다. 데이터 흐름이 단방향(부모 -> 하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다. 단점 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다. 대표적인 프레임워크 리액트 단방향 데이터 바인딩은 .. 2023. 7. 29. 네트워크 기초 복습 프로토콜 통신규약, 서버에 요청을 하기위해서 꼭 지켜야하는 약속. 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 대화를 나눈다. 주요 프로토콜 OSI 7 Layers 프로토콜 이름 설명 7.응용계층 HTTP 웹에서 HTML, JSON 등의 정보를 주고 받는 프로토콜 7.응용계층 HTTPS HTTP에서 보안이 강화된 프로토콜 7.응용계층 FTP 파일 전송 프로토콜 7.응용계층 SMTP 메일을 전송하기 위한 프로토콜 7.응용계층 SSH CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜 7.응용계층 RDP Windows 계열의 원격 컴퓨터에 접속하기 위한 프로토콜 7.응용계층 WebSocket 실시간 통신, Push 등을 지원하는 프로토콜 6.표현계층 5.세션계층 4.. 2023. 5. 3. fe-sprint-mini-node-server 생각 비교적 간단한 sprint 였지만, 사소한 실수들로 인해 많은 에러를 마주하였다. 열심히 구글링 해가며 오류를 해결해나가는 과정에서의 뿌듯함이 있었다. 요청의 body가 아래와 같이 되어야한다고 하는데 chunk와 Buffer 부분을 이해하지는 못했고 외우기에 그쳤다. let body = []; request.on('data', (chunk) => { body.push(chunk); }).on('end', () => { body = Buffer.concat(body).toString(); }); 2023. 4. 4. fe-sprint-statesairline-client fe-sprint-statesairline-client의 목표 💡 Part 1: 항공권 목록 필터링 🧩 Main 컴포넌트에서 항공편을 조회합니다 ✓ Main 컴포넌트 내 `search` 함수는 검색 조건을 담고 있는 상태 객체 `condition`을 업데이트해야 합니다 (24 ms) 🧩 Search 컴포넌트를 통해 상태 끌어올리기를 학습합니다 ✓ 검색 화면이 Search 컴포넌트로 분리되어야 합니다 (3 ms) ✓ Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다 (5 ms) ✓ 상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 합니다 (25 ms) 💡 Part 2: AJAX 요청 🧩 Side Effect.. 2023. 4. 3. 이전 1 2 다음
