코딩기록 : 리코딩(LeeCoding)

타 입 스 크 립 트 등 장! 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, ..

💡프로젝트 돌아보면서 생각보다 4주라는 시간이 금방지나 갔다. 처음에는 시간이 정말 많고 여유롭게 진행 할것 같아지만 생각보다 SR부터 치열했던 것 같다. 그렇다고 해서 SR이 힘들었지만 싫은 것은 아니였다. 이유는 많은 아이디어가 오가고 생각들이 정리되고, 기초를 잡은 일은 4주라는 시간에 뼈대🏛를 잡아주기 때문이다. 끝나고 나서는 필요한 스택들을 정리 했다. 생각보다 많이 바뀌었다. 다양한 시도도 좋지만, 완성을 해야하기 때문에 그만큼 변경되고 고민이 되었던 시간이었고, 백엔드는 TypeScript와 TypeORM이 선정되었다.(지금 생각 해보면 조금 더 챌린지 했어도 괜찮았겠다는 생각이 든다! ) 배포때는 역시 애먹었다... 확실히 이번 배포를 계기로 컴퓨터, 네트워크에 대해서 관심을 가지게 되었고..

프로젝트 2주차에 접어들...다! 1. 스택 스택 선정에 대한 이야기가 많이 오갔다. 이번 기회에 "새로운 스택을 사용하는 것" VS "배웠던 내용을 최대한으로 끌어올리는 것"! 백엔드의 선택은 "새로운 스택을 사용하자" 였다. 스택을 선정하기 위해 많은 아이템들이 나왔다. 최근에 가장 관심이 있었던 "NestJS"🐈, "Typescript"🟦 를 해보고 싶었다. 4주라는 시간이 충분해 보였기 때문에 많은 욕심을 내고 싶었지만, 현실적으로 프로젝트를 완성하기 위해서는 타협이 필요했다. 최종적으로 백엔드에서는 "Typescript"와 "TypeORM"을 사용하기로 결정했다! (앞으로 다가올 운명은 모른채....) 2. Typescript 새롭게 배우는 언어! 설렘을 가득안고 공식문서와 강의들을 찾아봤다. ..

분명히 2주 프로젝트가 끝난지 얼마 안됬는데......🤦🏻 코드스테이츠와 함께하는 마지막 프로젝트 4주가 다가왔다. 2주는 정말 정신없이 보낸것 같다. 생각지도 못한 오류들, 처음 보는 오류들 충분히 사람을 쉽게 당황시켰다... 그리고 배포때는 정말 ㅎ... 🙏🏻 짧은 휴식을 끝내고, 4주 프로젝트가 시작이 되었다. 좋은 분들과 이번에도 함께하게 되어서 더욱 기대가 됩니다! 1. SR 2주 프로젝트에도 느꼈지만, SR(SoftwAre Requirement) 은 정말 중요하다!🔥 물론 한번에 모든 것을 확정할 수는 없지만, 최선을 다해서 작성하고, 같이 상의하고 의논하는 것이 중요하다. 생각보다 정말 많은 에너지를 쏟게 된다. 주제 회의부터, 아이템, 기능 등등 필요한 요소들을 정한다. 그리고 나서 Fig..

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

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

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

오늘은 자료구조 그래프에 대해서 기록해보자! 📕그래프(Graph) 개념 그래프는 마치 지하철 노선도와 비슷한 것같다. 하나의 정점(vertex 또는 노드)에서 다른 vertex들과 연결이 되어있다. 정점은 방향성이 없을 수도 있고, 한 방향을 가질 수도 있고, 양방향을 가질 수 있다. 그리고 자기 자신을 가르키는 정점가 존재하기도 한다. 그래서 정점들의 관계를 나타내고 표현이 가능한 자료 구조이다. 트리는 부모와 자식의 관계지만, 그래프는 순환과 비순환으로 나뉜다. 📍그래프(Graph) 메소드 이번 코드스테이츠 스프린트에서 구현한 메소드는 총 6가지 이다. addNode(node) - 그래프에 노드를 추가합니다. addEdge(fromNode, toNode) - fromNode와 toNode사이의 간선을..

자료구조 기록의 마지막! 트리에 대해서 기록해보자! 📕트리(Tree) 개념 트리는 위의 바오밥 나무를 뒤집은 구조라고 생각하면 이해하기가 쉽다. 구조가 나무와 닮아 있기 때문에 Tree라고 이름을 부텼다. 하나의 뿌리에서 가지가 사방으로 나오는 모습을 하고 있다. 트리 구조는 노드(또는 Vertex라고도 한다.)가 부모 자식의 관계를 가지는 구조이다. 제일 상단에 있는 노드를 root라고 하고, 더이상 자식의 노드가 없는 노드는 나뭇잎과 같기 때문에 leaf라고 합니다. 그리고 같은 부모 노드에 붙어있는 자식노드를 묶어서 부를 때는 sibling node 형제 노드라고 합니다. 🌳트리의 종류 트리에는 종류들이 많이 있고, 또 형태에 따라서 나뉘기도 한다. 완전이진트리, 정 이진트리, 포화이진트리, 그리고..

자료구조 4번째 해시테이블을 기록해보자! 📕해시테이블(Hash Table)의 개념 해시 테이블(Hash Table)은 입력받은 키값을 해시함수에 돌려서 반환받은 해쉬코드는 배열의 인덱스로 데이터에 접근하는 자료구조 입니다. 사진을 보면 이해하기가 더 쉽다. 주어지는 key는 해시함수에 들어가게 된다. 해시 함수는 받은 키를 해쉬 코드로 바꾸어주는 역할을 한다. 그렇게 키는 해시 함수를 지나서 해시 코드가 된다. 해시 코드는 인덱스 처럼 저장소(bucket)에서 값을 찾고 접근을 할 수 있게 된다. 이때 접근, 삭제, 검색 등이 가능해진다. 👨🏻‍💻해시테이블 활용 예시 핸드폰 연락처 (이름 검색을 하면 -> 해당번호가 나온다) DNS 확인작업 (웹사이트 주소를 입력하면, 컴퓨터는 그 주소를 IP주소로 변환..