코딩기록 : 리코딩(LeeCoding)

1. 모듈 개발을 하다보면 애플리케이션의 크기가 커지고 코드도 많이 길어진다. 그리고 여러군데에서 사용되는 코드들도 있을 것이다. 이때 코드를 분리해서 용도별로 나누고 분리해야하는 때가 온다. 그 때 모듈화를 통해서 특정한 기능이나 변수를 가지고 있는 파일로 분리를 한다. 어떻게 생각하면 건물을 지을 때 한장의 벽돌과 같다. 2. ES module - ES6에서 도입이 된 모듈 시스템이다. - export와 import를 사용해 분리된 자바스크립트 파일(모듈)을 내보내고, 가져올 수 있다. 3. export / import 1. Named Export 많은 함수나, 변수를 import 또는 export를 하고 싶을 때 사용한다. 파일 또는 모듈이 원하는 만큼 name export를 가질 수 있다. // ..

1. bcrpyt란? A library to help you hash passwords (출처 : https://www.npmjs.com/package/bcrypt) bcrpyt npm 사이트에 한줄로 알잘딱깔쎈으로 정리 되어있다. 말 그대로 암호 해싱을 도와주는 라이브러리이다. 암호를 해싱하는 것은 중요하다. 내가 만약 회원가입 로직을 작성하는 파트를 담당했다. 유저가 암호를 입력하고 회원가입을 눌렀을 때, 데이터베이스에 저장이된다. 이때 데이터 베이스에 유저의 암호가 태초의 모습, 날것 그대로 들어가게 된다. 악의적인 누군가에 데이터베이스를 털리게 되면 개인 정보와 함께 비밀번호도 같이 털리고, 비밀번호는 보통... 대부분 사이트에서.. 비슷...비슷 하니까... 난리난리.. 나도 상사한테 털리고....

타 입 스 크 립 트 등 장! 0. INTRO 타입스크립트를 사용하게 된 계기는 바로 4주 프로젝트를 진행하기 위해서다. 이번에 백엔드에서 타입스크립트를 새로운 스택으로 추가해서 사용하기로 했다. 팀원과는 각자 개인적으로 공부할 시간이 주어졌다. 그래서 나는 노마드코더를 프로젝트 시작전에 들었고, 인프런강좌를 프로젝트 끝나고 수강했다. 1. 첫 만남 타입스크립트를 처음 쓸 때는 조금 불편 했다. 하나하나 타입을 지정해야 했기 때문이다. let isGood: boolean = true; let money: number = 10,000; let city: string = 'New York'; let numList1: number[] = [1, 2, 3]; let numList2: Array = [4, 5, ..

오늘은 클라이언트와 서버에 대해서 기록해보자! 한번쯤 영화에서 본적이 있는 듯한 장소.... 맨날 여기에 '톰 크루즈'나 그 일원중에 되게 프레피하고 너드한 사람이 들어와서 선을 꼽고 해킹해서, cctv를 조작하거나 데이터를 빼내는 모습을 기억하시나요... 이곳이 서버실입니다. 만약에 우리가 앱이나, 웹사이트를 만들었으면 그 데이터는 어디에 저장을 하고, 어디에 있으며, 어떻게 요청하는지에 대해서 기록해 보고자 합니다! 🏛Web Architecture 클라이언트(Client) : 클라이언트는 서버에게 필요한 것을 요청하는 주체이다. 사람들이 흔히 사용하고 있는 노트북이나 핸드폰 또는 안에서 서버와 연결되어서 작동하는 브라우저, 앱 등과 같이 유저가 보고 직접 사용하는 것들이 다 클라이언트이다. 데이터베이..

자바스크립트 비동기 처리를 위해서 콜백을 사용했었다. 하지만 콜백은 콜백지옥에 빠질 수 있고, 가독성이 떨어지고 에러가 발생하게 되면 골치 아파지기 때문에, 비동기 적으로 처리하는것에 어느정도 무리가 있다. 그래서 ES6에서는 비동기 처리를 위한 Promise가 두두등장! 그리고 ES7에서는 async / await이 두두등장! 오늘은 이렇게 두가지에 대해서 기록해보자! 1. 프로미스(Promise) 프로미스는 상태를 가진다. pending(대기) : 비동기 처리가 아직 수행되지 않은 상태를 말한다. 아직까지 resolve나 reject가 실행되지 않은 상태 fulfilled(성공) : 비동기 처리가 수행이 되었고, resolve가 실행된 상태이다. rejected(실패) : 비동기 처리가 수행이 되었지..

오늘을 동기와 비동기에 대해서 기록해보자! 동기와 비동기에 대해서 설명할 때 가장좋은 예시가 바로 "커피숍"이다. 커피숍에서 줄을 서고 있는 상황을 생각해봅시다(심지어 직원도 1명). 맨 앞에 있는 손님이 커피를 주문하고, 그 커피를 받을 때 까지 계속기다려야 한다면? 즉, "커피를 주문하기 위해서는 한줄로 서서 한명씩만 주문이 가능하다는 것"입니다. 이러한 처리 순서를 동기 방식이라고 부릅니다. 이 때 blocking이라고 부릅니다. 동기적인 작업에 의해서 이후의 작업이 "막히게 된 것"입니다. 하지만 반대로 옆에 있는 커피숍은 주문을 받고 진동벨을 고객에게 전달하는 시스템을 가지고 있습니다. 심지어 직원도 2명이어서 한명은 주문을 받고 한명은 커피를 내리면서 진동벨로 손님에게 알려주고 있습니다. 각자..

자바스크립트는 OOP를 생각하고 만들지 않았다. 그렇기 때문에 객체지향 언어가 아닌 프로토타입 기반 언어이다. 그래서 개발자들은 prototype를 활용해서 OOP적으로 구현해냈다. (진짜 감사하게도 지금은 자바스크립트에서 OOP를 지원하고 있다.🙇🏻) 채신기술 class를 코드로 작성해보고 알아보자! class Test { // 클래스를 만들 때에는 첫글자는 대문자가 국룰! constructor() { } }; let test1 = new Test(); test1; // 첨부된 사진 참조 이렇게 Test라는 클래스를 만들고, test1이라는 인스턴스를 만들고 test1을 확인해 보았다. ⬇️⬇️⬇️ 뭐가 많다.... 오늘은 그중에서 prototype, constructor, __proto__를 기록해보..

오늘 호그와트에 등록했다. 질문받는다. OOP에 대해서 알아보자 OOP(Object Oriented Programming)은 한국말로는 객체 지향 프로그래밍을 말한다. 하나의 기준이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 예를 들어 호그와트에 새로운 학생이 입학을 했고, 정보를 입력하는 것을 구현 해본다면 아래의 코드처럼 작성이 될 것 같다. let name = 'codingLee'; let house = 'Gryffindor'; let grade = 'Freshman'; // let student = { name = "codingLee", house = "Gryffindor", grade = "Freshman" } 학교 학생..