MVC 패턴은 웹 개발자라면 다 알고 있는 패턴입니다.

아이폰, 안드로이드폰이 등장하면서 Data는 서버가, 화면은 네이티브 앱이 책임지는 구도로 변했습니다.

웹페이지를 만들어 내던 서버 사이드 렌더링 작업을 바꾸면 어떨까 하는 생각에 등장한 것이

서버에서 보내주는 JSON 데이터를 이용하는 자바스크립트앱을 만들자 

이렇게 태어난 기술이 Angular, React, Vue, Svelte입니다.

 

리액트 관련 속성과외 자료 공유합니다.

https://bit.ly/okreact2022 

올 상반기 발표 자료입니다. 이클립스 기반으로 되어 있습니다.
https://bit.ly/oktdd2022 

* 개발환경 세팅
* Getting Started TDD
* TDD Concept
* TDD Misunderstood
* Test 단계와 유형
* assert 종류
* 리팩터링
* Maven

tdd

* GitLens: 해당 라인 커밋한 시점 등의 정보를 보여 줍니다. 

 

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu

marketplace.visualstudio.com

* Git Graph: 소스트리 대체할 만 합니다.

 

Git Graph - Visual Studio Marketplace

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

marketplace.visualstudio.com

* GitHub Copilot: 인공지능과 짝프로그래밍 하면 시간을 많이 줄일 수 있습니다. 경쟁자 tabnine

 

GitHub Copilot · Your AI pair programmer

GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.

copilot.github.com

* Thunder Client: Postman보다 가볍고, 호환도 대부분 다 됩니다.

 

Thunder Client - Rest API Client Extension for VS Code

Thunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Code

www.thunderclient.com

* Prettier: 코드 가독성은 중요합니다.

 

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

 

추가로 하나 더, 새로 시작한 플러그인입니다.

* SonarLint: SonarQube 서버 없이도, 코드 정적분석이 코딩할 때 가능합니다. 팀 개발한다면 룰셋을 SonarQube 서버를 통해서 가능합니다.

 

SonarLint | Free and Open Source Code Quality & Security IDE Extension

Find and fix Code Quality and Security issues as you code, directly in your IDE of choice, including JetBrains, Eclipse, Visual Studio and VS Code.

www.sonarlint.org

 

typeof [ ] === 'object'

1. list.forEach(): 반복, 리턴값 없음 undefined

2. list.map(): 각 원소의 값 변경 가능, 리턴값 동일 갯수 배열

3. list.filter(): 조건에 따라 필터링, 갯수 필터된 배열

4. list.reduce(): 모든 원소의 총합 리턴, 단일값

5. list.includes():  포함 여부, true or false

more: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

 

Array - JavaScript | MDN

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

developer.mozilla.org

 

리팩토링

  • Re + factor + ing = 재구성
  • 코드의 재구성

자주 사용하는 리팩토링

  • Rename Variable
  • Extract Variable
  • Extract Constant
  • Inline
  • Extract Method

YouTube

npm 설치시 취약점(Vulnerability) 리포트가 나오는데, 자바도 가능하게 되었습니다. 라이브러리의 보안 취약점은 https://mvnrepository.com 에서 확인할 수 있습니다.

2021년 말에 Log4j 이슈 때문인지, 라이브러리 취약점에 대한 모니터링이 강화된 것 같습니다. 특히 GitHub이 열심입니다.

`오늘은 괜찮은데, 내일부터 상황이 바뀌는 것`이 보안 취약점이라 서비스를 한다면, 업데이트에 신경 쓸 수 밖에 없습니다.

 

 

전자정부 표준프레임워크를 통해서 오픈 소스 경험하기

기간은 3/28(월) ~ 7/31(일) 

https://github.com/orgs/eGovFramework/repositories

 

https://bit.ly/egovcontrib

* 검색은 가급적 영문으로

* 블로그나 튜토리얼 따라할 때는 가능하면 `버전`을 맞춘다

* 지인 중에 해당 기술의 경험자를 물색한다.

* 꼬였다 싶으면, OS 포맷하고 다시 시작한다. #반복효과

* 1시간 삽질해도 안되면, 다른 일 한다. #산책하기 #이거말고다른일

from: https://unsplash.com/photos/m8c9PKq2E2A

AD: React + API Server 프로젝트 개발과 배포

토이 프로그램(toy program)이라는 말이 있습니다. 실제 서비스를 위해서 만든 프로그램이 아닌, 학습 또는 테스트를 위해서 만든 간단한 프로그램이라는 의미입니다. 개인적으로 프로그래밍 강의를 10년 넘게 했기 때문에 제 github에는 130개 정도 있습니다.


토이 프로그램의 의미는 돌아가는 것 확인 이상의 의미를 찾기 힘듭니다. 그 가능성을 실제 업무 또는 앱 서비스로 세상에 드러낼 때 가치가 더해진다고 얘기하고 싶습니다.


배우 고현정과 같은 나이에 아직도 코딩에 집착하는 저입니다만, 제 인생의 대표적인 서비스 프로그램은 OKJSP였고, 지금은 데일리 커밋 코스프레하면서 근근히 https://okdevtv.com 의 콘텐츠를 채워가고 있습니다.


회사 업무상 십여개의 스타트업 기술 지원을 하고 있습니다만, 커다란 깨달음을 준 것을 얘기하려고 글을 씁니다. 기술지상주의(라고 쓰고, 기술로 지구를 구할 태도라고 읽습니다)로 엔지니어의 꿈을 키워왔습니다. 그런데, 현실은 예상하시듯 그렇지 않습니다.


기술력이 좋은 회사가 BEP(손익분기점 break even point)를 넘지 못해서 근근히 버티는가 하면, 기술력 없는 회사가 수십억의 투자를 받고 서비스를 합니다. 바람직한 경우는 투자 안 받아도 첫달부터 잉여금이 쌓이기 시작하는 경우죠.


기술 자체가 돈을 벌어주는 경우는 일반적이지 않다고 생각합니다. 기술에 스토리가 실리고, 그 스토리에 사람들이 감동해야 푼돈을 냅니다. 이건 비밀인데, (웃기죠. 비밀을 여기에 쓰다니...) 가끔은 로또보다 10배 더 강한 투자자를 만나기도 한다고 합니다.


그래서, 기승전서비스를 만드시고, 사람들을 행복하게 만드시기 바랍니다.

"How many people do you make happy, with your one line of codes"


행복하세요.


image from: http://t.co/qJMJ7HtlnW

+ Recent posts