Woowa Techcourse/Missions23 Frontend를 위한, Socket과 WebSocket 들어가기 Web Socket.. 많이 들어봤지만, 들을 때마다 친구들의 곡소리가 끊이지 않던 친구였다. 그래서인지 괜히 '웹소켓'이라는 말을 들으면 지레 겁부터 먹었었다. 한 번 공부해보고 싶은 주제였지만, 지금껏 딱히 사용할 기회가 없었기도 해서(변명변명).. 웹소켓은 점점 더 멀어져갔다. 그런데! 이번에 레벨3 팀 프로젝트 중, 피터가 제안한 '태그 기반의 게임 팀 매칭 서비스'에서 채팅을 메인으로 다룬다고 했다. 서비스 자체도 재미있을 것 같았고, 웹소켓에 대한 알 수 없는 도전정신이 나를 지배해 이 팀에 지원하게 되었다. 지원한 결과, 감사하게도 뽑기 신께서 도움을 주셔서 Babble 팀에 합류할 수 있게 되었다. 후헹헹ㅎㅎ 이제 Babble 프론트엔드 팀이 채팅을 구현하면서 WebSocket에 .. 2021. 8. 26. Javascript This This란 무엇일까!? 1. This가 나온 이유 객체는 State를 나타내는 property와 behavior를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 그니까 현재 나의 '상태'와 그 '상태'를 바꿔줄 수 있는 '행동'을 함께 가지고 있다고 이해하면 된다. 동작, 즉 behavior를 나타내는 메서드는 자신이 속한 객체의 Status, 즉 property를 참조하고 변경해줄 수 있어야 한다. '행동'이 '상태'를 변경할 수 있어야 한다는 거다! 보통 객체 리터럴 방식으로 생성한 객체의 경우, 내부 메서드에서 자신이 속한 객체를 가리키는 변수를 재귀적으로 사용할 수 있다. 아래와 같이 circle을 circle 내부에서 사용할 수 있다는 것이다. const circle = {.. 2021. 4. 27. Create React App(CRA) 없이 React 시작하기 보통 처음 React App을 시작하려고 하면, Create React App(CRA)을 많이 사용한다. 귀찮은 설정들 없이도 CRA를 사용하면 React에만 집중해 개발할 수 있기 때문이다. 하지만 CRA 없이도 React를 사용해 Application을 충분히 잘 만들 수 있다. 약간의 노력이 더 들어가면 ^^.. 되니깐.. 어차피 사용할 꺼 내부가 어떻게 돌아가고 있는지 한번 확인하고싶을 때 이렇게 만들어 보는 것도 좋은 것 같다. 그리고 CRA는 우리가 사용하지 않는 모듈들도 많이 담고 있기 때문에, 앱 자체가 무거워진다는 단점이 있다. 그래서 Snowpack 같은 가벼운 빌드 도구가 나오기도 했지만.. 어쨌든! 우리는 이런 도구들 없이 밑바닥부터 React를 시작해보자! 서론은 여기까지! 아래부.. 2021. 4. 16. Javascript 콜백 함수(Callback Function) [ 용어 정리 ] 동기(Synchronous) - real-time communication where each party receives messages instantly. - 요청과 그 응답이 즉시 이루어지는 것 - 뭔가 헷갈리는 말인 것 같은데, 어떤 A(요청) - A(응답) - B(요청) - B(응답) - C(요청) - C(응답) 이렇게 요청과 응답이 일렬로 이루어지고 이루어짐과 동시에 즉시 다음 요청이 실행되고 .. 이렇게 이해하면 조금 덜 헷갈리는 것 같다. 비동기(Asynchronous) - two or more objects or events not existing or happening at the same time. - 2개 이상의 요청과 그 응답이 같은 시간에 이루어질 수 있는 것 -.. 2021. 4. 12. Throttle, Debounce Event Handler가 많은 연산을 수행할 때, 제약을 걸어 제어할 수 있는 수준으로 Event를 발생시킬 수 있다. DOM API 중, onmousemove, onmouseover, onscroll 등 혹은 input event의 change, keyup 등을 사용할 때에 자칫하면 정말 많은 이벤트가 호출이 될 수 있다. 이런 이벤트들을 많이 사용하다보면 웹 사이트의 성능이 떨어질 수밖에 없다. 그렇기 때문에 우리는 Throttle과 Debounce를 사용한다. Throttle은 언제 쓸까? When we want to limit the amount a function is invoked. 로또라면, 공이 매 5초마다 나와야 할 때, 술집에 가서 술을 마시는데 45분마다 1잔씩 시켜야 하는 룰이 있.. 2021. 4. 1. [GIT] 자주쓰는 GIT 명령어 정리 내가 자주 쓰는 GIT 명령어들을 소소하게 정리해놓는 공간! 누적해서 적어놓으려고 한다. 후후 Commit 순서 변경, 합치기 등 commit의 순서가 잘못되었거나, 잘못된 커밋을 했을 때, 수작업으로 변경할 수 있다. git rebase -i HEAD~개수 rebase를 잘못했을 때 stop할 수 있다. git rebase --abort rebase가 잘 되고 있다면 continue 해준다. git rebase --continue cherry-pick 다른 브랜치에 있는 커밋을 선택적으로 내 브랜치에 적용시킬 때 사용하는 명령어 git cherry-pick 처럼 사용한다. cherry-pick하려는 commit과 내 branch 사이에 conflict가 났을 때 -continue 나 -abort 를 사.. 2021. 3. 24. Javascript 네임스페이스 패턴(Namespace Pattern) 네임 스페이스 패턴이란? "전역을 피하는 코딩 기법!" 어플리케이션이나 라이브러리를 위해 전역 유효 범위에 많은 변수, 함수, 객체 등으로 어지럽히지 않도록 하기 위해 전역 객체를 하나만 만들고, 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 한다. 스크립트가 실행되는 환경을 항상 일정하게 만들어 관리하기 쉽게 만드는 일이다. 단순히 기능을 한데 묶기 위해 사용하는 객체를 네임스페이스라고 한다. // 생성자 함수 2개 function a() {} function b() {} // 변수 1개 var variable = 0; // 객체 1개 var module_object = {}; 이렇게 엄청 많은 함수와 변수등을 전역으로 만들면 안티패턴이 된다. 그렇기 때문에 아래와 같이 바꿔주는 것이 .. 2021. 3. 10. Javascript 모듈(Module) 모듈이란? 개발하는 웹의 크기가 커지면 언젠가 파일을 여러개로 분리해야하는데, 이때 분리된 파일 각각을 "Module"이라고 부른다. 모듈에 export, import를 적용하면 다른 모듈을 불러와 함수를 호출할 수 있게 해준다. // hi.js export function sayHi(user) { alert(`hello, ${user}!`) } // main.js import { sayHi } from "./hi.js" alert(sayHi('John')) //alert가 뜸 이렇게 모듈을 사용하려면, HTML에서 Script를 불러올 때에 type="module"와 일반 스크립트의 다른 점 항상 지연 실행된다. 모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML이 다 만.. 2021. 3. 10. Javascript IIFE(Immediately Invoked Function Expression) 함수 선언식과 표현식 (맛보기) 즉시 실행 함수 표현에 대해 알아보려면 먼저 함수 선언식과 표현식에 대해 알아야한다. 아래와 같이 쓰는 것을 함수 선언식이라고 한다. 함수 선언식은 호이스팅에 영향을 받는다. function 함수이름() { ...statements } 아래와 같이 표현한 것을 함수 표현식이라고 한다. 함수 표현식은 호이스팅에 영향을 받지 않는다. var 함수이름 = function() { ...statements } IIFE(Immediately Invoked Function Expression) : 즉시 실행 함수 표현 iffy는 말 그대로 정의되자마자 즉시 실행되는 함수를 말한다. 이러한 즉시 실행 함수는 global Scope 를 오염시키지 않기 위해 사용한다. 다양한 라이브러리들도.. 2021. 3. 10. 이전 1 2 3 다음
