전체 글

[TIL] 2022년 01월-25일 TIL - Ant Disgin Modal, Husky

이번 시간에는 내가 만들 사이트에 조금 더 디자인화된 라이브러리를 사용할 수 있는 Ant Design을 배웠다. 이 분에서는 우리가 버튼을 누를때 뜨는 상태창을 디자인 할 수있는 모달을 사용할 수 있었다. 목표 알림창이 이전보다 예뻐졌어요 => Modal 주소 우편번호를 검색해보자 => React-Daum-Postcode setState에 이런 기능이? => prevState 코드를 깔끔하게! 중복은 사라지게!! => refectoring 규칙을 지키지 않는다면 Github를 푸쉬할 수 없다 => Husky 우리가 간단히 모달을 직접 구현하는 것 보다 라이브러리를 사용해 간편하게 모달을 띄워줄 수 있는 라이브러리들이 존재한다. 그 중에서 Ant Design을 살펴보자. Ant Design으로 적용할 수 ..

[TIL] 2022년 01월 24일 TIL - Event Bubbling

이번시간에 배운 내용은 이벤트 버블링에 대해 배운 시간이었다 이벤트 버블링? 이벤트 버블링은 상대방이 내용을 클릭할때 상세보리고 가는 경우에 문제가 발생하는데 어느 것을 클릭하든 전체를 클릭했을때 상세페이지로 넘어가고 싶을때 문제가 발생한다. onClick 이벤트 시 유저를 불러오기 위해서는 어떤 방식으로 넣어야 할까? 이벤트 버블링은 자식에게 부모로 이벤트를 전달해주는 것 전달이 자식에서 부모로 올라간다. 자식 태그를 클릭해도 onClick이벤트가 발생하는데 그런데 이 클릭이 전파되는 것은 부모태그에도 전달이 된다. 실제로 onClick 함수는 부모한테 바인딩 허더라도 자식이 내용을 클릭하더라도 밖에 있는 onClick이 실행된다. const onClickUser = (event) => { alert(..

[Javascript] Event Loop

Event Loop? Event Loop란 자바스크립트에 기반인 동시성 모델이라고 합니다. 이벤트 루프는 코드 실행과 collecting(이벤트 수집) and processing events(이벤트 처리), queued sub-tasks(큐에 놓인 하위 테스크) 실행을 담당합니다. 이 모델은 C언어와 Java와는 확실히 다른 언어에 해당합니다. JS Engine 자바스크립트 엔진은 Memory Heap(메모리 힙)과 Call Steak(콜 스택)으로 구성되어 있습니다. 자바스크립트는 단일 스레드 프로그래밍(single thread Programming)언어 인데, 이 의미로는 Cell Steak이 하나라는 이야기 입니다. Memory Heap: 메모리 할당이 일어나는 곳 (즉 우리가 프로그렘에 선언한 변..

[Javascript] OOP vs FP란 무엇인가?

OOP Object Oriented Programming의 약자로 class와 object에 기반한 프로그래밍 페러다임(디자인 패턴) 입니다. OOP는 관련된 데이터끼리 묶어 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인 해줍니다. OOP의 장점 OOP는 코드의 재사용률을 높이고 코드를 간결하게 함으로써 유지보수가 쉽다는 장점이 있습니다.(DRY pinciple) 데이터를 안전하게 보존시킬 수 있습니다.(encapsolution(캡슐화)과 abstraction(추출화) 등) 대표적인 언어 C++, Java, Python, Javascript 등 ✨ Features Encapsulation (캡슐화) 캡슐화는 객체의 내부 로직은 감추고 외부에는 상대적으로 안정적..

[Javascript] null과 undefined의 차이

Javascript의 null과 undefined의 차이점 null과 undefined는 둘 다 변수에 값이 없는 것을 나타내지만, 둘의 의미는 꽤 다릅니다. undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체) 라고 말할 수 있습니다. 즉 undefined는 자료형이 없는 상태입니다. 따라서 typeof를 통해 자료형을 확인해보면 null은 object로 undefined는 undefined가 출력되는 것을 확인해볼 수 있습니다. // typeof typeof null; // 'object' // null의 문자열 typeof undefined; // 'undefined' // undefined의 무낮열 null == undefined..

[Javascript] Javascript와 Node.js의 차이

코드깍는 노인 - 유튜브 이글은 코드깍는 노인님의 유튜브 동영상을 보고 분석한 글입니다. 결론 Javascript는 프로그래밍(Programming) 언어 Node.js: Javascript 프로그래밍 기반으로 컴퓨터내에서 구동시켜주는 일종의 프로그램이다. 설명 nodeJs는 chrome의 자바스크립트 엔진인 v8을 이용합니다. 자바 스크립트는 스크립트 언어로써 특정한 환경(브라우저) 에서만 사용가능한데 nodejs를 통해 특정한 환경(브라우저) 없이도 실행을 도와줍니다. Javascript는 크롬(Chrome) 같은 브라우저에서만 사용되는 것이 아닌 브라우저 밖, 즉, 내 컴퓨터 에서 다양한 용도로 확장하기 위해 만들어진 바로 Node.js입니다. node.js를 이용해 Express 같은 라이브러리를..

[TIL] 2022년 01월 21일 TIL - Eslint - Typescript

이번 시간에 배운 과정은 협업시 편리하게 사용할 수 있는 Eslint 에대해 배웠다. 타입스크립트를 엄격하게 관리하는 도구 - strict API로 받는 데이터 타입은 ? - graphql -codepen 협업하는데 규칙은 있어야지! - eslint / prettier 규칙을 지키지 않는 사람은 Push할 권리도 없다! - husky API 응답데이터를 GRAPHQL-CODEPEN 이라 한다. 이것은 직접 입력 없이 명령어 한번에 정의해준다. 기존의 fetchBoard를 gql을 사용해서 불러오는 방식에서 fetchBoard가 담긴 types.ts 파일에 정의해 Import해서 불러올 수 있다. types.ts에서는 graph-ql의 fetchBoard에 types가 정의되어있어 Pick함수로 Query..

[프로그래머스] k 번쨰의 수

문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째 있는 수를 구하려 합니다. 예를 들어 array가 [1,5,2,6,3,7,4],i = 2, j = 5, k = 3 이라면 array의 2번째부터 5번째까지 자르면 [5,2,6,3] 입니다. 1에서 나온 배열을 정렬하면 [2,3,5,6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array [i,j,k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한 사항 array의 길이는 1 이상 100 이하입니다. array의 각 원소는 1 ..

[프로그래머스] 문자열 내림차순으로 정렬하기

문제 설명 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해 주세요. s는 영문 대문자로만 구성되어 이씅며, 대문자는 소문자 보다 작은 것으로 간주합니다. 제한 사항 str의 길이는 1이상인 문자열 입니다. 입출력 예 문제 풀이 function solution(s) { // 문자열을 배열로 쪼개준다. // sort 메서드를 이용해 순차적으로 문자나열 // reverse 메소드로 문자를 반전시켜주고 // join 메소드로 문자열로 바꿔주어서 반환해준다. return s.split('').sort().reverse().join(''); }

변수 타입 (var, let, const)와 스코프 연산자(scope) 개념

var, let, const 의 차이 var은 function scope(함수블록 {}이외 모든 변수는 전역 변수)이고 let과 const는 block scope(모든 코드 블록 -if, for 등에서 선언된 변수는 해당 코드 블록 내에서만 유효)임 var은 재선언 및 재할당이 가능하고, hoisting이 가능하다. var은 초기값이 없으면 자동으로 undefined를 초기값으로 메모리 할당하므로 에러가 발생하지 X let은 한번 선언 한 후로는 재선언이 불가능하다. 다만 재할당은 가능, const는 상수로서 변하지 않는 값이기에 재선언 및 재할당이 불가능하다. let & const는 hoisting이 불가능(Template Dead Zone이 선언과 초기화 사이에 생긴다.) 단, const로 변수선언을..

[Javascript] Javsacript ES6 주요 특징

ES6 주요 특징 class 전격 지원 let, const 문법 화살표 함수(Arrow Function) Modules Promise 비구조화 할당(Destructuring Assignment) 템플릿 리터럴(Template Literals) 매개변수 기본값 설정 1. class 전격지원 기존의 Javascript는 다른 객체지향 언어와는 달리 prototype을 기반으로 class를 묘사했는데, es6 문법에서는 new라는 키워드로 class 생성이 가능하다. class Cat { // constructor constructor(name) { this.name = name; } sayHi() { console.log(`Hi! ${this.name}`); } } const dd = new Cat("DD"..

[Javascript] 자바스크립트: '==' 와 '==='는 다르다!

무엇이 다른가? "=="와 "==="의 차이점은 무엇일까, 예를 들어, 숫자를 숫자 리터럴과 피교하면 '=='는 그것을 허용하지만 '==='는 두 변수의 형식이 동일하지 않는 경우, 값뿐만 아닌 두 변수의 유형도 확인하므로, 허용하지 않는것, 즉 '==='는 'false'으로 반환하고 '=='는 'true'로 반환한다. '==' 와 '===' 의 차이점 자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. 위에서 말했듯, ===는 변수유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다. 다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다. '==' 연산자를 이용해 서로 다른 유..