본문 바로가기

분류 전체보기

(62)
http 통신의 진화 과정과 웹 소켓, 폴링 HTTP (Hyper Text Transfer Protocol) http은 html파일을 전송하는 프로토콜 이라는 뜻 이다. 웹 브라우저에서 일어나는 통신이고, 초기에는 html 파일을 전송하는 목적으로 만들어 졌다. 현재는 json, image 파일등 또한 전송 가능하다. 사진과 같이 클라이언트가 서버로 요청을 보내면 서버가 응답하는 단방향통신이다. 서버의 응답에는 상태 코드가 포함되며 상태 코드는 다음과 같이 5개의 클래스로 분류 된다. 1xx (정보): 요청을 받았으며 프로세스를 계속한다 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다 5..
visual studio code에서 prettier 설정값을 공유 합니다. prettier는 javascript의 코드 포맷팅을 도와주는 무료 코드 포맷터 입니다. * javascript 코딩 컨벤션 코딩컨벤션 | TOAST UI :: Make Your Web Delicious! visual studio code 기준으로 설치하는 방법 및 저의 설정값을 공유 합니다.
이제는 Redux를 놓아 주자. Redux는 javascript 앱을 위한 상태관리 라이브러리 입니다. React앱에서 상태관리 라이브러리로 Redux를 사용하고 있다면, 이제는 다른 옵션을 고려해야 할 때가 왔습니다. 1. 보일러 플레이트 코드가 너무 많습니다. Redux를 사용하려면, actions, reducer, saga등 너무나 많은 보일러 플레이트 코드가 필요합니다. 보일러 플레이트 코드가 많다는 것은, 개발자의 생산성 저하 및 잦은 실수를 유발합니다. 이는 엄청난 단점입니다. 2. 서버에서 받아오는 상태와 클라이언트의 전역 상태는 다르게 관리 해야 합니다. 서버에서 받아오는 상태와 클라언트의 전역 상태는 그 성질이 다릅니다. 예를 들면, 서버에서 받아오는 상태는 주기적인 업데이트, 캐싱등의 기능을 필요로 하는 반면, 클라이..
간단하게 정리하는 프론트엔드 빌드 시스템. javascript 는 es6이후로 많은 변화가 이루어졌는데, 현재 개발되는 대부분의 웹은 es6 이후의 코드로 작성이 되어있습니다. 그런데, 모든 브라우저가 es6 이후의 문법을 지원하는 것은 아닙니다. 대표적으로 internet explore는 es6이후의 핵심 기능인 promise를 이해하지 못합니다. Babel 이러한 문제를 해결 해 주는 것이 babel인데, babel은 es6이후의 js 코드 및 typescript, jsx를 활용한 코드를 모든 브라우저에서 동작 가능한 코드로 컴파일해주는 역할을 합니다. 즉, js -> js로 컴파일 해주는 역할입니다. polyfill poly-fill은 babel이 미처 해결하지 못한 문제들을 해결한다. babel은 es6이후의 코드를 es6이전의 코드로 문..
svelte default port 바꾸는 방법 svelte로 프로젝트 진행 중 맞닥뜨린 문제. svelte가 기본적으로 사용하는 port는 8080인데, 이미 사용중이다. cmd를 통해 확인해보니 무엇인가 이미 8080포트를 사용 하고 있다. 종료도 할 수없다. 이 포트를 사용하는 프로그램에 관한 문제는 나중에 해결하도록 하고, 원래의 목적인 svelte의 port 문제를 해결 하자. package.json 파일의 scripts를 다음과 같이 수정해주면 된다. 나는 3000번 포트를 사용하기로 했다.
[javascript] sort함수 sort 함수는 배열 내부의 값을 손쉽게 정렬 할 수 있다. const arr = [5,4,3,2,1] arr.sort() console.log(arr) //[ 1, 2, 3, 4, 5 ] 그런데, 아래의 코드를 보면 의도한 것과 다르게 정렬이 된 것을 볼 수 있다. const arr = [15,14,13,2,1,3,4,5,6] arr.sort() console.log(arr) //[ 1, 13, 14, 15, 2, 3, 4, 5, 6 ] 원인은 javascript 의 sort함수는 배열 안의 값을 유니코드에 기반해서 정렬하기 때문이다. 즉, 11 < 5로 비교가 된다. 1은 유니코드에서 49, 5는 53이기 때문에 해결 방법은 comapre function을 활용 하는 것 이다. const arr = ..
javascript 에서의 이벤트 관리 방법들 * 이벤트 버블링 html에서 이벤트는 자식에서부터 부모로의 순서로 실행된다. 아래의 코드에서는 "클릭 span"을 클릭 하면, 총 3번의 alert이 뜨게 되는데, 순서는 span -> p -> div 입니다. 이것이 바로 이벤트의 버블링 입니다. 클릭 span ** 버블링 중단하기 중단하고 싶은 곳에서 event.stopPropagation() 을 호출하면 된다. * 기본적으로 버블링을 중단하는 것은 권장하지 않습니다. 클릭 span * 이벤트 캡처링 이벤트 버블링과 정확히 반대로, 이벤트가 부모에서 자식으로 전파되는 상황을 말한다. 일반적인 경우에서는 일어나지 않지만, 특정한 경우에 사용 할 수는 있다. winodw.addEventListner(event,handler,true)의 형태로 사용 가능..
그동안 몰랐던 html5 1. -> header에 사용 하라고 header 테그가 있었다.. 2. 사과의 색은 빨갛고 맛은 달다 현재 문장이나 문맥에서 정의하는 용어를 나타내는 dfn이라는 테그도 있었다. 3. You can use CSS to style your HTML. 요소의 준말 또는 머리 글자를 나타내는 abbr 테그도 있었다. html, css 는 대충 하면 된다고 생각 했는데, 공부 할수록 공부할게 더 많아진다.