chez Manon

웹 브라우저? 🔻 웹 브라우저? : 서버에서 받아온 HTML, CSS, JS를 실행시켜주는 프로그램이다. 브라우저는 자바스크립트를 실행하는 과정이 있다. 브라우저는 C++이라는 언어로 코드가 짜져있는데, 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어서 돌린다. stack은 다 집어넣고 맨 윗줄부터 하나하나 실행시키는 공간이다. 하지만, 서버로의 ajax 요청, eventlistener, setTImeout 이런 코드들은 코드를 처리하기까지 시간이 오래걸린다. 그래서 이런코드들은 stack에 쌓아서 실행하지않고, Queue라는 곳에 집어넣고 기다렸다가 stack이 비어있을 때 차례로 Queue에서 stack으로 집어넣어서 실행해준다. 따라서, stack을 바쁘게..

getter / setter : 데이터의 무결성을 보존하기 위해 쓰는 키워드이다. 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다룬다. (immutable) //내년나이를 알고싶으면? age를 직접사용하지않고, nextAge라는 함수를 따로 만들어서 let 사람 = { student: true, age: 14, nextAge() { return this.age + 1; }, }; 🤷🏻‍♀️ 왜 굳이 따로 꺼내서 사용함? - object안이 복잡할수록 함수 만들어놓는게 데이터 꺼내기 쉽다. - 내부에 있는 age 변수를 건드리지 않아서 실수방지하므로 좀 더 안전해진다. 🔻 함수로 object 데이터 수정 object안 데이터를 수정하고 싶을 때 object.key =..

Rest parameter rest parameter는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해준다. function Plus(...a: number[]) { console.log(a); } Plus(1, 2, 3, 4, 5); Destructuring 1. parameter에 object처럼 타입지정. 2. type 키워드로 따로 만들어서 지정. // Object let person = { student: true, age: 20 }; // 파라미터에 object처럼 타입지정 function 함수({ student, age }: { student: boolean; age: number }) { console.log(student, age); } 함수({ student: true, ..

HTML 변경 🔻 null이 들어오는 경우 체크해주는 옵션 tsconfig.json 파일에서 "strickNullChecks" 옵션을 true로 지정한다. 혹은 그냥 "strict" : true 를 하면 strickNullChecks 자동으로 true로 켜진다. 🔻 selector로 html을 찾으면 못찾을 경우가 null값이 되어서 변수가 union type이다. ( Element | null ) let 제목 = document.querySelector("#title"); 제목.innerHTML = 'hi' //error 해결책 1) narrowing if (제목 != null) { 제목.innerHTML = "hi"; } 해결책2 ) instanceof 사용하는 narrowing if (제목 inst..

Type Aliases - 타입을 여러가지 써야할 때 길어서 보기싫거나, 나중에 또 사용하고싶을 때 변수에 담아서 사용한다. ( 타입 키워드는 재정의가 불가능하다. 보통 대문자로 시작하거나 뒤에 type이라고 붙여서 작명해준다. ) - Alias는 새로운 type 변수를 생성하는 것이 아니라, 정의한 타입에대해 쓰기쉽게 새로운 별칭을 부여하는 것과 같다. 1. 변수에 저장 type 타입변수명 = 타입종류 type 저장 = string | number | undefined; let 변수1 : 저장 = 1; 2. Object // type 키워드 쓰지않을 때 코드 let 학생: { name: string, age: number } = { name: "kim", age: 23, }; type 사람 = { na..

🔗 Prototype 정리 https://manon-kim.tistory.com/129 [JS] 객체지향 (Constructor, Prototype) Prototype ? : Javascript는 흔히 프로토타입 기반언어(prototype-based language)라 불린다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체(prototype object)를 가진다... manon-kim.tistory.com ES5 - Object.create( ) Object.create() : ES5 때 나온 상속이용하여 쉽게 object 만드는 방법 Object.create(부모object) : 소괄호안에 적은 부모 object가 prototype이 된다. let 부모 = { name : ..

Prototype ? : Javascript는 흔히 프로토타입 기반언어(prototype-based language)라 불린다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체(prototype object)를 가진다. 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수있고 그 상위 프로토타입도 마찬가지이다. 이를 프로토타입 체인 (prototype chain)이라 부르며, 한 객체에 정의된 메소드와 속성을 다른 객체에서 사용할 수 있도록하는 근간이다. Javascript의 자료형 1. Primitive data type : 자료 자체가 변수에 저장되는 자료들 (문자, 숫자 자료형) let name = 'kim'; let age = 30; 2. Refer..

Wecode bootcamp의 마지막 과정인 인턴쉽을 2021.11.15 ~ 2021.12.09 4주간 진행하였다. 프로젝트 담당업무 : 웹페이지의 로그인, 회원가입 페이지를 React, scss를 사용하여 새로 구축하였다. Signup page 기존 : tabler react 라이브러리를 사용하여 기본적인 UI만 존재. (기능x) (backend는 Strapi + AWS EC 서버) 개선 수정이 힘든 library로 기존 form이 구성되어있어서 향후에도 쉽게 수정할 수 있도록, react scss로 새로운 UI 구축. 기존 login page에서 formik를 사용하여서, signup page에서도 동일한 formik library를 활용하여 form을 구성. yup을 사용하여 유효성검사. 기존 회원..

https://github.com/manonkim/fullstack2-2nd-ADLIP-frontend GitHub - manonkim/fullstack2-2nd-ADLIP-frontend Contribute to manonkim/fullstack2-2nd-ADLIP-frontend development by creating an account on GitHub. github.com WECODE 2차 Team project Activity platform 'FRIP' site를 모티브로하여 2주간(10.25 ~ 11.05) 'Adlip' 사이트를 제작. Front-end 5명 / Back-end 2명 프로젝트 담당업무 : 사이트의 상품페이지 프론트엔드 담당 React hooks, styled compon..

문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다.제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 입출력 예 sreturn "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" function solution(s) { let arr = s.split(' '); return `${Math.min(...arr)} ${Math.max(...arr)}` }