React
/
/

Reference

Search
Reference

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
이력서 평가 후기 참고하기
2020 FrontEnd 개발자가 되기 위한 10가지 방법
requestIdleCallback으로 초기 렌더링 시간 14% 단축하기 요약
웹소켓
LocalStorage vs Cookis : All You Need To Know About Storing JWT Tokens Securely in The Front-End
양방향 통신
webpack
[번역] 탁월한 프론트엔드 엔지니어가 되는 법 읽기
port 3000 이 이미 사용중일 때, 브라우저 사용 종료하기, 다시 개발모드로 실행하는 방법, 포트 3000번 종료 When port 3000 is already in use, quit using the browser, how to run it in development mode again, close port 3001
gql
경로명이 숫자일 때, UTF-8 인코딩 문자열 한글로 변환해서 보기, "\353\221\220\354\240\225\353\240\254\353\246\254\354\212\244\355\212\270\354\235\230\353\263\221\355\225\251/”
Webpack 러닝 가이드 읽기
Loader style
LocalStorage vs Cookis : All You Need To Know About Storing JWT Tokens Securely in The Front-End
양방향 통신
webpack
[번역] 탁월한 프론트엔드 엔지니어가 되는 법 읽기
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
자동완성 :
JS : 자동 완성 구현
자동 완성이 어떻게 작동하는지 항상 궁금한 적이 있습니까? 기계 학습과 백엔드에서 발생하는 모든 작업으로 인해 실제로는 매우 복잡합니다. 😛 그래서 저는 약 102k 단어의 영어 단어 사전을 검색하는 꽤 유사한 작업 프로토 타입을 만들기로 결정했습니다 (왜냐하면 내가 찾을 수있는 전부이기 때문입니다 😥).
https://ichi.pro/ko/js-jadong-wanseong-guhyeon-269129727983625
정규표현식
정규표현식
정규표현식(Regular Expression)이란 컴퓨터 프로그래밍 언어의 일종으로 특정 형태(pattern; 패턴)의 데이터를 일괄적으로 찾거나 변경, 치환하기 위해 사용하는 형식언어이다. 정규식이라고도 하며, 영어로는 RegEx 혹은 RegExp로 줄여서 말하기도 한다.
https://librewiki.net/wiki/%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D
순열과 조합
Crocus
백트래킹을 이용하여 다양한 문제를 구현해보자. 모든 문제는 백준 문제를 이용하여 문제를 적용하고 풀어보려 한다. 1. 순열(nPr) N과 M(1) :: https://www.acmicpc.net/problem/15649 순열은 아래와 같이 코딩..
https://www.crocus.co.kr/1240
Logging
Logger | UIKit React SDK | Sendbird Docs
New Docs for the latest UIKit v3 for React is now available. Go to v3 Sendbird UIKit for React offers a logging system that allows you to keep track of a number of events and activities including data flow, error, and information while running your application.
https://sendbird.com/docs/uikit/v2/react/guides/logger
네이버 클라우드 플랫폼 공공기관용
공공기관용 클라우드 컴퓨팅 서비스, CSAP 등 정보보호인증 및 글로벌 수준의 보안 기술 보유
https://www.gov-ncloud.com/product/management/cloudLogAnalytics
hdhdeveloper
NCP (네이버 클라우드 플랫폼)에는 서버 로그를 효율적으로 관리해주는 서비스가 존재한다 서버 로그를 지속적으로 서버에 저장하다보면 서버 메모리 및 용량에 과부하가 걸려 이슈가 발생할 수 있다 그래서 로그를 주기적으로 지움과 동시에 NCP에서 로그를 통합 관리할 수 있도록 도움을 준다 그게 바로 Cloud Log Analytics 이다 이번 포스팅에서는, NCP CLA 사용법에 대해
https://hdhdeveloper.tistory.com/98
Logging from react to aws cloudwatch
I have a react and node application hosted on aws ec2. I have cloudwatch running as well and it gets all the logs from the node app. I'm trying to also get the logs from the react application to sh...
https://stackoverflow.com/questions/70864841/logging-from-react-to-aws-cloudwatch
로그파일
효율적으로 웹서버를 관리하려면 발생하는 문제와 함께 서버의 활동과 성능에 대해 알아야 한다. 아파치 웹서버는 매우 종합적이고 유연한 로그 기능을 제공한다. 이 문서는 로그 기능을 설정하는 방법과 로그에 들어갈 내용을 설명한다. 누군가에게 아파치의 로그파일이 있는 디렉토리에 쓰기권한이 있다면 (보통 root) 서버를 실행하는 uid를 거의 확실히 얻을 수 있다.
https://httpd.apache.org/docs/2.4/ko/logs.html
Optimization
Lighthouse로 Next.js 프로젝트 성능 개선하기
라이트하우스는 웹앱 품질 측정도구이다. 웹앱의 성능, 접근성, SEO 등을 검사해주고, PWA 조건을 만족하는지도 검사해준다. 크롬 확장 프로그램 으로 다운받아서 사용할 수 있고, 혹은 크롬 개발자 도구에서 Lighthouse 탭으로 들어가 사용할 수도 있다. 라이트하우스로 개발하고 있는 웹 프로젝트의 성능을 개선해 보기로 했다. 배포 환경에서 성능을 측정한 결과, 노란 불이 세 개나 켜졌다.
https://velog.io/@ooooorobo/Lighthouse%EB%A1%9C-Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0%ED%95%98%EA%B8%B0
Internationalization (i18n)
Internationalization (i18n) in NextJS apps using next-intl
https://www.youtube.com/watch?v=uDXyk1ZgLK0
Next.js로 다국어로 대응하는 사이트를 만드는 것은 너무 간단하다
이전에 취미로 블로그 RSS에 등록해 블로그의 투고율을 GiitHub 풀과 같은 히트맵으로 다른 사용자와 경쟁 지속률을 나타낼 수 있는 서비스 Blog Friends를 개발했다.이번 서비스 ProductHunt를 (해외에서 직접 제작한 웹 서비스와 애플리케이션을 게시할 수 있는 사이트)에 제출하고 싶어서 영어로 했습니다.일본어 사이트 여기 있어요. 영어 사이트는 여기 있습니다. ProductHunt에 제출한 결과는 다음과 같다.
https://intrepidgeeks.com/tutorial/next-its-too-easy-to-create-a-multilingual-website-with-js
The complete guide to internationalization in Next.js
The complete guide to internationalization in Next.js - LogRocket Blog
Translating web applications into multiple languages is a common requirement. In the past, creating multilingual applications was not an easy task, but recently (thanks to the people behind the Next.js framework and Lingui.js library) this task has gotten a lot easier. In this post, I'm going to show you how to build internationalized applications with the previously mentioned tools.
https://blog.logrocket.com/complete-guide-internationalization-nextjs/
React i18n 다국어 지원하기
웹서비스를 하면서 다국어를 지원해야 하는 경우가 있다. 접속하는 국가 또는 지역에 따라서 다른 언어가 자동으로 지원되거나, 웹사이트에서 내에서 언어를 변경하는 기능이 제공 되기도 한다. 다국어를 지원하는 방식은 사용자 접속 IP를 확인해서 초기 언어값을 세팅하는 방법, 사용자의 브라우저에서 지원하는 언어 값을 가져와서 세팅하는 방법, 웹사이트 내에서 언어...
https://jinminkim-50502.medium.com/react-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-i18n-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%A7%80%EC%9B%90%ED%95%98%EA%B8%B0-a92bd5539e1d

Reactjs docs for korean

Made with