annyhpk.log

기타

[CS] API 란?

1. API란 API는 소프트웨어 제품 간에 데이터를 채널링 할 수 있는 미들웨어 역할을 합니다. - 요청을 정의 - 비즈니스 로직 처리 - 데이터 형식과 제품 빌드 시 준수해야 할 규칙 관리 2. API 타입 - Private - Public / Partner - External Private : 조직 내에서만 사용하기 위해 빌드 된 API입니다. 직원이 비즈니스 프로세스 및 제공을 자동화할 수 있는 사내 애플리케이션으로 분류됩니다. Public / Partner : 공개적으로 홍보되지만 알려진 개발자 또는 비즈니스 파트너가 사용할 수있는 API입니다. 이는 일반적으로 조직 간의 소프트웨어 통합을 나타냅니다. External : 이름에서 알 수 있듯이 이는 타사 개발자가 사용할 수 있으며 대부분 최종 ..

Javascript

insertAdjacentHTML 과 innerHTML 차이 알아보기

1. innerHTML 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다. 그리고 MDN 문서에 이렇게 표기되있다. 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오. 2. insertAdjacentHTML insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱 하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용 중인 element는 다시 파싱 하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므..

기타

VSCode에서 eslint delete '␍' (prettier/prettier) error 해결방법

VSCode 에서 eslint 설치와 설정후 아래와같은 에러가 생겼다. 빠르게 구글에게 물어보았다. 문제 : vscode사용시 eslint 오류라고 한다. 해결방법 1 : .eslintrc에 아래와 같은 룰을 설정해주면 된다. { // .eslintrc 에 아래내용을 추가 ... "rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" } ] } } 해결방법 2 : 라인 시퀸스 변경

Javascript

webWorker 맛보기

webWorker란? 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다 index.html run worker.js function sleep(delay) { let start = new Date().getTime(); while (new Date().getTime() < start + delay); } self.addEventListener('message', function(e) { console.log(e.data); // 일해라 워커! sleep(3000); // 3초가..

Web

CSS - position: sticky [scroll 중 더 나은 경험을 주는 방법]

See the Pen XWNgjpv by ChanHo Kim (@annyhpk) on CodePen. 예제 콘텐츠 상단을 잘 살펴보세요 설명: scroll될 때 자신의 부모태그 범위안에서만 fixed와 같이 고정시킬수 있습니다. sticky속성은 top, right, bottom, left 속성중 하나이상을 필수로 사용해야합니다. 자신의 부모위치가 뷰포인트에서 벗어나면 일반적인 흐름을 따릅니다. 주의 : IE11에서는 작동하지않습니다.

webpack

webpack 5 업그레이드 하면서 새로 알게된 내용

1. webpack-dev-server webpack 5부터 webpack-dev-server 실행 명령어가 바뀌었습니다. 이전 명령어 실행 시 Error: Cannot find module 'webpack-dev-server/bin/cli-flags' 에러가 발생한다. 기존 명령어 : webpack-dev-server (--hot) 새로운 명령어 : webpack serve (--hot) devServer의 dev옵션을 true로 하면 --hot 옵션만 이용한다는 뜻이다. devServer: { port: 8080, contentBase: path.join(__dirname, 'public'), // webpack serve --hot = only hot: true, proxy: { '/api': { ..

nodejs

package.json 모듈(종속성) 최신 버전 업데이트

// npm 모듈 버전 확인 npm show [모듈명] version // npm 모듈 개별 업데이트 npm update [모듈명] // npm package.json 모듈을 한번에 업데이트 시켜주는 패키지 npm install -g npm-check-updates // 최신버전 확인 ncu // 최신버전 업데이트 ncu -u // 모듈 설치 npm install

Web

메타 태그 <meta>

메타 데이터 메타데이터는 데이터를 설명하는 데이터이다. 메타 태그 의 구성 ( name은 정보의 형태, content는 실제 메타데이터의 컨텐츠 ) 페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시될 가능성이 생길 수 있다. 그러나 많은 기능들은 더이상 사용되지 않는다. 스팸 발송자들이 이를 악용한 사례로 인해 검색 엔진들이 무시해버린다. 다른 종류의 메타데이터 Open Graph Protocol- Facebook이 웹사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twittr.com에 표시 될 때와 유사한 효과가 있다. 아래는 국내 ..