본문 바로가기

전체 글

(10)
[JavaScript] 엘리스트랙 1차 - 웹 쇼핑몰 만들기 결과물 티켓원잇! 바로가기 프로젝트 소개 프로젝트 주제 온라인 티켓 구매 서비스 쇼핑몰 프로젝트명 티켓원잇!(Ticket Wantit!) 제작 기간 2023.04.17 - 2023.04.28 (12일) 팀 구성 담당포지션 : 팀장, 프론트엔드 Frontend(3명) : 윤우정, 김윤중, 이성호 Backend(3명) : 유하영, 이민영, 정혜린 기술스택 구현기능과 목표 목표 쇼핑몰의 최소 기본 구현사항은 꼭 완성해보기 구현기능 + 페이지별 기능정리 회원가입, 로그인, 회원정보 수정 및 탈퇴 등 사용자 관련 CRUD (로그인페이지, 회원가입페이지, 마이페이지) 제품 관련 CRUD, 주문 관련 CRUD (메인페이지, 상품목록, 상품상세, 장바구니, 주문페이지) 관리자 (관리자페이지) 내가 맡은 역할 메인페이지..
자바스크립트 제어 흐름 자바스크립트 비동기 이해하기 - 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다. - 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라가기가 어렵다. - 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프등의 개념을 알아야만 한다. 자바스크립트는 비동기 동작을 이해하는게 흐름을 파악하는데 매우 중요하다 자바스크립트 비동기 자바스크립트 엔진은 비동기처리를 제공하지 않는다. 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다. → 이 함수들을 API라고 한다 비동기 API의 예시 : 1. WEB API - setTimeout, XMLHttpRequest, fetch등 2. NodeJS - 파일처리 API, 암호화..
타입스크립트 - 이론정리 01. 동적타입과 정적타입 동적타입(Dynamic Typing) 컴파일단계없이 인터프리터와 같은 코드해석기가 코드를 라인단위로 읽으면서 바로 코드를 실행할때 코드내의 변수 타입이 정해지는 방식 코드 컴파일 실행없이 바로 실행해야할때 정적타입(Static Typing) 코드내의 변수타입이 실행단계 이전에 정해지기 이전에 정해진다 타입을 코드에 명시적으로 표현하는 방식(코드가 실행되기 전에 타입을 정의하는 방식) 컴파일러가 컴파일 단계에 코드내의 변수들의 타입들을 분석해서 코드를 실행하기전에 기초적인 결함을 찾을 수 있음 컴파일단계는 시간이 좀 오래걸린다. 컴파일과정을 거쳐야하는 단점이 있으나 기본적인 결함이 없는 상태의 결과물을 얻을 수 있다. 컴파일러의 코드 리팩토링과 같은 최적화가 되어있어서 작성한 코..
배열의 메소드 4 (from, of) 1. from 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 배열로 변환 // 유사 배열 객체 const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; const arr1 = Array.from(arrayLike); console.log(arr1); // 출력: ['a', 'b', 'c'] // 반복 가능한 객체 const iterable = new Set([1, 2, 3, 4, 5]); const arr2 = Array.from(iterable); console.log(arr2); // 출력: [1, 2, 3, 4, 5] 2. of 전달된 인수들로 새로운 배열을 생성. const arr1 = Array.of..
배열의 메소드 3 (map, filter, reduce, sort, reverse) 배열 변형하기 1. map 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다. let results = arr.map(function(item, index, array) { // 조건을 충족하는 요소는 results에 순차적으로 더해집니다. // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다. }); let arr = [1,2,3,4,5]; let mapped = arr.map(function(item) { return item * 2; }); console.log(mapped); // [2,4,6,8,10] 2. filter 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환. let results = arr.filter(functi..
배열의 메소드 2 (indexOf, lastIndexOf, includes, find, findIndex) 원하는 요소 찾기 1. indexOf 인덱스 from부터 시작해 item(요소)을 찾고, 요소를 발견하면 가장 처음 발견한 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환. arr.indexOf(item, from) let arr = [1, 2, 3, 4, 3, 2, 1]; console.log(arr.indexOf(5)); // -1 console.log(arr.indexOf(3)); // 2 console.log(arr.indexOf(3, 3)); // 4 console.log(arr.indexOf(3, -2)); // -1 console.log(arr.indexOf(3, -3)); // 4 2. lastIndexOf indexOf와 동일하나 검색을 끝에서부터 시작. arr.lastIndex..
배열의 메소드 1 (push, pop, shift, unshift, splice, slice, concat) 요소를 더하거나 지우기 1. push 배열 뒷부분에 값을 삽입 let arr = [ 1, 2, 3, 4 ]; arr.push( 5 ); console.log( arr ); // [ 1, 2, 3, 4, 5 ] 2. pop 배열 뒷부분의 값을 삭제 let arr = [ 1, 2, 3, 4 ]; arr.pop(); console.log( arr ); // [ 1, 2, 3 ] 3. unshift 배열 앞부분에 값을 삽입 let arr = [ 1, 2, 3, 4 ]; arr.unshift( 0 ); console.log( arr ); // [ 0, 1, 2, 3, 4 ] 4. shift 배열 앞부분의 값을 삭제 let arr = [ 1, 2, 3, 4 ]; arr.shift(); console.log( arr..
배열 (Array) 배열이란? 복수의 데이터를 저장할 수 있는 자료구조. 인덱스로 데이터의 순서를 알 수 있다. 배열 선언 /* 빈배열 생성 */ let arr1 = []; /* 선언과 동시에 요소 삽입도 가능 */ let arr2 = ["a", "b", "c"]; /* 배열요소 삽입 */ let arr1[0] = 1; let arr1[1] = 2; let arr1[2] = 3; //arr1 = [1, 2, 3]; /* 배열요소 수정 */ let arr1[0] = 'string'; //arr1 = ['string', 2, 3]; 배열요소의 자료형에는 제약이 없다. let arr4 = [1, "String", function(){}, [1, 2, 3, 4], {obj1 : "key1", obj2 : "key2"}]; 배열의 ..