isms-p 대응을 하려면 프론트엔드에서 할 수 있는게 뭐가 있을까 ? ISMS-P 대응에서 프론트엔드는 **“개인정보를 어떻게 수집·전송·표시·보호하느냐”**를 중심으로 점검 대상이 된다. 서버·인프라가 주 영역이긴 하지만, 프론트에서도 명확히 해야 할 항목들이 있다.1. 개인정보 수집·처리 최소화입력 단계불필요한 입력 필드 제거예: 생년월일 전체 대신 연령대, 주민번호 입력 금지개인정보 필드 명확히 구분name, phone, email 등 식별 가능한 필드 정의상태 관리전역 상태(Redux, Zustand 등)에 개인정보 저장 최소화페이지 이동 시 자동 파기unmount 시 초기화모달/폼 닫을 때 값 reset2. 개인정보 노출 방지 (UI/UX)화면 표시마스킹 처리전화번호: 010-****-1234..
export const FLAG_OVERDUE_INVOICE_ENABLE = process.env.NEXT_PUBLIC_FLAG_OVERDUE_INVOICE_ENABLE === 'true' ? true : false동작 방식:환경변수 값에 따른 결과:NEXT_PUBLIC_FLAG_OVERDUE_INVOICE_ENABLE=true → FLAG_OVERDUE_INVOICE_ENABLE = trueNEXT_PUBLIC_FLAG_OVERDUE_INVOICE_ENABLE=false → FLAG_OVERDUE_INVOICE_ENABLE = false환경변수가 없거나 다른 값 → FLAG_OVERDUE_INVOICE_ENABLE = false if (FLAG_OVERDUE_INVOICE_ENABLE) { // t..
나 : 내가 여태 제시한 코드들을 보면 내 코드의 안 좋은 습관은 뭐야? 개선하려면 어떤 노력을 해야해 ? 네가 제시한 코드들을 분석해보니 몇 가지 공통적인 패턴들이 보여. 이런 습관들을 개선하면 코드 품질이 크게 향상될 거야.주요 안 좋은 습관들1. 하나의 함수/컴포넌트에서 너무 많은 일 처리 // 문제: onSubmit 함수가 100줄 넘게 여러 가지 일을 처리const onSubmit = async (formData) => { // 검증 로직 // 파일 업로드 로직 // API 호출 로직 // 에러 처리 로직 // 성공 처리 로직 // ...}2. 깊은 중첩 구조 선호 // 문제: if문 안에 if문, 그 안에 또 if문if (usePage === 'MembersTemplate..
프론트엔드 코드의 인지 복잡도(Cognitive Complexity)는코드를 이해하고 유지보수하는 데 필요한 정신적 노력의 정도를 측정하는 지표입니다.인지 복잡도란?인지 복잡도는 개발자가 코드를 읽고 이해하는 데 드는 정신적 부담을 수치화한 것입니다.순환 복잡도(Cyclomatic Complexity)와 달리, 실제 개발자가 느끼는 복잡성에 더 가깝게 측정됩니다.측정 기준복잡도를 증가시키는 요소들제어 구조: if, else, switch, for, while 등의 분기문과 반복문은 각각 +1점씩 추가됩니다.중첩 구조: 제어 구조가 중첩될 때마다 추가적인 복잡도가 발생합니다. 예를 들어, if문 안의 또 다른 if문은 더 높은 점수를 받습니다.논리 연산자: &&, || 같은 논리 연산자도 복잡도를 증가시킵..
https://nextjs.org/docs/app/guides/third-party-libraries#google-analytics 페이지를 번역 서드파티 라이브러리 가이드서드파티 라이브러리를 최적화하는 방법@next/third-parties@next/third-parties는 Next.js 애플리케이션에서 인기있는 서드파티 라이브러리를 로드할 때 성능과 개발자 경험을 개선하는 컴포넌트와 유틸리티 모음을 제공하는 라이브러리입니다.@next/third-parties가 제공하는 모든 서드파티 통합은 성능과 사용 편의성을 위해 최적화되어 있습니다.시작하기시작하려면 @next/third-parties 라이브러리를 설치하세요:npm install @next/third-parties@latest next@late..
1. TypeScript/JavaScript 프로젝트 설정tsconfig.json 또는 jsconfig.json에 baseUrl 설정: json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"], "@utils/*": ["src/utils/*"] } }}2. VS Code 설정settings.json에 다음 설정 추가: json{ // TypeScript "typescript.preferences.includePackageJsonAutoImports": "auto", "typescript.suggest.autoImpo..
설정 방법 1. 설정 파일 열기Ctrl + , (Windows/Linux) 또는 Cmd + , (Mac)으로 설정 열기또는 File > Preferences > Settings2. 자동 import 관련 설정들 json{ // TypeScript/JavaScript 자동 import "typescript.suggest.autoImports": true, "javascript.suggest.autoImports": true, // 저장 시 자동으로 import 정리 "editor.codeActionsOnSave": { "source.organizeImports": true, "source.addMissingImports": true }, // 자동 import 제안 표시 "..
보통 사용하지 않는 import문을 제거하는 기능을 넣는 포스팅은 많다.나는 반대로 사용하지 않는 Import를 제거하는걸 막고 싶다.인텔리제이 설정 부분 auto import 부분등에서 해제해도 여전히 주석만 하면 Import가 날아가 있었다. 설정이 더 필요했다. .eslintrc.cjs 설정 확인하기'unused-imports' 제거 하기 tsconfig.json 설정 확인하기 아래 두개 제거하기
Amazon ECR > 레파지토리 리포지토리 이름 클릭 푸시 명령 보기 클릭 . 복사 후 클라우드쉘로 이동ecr에 올려야 .. .아까 복사한 것 붙여넣기 . 레포지토리 이름을 아래처럼 정의해줘야 push할 수 있다. denied됨.. 이유 : 도커허브에 가입한적이 없고 web-site:v1.0을 만들지 않아서. 클라우드쉘로 이동docker image tag web-site:v1.0 public.ecr.aws/s1j7q6w2/web-site:v1.0 docker image push public.ecr.aws/s1j7q6w2/web-site:v1.0 push가 된다. 확인해보면 와 있음. ec2 docker container run -d -p 80:80 --name blu..
