imysydesu 님의 블로그

1 . promise메서드 Promise.all() 모든 promise가 성공해야 then을 실행하나라도 실패 시 catch 실행병렬 처리용 ex)Promise.all([p1, p2, p3]) .then(results => { console.log(results)}) Promise.race() 가장 먼저 완료된 promise 하나의 결과를 사용성공/실패 상관없이 먼저 끝나는 것을 기준으로 함 ex)Promise.race([p1, p2]) .then(result => console.log(result)) Promise.allSettled() 모든 promise의 성공/실패 결과를 모두 반환실패해도 중단되지 않음 ex)Promise.allSettled([p1, p..

1 . Todo 앱 만들기 html파일, css파일, js파일을 각각 만들어서 연결 html파일 css파일 js파일 2 . localStorage 브라우저가 제공하는 웹 스토리지 기능 중 하나자바스크립트를 통해 키/값 형태의 데이터를 브라우저에 영구적으로 저장할 수 있는 저장소브라우저별로 약 5MB 내외 저장 제한이 있음문자열만 저장 가능같은 도메인에서만 접근 가능민감한 정보(비밀번호, 토큰 등)는 저장하면 안 됨 -> 누구나 열어서 확인할 수 있음 데이터 저장 localStorage.setItem("키", "값") 데이터 불러오기 const value = localStorage.getItem("키", "값") 일부 데..

1 . 정규식 문자열에서 특정한 패턴을 찾거나 검사하거나, 치환하기 위해 사용하는 표현식문자열 처리를 간결하고 정교하게 하기 위해 사용 /패턴/옵션ornew RegExp("패턴", "옵션") 패턴 a :문자 a를 찾음abc(문자열 abc). : 아무 문자 1개[abc] : a또는 b또는 c[a -z] :a부터 z까지(영어)[가-힣] : 가부터 힣까지 (한글)[0-9] : 0부터 9까지 (숫자)[^0-9] : 숫자가 아닌 문자들만(반대의 뜻)* : 0번 이상(여러 개), 안 들어가도 됨+ : 1번 이상? : 0 또는 1{n} : 정확히 n번(ex) {3} : 3자리){n,} : n번 이상{n,m} : n~m번^ : 여기서부터 문자열 시작$ : 문자열 끝\d : 숫자가 들어가야 함\..

1 . BOM Browser Object Model의 약자자바스크립트가 브라우저 자체를 제어하고 정보를 얻기 위해 사용하는 객체 1 -1 . API(Application Programming Interface) 서로 다른 프로그램이나 시스템이 데이터를 주고받고 기능을 사용할 수 있도록 연결해 주는 주간 통로 window 객체 자바스크립트에서 브라우저 창을 대표하는 최상위 객체전역 범위에서 정의된 변수(var 등)나 함수, 타이머, 팝업, 브라우저 정보 등 대부분의 기능을 포함하고 있음HTML 페이지를 로드하면 브라우저는 자동으로 window 객체를 생성하며 자바스크립트 코드에서 명시적으로 window를 쓰지 않아도 사용할 수 있음 location 객체 자바스크립트..

1 . 객체 기초 1 - 1 . 절차 지향 프로그래밍 코드를 순서대로 실행하는 절차로 구성하는 방식C언어 ex) const names = ['김사과', '반하나', '오렌지', '이메론'] for(let i = 0; i if(names[i].startswitch("김")) { console.log("안녕하세요, " + names[i] + " 님!" } } 1 - 2 . 객체 지향 프로그래밍 프로그램을 구성할 때 현실 세계의 사물들을 객체로 모델링하여, 객체 간의 상호작용을 통해 문제를 해결하는 방식 ex) co..

1 . 자료형 - 참조 타입 참조 타입값의 주소(참조)를 저장여러 값을 묶어 관리할 수 있음 Object키와 값의 쌍으로 이루어진 객체=> ex) let user = { name : "김사과", age : 20 } Array여러 값을 순서대로 저장=> ex) let scores = [90, 80, 70] Function실행 가능한 코드 블록=> ex) function hello() {console.log("안녕하세요")} let hello = function() {console.log("안녕하세요")} 1 - 1 . 원시 타입과 참조 타입의 저장 방식 원시 타입 값 그 자체가 변수에 직접 저장숫자나 문자열을 변수에 넣으면 그 변수 안에 실제 값이 들어..

1 . Git 소스 코드의 변경 이력을 효과적으로 관리할 수 있도록 도와주는 분산 버전 관리 시스템개발자는 Git을 이용해 코드의 이전 상태로 되돌리거나 여러 사람이 동시에 작업해도 충돌 없이 협업할 수 있음브랜치를 활용해 새로운 기능을 실험적으로 개발한 후 메인 프로젝트에 병합할 수 있음Git은 로컬 저장소와 원격 저장소를 구분하여 인터넷 없이도 작업할 수 있음GitHub와 같은 서비스와 연동하여 팀 프로젝트를 체계적으로 관리할 수 있는 강력한 도구 1 -1 . 버전관리 소프트웨어 개발이나 문서 작성 등에서 파일의 변경 이력을 체계적으로 기록하고 관리하는 방법이를 통해 언제, 누가, 어떤 변경을 했는지 추적할 수 있으며 문제가 발생했을 때 이전 버전으로 되돌리거나 변경 내용을 비교할 수 ..

1 . JavaScript 웹 브라우저에서 동작하는 프로그래밍 언어HTML과 CSS로 만들어진 정적인 웹 페이지에 동적인 기능과 사용자와의 상호작용을 추가하는 역할버튼 클릭, 입력값 처리, 화면 내용 변경, 애니메이션 제어, 서버와의 데이터 통신 등 다양한 기능을 수행오늘날에는 브라우저를 넘어 서버(Node.js), 모바일, 데스크톱 애플리케이션까지 활용 범위가 확장된 핵심 웹 기술임대소문자 구분함 2. 자바스크립트의 역사 1 . 자바스크립트의 탄생 (1995년)1995년, 넷스케이프(Netscape)라는 회사에서 웹 브라우저인 넷스케이프 내비게이터를 만들고 있었는데, 웹 페이지에 동적인 기능(버튼 클릭, 팝업 등)을 넣고 싶어짐 그래서 브렌던 아이크(Brendan Ei..

1 . flexbox flexbox CSS에서 요소들을 한 방향(가로 또는 세로)으로 유연하게 배치하고 정렬하기 위한 레이아웃 모델부모 요소에 display: flex를 적용해 자식 요소들의 크기, 정렬, 간격을 쉽게 제어할 수 있음 컨테이너 flexbox에서 display:flex가 적용된 부모 요소를 의미내부에 있는 자식 요소들을 어떻게 배치하고 정렬할지에 대한 기준과 규칙을 정하는 역할 아이템 flex 컨테이너 안에 포함된 자식 요소들을 의미컨테이너가 정한 배치 규칙에 따라 실제로 화면에 놓이는 대상 flex-direction 아이템이 배치되는 방향 결정flex-direction: row; => 기본값, 가로 flex-direction: column; => 세로 justify-co..

1 . 표 구조 . . . . . . . . . td : 셀tr : 제목 셀, 굵은 글씨로 표시되며 가운데 정렬 됨 ex 2 . 시멘틱 구조 : html에서 특별한 의미나 레이아웃 기능 없이 텍스트의 일부분을 감싸는 인라인 컨테이너 태그 : html에서 의미를 가지지 않는 블록 단위의 컨테이너 태그로 여러 요소를 하나의 그룹으로 묶어 페이지의 구조를 나누거나 레이아웃을 구성할 때 사용 시멘틱 태그 : html에서 요소의 겉모양이 아니라 의미와 역할을 명확히 드러내는 태그로, 해당 영역이 어떤 목적을 가지는지 브라우저/검색엔진/접근성 도구가 이해할 수 있도록 도움 = 페이지의 머리글 영역, 제목, 로고 = 메뉴, 링크 목..