분류 전체보기

    [React] Javascript 응용

    [React] Javascript 응용

    이 블로그는 유데미 "한입 크기로 잘라먹는 리액트" 강의를 듣고 복습하고자 작성되었습니다! 목차 1. Truthy & Falsy 2. 삼항 연산자 3. 단락회로 평가 4. 비구조화 할당 5. spread 연산자 6. 동기 & 비동기 7. Promise로 콜백지옥 탈출 8. async/await 9. API 호출 Truthy와 Falsy JS는 true나 false가 아니어도 참 혹은 거짓으로 인지하는 값들이 있습니다. 그중 true 그자체가 아닌데 참으로 인식하는 값을 Truthy, false가 아닌데 거짓으로 인식하는 값을 Falsy라고 합니다. 예를 들자면, "asdf"나 42 같은 값은 true로 인식합니다. 또 []나 {}처럼 빈 배열과 객체도 true로 인식합니다. 반면, null, undef..

    [HTML/CSS] 100일 코딩 챌린지 - 실습(9, 10일차)

    [HTML/CSS] 100일 코딩 챌린지 - 실습(9, 10일차)

    9,10일차는 과제였습니다. 화면을 보여주고 html과 css로 똑같이 구현하는 것입니다. 혼자서 만든 화면입니다,,하하하하하 맨왼쪽에 줄 만드는 것만 찾아봤더니, border-left라고 합니다,, .yellow { color: rgb(252, 228, 206); border-left: 5px solid rgb(247, 209, 85); } 이렇게 추가해줬습니다. 그리고 노란 부분에만 border가 5px 추가되면 오른쪽으로 5px 밀리는 게 되어버려서, 흰 부분에도 투명한 border-left를 추가해 5px 오른쪽으로 밀어줍니다. li { margin: 14px 0; padding-left: 10px; border-left: 5px solid transparent; } 또, 커서가 올라갔을 때 커서..

    [Typescript] 타입스크립트 기초 - 함수

    [Typescript] 타입스크립트 기초 - 함수

    타입스크립트는 함수 또한 JS와 유사하지만, Call Signature, 오버로딩(overloading), 다형성(polymorphism)등의 특징이 있습니다. Call Signature 함수를 작성한 후 해당 코드 위에 커서를 올리면 해당 함수의 타입이 뜨는데, 이를 Call Signature라고 합니다. Call Signature는 해당 함수의 타입을 알려줌으로써 우리가 이 함수를 어떻게 호출해야 하는지, 어떻게 반환되는지 알려줍니다. 이를 응용해 직접 Call Signature를 만들 수도 있습니다. (참고로 TS에서 만든 Call Signature는 JS로 컴파일되지 않습니다.) 아래가 그 예시입니다. type Add = (a:number,b:number) => number; const add: ..

    [HTML/CSS] 100일 코딩 챌린지 - html 레이아웃 만들기(8일차)

    [HTML/CSS] 100일 코딩 챌린지 - html 레이아웃 만들기(8일차)

    요즘 유데미에서 100일 코딩 챌린지라는 걸 듣고있습니다...ㅎㅎ 매일 듣고 실습한 내용을 올리려고 합니다. 앞부분은 기초적인 내용이 대부분이라, 강의는 거의 넘기고 퀴즈, 실습만 푸는 식으로 진행했습니다. 막 넘기면서 강의를 듣던 중, 이 화면을 따라서 만들어보라는 챌린지가 있었습니다. 제가 따라 만들어본 화면입니다,,하하 저는 어떻게든 생김새만 따라하자는 생각에 css만 건드리기 바빴는데, 맥스쌤은 html에 main과 footer 태그부터 추가하시는 걸 보고 많은 생각이 들었습니다,, Max' Challenge for Wednesday, August 4th Learn about the basics of web development - specifically dive into HTML & CSS. E..

    [Typescript] 타입스크립트 기초 - 타입

    타입스크립트는 타입에 너무나도 관대한 JS의 단점을 보완하고자 MS에서 만든 언어입니다. 전체적으로 JS와 비슷하나, 언어 이름이 'Type'script인 만큼 타입이 맞지 않을 경우 에러메세지를 띄워주어 실수를 줄여준다는 특징이 있습니다. 아직 많이 써보진 않았지만 저도 언어를 사용해보면서, 개발자 경험이 향상되는 것을 느낄 수 있어 좋았습니다! 타입스크립트의 타입배열은 자료형[], 숫자는 number, 문자열은 string, 논리타입은 boolean입니다. 예를 들어 숫자배열일 경우 number[] 타입이 됩니다. 타입은 :과 타입명을 변수 뒤에 붙여 표기합니다.const myName: string = "mingbee"; OptionalTS는 옵셔널 타입이 존재하는데, 해당 속성을 정의하지 않아도 되..

    [React] Javascript 기본

    [React] Javascript 기본

    본 블로그는 Udemy의 한입 크기로 잘라 먹는 리액트 강의를 듣고 개인적으로 복습하고자 작성되었습니다! 배운 내용을 쓰기에 앞서 강의에 대해 살짝 설명하자면, 하나의 리액트 프로젝트를 제작부터 배포까지 진행하면서, 리액트의 전반적인 학습과 더불어 결과물까지 남길 수 있습니다. 감정 일기장 감정으로 만든 일기장을 감성에 싸서 드셔보세요. mingbee-react-project.firebaseapp.com 제 결과물입니다,, 강의를 완주하시면 이런 사이트를 만들 수 있습니다. 강의를 그대로 따라가서 제 사이트 자체에 특별한 건 없지만, 이런 번듯한 사이트를 만들 수 있어 저에겐 무척 의미있었습니다. 저처럼 html/CSS 조금 알고 JS를 찍먹만 해본 사람들에게 딱 맞는 강의입니다! 그럼 복습 시작~ 목..

    [WebSocket]Express 서버에 WS 합치기, 프론트와 데이터 공유하기

    WS는 WebSocket을 사용하기 위한 npm 패키지로, 노드에서 핵심적이다!! 그런데 WebSocket은 http와 다른 프로토콜이므로, 1. npm i ws 2. express를 이용해 http 서버를 만든 후 해당 서버를 WebSocket 서버에 넣어주면 끝~~ const server = http.createServer(app); const wss = new WebSocket.Server({ server }); server.listen(app.get('port'), () => { console.log(app.get('port'), '번 포트에서 대기 중'); }); ws가 http와 다른 점이 있다면 아무래도 서버로부터 정보를 얻기 위해 매번 request를 넣을 필요가 없다는 것이다. 그러므로 ..

    [WebSocket] Http vs WebSocket

    [WebSocket] Http vs WebSocket

    http와 WebSocket은 둘다 프로토콜인데, 작동하는 방식이 다르다. 프로토콜이란 일종의 컴퓨터끼리 원활하게 데이터를 주고받기 위해 만들어진 통신 규약이다. http와 WebSocket은 프로토콜이므로 브라우저와 백엔드 사이에서만 동작하지 않고, 서버와 서버 사이에서도 동작한다. 먼저 http는 모든 서버에서 작동하는 방식으로, 클라이언트가 request를 보내면 서버로부터 response를 받는 구조이다. http의 특성상 서버로부터 한 번 reponse를 받으면 서버는 클라이언트가 누군지 잊어버리게 되는데, 이 특성을 stateless라고 한다. 즉 서버는 클라이언트로부터 request를 받아야 response를 줄 수 있는 것이다. 반면, WebSocket은 한 번 request와 accept..