개인코딩개발공장

Introduction사실 개발하면서 많이들 배우는 웹소켓인데 난 남들과는 다르게 배워왔고 내가 만들려고 목표했던 서비스는 웹소켓 기능이 필요가 없었다. 근데 이번에 개인 프로젝트를 하면서 기능개발하는데 필요한것 같아서 배우게됨.쉽다고해야할지 어렵다고 해야할지.. 암튼 배워두면 좋은 내용임.   # 우리가 흔히 아는 api통신우리가 프론트랑 백을 개발했다고 하고 프론트서버에서 클라이언트가 받은 웹사이트가 렌더링되고 그 클라이언트는 백단으로 각각 기능마다 api요청을 보낸다. 해당 api요청을 받으면 백단 서버는 그에 맞는 응답을 해준다.1요청 1응답. 이게 바로 우리가 아는 기본적인 api요청 플로우? 원칙? 같은거다.  # 만약 이런기능을 개발해보려고 한다면?프론트단 백단 전부 구현을 해본사람이라면 알..

Introductionasync / await 함수를 araboza# 일반함수와 다른 점const fuc = () => {};const asyncFuc = async () => {};console.log(fuc);console.log("일반함수는 ", fuc(), "를 리턴해");console.log(asyncFuc);console.log("async함수는 ", asyncFuc(), "를 리턴해");이 코드를 실행해보자.일반함수 fuc이랑 asyncFuc이라는 async함수를 만들어줬고 콘솔로 각각 함수객체와 호출후 리턴되는 값을 출력해봤다.일반함수는 함수객체 출력값이 function으로 나오고 리턴값은 없으니까 undefined를 출력한다.하지만 async함수는 함수객체가 AsyncFunction으로 ..

Introduction사실 나도 jsdeepdive를 뒷쪽은 못읽었다. 지금 1년전에 600페이지까지 10회독한게 마지막 ㅠ암튼 그래서 아직 개념은 좀 부족하지만, promise로 동기 비동기 처리는 자주해봤고 얕게는 알기때문에 단순히 동기 비동기처리하는 방법을 포스팅하려고한다.ㅅㅂ급한불이 너무많아서 딥다이브 언제 다시 공부할수 있을지 ㅠ # 심심해서 뜯어봄console.log(Promise);nodejs에서 Promise 예약어를 콘솔로 출력해보면 Function이라고 나옴좀 더 자세히 보기 위해서 브라우저 개발자도구에서 dir해보면이렇게 Promise생성자함수객체를 대략적으로나마 볼 수 있는데, 파라미터로 받는 resolve와 reject도 들어있고프로토타입에 밥먹듯 쓰는 then, catch, fi..

Introduction예전에 비동기처리를 처음 배울때 너무 이해가안됐다.단순하게 이 함수 실행하고 완료되면 다음 함수 실행되게 하고싶은 내맘을 몰라주는 js였었음.구글링을 해도 큐 스택이니 뭐니 저러니 자라니 고라니...지금이야 밥먹듯이 휘갈겨대는 코드지만 나같은 코찔이들을 위해 동기 비동기처리를 이해할 수 있게 최대한 쉽게 포스팅을 해보겠음.환경은 nodejs임# 1setTimeout함수는 js에서 기본적으로 제공해주는 전역함수다.console.log(global)이걸 쳐보면(브라우저 js에서는 window치샘)전역함수로 저렇게있다. api요청할떄 기본으로 들어있는 fetch도 저기 있어서 기본적으로 js에서 호출할수 있는거임 그럼 이 함수는 어떻게 쓸까?setTimeout(여기에 함수가 들어감!, 여..

# 함수에도 각각 요소에 타입을 지정할 수 있다. # 파라미터에 타입 지정하기function fuc(para: number) {}fuc("dori");이렇게 왜 파라미터는 숫자타입인데 fuc('dori')로 문자타입을 인수로 넣어 호출하려 하느냐? 하면서 뭐라고함  # 리턴값에 타입 지정하기function fuc(para: number): number { return "muzzi";}함수 옆에다가 또 적어주면 되는데리턴값이 number이어야 하는데 string 인 'muzzi'가 나왔다고 에러를 띄워준다 # 리턴값 안정해주면?function fuc(para: number) { return "muzzi";}에러 안뜬다.이것도 any타입으로 나오는듯.   # 리턴값 '없어야 하는' 함수function f..

# union type이란?타입을 여러개 지정할 수 있는 방법이다.let test: string | number = "jacob";test = 1;test라는 변수는 string타입 혹은 number타입이다.처음에 jacob이라는 스트링을 할당했다가 숫자 1을 재할당하면 두 타입 되니까 오류 안뜬다.저렇게 or기호로 타입을 or로 써줄 수 있음. and는 당연히 없음.  # 어레이에 union type지정하기let arr: string[] = ["a", "b", "c"];이렇게 스트링만 들어갈 수 있는 어레이에다가 숫자도 들어갈 수 있게 하려면,let arr: string[] = ["a", "b", "c", 1];에러가 뜬다.이때 union type을 사용해보자. let arr: number | stri..

# primitive types란?이전 ts포스팅에서 단순하게 string타입으로 예시를 들었다.이런걸 원시타입들이라고 하는데 걍 식별자 하나를 가르킨다.사실 js배울때 primitive값이랑 object값이랑 따로배웠는데 그냥 여긴 오브젝트에 들어있는 키에대한 값도원시값이라고 하나보다. (코딩애플이 기본강의라 구분 안해놓은걸수도 있음..)  # string 타입let testName: string = "kim";스트링타입 # number타입let testAge: number = 33; # boolean 타입let testBollean: boolean = true; # null 타입let testnull: null = null;isNull안해도될듯? # undefined타입let testundefined..

# 설치타스는 노드js가 필요하다.npm install -g typescript이걸로 타스를 설치하자. # .ts 파일 만들기.ts로 만드는 파일을 만들자이렇게 index.ts라는 파일을 만들고 타스코드를 입력하면 된다. # tsconfig.json이라는 파일도 만들자{ "compilerOptions": { "target": "es5", "module": "commonjs" }}이내용 복붙해놓자  # 실시간 컴파일tsc -w이거 커맨드에 치면 index.js라는 파일이 생긴다.이게 자동컴파일 해준다는거다. 그러면 .ts파일을 저장할때마다 컴파일이 자동으로되면서이렇게 커맨드에 에러있는지 없는지 체크해준다.  설치는 아주 단순하고 쉽다.. 리액트나 vue에 적용하는건 따로 해봐야할듯.  # 기..

# react 라우터 설치npm install react-router-dom@6  index.js에서import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );저렇게 추가해주자.   app.js에서import { Routes, Route, Link } from 'react-router-dom';이렇게 Route라이브러리 임포트 해주고 detail} /> cart} /> 이렇게 Route태그에다가 path와 element를 넣어주면 element에 있는 태그가 해당..

# 데이터를 모듈화해서 react에서 쓰면 편하다.가뜩이나 react는 다 짬뽕되어있어서 복잡할텐데.. 이렇게쓰라고한다.사실 이건 뭐 js기초문법인데 react에서 적용할겸 써본다.  # 데이터를 따로 js파일을 만들어서 넣어줬다.파일 경로는 이렇게 생겼다.products.js를 app.js경로와 같은위치로 만들어줬다.여기 products.js에다가 어레이 자료로 상품정보를 넣어줄거다.//products.jsconst products = [ { id: 0, title: 'White and Black', content: 'Born in France', price: 120000, }, { id: 1, title: 'Red Knit', content: 'Born in..