냠

[Day5] Javscript

Day6부터는 https://yeeun426.github.io/ 여기에 정리하였습니다. !Javascript variables변수는 데이터를 저장하기 위한 컨테이너 JS의 변수 선언 방법변수 선언 방법언제 사용해야하나요?var오래된 브라우저를 사용해야 하는 경우letconst를 사용할 수 없는 경우const1. 값을 변경하면 안되는 경우 (상수)2. type을 변경하면 안되는 경우 Javascript 식별자이름에는 문자, 숫자, 밑줄, 달러 기호가 포함될 수 있습니다.이름은 문자로 시작해야 합니다.이름은 $와 _로 시작할 수도 있습니다이름은 대소문자를 구분합니다(y와 Y는 다른 변수입니다).예약어(JavaScript 키워드 등)는 이름으로 사용할 수 없습니다.할당 연산자: js에서 등호(=)는 "equa..

[Day4] 부트스트랩 & Javascript

Bootstrap 5 is mobile-first모바일 기기에 반응하도록 설계하기 위해 아래 meta태그를 추가아래 코드가 없는 경우 반응형으로 적용되지 않는다.  ** p-5가 최대이며, 숫자가 그 이상이 되면 그냥 0이 됨 ** BS5 Tables Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Dooley july@example.com ..

[Day3] CSS 기초 & bootstrap

css 강의는 새로 알게된 개념과 면접에서 필요한 개념 위주로 정리해보았다. CSS Box model- 디자인과 레이아웃을 설명할 때 사용된다.- box model은 본질적으로 모든 html 요소를 감싸는 상자이다.Content - 텍스트와 이미지가 나타나는 상자의 내용Padding - 콘텐츠 주변 영역을 지웁니다. padding은 투명합니다.Border - 패딩과 콘텐츠를 둘러싼 테두리Margin - 테두리 밖의 영역을 지웁니다. margin은 투명합니다.** 요소의 총 width와 height를 계산하려면 padding과 border도 포함해야 한다. ** css outline: border 바깥쪽에 그려진 선 CSS Font.p1 { font-family: "Times New Roman", Tim..

[Day2] html, css 기초 & virtual dom

HTML favicon 파비콘 : 글쓰기 탭 왼쪽에 이미지가 표시됨제목 : 글쓰기 (page title)   태그에서 요소를 추가한다.  HTML page titleThe content of the document...... HTML table태크정의테이블 데이터테이블 행테이블 헤더** 는 굵게 표시되고 가운데 정렬됨 Company Contact Country Alfreds Futterkiste Maria Anders Germany  HTML Lists순서 없는 리스트 : 목록 항목에 글머리 기호 (작은 검은색 원)으로 표시됨 Coffee Tea Milk순서 있는 리스트 : 목록 항목에 숫자가 표시됨. Coffee Tea Milk HTML bloc..

[Day1] html 기초 & SEO 최적화 마크업 규칙

HTML (Hyper Text Markup Language)이란 ? 웹 페이지를 만드는 표준 마크업 언어 My First Heading My first paragraph.  HTML 속성src표시할 이미지 경로를 지정1. 절대적 url : 다른 웹에 호스팅된 이미지 링크 (https:// www ~)2. 상대적 url : 웹사이트 내에 호스팅된 이미지 (yeeun.jpg)width, heightalt 어떤 이유로 이미지를 표시할 수 없는 경우 대체 텍스트style색상, 글꼴, 크기 등의 스타일 요소redlang웹 페이지의 언어를 선언하려면 태그 lang 내부에 속성을 포함해야 한다.!DOCTYPE html>html lang="en">body>.../bo..

[JS] Redux 리덕스

Redux 란리덕스는 JS 상태 관리 라이브러리입니다. 쉽게 설명하면 모든 컴포넌트에서 바로 state에 접속 가능한 저장소 입니다.(도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다) 상태?component 안에서 관리되는 것 사용하는 이유자식 컴포넌트가 많아지면, 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈리덕스를 사용하면 state를 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 기본 용어- Store (스토어)상태가 저장되는 저장소 - Reducer (리듀서)특정 action에 따라서 state값을 변경하는 함수이벤트 핸들러와 비슷파라미터는 state, action 두개를 받음 - Action (액션) -..

[JS] 정규 표현식

정규표현식문자열에서 특정 문자 조합을 찾기 위한 패턴 정규식 만드는 법1. 정규 표현식 리터럴 : 슬래시(/)패턴으로 감싸는 방식const regex = /pattern/flags;스크립트를 불러올 때 컴파일 되므로, 실행 도중에 바뀌지 않는 패턴일 때 사용하는 것이 좋음.일반적인 방법이며, 리터럴을 사용하면 정규 표현식 객체가ㅏ 생성된다. 2. RegExp 객체의 생성자 호출 : RegExp 객체의 생성자를 호출하여 만드는 방식const regex = new RegExp('pattern',flags);런타임에 컴파일 되기 때문에 실행 도중에 바뀔 수 있는 패턴이나, 사용자 입력에 따라서 유동적으로 바뀔 수 있을 때 활용하는 것이 좋음.플래그검색 모드정규 표현식의 옵션이므로 선택적으로 사용이 가능하다.순..

[TS] Typescript #day3

# Call Signatures-> 함수 위에 마우스를 올렸을 때 보게 되는 것 해당 코드의 변수나 함수의 타입을 알려줌함수를 구현하기 전에 타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있음type Add = (a: number, b:number) => number;const add:Add = (a,b) => a+b  # Overloading-> 함수 이름은 같지만 매개변수 또는 반환값의 타입이 다른 함수type Add2 = { (a: number, b: number): number (a: number, b: string): number}const add5: Add2 = (a, b) => { if(typeof b === 'string') return a return ..

[TS] Typescript #day2

# Types of TS part One선택적 타입 (Optional Type): 필수적으로 존재하지 않아도 되는 속성 사용법 : 이름 뒤에 물음표(?)를 추가한다.type Player = { name : number, age?: string}  타입 별칭 (Type Alias)특정 타입에 이름을 부여하여 코드의 가독성을 높이고 재사용성을 향상시킴type Age = number;type Name = string;type Player = { name : Name, age?: Age}const nico : Player = { name : "nico",}const lynn : Player = { name : "lynn",}type User = { id: number; name: string; ..

[TS] Typescript #day1

# Why not JavaScript"안정성, 더 정확히 말해서 타입 안정성"코드에 버그가 줄어듦런타임 에러가 줄어든다개발 생산성 향상 하지만 자바스크립트는?* 문제점 1 * 에러를 보여주지 않으려고 많은 노력을 함.[EX1][1,2,3,4] + false// '1,2,3,4false' 배열도 아닌, boolean도 아닌 string이 콘솔에 찍힌다. 이는 굉장히 이상하다고 볼 수 있는 자바스크립트는 이를 허용함 [EX2]function divide(a,b) { return a/b}divide("xxxxx")// NaN코드를 실행하고 NaN을 return함. 숫자형도 아니며, argument가 1개만 들어갔음에도 에러가 없고 예외 처리도 없음 * 문제점 2 * 최악의 에러는 런타임 에러런타임 에러 : 콘..

[알고리즘] 프로그래머스 - 롤케이크 자르기

문제 설명  제한 사항1 1 입출력 예toppingresult[1, 2, 1, 3, 1, 4, 1, 2]2[1, 2, 3, 1, 4]0 내 코드sol 1.**** 시간 초과 오답 ****function solution(topping) { let answer = 0; const oldToppingSet = new Set(); // 철수 토핑 const youngToppingSet = new Set(); // 동생 토핑 let cutIdx = 1; while (cutIdx > -1 && cutIdx youngToppingSet.size) break; if (oldToppingSet.size === youngToppingSet.size) answer++; cutIdx++; oldTo..

[알고리즘]프로그래머스 - 2018 KAKAO BLIND RECRUITMENT [3차] 압축

문제 설명 제한사항입력으로 영문 대문자로만 이뤄진 문자열 msg가 주어진다. msg의 길이는 1글자 이상, 1000글자 이하이다.주어진 문자열을 압축한 후의 사전 색인 번호를 배열로 출력하라.입출력 예 내가 푼 코드function solution(msg) { var answer = []; const index = []; for (let i = 0; i  QnA1. 알파벳 배열을 손쉽게 짤 수 있는 방법은 없는가? 기존 내 코드 const index = []; for (let i = 0; i  간결한 방법const index = Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 65));시간복잡도는 동일하나, 보기에 좀 더 간결하다.new..