티스토리

차니의 개발 블로그

검색하기

블로그 홈

차니의 개발 블로그

chanie.tistory.com/m

차니() 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

HTTP vs WebSockets 웹소켓은 네티이브 기술이고 자바스크립트는 자체적으로 웹소켓 API를 가지고 있다. HTML/CSS/JAVASCRIPT로 이루어진 클라이언트가 있고 Node로 이루어진 서버가 있다. 서버와 클라이언트는 각각 웹소켓을 가지고 있으며, 이는 완전히 별개의 존재들이다. 노드서버의 웹소켓은 클라이언트에 웹소켓이 있는지를 모른다. 단지 소켓에 대해서만 알 뿐이다. 노드 서버의 웹소켓은 네트워크 트래픽에 대한 전송만 처리할줄 안다. 그래서 무언가가 이 사이에서 중계기 역할을 해줘야 한다. 그 역할을 해주는 프로토콜이 바로 WS프로토콜이다. 이건 네이티브 웹소켓이나 소켓io의 웹소켓이나 사용하는 방식이다. 서버는 웹소켓을 모른다. 서버는 소켓만 안다. 네트워크 트래픽의 작동만 안다. 노드의 웹소켓 모듈이 소켓과 자바스.. 공감수 0 댓글수 0 2020. 5. 2.
웹소켓 Application - HTTP, FTP, SSH, SMTP Transport - TCP/UDP Network - IP Link - wifi, 이더넷커넥션 Physical - Cable 소켓io를 자바스크립트에 비유하자면 소켓io는 Jquery같은 것이다. 뭔가 사용하기 쉽게 만들어준 놈. 웹소켓과 대표적인 차이는 Long polling같은 상황이 벌어지면 소켓io는 이것을 지원하지 못한다. 그리고 Web Socket은 참고로 TCP를 사용한다. 컴퓨터의 운영체제에서 작동하는 모든것들은 process로 간주된다. 이 프로세스들을 스레드가 휘젓고 다닌다고 보면 된다. 이 프로세스들에 가상의 파이프같은것이 달려 있다고 보자. 빨대나 튜브같은것이라고 생각해도 된다. 이 튜브가 바로 소켓이다. 그리고 이 튜브.. 공감수 0 댓글수 0 2020. 5. 2.
TCP vs UDP 와 네트워킹 101 인터넷은 클라우드라고 해서 구름처럼 퍼져있는 연결을 떠올리기 쉽다. 하지만 실은 인터넷은 실제론 컴퓨터와 컴퓨터의 연결일 뿐이다. 복잡하게 연결된 1:1의 연결의 반복.. 서로서로 이야기하는 연결들의 반복. 이것이 실제로 인터넷의 모습이다. 실제로 클라이언트와 서버라고 부르는 각각의 기계들은 데이터를 주고 받으면서 자신들의 역할을 하는데 이런 데이터들을 패킷이라고 부른다. 패킷은 다섯개의 기본적인 레이어가 있는데 1단 : 피지컬레이어, 물리 레이어.(Physical) => 케이블 2단: 링크레이어(Link) => wifi, 이더넷 커넥션 3단: 네트워크 레이어(Network) => IP 4단: 트랜스포트 레이어(Transport) => UDP/TCP 5단: 어플리케이션 레이어(Application) =>.. 공감수 0 댓글수 0 2020. 5. 1.
리액트훅 useState에서 setState함수의 인자값에 대하여 요즘엔 컴포넌트방식이 아닌 Hook방식의 리액트가 표준으로 권장되고 있다. 그래서 기존에 MaterialUI같은 유명한 리액트 UI Framework들도 함수형으로 샘플코드를 바꾸었다. 이때 useState와 useEffect를 동시에 사용하는 방식으로 운용이 된다. 로딩 애니메이션을 넣어주는 코드이다. import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > * + *.. 공감수 0 댓글수 0 2020. 4. 17.
node modules와 gitignore, package.json의 관계 node module을 사용하는 자바스크립트, 노드js, 리액트 관련 프로젝트를 할때 Create React App으로 프로젝트를 생성을 하면 기본적으로 gitignore파일에 node modules 경로가 잡히게 된다. 변경사항을 추적하지 말라는 뜻이다. 스테이징 자체를 하지 않기 때문에, 실제로 꼭 필요한 소스만 깃을 통해 관리할수 있게 된다. npm install yarn add 이런 명령어들로 필요한 모듈들을 설치해서 쓰면 로컬 환경에서는 이것들과 관련된 파일들이 다운로드되어 파일이 생성되지만 이 경로를 스테이징하지 않기 때문에 다른곳에서 그 상태의 소스를 Pull이나 Clone을 받은후에 실행을 해보려하면 실행이 되지 않는다. 이럴때는 clone한 경로 또는 Push받은 그 경로에서 터미널을 열.. 공감수 0 댓글수 0 2020. 4. 16.
@media 쿼리 min, max 활용 @media (max-width: 1024px) { width: 768px; } @media (max-width: 768px) { width: 100%; } 이런식으로 미디어쿼리를 잡곤한다. 일단 max는 최대값의 개념이다. 괄호안이 조건이 되는데, 최대가 1024다? 별로 와닿지가 않는다. 어쩌라는 말인가. 부등호로 생각하면 쉽다. 당연히 맥스는 큰넘이니까. 크기의 변수를 a라고 생각하면 a < 맥스 이렇게 생각하면 된다. 즉, 1024px보다 작으면 이거해라. 이런말이다. 거꾸로 min은 작은넘이니까. min < a 이렇게 생각하면 된다. 저기선 a < 1024이면 저걸 적용하라고 미리 선언한후에 마치 덮어쓰기 처럼, 추가조건으로 a < 1024면 전부다 이조건으로 스타일이 적용되는데 그와중에 특히 .. 공감수 0 댓글수 0 2020. 3. 7.
리액트에서 classnames 사용방법 classnames는 CSS 클래스를 조건부로 설정할 때 유용한 라이브러리이다. yarn 혹은 apt-get으로 yarn add classnames 해준다. 간략하게 설명하자면 가독성이 좋게 여러가지 클래스를 넣어줄수도 있고, 문자열, 키밸류쌍으로된 객체, 배열등을 classNames()의 소괄호 안에 넣어서 사용할 수 있다. 객체안에 밸류값으로 true나 false값을 갖는 boolean을 줄 수 있기 때문에 리액트에서는 부모로부터 전달받은 props의 상태값에 따라 스타일의 변화를 줄때 사용하면 좋다. const MyComponent = ({ highlighted, theme }) => { Hello }; 예시 코드는 classnames를 사용하지 않고 순수 자바스크립트와 리액트만 가지고 조건부 클래.. 공감수 0 댓글수 0 2020. 2. 22.
[리액트 훅(ReactHooks)] useMemo와 useCallback [주의 : 이해를 해가는 과정을 적은거라 정확하지 않은 추상적인 설명이 있을수 있습니다.] -지나가시던 고수분들 틀린 부분 지적해주시면 반영하겠습니다. useCallback은 useMemo와 비슷하다. 불필요한 호출이나 랜더링을 최적화해주는넘 . useMemo가 인풋에 무언가가 써지고 있을때 평균값 계산을 계속하고 있던것을 인풋이 수정되다가 최종적으로 컨켓한후 list배열에 list로 안착이 되었을때 호출토록 했다면 useCallback에서는 컴포넌트가 랜더링 되는걸 지금은 꽤 숫자를 줄이긴했지만 그래도 리랜더링이 될때마다 함수 onChange와 onInsert가 계속 생성 되는 낭비를 줄여보도록 할 수 있다. useCallback의 첫 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열.. 공감수 0 댓글수 0 2020. 2. 17.
리액트(React)의 불변성과 map, filter, concat, slice 자바스크립트의 배열 내장함수에는 push, splice, pop, concat, slice, map, filter 이런것들이 있다. 이중에는 push, splice, pop은 원본 배열의 변경하는 녀석들이고, concat, slice, map, filter는 원본 배열을 복사해서 새로운 배열을 만들어내는 녀석들이다. 리액트에서는 상태(State)를 업데이트할 때 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 한다. 이를 불변성 유지라고 하는데, 불변성을 유지해주어야 나중에 리액트 컴포넌트의 성능을 최적화 할 수 있기 때문이다. 만약 상태를 계속해서 바꿔버리고, 유지시키지 못한다면 VirtualDom을 사용하는 이유도 없고, 리액트의 큰 장점중 하나인 원본과 비교해 변화된 부분만 계산해서 빠르게 .. 공감수 0 댓글수 0 2020. 2. 13.
React에서 ref를 사용하는 경우 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref라는 것을 사용한다. ref란 본래 html과 css, js를 쓸때 id값을 주고 그 DOM에 직접 접근해서 스타일을 바꿔주거나, 이벤트를 처리시키던 것을 리액트 스타일대로 해주는 것이라고 생각하면 편하다. 리액트는 재사용성이 중요하기 때문에, 리액트 컴포넌트에 id 값을 주면 동일한 아이디가 존재할 가능성이 생기므로 id값은 사용하지 않는게 좋고, 만약 사용해야 한다면 반드시 겹치지 않게 신경써서 짜야한다. ref를 써야하는 경우는 당연히 특정 input이나 box를 기준으로 효과를 주고자 할때, this를 활용해서 ref를 입혀주고 나중에 부모 컴포넌트에서 그 ref를 활용해서 해당하는 ref를 가진 자식 컴포넌트를 조작할수 있다. 컴포넌트끼리 데.. 공감수 0 댓글수 0 2020. 2. 11.
Javascript ES6 비구조화 할당 이란? 비구조화 할당(destructuring assignment) 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용 가능. const [apple, banana, grape] = ["Apple", "Banana", "Grape"]; console.log(apple); // Apple console.log(banana); // Banana console.log(grape); // Grape 이런식으로 선언과 동시에 바로 할당까지 해버리는걸 비구조 할당이라고 한다. 원래 자바 스크립트의 배열은 변수에 담아서 쓰고 싶을때 하나씩 할당을 해주는 노가다성 작업이 필요했는데 이걸 단축시키는 패턴으로 작성하는것이 비구조화 할당이다. 또는 구조분해 할당. 리액트에서는 import React from 'reac.. 공감수 0 댓글수 0 2020. 2. 10.
리액트(React) JSX의 개념과 문법 정리 JSX란? JSX는 리액트에서 사용하는 문법인데, 특징은 가독성이 좋게 HTML과 자바스크립트를 표현할 수 있다는 점이다. 원래 자바스크립트는 HTML상에 직접 넣으면 너무 하드코딩이 되기 때문에, 태그 최하단에 를 배치하여 표현하거나 따로 파일로 분리를 했었다. 그래서 자신이 짠 코드가 아니라 타인의 코드를 보면 어떤 이벤트에 연결되는 조건식이 무엇인지 위아래로 또는 다른 파일을 왔다갔다하면서 확인해야만 했다. 그에 반헤 JSX는 비교적 한눈에 그 구조가 파악이 되는 것 같다. import의 원리 import React from 'react' Create React App같은 것을 이용하여 리액트 프로젝트를 만들 때 node_modules라는 디렉토리가 생성이 되는데 거기에 react 모듈이 같이 들어.. 공감수 1 댓글수 0 2020. 2. 9.
자바[java] 입문시 많이 보게되는 에러패턴 25가지 01 - 변수를 만들지도 않고 쓸때. - 변수를 일단 만들어야 쓸수 있다. 02 - 변수를 만들기만 하고, 값을 대입하지 않고 부를때. The local variable i may not have been initialized local variable(지역변수) : 메서드내에 선언된 변수 에러 : 지역변수 선언 후 사용전에 값을 대입(초기화) 해야 한다. 03 - 퍼블릭을 2개 선언하는 에러. 04 - import안해서 뜨는 에러. 클래스를 모르겠다고 하는 에러. Random r; 하면 Random이라는게 일단 클래스인데. 이게 데이터타입으로 사용되었다는걸 알수 있음. 어쨌든 이런 에러는 import를 하면 됨. 05 - 파이널처리 해놓은 상수를 바꾸려고 할때 06 - 문자열에 역슬래시 애매하게 써서 .. 공감수 0 댓글수 0 2020. 1. 14.
이클립스 유용한 단축키 모음 Ctrl + N : 새로운 파일 만들기 Ctrl + +키 또는 - : 글자 크기 조절 Ctrl + M : 현재창 최대화/취소 Ctrl + Shift + C : (범위지정후) 주석 추가 Ctrl + Shift + F : 코드 자동정렬 글자 드래그해서 컨트롤 쉬프트 X : 대문자변경 글자 드래그해서 컨트롤 쉬프트 Y : 소문자변경 복사할 글 대충 줄갯수만 긁어서 + 컨트롤 + 알트 + 방향키 위or아래 : 복제 현재 커서에 있는 코드 밑으로 이동 : 알트 + 방향키아래 알트 + 쉬프트 + A : 열단위 편집. 드래그로 쭉 긁어서 지정해놓고, 복붙한값 쭉 붙일수 있음. 쉬프티키 누르고 밑으로 방향키내려서 일자선 긋고 여러줄 동시 편집가능 알트 쉬프트 에쓰 + 영문자 R. -> Getter, Setter 설정 .. 공감수 0 댓글수 0 2020. 1. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.