개발자 도담씨

깃허브나 나무위키의 비교처럼 이전버전과 현재버전을 차이를 표시하는 라이브러리를 하나 가져왔다. 사실 php로 직접 만들어볼려고 발버둥치다가 60%까지 했는데 또또 똑같이 정리안하고 멘땅에 해딩하다 엎었다 ;( 추후에 한번 만들어봐야겠다. ( 이러고 또 안한다? ) 소개할 라이브러리는 jsdifflib라는 친구다. 어느곳이나 그렇듯 깃허브에 설명이 되어있지만 ( 물론 영어로 ) 다음에 편하게 사용하기 위해 사용법을 정리하려한다. 해당 깃허브에서 JavaScript와 css를 댕근 다운받아 import 해줘야한다. // IF( viewType == 0 ) // 두창을 두고 양쪽 비교 // ELSE IF ( viewType == 1 ) // 창하나에 달라진 부분 표시 function diffUsingJS(vi..

오늘 또 새로운 정보를 알았다! (흥분) 회사의 다른 부서에서 사용중인 페이지가 너무 기니까 랙을 먹어 불편하다고 말이 나와 고민중에 옆 선배한테 물으니 CSS 가속화 작업을 한번 해보라고 하셨다! CSS 가속화요...?😬 문제된 페이지는 sortable을 많이 사용한 페이지였다. 그렇다 보니 Reflow와 Repaint 작업이 많이 발생 할 수 밖에 없었다😫 Reflow와 Repaint를 모르고 계시다면 CSS랜더링에 관한 정보를 참고하시면 된다 :) 나는 위치가 이동될 수 있다고 미리 알려주는 css속성인 will-change를 걸어주었다. will-change:top, left; 다른 필요 지식이 더 있지만 아래의 참고 블로그에 너무 잘 정리해주셔서 기타 필요한 상세 내용은 적지 않겠다. 꼭 참고 ..

웹팩 해야하는데 또 새로운거 하고싶어서 리액트 찾다가 튜토리얼만 해봐야지 하고 시작한 리액트 튜토리얼 도전기🤤 틱택토를 만들어 본다구 한다 :) https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org react를 전역설치 하고 my-app이라는 react app을 하나 생성해 주었다. npm install -g create-react-app create-react-app my-app 해당 명령어를 실행하면 src폴더가 하나 생겼을 텐데 src하위 파일들을 모두 삭제한 후, /src/inde..

[ Node.js / Webpack ] 이번엔 웹팩 🤜 [ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader ) [ Node.js / Webpack ] 출력 관리 이번 챕터 - https://webpack.js.org/guides/development/ 오 나름 꾸준히 잘 하구 있다 :) 이번 챕터의 장은 Development 개발이라고 제목지어져 있다. 포스팅하면서 읽어 내려가겠지만 대충 훑어보니 개발환경에 관한 webpack의 기능을 설명해주려 하는가보다. mode 3편의 출력관리의 코드들을 가지고 이어서 해볼 것이다. 그리고 문서에서 대뜸 webpack 모드를 development 모드로 설정하라고 한다. 문서를 찾아 보니 webpack에서는 ..

인스타그램 api를 연동하면서 생각못했는데 비디오가 있더구만... 그래서 새로 비디오 태그 작업을 하게 되었다 👀 영상을 넣는데 어려울건 없었지만 알아야할 사항들이 몇가지 있었다. W3CSchool 비디오 태그 - https://www.w3schools.com/tags/tag_video.asp 해당 문서를 보면 알다시피 비디오 태그는 아래처럼 작성해주면된다. 이미지 태그와 별반 다를게 없다. Your browser does not support the video tag. 하지만 내가 메모하려는 정보는 옵션부분이다. 문서에도 있듯 비디오태그에는 여러 옵션이 있다. 우선 나는 autoplay를 해주고싶었다. 그리고 문서에 설명되어있는 것 처럼 autoplay를 작성해주었지만 실행되지 않았다. 검색해본 결과 ..

1탄 - [ Node.js / Webpack ] 이번엔 웹팩 🤜 참고 문서 - https://webpack.js.org/guides/asset-management/ 저번주에 이어 두번째 섹션을 진행해보려한다. 공부하기 싫은데 남자친구한테 끌려 왔다. 두번째는 자산 관리라고 표현되어 있다. 저번엔 javascript만 관리를 했다면 이번엔 이미지와 css와 같은 파일들도 관리를 해보자는 의미인 듯 하다. 저번에 작성했던 index.html 을 다음과 같이 변경한 후 시작해보자. main.js가 아닌 bundle.js를 불러온다고 해놨으니 webpack의 설정도 main.js가 아닌 bundle.js를 생성하도록 변경해주어야 할 것이다. ( webpack.config.js ) const path = requ..

멀티 채팅에 이어서 진짜 맛보기만 하고 있는 느낌이긴 하지만 그래도 한다는거에 나로썬 만족하겠다 :) ( 뻔뻔쓰 ) 이번에 관심을 가진건 웹팩이다. 저번처럼 등장배경및 친구소개먼저 받을꺼다. 우리가 CSS를 header에 적고 script를 body이후에 적을때가 있을 것이다. 브라우저 렌더링 과정을 보면 1. HTML읽은 후 파싱 2. DOM, CSSOM 생성 3. 렌더링 트리 생성 4. 레이아웃 계산 5. 페인트🎨 여기서 HTML을 읽는 과정중 스크립트를 만나게 되면 스크립트를 읽고 파싱 후 HTML을 다시 읽어내려간다. 자바스크립트를 분할 하여 여기저기서 여러개 불러올탠데 생각만 해도 엄청 느리지 않은가 -ㅅ- 이런 단점을 Webpack을 통해 브라우저 랜더링 시 파일들을 단일 파일로 만들어 주어 ..

2019/08/01 - [웹 프로그래밍] - [ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤 [ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤 검색해보면 좋은 원페이지 스크롤 플러그인들이 많다... 잘 만들었지만.. 내가 원했던건 원페이지 스크롤과 일반 스크롤이 합쳐진 것.. 그러니까 원페이지로 잘 가다가 특정 부분에선 일반 스크롤이 되었으면 했던.. do-dam.tistory.com 제 블로그에서 많은 요청을 차지하고 있는 원페이지 스크롤을 이제서야...하하 다시 다룬다. 크게 바뀐점은 없다 여전히 하드 코딩이고 버그가 있다. 예전 코드가 벌써 1년전이라 다시 만들어볼겸 + 원페이지 스크롤 부분과 일반 스크롤을 섞어서 가능하게끔 해놨다. 그래서 원랜 코드좀 이쁘게 라이브러리 ..

[Node.js] 실시간 멀티 채팅 만들기 1탄 [Node.js] 실시간 멀티 채팅 만들기 2탄 대망의 3탄 서버에 사용자가 보낸 문자열을 받았으니 이제 뿌려주기만 하면 된다💪 socket.io에서는 연결된 모든 소캣에 이벤트를 발생시키도록 하는 해당 함수를 사용할 것이다. 함수명도 외우기 쉽다. ( emit : 방출하다 ) io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' }); 해당 이벤트를 메세지 받고 발생 해주어야 하니 2편에서 등록했던 chat message 이벤트 발생시 메세지를 방출 하도록 해놨다. socket.on('chat message', function(msg){ console.log('me..

[Node.js] 실시간 멀티 채팅 만들기 1탄 [Node.js] 실시간 멀티 채팅 만들기 1탄 Node.js라는 친구를 소개하고 멀티 채팅 구현글을 임시 저장해놓고 시간이 없다는 핑계로 일주일을 방치했더니 날아가버려서 다시 쓴다^^... 정리 잘해놨는데... 참고 블로그 - https://jinblog.kr/156 Socket.IO.. do-dam.tistory.com 1편은 사실 맛보기 였던것 같다. 아직도 너무 신기한 기술이다. 👍 1편에선 res.send()를 통해 html 문자열을 반환하여 보여주었는데, 이렇게 관리하기엔 힘들테니 이번엔 html파일을 호출해보자 :D socket.io의 예제 html을 스타일만 변경했다. html코드는 요로코롬...! 전송 그리고 1편에서 작성했던 index.j..