yeonnnee / developguide

develop Guide Reference

Develop Guide Reference

개발 가이드 Index

• Front-End 개발 가이드
  1. html
  2. CSS
  3. 크로스브라우징
  4. language
  • javascript
  • typescript
  • python
  5. http
  6. tool(git, webpack, babel, eslint, npm...)
  7. framework
  • Angular
  • React
  • next
  • vue
  • svelte
  8. tdd
  9. 알고리즘 / 자료구조
  10. MPA VS SPA
• Back-End + Server 개발 가이드
  1. cs
  2. aws
  3. cicd
  4. DB
  5. NginX
  6. Jenkins
  7. Linux
  8. SSO
  9. sql

기술 spec study 목록 (실질적 업무에 관련한)(2022/11/14~)

• vuejs (2,3)
• Linux
• spring boot
• NginX
• Python
• Jenkins
• adb connect 명령어

---

TIL 요즘

• Deep Learning : chat GPT의 관심사가 높아지면서 딥러닝 관련 기술에도 관심을 가지고 있다.
• Astro
• Jenkins
• Web Develop
• sqld
• aws

각종 Setting 문서 정리

SEO canonical 기존 link rel 삭제, 새로 등록하는 script

const headerDoc = this.document.head;
const bodyDoc = this.document.body;
for (let i = 0; i < bodyDoc.children.length; i++) {
  if (bodyDoc.children[i].localName === 'link' && bodyDoc.children[i].rel === 'canonical') bodyDoc.children[i].remove();
}
for (let i = 0; i < headerDoc.children.length; i++) {
  if (headerDoc.children[i].localName === 'link' && headerDoc.children[i].rel === 'canonical') headerDoc.children[i].remove();
}

const domain = 'www....';

var link = document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', 'https://' + domain + window.location.pathname);
document.head.appendChild(link);

개발자도구 lighthouse-SEO

Git 명령어 정리

1. 자주 쓰는 명령어

javascript Reference

• 내가 정리하고 있는 javascript concept

1. Web Development Resources
2. javascript utilities - 1loc.dev
3. javascript theory
4. javascript concept
5. javascript prototype 2016년 글

알고리즘😡😱

1. 알고리즘 공부 시작 방법 및 순서
2. PS roadmap
3. 인프런 알고리즘 강좌
4. 공부하면서 알게된 것들
5. trekhleb/javascript-algorithms

GitHub Action 배포

1. Github Actions으로 배포 자동화하기
2. React (Movie King) 프로젝트 배포 참조

• Github Actions를 이용한 클라이언트 CI/CD 구축 1 - 프로젝트 개요
• Github Actions를 이용한 클라이언트 CI/CD 구축 2 - 프로젝트 구성 및 S3를 이용한 정적사이트 만들기
• Github Actions를 이용한 클라이언트 CI/CD 구축 3 - Github Actions 사용해보기
• AWS node.js배포

연산자

1. 표현식과 연산자
2. 연산자 우선순위 MDN

regular expression

example

Webpack vs (Grunt vs Gulp)

출처

• Webpack = (Grunt|Gulp) + Browserify(Node.js기반 javascript code를 브라우저 환경에서도 실행 가능하도록 해줌)
• Webpack = 모듈 번들러 / Grunt vs Gulp = task runners

webpack

• An ejected project cannot use the build command anymore. => 해결 angular-cli.json 에서 다음 기입

"project": {
   "name": "proj-name",
   "ejected": true,
}

Babel

• Babel : JavaScript 컴파일러, ES6 이후의 코드를 구형 브라우저 환경에 맞게 변환
• polyfill : 폴리필은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드

도커 Docker

• 컨테이너 기반의 오픈소스 가상화 플랫폼
• 도커 빌드 임시 컨테이너 생성 > 명령어 수행 > 이미지로 저장 > 임시 컨테이너 삭제 > 새로 만든 이미지 기반 임시 컨테이너 생성 > 명령어 수행 > 이미지로 저장 > 임시 컨테이너 삭제 > … 의 과정을 계속해서 반복
• 서버 구현까지 출처
• 참조

SSO 로그인

• OAuth2 정리
• SSO 정리
• cookie session 정리

FlexBox (Flexbox Froggy를 통한 정리)

flexbox.md

React 스터디 정리

React 정리 Hook 정리

Firebase 배포

npm run build
firebase init hosting
firebase deploy --only hosting
firebase serve --only hosting

yarn build
firebase deploy

Firebase로 배포하기(yarn 명령어)

Firebase 규칙 수정

• 읽기 데이터 수정
• 출처

Azure 배포

Storage, CDN 구조

• Storage 실 소스가 반영
  1. 스토리지 생성
  2. 정적 웹 사이트 사용 활성화 => 엔드포인트 활성화
• CDN 도메인 변경...
  1. 프로필 생성
• Storage - CDN 연결 작업
  1. 엔드포인트 추가
  2. 스토리지 생성에서 생긴 엔드포인트 연결

host 파일 경로

• C:\Windows\System32\drivers\etc

jquery => javascript

• JQUERY TO JAVASCRIPT

npm 배포출처

  npm login // 로그인
  npm whoami // 내 id 확인
  npm info hello-login // hello-login npm package가 있는 지 확인 E404응답이면 배포 가능
  npm publish // 배포

package의 명령어

1. --sourceMap==false : webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성, 실제 배포 시 sourcemap은 제거하겠다는 명령어 React build 시 sourcemap 제거하기
2. node --max-old-space-size=???? : 힙 메모리 부족시

device나 mobile/pc 판별

  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

Static web app 설정

  // 
 {
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

How do you explicitly set a new property on window in TypeScript?

1. 방법1

declare global {
  interface Window { MyNamespace: any; }
}

window.MyNamespace = window.MyNamespace || {};

2. 방법2

    (window as any).tradlinx = this;
    (window as any).tradlinx.app = app;

IE => edge로 연결

<script>
  var agent = navigator.userAgent.toLowerCase();
  if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
    window.location = 'microsoft-edge:' + window.location;
    setTimeout(function () {
    //window.close();
    window.open('','_self').close();
  }, 1000);
  }
</script>

javascript 퍼포먼스 속도 체크하기

const t0 = performance.now()
for (let i = 0; i < array.length; i++) {
  // some code.......
}
const t1 = performance.now()
console.log(t1 - t0, 'milliseconds')

종합 개발

• 브라우저 개발자도구에서 formdata를 숨기는 방법이 있는가요?
• ppt나 excel 자동 영어 <=> 한글 변환 끄기 파워포인트(PPT) 자동 한영 전환 기능 끄기
• 알아두면 쓸만한 Chrome Console 기능
• JWT 토큰 변환
• Single Sign On (& Single Sign Out) : 부제(로그인 통합 인증)
• Create React App 에서 ESLint 와 Prettier 설정 하기
• table을 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정하고 싶다면
• React table bootstrap
• SEO 4가지 사례로 알아보는 올바른 캐노니컬 태그 적용 방법
• Web Testing - Element 검색해서 클릭하기
• d.ts
• npm install --save
• RGB <-> HEX 색상코드 확인
• Color palettes
• 함수 퍼포먼스 체크
• slide할때 opacity조절하여 css적용
• 우아한 형제들 채팅 구현
• change detection
• changebdetection성능
• CORS 에러

개발 도구

1. 정규식 검사
2. css 에디터
3. flex box 연습 - frogbox
4. javascript 연습장
5. color tool
6. google Font
7. icon <script> injection
8. 소스 한줄 정렬
9. QA자동화
10. HTML WEB 웹 개발 각각 cache 유무 코드의 no-cache 캐시삭제, browser 가 caching 하지 않게 하는 http header 설정
11. Azure 배포
12. [웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선
13. 웹브라우저에서 알림
14. mac에서 input file할때 한글 깨짐 현상

fileName = Normalizer.normalize(fileName, Normalizer.Form.NFC)

---

ngAfterViewInit() {
    window.onpageshow = (event) => {
      if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
        this.loginForm.reset();
      }
    }
  }

15. 아이폰 사파리 script

16. frontend

  a tag에서 keyup.enter 이벤트는 (click)과 동일한 이벤트로 인지하여 둘다 선언하는 경우 이벤트가 중복되어 사용됨

  => (keyup.enter)를 삭제 해줘야함

17. HTML Tag ❮Reference ❯

Example The template element holds HTML code without displaying it:

Name:

Birthday:

Try it Yourself »

18. 성능체크 (https://jsbench.me/)
19. shift+enter check

function handleEnter(evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        if (evt.type == "keypress") {
        }
        evt.preventDefault();
    }
}

20. textarea 현재 커서의 위치를 찾는다

  // 입력받은 @의 index를 찾는다.
  // 현재 커서의 위치를 찾는다.
  // @의 위치와 커서의 위치를 비교한다.
  // @의 위치가 커서의 위치보다 작으면 자동완성을 띄운다.
  this.indexOfAt = event.target.selectionStart;