분류 전체보기

[자바스크립트] 옵셔널 체이닝

✅ 옵셔널 체이닝 연산자(?.) - ES11에 도입되었으며 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조! - 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용 let ob = null; let cob = ob?.name; // 좌항의 연산자가 null 이기 때문에 undefined를 반환 console.log(cob) ob = {age:12}; cob = ob?.name; // 좌항의 연산자가 undefined 또는 null이 아니지만 객체 안에 name 프토퍼티가 없기 때문에 undefined 반환 console.log(cob) // undefined cob=ob?.a..

자바스크립트 데이터 타입

데이터 타입 ✅ 자바스크립트 데이터 타입 구분 데이터 타입 설명 원시타입 숫자number 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열string 타입 텍스트 데이터를 나타내는데 사용 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다. 불리언boolean 타입 논리적 참(true)와 거짓(false) undefined 타입 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수이다. null 타입 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다..

WebRTC ver.1

WebRTC(Web Real-Time Communication) - 수정 예정 WebRTC - 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술(서버를 통하지 않고 사용자끼리 통신) 쉽게 생각한다면 어떠한 플러그인 없이 음성, 비디오, 데이터를 서로 교환할 수 있는 기술 WebRTC 기술을통해 통신 이루어지는 과정으로는 1.서로의 주소를 공유 2.보안 사항 및 방화벽 우회 3.데이터를 실시간으로 교환 1,2번을 시그널링이라고 한다. 시그널링 - 서로 다른 네트워크에 있는 2개의 디바이스들을 서로 위치시키기 위해서는, 각 디바이스들의 위치를 발견하는 방법과 미디어 포맷 협의가 필요. 시그널링 과정..

[자바스크립트] 변수

변수 컴퓨터에 저장되는 데이터는 데이터 종류에 관계없이 모두 2진수로 저장된다. 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 식별자 - 어떤 값을 구별해서 식별할 수 있는 고유한 이름(값이 저장돼 있는 메모리 주소와 매핑 관계) / 식별자는 값이 아니라 메모리 주소를 기억하고 있음 ✅ 변수 선언 변수 선언 - 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있게 준비하는 것 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행함 1. 선언 단계 - 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림 2. 초기화 단계 - 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 u..

[자바스크립트] 자바스크립트 변수 선언 방법

자바스크립트의 변수 선언 방법 과거에는 var를 사용하는 것밖에 없었지만 이제는 const, let, var 같이 여러가지가 있으며 사용 방법도 다르다. var one = 1; console.log(prev); // undefined -> 자바스크립트 호이스팅 특성 function change() { console.log(one); let two = 2; const three = 3; console.log(two); console.log(three); one = 11; two = 22; // three=33; Uncaught TypeError: Assignment to constant variable. } var prev = 3; change(); console.log(one); // 11 var one..

커스텀 훅

Custom Hook 1. 커스텀 훅은 왜? 관심사의 분리 코드를 처음부터 잘 작성하더라도 다양한 이유로(ex. 기획의 변화, 디자인 변경, 요청 사항 추가) 개발 기간 동안 적어도 한번은 처음과는 다른 조건과, 상황에 대응하도록 수정해야 할 필요성이 생긴다. -> 여러가지 문제를 한번에 해결하도록 단위를 짜는 것이 아니라 한가지 문제만 해결하도록 단위를 잘게 짜도록 한다 장점 코드의 명료화 코드의 재사용성 용이 유지 보수의 용이 테스트 코드 작성이 쉬움 2. 커스텀 훅 view와 Logic의 분리 Presentational Component : UI Only 컴포넌트 state, effect등 로직 없음 -> 화면을 렌더링하는데 필요한 코드만 존재 const UserList = ({ users }) =..

git rebase

Git Flow & Git Rebase Git Flow Basic Flow 깃허브를 기준으로 브랜치가 main과 feature/F1, feature/F2, Develop 1. 레파지토리 생성시 메인 브랜치 생성 2. develop 브랜치 생성하고 3. feature 브랜치에서 작업을 하고 develop으로 머지를 한다 4. develop에서 테스트 후 배포 할 수 있는 것을 Release 브랜치를 만들어 추가적으로 확인을 한 후(버그 확인) develop 브랜치에도 변경 사항을 들고 온다. 핫픽스 - 기능이 갑작스럽게 오류가 날 때 마이너 버전 - 로직을 추가해도 기존에 있던 로직이 잘 작동할 때 메이저 - 기존에 있던 로직이 더이상 작동을 안할 때 Git Rebase base - 특정 브랜치가 생성될 ..

첫 팀프로젝트 후기

1. 소개 2주 동안 팀 프로젝트로 이케아 페이지를 클론 코딩 프론트엔드와 백엔드를 나눠서 진행했으며 프론트엔드 분야를 맡았다. 이케아 - 인테리어 가구, 소품을 판매하는 사이트 카테고리,신제품, 가격 등에 따라 필터링이 가능하다 1. 소개 2주 동안 팀 프로젝트로 이케아 페이지를 클론 코딩 프론트엔드와 백엔드를 나눠서 진행했으며 프론트엔드 분야를 맡았다. 이케아 - 인테리어 가구, 소품을 판매하는 사이트 카테고리,신제품, 가격 등에 따라 필터링이 가능하다 2. Tech Skills 3. 구현 부분 메인 페이지 - 자바스크립트로 구현한 이미지 캐러셀(추천 제품) - 상품 품목에 따른 필터링 구현 로그인 페이지 - 데이터 통신을 통한 에러 핸들링 - 로그인 여부에 따라 토큰 저장 회원가입 페이지 - 아이디..

자바스크립트 함수

함수 함수 - 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 함수는 왜 사용 하는가 ? -> 코드의 재사용 / 유지보수의 편의성 / 코드의 가독성 함수 정의 방식 함수 정의 방식 예시 함수 선언문 function add(x, y){ return x+y; } 함수 표현식 var add =function(x, y){ return x+y; } Function 생성자 함수 var add = New function('x', 'y', 'return x + y') 화살표 함수(ES6) var add = (x, y) => x + y; 함수 표현식 - 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식 함수 표현식은 '표현식인 문' 함수 호이스팅 - 변수로 할당된 함..