React
//
//

Reference

Search

1. 최상위(at the Top Level)에서만 Hook을 호출해야 합니다

•
Custom Hook에서 Hook을 호출하세요. (다음 페이지에서 이 부분을 살펴볼 예정입니다)
이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있습니다.
JS & Hooks 안티패턴
2022/03/29
icoa
icoa
2022/05/05 13:05
2022/03/29 02:48
읽고 정리했다.
1.
검색 가능한 이름을 쓴다. ( 상수화 )
2.
함수명을 반드시 동사로 써라 ( 한가지 동작에 대해 적는다. )
3.
함수 인자는 3개 이하로 한다. ( 이해하기 쉽게 )
4.
boolean 값을 인자로 전달하지 마라. ( if-else는 함수로 분리한다. )
5.
인자명에 축약어를 쓰지 마라.
우선 빠르게 코딩하고 나서 꼭 수정하도록 한다.
깨끗한 코딩 팁 정리
2022/03/18
icoa
icoa
2022/05/05 13:05
2022/03/18 10:45
how-to-become-a-great-frontend-engineer 번역 읽기
study
2021/10/23
icoa
icoa
2022/03/13 15:39
2022/01/11 16:12

3000번 포트가 사용중이라는 에러로 개발 모드 실행이 안되는 경우 아래의 명령어를 실행한다음 다시 해보면 된다.

검색해보면 여기서 사용하는 kill-port를 npm에서 Kill the process running on given port로 설명하는 것을 알 수 있다. 패키지를 설치하지 않고 실행하기 위해 npx로 한다.
port 3000 이 이미 사용중일 때, 브라우저 사용 종료하기, 다시 개발모드로 실행하는 방법, 포트 3000번 종료 When port 3000 is already in use, quit using the browser, how to run it in development mode again, close port 3000
npm
2021/01/30
icoa
icoa
2022/03/13 15:39
2022/03/13 15:39
Next.js 기반 프레임워크로 원칙을 다룬다.

Twelve-Factor app

한줄로 요약하면 독립적인 애플리케이션 운영을 위한 12가지 요소 다. 독립적인 은 사람, 시간, 환경 등 앱 운영시 영향을 받는 많은 것으로부터의 독립을 뜻한다.
12Factor는 BE, DevOps나 Cloud 영역에서 필수 원칙으로 알려져 있다. 충분히 검증되고 확실한 방법이다. 이 원칙대로 하면 자연스레 환경(IDC, OS 등)으로부터 독립된다. Cloud Native한 앱이 되니 쿠버나 AWS 어디든 올릴 수 있다. 또한 사람(개발자, 타팀 사람) 으로부터 독립되니 자연스레 개발과 운영이 분리되어 DevOps 도입이 수월해진다.
Spring Boot 방향성이 12Factor를 기반으로 발전해가니 자연스레 지켜지는 측면이 있다.
노드 서버로 서비스중이거나 Next.js의 API Routing, Middleware를 내보이고 있고 Node 서버에서 렌더링되는 컴포넌트를 출시했다. SSR 등 서버 영역을 도입하지 않은 팀은 몇 가지 원칙(6,7,8,9,12번)은 큰 의미가 없다. 나머지는 중요한 지침이 될 것이다.

1. 코드베이스

목표 : 버전 관리되는 하나의 코드베이스와 다양한 배포

사소해보이지만 가장 중요한 원칙이다. FT App의 기본이다. 이를 위반한 케이스 중 하나는 Monolithic이다.
일반적으로 서비스의 규모가 작을 땐 모놀리식으로 개발된다. UI 관련 코드도 같은 코드베이스에 있다. 서비스가 커져도 하나의 모놀리식을 유지하는 경우가 있다. 이 경우 하나의 코드베이스로 다양한 서비스를 배포하니 코드베이스 원칙 위반이다.
FE와 TF App
icoa
icoa
2022/08/22 23:21
2022/08/14 10:58
최근 sw를 서비스 형태로 제공하는 게 일반화되어 웹앱 or SaaS(sw as a service)라 부르게 되었다.
TF app은 아래 특징을 가진 SaaS 앱을 만들기 위한 방법론이다.
•
설정 자동화를 위한 절차(declarative)를 체계화하여 새로운 개발자가 프로젝트에 참여하는 데 드는 시간과 비용을 최소화한다.
•
OS 별 다른 부분을 명확히 하고, 실행 환경 사이의 이식성을 극대화한다.
•
클라우드 플랫폼 배포에 적합하고, 서버와 시스템의 관리가 필요없게 된다.
•
개발 환경과 운영 환경의 차이를 최소화하고 민첩성을 극대화하기 위해 지속적인 배포가 가능하다.
•
툴, 아키텍처, 개발 방식을 크게 바꾸지 않고 확장(Scale up)할 수 있다.

배경

이 문서 기여자들은 Heroku 플랫폼을 통해 방대한 앱 개발, 운영, 확장을 간접적으로 관찰했다.
시간이 지나면서 앱이 유기적으로 성장하는 부분, 앱 코드베이스에서 작업하는 개발자들 간의 협업, 시간이 지나면서 망가지는 소프트웨어 유지비용을 줄이는 법에 집중했다.
The Twelve-factor App
icoa
icoa
2022/08/14 10:58
2022/08/14 09:22

backend 서버를 나가면 서버가 멈춘다.

node가 foreground process로 동작해서 생기는 문제다. (터미널 끄면 같이 꺼짐 node app)

sudo su ← 루트로 넘어간다. 80(1023 아래.. 443 등에 접근할 권한이 필요하면)

백그라운드로 실행하는데 달러를 뒤에 붙이는 방식이 있으나 우리는 pm2가 기능이 좋아서 이걸 쓴다.
우분투로 80번 포트에 연결하므로 불가능하다. 루트만 접근 가능하므로 sudo npm start해야 한다.
pm2는 앱 로그를 찍어주고 서버가 죽으면 자동으로 되살려준다. npx pm2 logs npx pm2 logs —error
npx pm2 reload all
pm2 사용하기
icoa
icoa
2022/08/14 09:10
2022/08/13 14:05

인스턴스 생성 후 접속 → git clone → npm i를 하기 위한 노드 설치

front server이므로 front 폴더 내에서 node -v npm -v npm i

배포를 해야 하기 때문에 npm run build, npm run start를 한다.(npm run dev X)

http, https 80, 443, ssh 20 허용되어 있어서 ip 접속 가능(ip가 주기적으로 바뀜)

npm i npm run build npm run start가 반복되게 된다

ci/cd 툴 젠킨스 등을 사용한다.

sudo app-get, npm i… 서버 세팅을 계속 반복해야 된다.

도커를 사용한다. 명령어를 쭉 작성해놓으면 실행하면서 기존 서버와 똑같은 서버를 만들어준다.
DevOps
icoa
icoa
2022/08/13 14:05
2022/08/13 13:55
[markdown] 토글 안에 테이블 넣기, 테이블 내부 중앙 정렬 —- :-:
icoa
icoa
2022/05/05 13:06
2022/03/13 15:26
Monolithic (모놀리틱) 방식의 개발이라면 주문 서비스 로직과 선물하기 로직, 그리고 그 외 모든 로직이 하나의 프로젝트 안에서 다 구현되는 개념입니다.
Microservice Architecture (MSA) 방식의 개발이라면 주문 서비스 로직 프로젝트를 만들고,
선물하기 서비스 로직 프로젝트도 만들고,
이렇게 독립된 프로젝트를 만든 후에 서로간의 프로젝트가 메시지를 주고 받으면서, 유저에게 제공할 하나의 기능을 만들어내는 개념입니다.
MSA 방식은 각 프로젝트마다의 기능을 각자가 관리하기 때문에, 작은 단위로 개발과 운영을 빠르게 할 수 있습니다. 다만, 뭉칠수 있는 개념을 쪼개었기 때문에 그만큼 운영이 어려울 수도 있구요.
Monolithic와 MSA의 차이
icoa
icoa
2022/05/05 13:06
2022/03/13 15:26
옵션 을 줄 수 있는데 뒤에 --save  또는 -S를 하면 dependencies에(npm5부터는 --save옵션이 기본적으로 설정되어 있기 때문에 안 붙여도 됩니다), 
--save-dev 또는 -D 하면 devDependencies에 추가됩니다.
그리고 -g 를 하면 글로벌 패키지에 추가됩니다. 글로벌 패키지에 추가하면 이 프로젝트뿐만 아니라 다른 프로젝트도 해당 패키지를 사용할 수 있습니다.
npm install 옵션? -D -S
errorLens color
icoa
icoa
2022/05/05 13:05
2022/03/13 15:25
npm i --save-dev 옵션은 뭔가? 한글자로는 -D
vscode file → new window → liveshare → join → url 입력해서 들어가기
liveShare 쓰기
icoa
icoa
2022/03/13 15:41
2022/03/13 15:21
Nextjs API
웹 개발자를 위한 추천 웹사이트
icoa
icoa
2022/03/13 15:40
2022/03/13 15:20
네온
icoa
icoa
2022/03/13 15:41
2022/03/13 15:20