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
  11. [성능 개선]https://github.com/hachuu/developGuide/tree/main/UX개선
• 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 명령어
• gradle

---

TIL 요즘

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

각종 Setting 문서 정리

개발자도구 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

ejected 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 정리

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=???? : 힙 메모리 부족시

Static web app 설정

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

종합 개발

• 브라우저 개발자도구에서 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. 웹브라우저에서 알림