한 해를 마무리하며 돌아보니, 2024년은 제 개발자 커리어에서 가장 극적인 변화와 성장이 있었던 해였습니다. 작은 지방 도시에서 시작해 대한민국 IT의 중심지인 판교까지, 이 여정은 단순한 물리적 이동을 넘어 제 개발자로서의 정체성을 완전히 새롭게 정의한 시간이었습니다.

시니어 개발자의 갑작스러운 퇴사는 큰 위기였지만, 이를 통해 주니어 개발자들과 함께 문제를 해결해나가는 과정에서 오히려 더 큰 성장을 이뤘습니다. 동료들과의 적극적인 소통과 협업을 통해 문제해결 능력이 크게 향상되었고, 주도적으로 프로젝트를 이끌어가는 리더십도 배웠습니다.

문제해결 능력의 향상

이 과정에서 자연스럽게 프로젝트 리더십을 경험하게 되었고, 기술적 의사결정과 팀 관리 능력을 동시에 키울 수 있었습니다. 특히 주니어 개발자들과 함께 성장하는 과정에서, 각자의 잠재력을 끌어내고 시너지를 만들어내는 방법을 배웠습니다.

지역 이동을 통한 환경의 변화

사천에서의 시작

경남 사천시에서의 1년은 개발자로서의 기초를 다지는 소중한 시간이었습니다. 작은 환경이었지만, 오히려 그렇기에 시스템 전반을 깊이 이해할 수 있었고, 다양한 역할을 경험하며 폭넓은 시야를 갖출 수 있었습니다.

판교로의 도약

전문성 인정과 성과

다수 기업으로부터의 러브콜

2024년의 가장 큰 성과 중 하나는 3개 기업으로부터 동시에 오퍼를 받은 것입니다. 이는 제 기술력과 경험이 시장에서 인정받았다는 증거였으며, 개발자로서의 자신감을 크게 높여준 계기가 되었습니다.

1. 신사업팀에서의 도전
2. 새로운 도메인 설계와 구현 주도
3. 팀 리더십 경험 축적
4. 지식 공유와 성장의 선순환

멘토링 활동의 의미

무료 멘토링 활동은 제게 특별한 의미가 있었습니다. 주니어 개발자들과 지식을 나누면서, 오히려 제가 더 많이 배우고 성장할 수 있었습니다. 멘토링을 통해 얻은 주요 인사이트는 다음과 같습니다

기술적 성장의 기록

새롭게 습득한 기술스택

1. 분산 시스템 설계
2. 프로젝트 관리 능력 향상
3. 애자일 방법론 실전 적용
4. 팀 커뮤니케이션 스킬 향상
5. 프로젝트 위험 관리 능력 배양

3D 모델 최적화와 웹 성능 개선

Three.js 성능 최적화

2024년의 주요 성과 중 하나는 3D 모델의 최적화와 웹 성능 개선이었습니다. 200MB의 대용량 3D 모델을 품질 저하 없이 120MB로 압축하는데 성공했으며, 이는 웹 성능에 큰 영향을 미쳤습니다.

주요 최적화 전략

1. 3D 모델 텍스처 압축 및 최적화
2. 메쉬 폴리곤 수 최적화
3. 불필요한 디테일 제거
4. 텍스처 해상도 조정
5. 메모리 누수 방지 전략
6. 이벤트 리스너 관리 및 컴포넌트 언마운트 시 이벤트 리스너 정리
7. WeakMap과 WeakSet을 활용한 참조 관리
8. 메모리 모니터링 도구를 통한 주기적인 검사
9. 리소스 최적화
10. 동적 임포트를 통한 코드 스플리팅
11. 캐싱 전략 구현
12. 불필요한 리소스 지연 로딩
13. 웹 성능 안정성 향상 LCP(Largest Contentful Paint) 최적화 FID(First Input Delay) 개선 CLS(Cumulative Layout Shift) 최소화

이러한 최적화 작업을 통해 사용자 경험을 크게 개선했으며, 특히 모바일 환경에서의 성능이 눈에 띄게 향상되었습니다. 이는 제가 2024년에 이룬 중요한 기술적 성과 중 하나입니다.

2025년을 향한 구체적 목표

기술적 목표

신기술 학습 및 적용 (AI - RAG) 오픈소스 프로젝트 기여 컨퍼런스 발표자 참여 (꿈) 개인 성장 목표 체계적인 멘토링 프로그램 개발 개발자 커뮤니티 리더십 강화

마무리하며

2024년은 제게 '도전'과 '성장'의 해였습니다. 지방에서 수도권으로의 이동, 3개 기업의 오퍼, 신사업팀에서의 리더십 경험, 그리고 멘토링 활동을 통한 지식 공유까지, 모든 경험이 제 개발자 커리어의 터닝포인트가 되었습니다.

2025년에는 이러한 경험을 바탕으로, 더 높은 목표를 향해 나아가고자 합니다. 단순한 기술적 성장을 넘어, 개발자 커뮤니티에 더 많은 기여를 하고, 후배 개발자들의 성장을 돕는 진정한 시니어 개발자로 성장하고자 합니다. 이 모든 경험이 제 개발자 인생에서 중요한 이정표가 되리라 확신합니다.

안녕하세요, 비전공자 출신 프론트엔드 개발자입니다. 오늘은 제가 2년 동안 겪은 도전과 성장, 그리고 이직 성공 스토리를 여러분과 나누고자 합니다. 시작은 미약하였으나... 2년 전, 저는 개발과는 전혀 관련 없는 일을 하고 있었습니다. 하지만 IT 분야에 대한 열정과 호기심으로 새로운 도전을 결심했죠. 스파르타코딩클럽에서 처음 코딩의 재미를 알게 되었고, 이는 제 인생의 전환점이 되었습니다.

끊임없는 노력의 일상

처음에는 최저시급을 받으며 시작했지만, 포기하지 않고 계속해서 공부했습니다. 매일 퇴근 후에는 2-3시간씩 개발 공부에 매진했습니다. 주말에도 쉬지 않고 코딩 연습과 프로젝트 작업을 했죠. 이런 노력이 쌓여 점점 실력이 향상되는 것을 느낄 수 있었습니다.

개발자 컨퍼런스: 지식의 보고

기회가 될 때마다 개발자 컨퍼런스에 참석했습니다. 처음에는 낯설고 어려웠지만, 점점 더 많은 것을 이해하고 배울 수 있었습니다. 이를 통해 최신 기술 트렌드를 익히고, 제가 가진 잘못된 지식을 바로잡을 수 있었습니다. 특히 다른 개발자들의 경험담을 듣는 것이 큰 도움이 되었습니다.

문제 해결력의 향상

기초를 튼튼히 다지면서 문제 해결력도 기르게 되었습니다. 단순히 개발에만 집중하는 것이 아니라, 넓은 범위에서 문제를 판단하고 해결하는 경험이 가장 좋았습니다. 다양한 프로젝트와 실무 경험을 통해 복잡한 문제를 분석하고 해결하는 방법을 배웠습니다. 이러한 경험은 개발자로서의 자신감을 키워주었고, 새로운 환경에서도 도전에 대한 두려움 없이 임할 수 있게 해주었습니다.

프론트엔드 개발의 매력에 빠지다

프론트엔드 개발은 사용자와 직접 맞닿아 있는 부분을 다루기 때문에 매우 흥미로웠습니다. 사용자 경험을 개선하고, 시각적으로 아름다운 인터페이스를 만드는 과정이 저에게는 큰 즐거움이었습니다.

새로운 기회, 그리고 도약

2년간의 노력 끝에 드디어 좋은 기회가 찾아왔습니다. 실력을 인정받아 연봉 상승과 함께 새로운 회사로 이직하게 되었죠. 특히 시니어 개발자들과 함께 일할 수 있는 환경으로 옮기게 되어 매우 기쁩니다. 이제는 더 큰 규모의 프로젝트에 참여하고, 복잡한 문제를 해결하는 과정에서 많은 것을 배우고 있습니다.

추천 도서로 더 깊이 있는 학습

개발 실력 향상을 위해 꾸준히 책을 읽었습니다. 특히 추천하고 싶은 책은 "우아한 타입스크립트"와 "Do it! 모던 자바스크립트"입니다.

"우아한 타입스크립트"

이 책은 실무에서 타입스크립트를 어떻게 활용하는지 상세히 다루고 있어, 실제 프로젝트에 바로 적용할 수 있는 지식을 얻을 수 있었습니다.

"Do it! 모던 자바스크립트"

자바스크립트의 기초부터 최신 문법까지 체계적으로 배울 수 있어, 기본기를 다지는 데 큰 도움이 되었습니다.

비전공자를 위한 조언

포기하지 마세요: 처음에는 어렵고 힘들 수 있지만, 꾸준히 노력하면 반드시 결과가 따라옵니다.

실무 프로젝트에 참여하세요: 이론만으로는 부족합니다. 실제 프로젝트를 통해 경험을 쌓는 것이 중요합니다.

커뮤니티에 참여하세요: 다른 개발자들과 교류하며 새로운 정보와 인사이트를 얻을 수 있습니다.

최신 트렌드: 기술의 변화가 빠른 만큼, 항상 새로운 것을 배우려는 자세가 필요합니다. 하지만 무지성으로 따라가지마세요. 프로젝트마다 필요한 개발 기술이 있고 왜 필요한지 항상 꼼꼼하게 따지고 최신 기술을 적용하셨으면 좋겠습니다.

기초를 탄탄히 하세요: 프레임워크나 라이브러리도 중요하지만, 언어의 기본기를 잘 다지는 것이 장기적으로 더 중요합니다. 마치며 지금도 여전히 공부하고 있고, 새로운 것을 배우는 즐거움에 푹 빠져 있습니다. 이 글을 읽는 모든 비전공자 분들께 말씀드리고 싶습니다.

열심히 노력하면 반드시 좋은 기회가 찾아옵니다. 개발의 세계는 넓고 깊지만, 그만큼 보람차고 흥미진진합니다. 여러분의 도전을 응원합니다!

#스파르타코딩클럽 #비전공자 #프론트엔드 #개발자이직 #프론트엔드개발 #코딩부트캠프

기술 세션

여러 주제의 발표가 있었으며, 특히 '책임 분리 마법: 깔끔한 폴더 구조 만들기'라는 세션이 인상 깊었습니다. 이 세션에서는 코드 관리의 중요성과 효율적인 폴더 구조에 대한 유용한 팁을 배울 수 있었습니다.

네트워킹

현직 개발자 200명과의 만남을 통해 다양한 경험과 인사이트를 공유할 수 있어서 좋은 경험이였습니다.

AI와 자동화를 통한 개발자 성장

이동욱 CTO님의 세션에서는 개발자의 빠른 이직 주기에 대응하는 인프랩의 전략을 배웠습니다.

특히 주목할 만한 점

개발자의 평균 이직 주기가 2~3년으로 짧아졌다는 것 회사 적응 기간을 1년에서 더 단축시키려는 노력 AI와 자동화를 활용해 주니어 개발자의 성장을 가속화하는 방법 이러한 접근 방식은 제가 미처 생각하지 못했던 부분으로, 회사의 인재 육성 전략에 대해 새로운 시각을 갖게 해주었습니다.

테오님의 "책임 분리의 마법: 깔끔한 폴더 구조 만들기" 세션

단순한 기술적 팁을 넘어 코드 구조화의 철학을 전달해 주셨습니다.

특히 인상 깊었던 점

1. 컴포넌트 레이어의 도입 기존의 MVC 구조를 넘어, 컴포넌트 레이어를 추가함으로써 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있다는 점을 배웠습니다. 2. 책임 분리의 중요성 각 폴더와 파일이 명확한 책임을 가져야 한다는 원칙은, 코드의 가독성과 협업 효율성을 높이는 데 큰 도움이 될 것 같습니다. 3. 실제 적용 사례 테오님께서 실제 프로젝트에서 이러한 구조를 적용하여 얻은 이점과 극복한 어려움을 공유해 주셔서, 이론과 실제의 간극을 이해하는 데 도움이 되었습니다.

테오님의 발표는 단순히 기술적인 내용을 전달하는 데 그치지 않고, 개발자로서의 철학과 고민을 함께 나누어 주셔서 깊은 감명을 받았습니다. 이를 통해 코드 구조화에 대한 새로운 관점을 갖게 되었고, 앞으로의 프로젝트에 적용해 볼 수 있는 구체적인 방법론을 얻을 수 있었습니다.

이번 DEV LAB 참여를 통해, 기술적 지식뿐만 아니라 개발 문화와 철학에 대해서도 많은 것을 배울 수 있었습니다. 특히 테오님의 세션은 제 개발 방식에 큰 변화를 줄 것 같습니다. 앞으로도 이러한 기회를 통해 지속적으로 성장하고 싶습니다.

정의

1. 기업의 모든 영역에 적용하여 근본적으로 비즈니스 성과를 향상시키는 전략으로 탄생
2. 디지털 전환

   목적

3. 생산 효율성 향상
4. 새로운 고객 경험 제공
5. 새로운 비즈니스 모델 발굴

   기술

6. IoT와 IIoT(산업용 사물인터넷)
7. 5G 통신
8. 클라우드 컴퓨팅
9. 빅데이터 분석
10. 인공지능(AI)

    스마트팩토리와의 관계

    제조업에서는 스마트팩토리 구축 과정을 디지털 전환의 일환으로 인식합니다. 스마트팩토리는 제조업에서의 DX 실현 방법 중 하나로 볼 수 있습니다. DX가 기업 전체의 디지털 혁신을 의미한다면, 스마트팩토리는 그 중 제조 영역에 특화된 개념이라고 할 수 있습니다.

    SAP ( Systems, Applications, and Products in Data Processing )

    

정의

기업용 소프트웨어를 개발하는 독일 기업의 이름이자 그 회사에서 개발한 전사적 자원관리(ERP) 시스템을 지칭합니다. 다시 말해 기업의 모든 업무 프로세스를 통합적으로 관리하는 소프트웨어 시스템입니다.

• ERP (Enterprise Resource Planning): 기업의 모든 자원을 통합적으로 관리하는 시스템 개념입니다. 그래서 기업 자원 관리를 위한 일반적인 개념입니다.
• SAP: ERP 시스템을 제공하는 독일 기업의 이름이자 그 회사의 ERP 소프트웨어 제품명입니다. 그래서 ERP의 한 종류로, SAP SE 회사에서 개발한 특정 ERP 소프트웨어입니다.

특징

1. 실시간 데이터 처리: 모든 정보가 즉시 업데이트되어 공유됩니다.
2. 모듈식 구조: 기업의 필요에 따라 필요한 모듈만 선택적으로 도입할 수 있습니다.
3. 글로벌 표준: 전 세계적으로 사용되는 비즈니스 프로세스 표준을 반영합니다.

   FI (Finance): 재무회계 CO (Controlling): 관리회계 MM (Materials Management): 자재관리 SD (Sales and Distribution): 영업 및 유통 PP (Production Planning): 생산계획 HR (Human Resources): 인사관리

4. 업무 효율성 향상: 중복 업무 제거, 데이터 일관성 유지
5. 의사결정 지원: 실시간 데이터 분석을 통한 신속한 의사결정
6. 글로벌 비즈니스 지원: 다국어, 다통화 지원

   도입과정

   기업 분석 → 시스템 설계 → 구현 → 테스트 → 사용자 교육 → 실제 운영

   정리

   SAP는 기업의 디지털 전환(DX)을 위한 핵심 도구로 활용되며, 기업의 전반적인 운영 효율성을 높이고 경쟁력을 강화하는 데 중요한 역할을 합니다.

무선 프로토콜

종류

1. MQTT ( Message Queuing Telemetry Transport )

• 특징

  • 경량화된 발행-구독 메시징 프로토콜
  • IoT 장치 간 통신에 적합, 낮은 대역폭 환경에서도 효율적
  • TLS 암호화와 OAuth 등의 인증 프로토콜을 지원

• 원리 발행자(Publisher)가 특정 주제(Topic)로 메시지를 발행 > 독자(Subscriber)가 관심 있는 주제를 구독 > MQTT 브로커가 발행된 메시지를 해당 주제의 구독자들에게 전달

2. OPC UA ( Open Platform Communications Unified Architecture )

• 특징

  1. 산업 자동화를 위한 머신 간 통신 프로토콜
  2. 플랫폼 독립적이며 보안 기능이 강화되어 있습니다.
  3. 기존 OPC(OPC Classic)의 후속 버전
  4. 데이터 모델링: 복잡한 시스템과 프로세스를 상세히 모델링
  5. 보안: 강력한 인증, 암호화, 데이터 무결성 검사를 제공
  6. 확장성: 단순한 장치부터 복잡한 시스템까지 다양한 규모의 애플리케이션에 적용 가능 및 SCADA시스템과의 통합을 용이하게 합니다.
  7. 서비스 지향 아키텍처: 다양한 서비스를 제공하여 유연한 시스템 구축이 가능
  8. 단순한 모델에서 복잡한 모델로 확장 가능한 구조
  9. 통합 아키텍처 : DA(Data Access), HDA(Historical Data Access), A&E(Alarms & Events) 등 기존 OPC의 여러 사양을 통합

• 방식 : 클라이언트-서버 모델을 기반, 서버는 데이터 모델과 서비스를 제공, 클라이언트는 서버에 연결하여 데이터를 읽거나 쓰고, 메소드를 호출

  3. MQTT와 OPC UA의 비교

• *- 통신 모델
• *MQTT: 발행-구독 모델 vs OPC UA: 클라이언트-서버 모델 (발행-구독도 지원)

*- 데이터 모델 *MQTT: 단순한 주제 기반 구조 vs OPC UA: 복잡한 객체 지향 데이터 모델

*- 적합도 *MQTT: 주로 경량 IoT 장치와 센서 네트워크 vs OPC UA: 복잡한 산업 자동화 시스템과 프로세스 제어

*- 확장성 *MQTT: 대규모 IoT 네트워크에 적합 vs OPC UA: 복잡한 산업 시스템에 더 적합

*- 보안 *MQTT: 기본적인 보안 기능 제공 vs OPC UA: 더 강력하고 포괄적인 보안 기능 제공

*- 복잡성 *MQTT: 상대적으로 단순하고 구현이 쉬움 vs OPC UA: 더 복잡하지만 기능이 풍부함

4. 정리

OPC UA의 표준화된 통신 프로토콜과 데이터 모델을 통하여 SCADA 시스템의 장점인 다양한 산업 장비와 시스템으로부터 데이터를 쉽게 수집하고 제어할 수 있습니다. 이는 공장 자동화, 에너지 관리, 빌딩 자동화 등 다양한 분야에서 SCADA 시스템의 효율성과 유연성을 크게 향상시킵니다.

5. OPC UA와 Akpache Kafka 함께하는 구조

Apache Kafka이란?

• 여러 서버에 걸쳐 데이터를 분산 저장하고 처리

• 실시간 대량의 데이터를 실시간으로 수집, 저장, 처리

• 데이터 생산자(Producer)와 소비자(Consumer) 간의 중개 역할

• 디스크에 데이터를 저장하여 장기간 보존

• 하루에 수조 건의 메시지를 처리

• 다양한 데이터 소스와 목적지 간의 데이터 이동을 지원

• 데이터 손실 방지와 순서 보장

• 정리

  Apache Kafka는 대규모 데이터를 실시간으로 처리해야 하는 현대적인 데이터 아키텍처에서 중요한 역할을 하는 강력한 도구입니다.

Apache Kafka의 역할

• Kafka는 OPC UA와 함께 사용되어 데이터 처리와 분배를 담당
• 데이터 수집: OPC UA를 통해 수집된 제조 설비의 데이터를 Kafka로 전송
• 실시간 스트리밍: 대용량의 센서 데이터와 생산 데이터를 실시간으로 처리
• 데이터 버퍼링: 네트워크 불안정이나 시스템 장애 시 데이터 손실 방지
• 데이터 분배: 수집된 데이터를 다양한 분석 시스템, 모니터링 도구, 저장소 등으로 분배
• 확장성 제공: 데이터 처리량 증가에 따른 수평적 확장 지원

  통합 아키텍처 절차

  OPC UA 서버가 제조 설비로부터 데이터를 수집 OPC UA 클라이언트가 서버로부터 데이터를 읽어 Kafka 프로듀서로 전송 Kafka가 데이터를 토픽별로 저장하고 관리 다양한 Kafka 컨슈머가 필요한 데이터를 실시간으로 소비하여 처리

LLM

• Large Language Model : 대규모 언어 모델

  LLM의 스마트팩토리 적용

  1. 데이터 통합 및 해석

  LLM은 다양한 형식의 데이터를 텍스트로 변환하고 해석할 수 있습니다. 센서 데이터, 생산 로그, 품질 보고서 등을 통합하여 의미 있는 인사이트를 추출합니다

  2. 자연어 인터페이스

  복잡한 공장 시스템을 음성 명령으로 제어할 수 있게 합니다. 예를 들어, "오후 2시 A설비 이상 떨림"이라고 말하면 이상 신호가 기록되고, "최근 발생한 이상 떨림과 조치법 알려줘"라는 질문에 대해 관련 정보를 제공합니다.

  3. 지식 기반 구축

  공장 운영 매뉴얼, 과거 문제 해결 사례, 전문가 지식 등을 LLM에 학습시켜 종합적인 지식 기반을 구축합니다. 이를 통해 복잡한 문제에 대한 해결책을 제시할 수 있습니다.

  4. 예측 분석 및 최적화

  LLM은 과거 데이터 패턴을 학습하여 미래 상황을 예측하고, 최적의 운영 방안을 제안할 수 있습니다. 이는 생산성 향상과 비용 절감으로 이어집니다.

  5. 다중 모달 학습

  최신 LLM은 텍스트뿐만 아니라 이미지, 음성 등 다양한 형태의 입력을 처리할 수 있습니다. 이를 통해 공장 환경의 복잡한 데이터를 종합적으로 분석할 수 있습니다.

  6. 실시간 의사결정 지원

  LLM은 실시간으로 유입되는 데이터를 분석하여 즉각적인 의사결정을 지원합니다. 예를 들어, 생산라인의 병목현상이나 품질 이상을 실시간으로 감지하고 해결책을 제시할 수 있습니다.

  스마트팩토리와 LLM의 관계

• LLM은 방대한 양의 데이터를 분석하고 이해하여 공장 운영과 관련된 복잡한 문제들에 대한 해결책을 제시합니다.
• 작업 지시, 기계 간 통신, 이상 상태 감지 등을 자동으로 처리 한다. 이로 인해 공장의 자동화 수준을 한층 더 높이고 인간의 개입을 최소화합니다.
• 공정의 비효율성을 식별하고 개선점을 찾아낸다. 이를 통해 공장 운영에 효율성을 지속적으로 개선할 수 있습니다.
• 생산 공정을 신속하게 조정하고 다양한 제품에 대응할 수 있는 유연한 생산 시스템을 구축할 수 있다.
• 생성형 AI는 복잡한 시스템 구축 없이도 자연어 입력만으로 다양한 자동화 작업을 수행할수 있다. 그리고 이것은 RPA(Robotic Process Automation)를 넘어선 초 자동화를 가능하게 한다.
• 방대한 데이터를 분석하고 패턴을 파악하여 예측 유지보수, 품질관리, 수요예측등에 활용될 수 있다.

RPA(Robotic Process Automation) 소프트웨어 로봇을 사용하여 반복적이고 규칙 기반의 업무 프로세스를 자동화하는 기술 RPA는 미리 정의된 규칙에 따라 작동하는 반면, AI는 데이터 기반으로 학습하고 의사결정

LLM과 AI

• Large Language Model vs Artifical Intelligence
• 차이점

1. LLM은 AI의 한 분야인 자연어 처리에 특화된 모델 AI는 기계가 인간의 지능을 모방하는 광범위한 분야

2. LLM은 텍스트 이해와 생성에 초점을 맞춘 기능 AI는 주로 학습, 추론, 문제 해결 등 다양한 인지 기능을 포함

3. LLM은 텍스트에 대한 이해가 높기 때문에 주로 텍스트 기반 작업에 사용 AI는 컴퓨터 비전, 로봇공학, 음성인식 등 다양한 분야에 적용

4. LLM은 대규모의 텍스트 데이터를 필요 AI는 텍스트 이외 대규모 데이터를 필요

5. LLM은 주로 트랜스포머 아키텍처 기반 AI는 알고리즘과 아키텍처 기반

   Transformer 아키텍처

• 정의 : 구글이 자연어 처리를 위해 발표한 딥러닝 모델
• 장점 : 병렬 처리 능력과 장거리 의존성 포착능력(시퀀스 내의 멀리 떨어진 요소들 사이의 관계를 효과적으로 파악)
• 구조
• 1. Encoder-Decoder*
  • 입력 문장을 이해하는 인코더
  • 출력 문장을 이해하는 디코더

2. Multi-Head attention

• 어텐션 연산을 병렬적으로 처리하여 효율성을 높임
• 어텐션 연산의 개념
  • 주어진 쿼리(query)에 대해 키(key)와 값(value)의 집합을 사용하여 출력을 계산하는 과정

3. Positional attention

• 단어의 위치 정보를 모델에 제공

4. Feed-Forward attention -각각의 attention층에 다음에 위치하여 추가적인 특징을 추출을 수행

5. 레이어 정규화와 잔차 연결

• 모델의 안정성과 학습 효율성을 높입니다.
• 잔차 연결은 층의 입력을 그 층의 출력에 직접 더하는 기법입니다.

유전 알고리즘

• 정의 : 자연계의 진화 체계를 모방한 메타휴리스틱 알고리즘
• 진화 원리 적용: 찰스 다윈의 "적자생존" 이론을 기반
• 최적화 도구: 복잡한 문제에 대한 최적의 해결책을 찾는 데 사용
• 순서도
• 초기 집단 생성* (가능한 해결책들의 집단을 생성 ) > 적합도 평가 (각 해결책의 품질을 평가) > 선택 (더 나은 해결책을 선택) > 교차 (선택된 해결책들을 조합하여 새로운 해결책을 만듦) > 돌연변이 (일부 해결책에 무작위 변화를 준다.) > 반복 (여러 세대에 걸쳐 반복)
• 복잡한 문제에 대한 최적의 해결책을 도출

핵심 구성 요소

1. CPS ( Cyber Physical System )

• 정의 : 물리적 세계와 가상의 컴퓨팅 세계를 연결하는 시스템
• 원리 : 센서를 통해 물리적 환경에서 데이터 수집 > 수집된 데이터를 사이버 공간에서 분석 및 처리 > 분석 결과를 바탕으로 물리적 시스템을 제어
• 장점

  실시간 모니터링 및 제어 기능 예측 및 최적화를 통한 효율성 향상 자율적인 의사결정 및 조치 가능

2.빅데이터 및 데이터 관리

대량의 제조 데이터를 효율적으로 저장, 처리, 분석하기 위한 시스템

• 주요 기술

  클러스터링: 유사한 데이터를 그룹화 복제: 데이터의 가용성과 견고성 향상 인덱싱: 데이터 검색 효율성 개선

3. 사물인터넷 (IoT)

공장 내 설비와 기계에 센서를 부착하여 데이터를 수집하고 네트워크로 연결합니다.

4. 클라우드 컴퓨팅

수집된 데이터를 저장하고 처리하는 인프라를 제공합니다.

5. 인공지능 (AI) 및 머신러닝

수집된 데이터를 분석하여 예측 및 최적화를 수행합니다.

구조

• 필드 레벨 : 센서, 액추에이터, 기계 등 물리적 장비

• 제어 레벨: PLC, DCS, SCADA 등 제어 시스템
• 운영 레벨: MES 등 생산 관리 시스템
• 비즈니스 레벨: ERP, SCM 등 기업 자원 관리 시스템

1. PLC ( Programming Logic Controller )

• 정의 : 산업용 제어 시스템

• 원리 : 입력장치로부터 신호 수신 > 프로그래밍된 로직에 따라 신호처리 > 출력 장치로 제어 신호 전송

• 장점 : 견고하고 신뢰성이 높은 하드웨어, 실시간 제어 기능

  2. DCS ( Distributed Control System )

• 정의 : 여러 제어 요소가 분산되어 있는 대규모 공정 제어 시스템

• 원리 : 각 제어 요소가 독립적으로 작동 > 중앙 운영자 스테이션으로 전체 시스템 모니터링 및 조정 > 네트워크를 통해 제어 요소 간 통신

• 장점 : 시스템 안정성 향상 (부분 적으로 고장이 전체에 영향을 미치지 않음), 유연한 확장성, 중앙 집중식 모니터링 및 제어 가능

  3. SCADA ( Supervisory Control and Data Acquisition )

• 정의 : 산업 프로세스, 장비, 인프라를 원격으로 모니터링하고 제어하는 데 사용되는 컴퓨터 기반 시스템

• 역할 : 복잡한 산업 프로세스를 효율적으로 관리하고 제어

• 구성 요소

  센서와 액추에이터 원격 단말 장치(RTU) 또는 프로그래머블 로직 컨트롤러(PLC) SCADA 중앙 컴퓨터 시스템 인간-기계 인터페이스(HMI) 통신 인프라

• 기능

  데이터 수집 및 처리 원격 모니터링 및 제어 알람 및 이벤트 처리 데이터 저장 및 보고

• 장점

  실시간 모니터링 및 제어 효율성 향상 비용 절감 안전성 개선

• SCADA 시스템은 다양한 산업 분야에서 중요한 역할을 하고 있습니다.

• 활용 사례

  • 제조업 : 생산 라인 모니터링 및 제어, 품질 관리 데이터 수집 및 분석, 설비 효율성 모니터링 및 최적화
  • 전력 산업 : 발전소 운영 모니터링, 전력 그리드 관리 및 부하 분산, 정전 감지 및 신속한 대응
  • 석유 및 가스 산업 : 파이프라인 모니터링 및 제어, 저장 탱크 레벨 관리, 누출 감지 및 경보 시스템
  • 수처리 시설 : 수질 모니터링, 펌프 및 밸브 제어, 정수 처리 공정 자동화
  • 교통 시스템 : 신호등 제어 및 교통 흐름 최적화, 터널 및 교량 모니터링, 대중교통 운영 관리

• 정리

• SCADA 시스템*은 IoT 기술과 결합하여 더욱 효율적이고 유연한 산업 자동화를 가능하게 하고 있습니다. 클라우드 기반 SCADA 시스템의 도입으로 원격 모니터링 및 제어가 더욱 용이해졌으며, 빅데이터 분석과 결합하여 예측 유지보수 및 공정 최적화에 활용되고 있습니다.

  4. MES ( Manufacturing Execution System )

• 정의 : 생산 현장의 실시간 정보를 수집하고 관리하는 시스템

• 원리 : 생산 현장의 데이터 실시간 수집 > 수집된 데이터 분석 및 가공 > 생산 계획, 품질 관리, 재고 관리 등에 정보 제공

• 장점 : 생산 프로세스 최적화, 품질관리 향상

  5. ERP ( Enterprise Resource Planning )

• 정의 : 기업의 다양한 운영활동을 중앙 집중화하고 통합하는 시스템, 회계, 인사관리, 생산, 재무관리, 공급망 관리 등 기업의 핵심 프로세스를 하나의 시스템으로 통합

• 특징

  통합시스템 : 모든 비즈니스 프로세스를 하나의 시스템으로 통합 실시간 운영 : 데이터를 실시간으로 업데이트 공통 데이터베이스 : 모든 애플리케이션이 단일 데이터베이스를 공유 일관된 사용자 인터페이스 : 모든 모듈에서 동일한 인터페이스를 공유

• 장점

  업무 효율성 향상 데이터 정확성 개선 의사결정 지원 비용 절감

• 정리 : ERP 시스템은 기업의 규모와 산업에 관계없이 사용될 수 있으며, 클라우드 기반 또는 온프레미스 방식으로 구축될 수 있습니다. 현대적인 ERP 시스템은 인공지능(AI), 머신러닝, 사물인터넷(IoT) 등의 첨단 기술을 통합하여 더욱 지능적이고 효율적인 비즈니스 운영을 지원합니다.

  6. SCM ( Supply Chain Management

• 정의 : 공급망 전체를 관리하는 시스템

• 원리 : 공급망 전반의 데이터 수집 및 통합 > 수집된 데이터 기반으로 수요 예측, 재고 관리, 물류 최적화 등 수행 > 공급망 전체의 효율성 향상을 위한 의사결정 지원

• 장점 : 재고 최적화, 비용 절감, 공급망 가시성 확보

  7. ETL ( Extract, Transform, Load )

• 정의 : 데이터를 처리하고 변환하며 적재하는 과정

• 단계

  추출(Extract) : 여러 소스에서 데이터를 가져온다. 변환(Transform) : 추출된 데이터를 정계, 통합, 구조화한다. 적재(Load) : 변환된 데이터를 시스템에 저장한다.

• 목적

  데이터 통합 : 여러 소스의 데이터를 하나의 일관된 형식으로 통합 데이터 품질 향상 : 데이터를 정제하고 표준화하여 품질을 개선 분석지원 : 데이터 분석을 위한 기법

• 장점

  시간 절약 : 데이터 준비 시간을 단축하여 분석에 더 많은 시간을 할애 데이터 품질 개선 : 일관된 프로세스를 통해 데이터의 정확성과 신뢰성을 높임

  8. CNC ( Computer Numerical Control )

• 정의 : 컴퓨터를 사용하여 제조 공정의 기계를 자동으로 제어

• 역할

  컴퓨터 프로그램을 통해 기계 도구의 움직임을 정밀하게 제어 G-코드와 M-코드라는 특수한 프로그래밍 언어를 사용하여 기계에 지시

• 장점

  높은 정밀도와 일관성을 제공합니다. 복잡한 형상의 부품을 효율적으로 생산할 수 있습니다. 생산성을 크게 향상시킵니다.

  9. CPPS (Cyber-Physical Production Systems)

• 정의 : 물리적 생산 시스템과 디지털 기술을 통합한 첨단 제조 시스템

• 특징

  실제 물리적 생산 시스템과 가상의 디지털 모델을 연결합니다. 센서, 액추에이터, 통신 네트워크를 통해 실시간 데이터를 수집하고 처리합니다. 인공지능과 빅데이터 분석을 활용하여 생산 프로세스를 최적화합니다.\

• 장점

  생산 과정의 실시간 모니터링과 제어가 가능합니다. 예측 유지보수를 통해 장비 가동 시간을 극대화할 수 있습니다. 생산 유연성과 효율성을 높일 수 있습니다.

  10. CPPS랑 CPS 차이점

• 적용범위

  • CPS: 더 광범위한 개념으로, 다양한 분야에 적용될 수 있습니다.
  • CPPS: 특별히 생산 및 제조 환경에 초점을 맞춘 CPS의 한 형태입니다.

• 목적

  • CPS: 물리적 프로세스와 계산의 통합을 통해 다양한 시스템을 모니터링하고 제어
  • CPPS: 생산 효율성을 극대화하기 위해 생산 과정 및 정보를 모니터링하고 최적화하는 데 중점

• 구성요소

  • CPS: 센서, 액추에이터, 제어기기 등이 네트워크로 연결된 복합 시스템을 구성 생산에 필요한 프로세스나 카테고리별로 개별 CPS를 구성하고, 이들을 통합하여 생산 시스템을 형성

• 데이터 활용

  • CPS: 물리적 세계의 정보를 수집, 분석하여 피드백 루프를 통해 제어
  • CPPS: 생산 관련 데이터를 수집하고 분석하여 생산 프로세스를 최적화

• 정리

  CPS가 더 넓은 개념이라면, CPPS는 CPS의 원리를 생산 환경에 특화하여 적용한 것입니다. CPPS는 스마트팩토리 구현의 핵심 요소로, 제조업의 디지털 전환을 이끄는 중요한 기술입니다

출처 : https://surpriser.tistory.com/1559?pidx=2

1. 정의

디지털 기술과 자동화를 통해 생산 프로세스를 최적화하는 지능형 공장 시스템을 의미합니다

2. 특징

• 상호 연결된 시스템과 기계를 사용하여 실시간 데이터 생성

• 인공지능과 빅데이터 분석을 통한 생산 프로세스 개선

• 센서 네트워크를 통한 자동화된 모니터링 및 제어

• 유연한 생산 시스템으로 다품종 소량생산 가능

  3. 흐름

• 공장 내부 영역

  생산설비 자동화 및 디지털화 실시간 데이터 수집 및 분석 예측 유지보수 시스템 구축

• 공장 외부 영역

  시장조사, 상품기획, 디자인과의 연계 물류 및 서비스와의 통합

  4. 데이터 흐름

  데이터 수집 > 데이터 전송 > 데이터 저장 > 데이터 처리 및 분석 > 시각화 및 모니터링 > 제어 및 자동화 > 피드백

데이터 수집

센서, IoT기기, 생산 설비로 부터 실시간 데이터 수집 + 3D데이터 수집

데이터 전송

산업용 네트워크를 통한 데이터 전송 (예: Industrial Ethernet, OPC UA) 엣지 컴퓨팅을 통한 데이터 전처리 및 필터링

데이터 저장

클라우드 또는 온프레미스 데이터베이스에 저장 빅데이터 플랫폼을 활용한 대용량 데이터 관리

데이터 처리 및 분석

AI 및 머신러닝 알고리즘을 통한 데이터 분석 예측 분석 및 최적화 모델 적용 3D 모델링 및 시뮬레이션 수행

시각화 및 모니터링

실시간 대시보드를 통한 생산 현황 모니터링 3D 디지털 트윈을 활용한 가상 공장 모델링 및 시각화

제어 및 자동화

분석 결과를 바탕으로 한 자동 제어 명령 전송 AGV, 로봇 등 자동화 설비의 제어

피드백 루프

분석 결과를 바탕으로 생산 프로세스 최적화 지속적인 데이터 수집 및 분석을 통한 개선

구현된 github TEST Site ID와 PW는 임시로 구성하였기 때문에 깃헙 Readed.md참고해주시길 바랍니다.

Next.js 애플리케이션에서 사용자 인증 및 세션 관리를 구현한 서버 사이드 코드입니다. 그리고 사용자 인증 및 세션 관리를 구현하는 예시하기 위해서 만들었습니다.

Next.js와 React를 사용하는 개발자들에게 이 코드는 안전하고 효율적인 인증 시스템을 구축하는 데 있어 훌륭한 시작점이 될 것입니다. 복잡한 인증 로직을 간소화하면서도 필요한 모든 핵심 기능을 포함하고 있어, 개발 시간을 단축하고 보안을 강화하는 데 도움이 될 것이라고 생각합니다.

코드에 대해 설명하고 싶지만 직접보는 부분이 더 좋다고 생각하여 자료를 만들면서 제가 iron-session을 사용한 이유와 주요 기능들에 대해 초점을 맞춰 설명드리겠습니다.

export const getSession = async () => {
  const session = await getIronSession<SessionData>(cookies(), sessionOptions);

  if (!session.isLoggedIn) {
    session.isLoggedIn = defaultSession.isLoggedIn;
  }

  // CHECK THE USER IN THE DB
  session.isBlocked = isBlocked;
  session.isPro = isPro;

  return session;
};

session.isBlocked = isBlocked; 이 코드는 세션 객체에 사용자의 차단 상태를 설정하는 역할을 합니다. 이를 통해 애플리케이션은 사용자가 차단되었는지 여부를 세션을 통해 확인할 수 있습니다. 이 설정은 사용자 인증 및 권한 관리에 중요한 역할을 합니다.

iron-session을 사용하여 session을 관리하였습니다. iron-session을 사용한 이유는 다음과 같습니다.

1. 보안성 강화

• JWT와 달리 암호화되어 사용자가 정보를 확인할 수 없습니다. 세션 데이터가 서명되고 암호화된 쿠키에 저장되어 안전합니다.

  2. 서버리스 환경 적합

• 세션 데이터를 쿠키에 저장하여 별도의 서버 측 저장소가 필요 없습니다. 세션을 위한 별도의 백엔드 구축이 불필요합니다.

  3. 사용 편의성

• 미들웨어 하나로 쉽게 세션 기능을 추가할 수 있어 러닝 커브가 낮습니다.
• withIronSessionApiRoute와 같은 유용한 헬퍼 함수를 제공합니다.

  4. 무상태(Stateless) 방식

• 서버 코드에서 네트워크가 필요 없는 상태 비저장 방식으로 디코딩됩니다.
• 세션 ID가 없어 서버 관점에서 "무상태"로 동작합니다.

  5. 유연성

• Next.js, Express 및 Node.js HTTP 서버에서 동작 가능합니다.

  6. 민감한 데이터 저장

• 데이터를 암호화하여 저장하므로 민감한 정보도 안전하게 저장할 수 있습니다.

  7. 사용자 패스워드 불필요

• 사용자 패스워드가 없어도 안전하게 암호화가 가능합니다

export const logout = async () => {
  const session = await getSession();
  session.destroy();
  redirect("/");
};

export const changePremium = async () => {
  const session = await getSession();

  isPro = !session.isPro;
  session.isPro = isPro;
  await session.save();
  revalidatePath("/profile"); 
};

주요 기능

1. 세션 관리

• getIronSession을 사용하여 안전한 세션 관리
• 사용자의 로그인 상태, 프리미엄 상태, 차단 상태 등을 세션에 저장

  2.사용자 인증

• login 함수를 통한 사용자 로그인 처리
• 사용자명과 비밀번호 검증 (실제 DB 연동은 주석 처리됨)

  3. 로그아웃

• logout 함수를 통한 세션 파괴 및 로그아웃 처리

  4. 사용자 정보 업데이트

• changePremium 함수로 사용자의 프리미엄 상태 변경
• changeUsername 함수로 사용자명 변경

  5. iron-session

• 안전한 쿠키 기반 세션 관리를 위해 iron-session 라이브러리 사용

  6. revalidatePath

• revalidatePath를 사용하여 특정 경로의 캐시 무효화

Next.js에서 제공하는 dynamic import는 애플리케이션의 성능을 크게 향상시킬 수 있는 강력한 기능입니다. 이 기술을 통해 대규모 애플리케이션의 코드를 효율적으로 관리하고, 초기 로딩 시간을 단축할 수 있습니다.

코드 분할(Code Splitting)이란?

코드 분할은 대규모 애플리케이션의 JavaScript 코드를 더 작은 조각(chunk)으로 나누는 기술입니다. 이를 통해 애플리케이션의 초기 로딩 속도를 개선하고, 필요한 코드만 필요한 시점에 로드할 수 있습니다.

Next.js의 Dynamic Import 활용하기

Next.js는 next/dynamic을 통해 React 컴포넌트의 동적 로딩을 지원합니다. 이를 통해 컴포넌트나 라이브러리를 필요한 시점에 로드할 수 있어, 초기 JavaScript 번들 크기를 줄일 수 있습니다.

기본사용법

import dynamic from 'next/dynamic';

const DynamicHeader = dynamic(() => import('../components/Header'));

function HomePage() {
  return (
    <div>
      <DynamicHeader />
      <h1>Welcome to my blog!</h1>
    </div>
  );
}

예시에서 Header 컴포넌트는 페이지가 로드된 후에 동적으로 불러와집니다.

Dynamic Import의 주요 옵션

1. ssr (서버 사이드 렌더링)

const DynamicComponent = dynamic(() => 
import('../components/Heavy'), { ssr: false });

ssr: false로 설정하면 해당 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다.

2. loading (로딩 컴포넌트)

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/Heavy'),
  { loading: () => <p>Loading...</p> }
);

컴포넌트가 로드되는 동안 표시될 로딩 컴포넌트를 지정할 수 있습니다.

3.delay (지연 시간)

const DynamicComponentWithDelay = dynamic(() => 
import('../components/Heavy'), { delay: 200 });

컴포넌트 로딩을 시작하기 전 지정된 시간(밀리초) 동안 대기합니다.

실제 사용 예시: 블로그 댓글 시스템

블로그 포스트 페이지에 댓글 시스템을 동적으로 로드하는 예시를 살펴보겠습니다.

import dynamic from 'next/dynamic';

const DynamicComments = dynamic(() => import('../components/Comments'), {
  loading: () => <p>댓글을 불러오는 중...</p>,
  ssr: false
});

function BlogPost({ content }) {
  return (
    <article>
      <h1>{content.title}</h1>
      <p>{content.body}</p>
      <DynamicComments postId={content.id} />
    </article>
  );
}

예시에서 댓글 시스템은 필요할 때만 로드되며, 로딩 중에는 사용자에게 로딩 메시지를 표시합니다. 또한 ssr: false를 설정하여 서버 사이드 렌더링을 비활성화하고 클라이언트에서만 댓글을 로드합니다.

실제 사용 예시2: Header navigation

import dynamic from "next/dynamic";
// import NavIcons from "./NavIcons";
const NavIcons = dynamic(() => import("./NavIcons"), { ssr: false });

const Navbar = () => {
  return (
    <div className="h-20 px-4 md:px-8 lg:px-16 xl:px-32 2xl:px-64 relative">
      <div className="flex items-center justify-between h-full md:hidden">
        {/* MOBILE */}
        <Link href="/">
          <div className="text-2xl tracking-wide">DWSH</div>
        </Link>
        <Menu />
      </div>
      {/* BIGGER SCREEN */}
      <div className="hidden md:flex items-center justify-between h-full gap-8">
        {/* LEFT */}
        <div className="w-1/3 xl:w-1/2 flex items-center gap-12">
          <Link href="/" className="flex items-center gap-3">
            <Image src="/logo3.png" alt="logo" width={50} height={50} />
            <div className="text-2xl tracking-wide font-mono">DWSH</div>
          </Link>
          <div className="hidden xl:flex gap-4">
            <Link href="/">Home</Link>
            <Link href="/">Shop</Link>
            <Link href="/">Deals</Link>
            <Link href="/">About</Link>
            <Link href="/">Contact</Link>
          </div>
        </div>
        {/* RIGHT */}
        <div className="w-2/3 xl:w-1/2 flex justify-between items-center gap-8">
          <SearchBar />
          <NavIcons />
        </div>
      </div>
    </div>
  );
};

export default Navbar;

Next.js의 dynamic import는 대규모 애플리케이션의 성능을 최적화하는 강력한 도구입니다. 필요한 코드만 필요한 시점에 로드함으로써 초기 로딩 시간을 단축하고 사용자 경험을 개선할 수 있습니다. 적절히 활용한다면 더 빠르고 효율적인 웹 애플리케이션을 구축할 수 있을 것입니다.

코드 퀄리티가 낮으면 비즈니스적으로 많은 악영향을 미친다는 것을 알게 되었습니다. 협업하는 다른 개발자들과 함께 개발을 진행할 때, 문제가 없던 코드에 몇 가지 변경만 가했는데도 에러가 빈번하게 발생하는 경우가 있습니다. 이러한 에러들을 분석해보면, 결국 원인이 되는 코드에서 문제가 발생하는 것을 알게 됩니다.

하지만 그 문제점을 분석하는 과정에서 많은 시간이 소비되고, 이에 따른 대응이 필요합니다. 최근 저는 회사의 디지털 트윈 플랫폼을 개발하면서 예상치 못한 부분에서 전혀 관련 없는 코드 한 줄이 문제가 되는 상황을 경험했습니다. 문제점을 찾고 해결하는 과정에서 여러 단계가 겹치는 코드를 보면서, 가독성이 단순히 코드를 보기 좋게 만드는 것이 아니라 코드의 효율성을 높인다는 것을 깨달았습니다.

이전에는 단순히 보기 쉽고 클린 코드만 생각했지만, 이제는 협업 과정에서 효율적이고 쉽게 문제를 파악할 수 있는 가독성 좋은 코드를 작성해야겠다고 생각하고 실천하고 있습니다. 현재 프로젝트뿐만 아니라, 다른 프로젝트에서도 재사용 가능한 컴포넌트를 구성하면 유연하게 적용할 수 있어 좋은 경험을 하게 되었습니다.

저희 팀은 시니어 개발자가 없는 상황에서 ChatGPT-4를 사용하여 코드 리뷰도 받아보고, 팀원들 간의 코드 리뷰를 통해 더 나은 코드와 효율적이고 재사용성이 뛰어난 코드를 작성하고자 노력하고 있습니다.

클린 코드는 단순히 짧게 작성하고 컴포넌트를 분리하는 것에 그치지 않습니다. 클린 코드의 진정한 목적은 코드 로직을 신속하게 파악하고, 팀원들이 쉽게 이해할 수 있으며, 에러 발생 시 빠르게 대응하여 비즈니스 가치를 극대화하는 데 있습니다.

클린 코드를 작성하는 중요성을 이해하기 위해, 예시 이미지와 함께 살펴보겠습니다.

처음에는 단순하게 input만 존재하던 component에서, input의 입력값에 따라 추가된 코드들이 들어가면서 관련이 없는 코드들이 하나의 component에 묶이게 되었습니다. 그 결과 하나의 함수에 여러 기능이 포함되는 복잡성이 생겼습니다.

handleCheckMember 함수를 보면 setMember에 value를 설정하고, 다시 if문을 사용해서 setShowConsulting의 boolean 상태값을 조정하는 두 가지 기능이 추가되어 복잡해졌습니다.

예시 사진을 보면, 초록색으로 구성된 부분은 멤버 여부 확인을 위한 구간이며, 멤버 확인을 마친 후의 구간은 보라색으로 표시되어 있습니다. 팝업을 보여줄지 여부에 따라 진행되는 노란색 구간에는 회원가입 로직이 포함되어 있어 정렬되지 않은 코드 구성을 볼 수 있습니다.

이러한 복잡성은 규모가 커질수록 유지보수가 어려워지고, 협업 과정에서 무해하다고 생각했던 함수들이 오히려 에러를 발생시키는 상황을 초래할 수 있습니다. 따라서, 가독성이 좋은 코드를 구성하는 것이 매우 중요합니다.

이제 기능별로 구성하고, 가독성이 좋은 코드로 만들어 보겠습니다.

먼저, 가독성이 좋은 코드를 작성하려면 기능을 명확하게 정의하고 단순히 줄이는 것이 아니라 재사용 가능하게 구성하는 것이 중요합니다.

Popup 컴포넌트는 event와 title을 커스텀할 수 있도록 설계하여 재사용성을 높였습니다. 또한, 기능적으로 많은 부분을 포함하지 않고 간단한 구조로 구성하여 이해하기 쉽도록 분리하였습니다.

const Popup = ({ title, children, onClose }) => (
  <div className="popup">
    <h2>{title}</h2>
    {children}
    <button onClick={onClose}>닫기</button>
  </div>
);

회원가입은 다른 기능과는 완전히 별개이기 때문에, 기능적인 부분을 명확히 구분하여 구성하였습니다. 이렇게 함으로써 코드의 가독성을 높이고 유지보수가 용이하도록 하였습니다.

const SignUpForm = ({ onClose }) => (
  <Popup title="회원가입" onClose={onClose}>
    <form>
      <input type="text" placeholder="이름" />
      <input type="email" placeholder="이메일" />
      <input type="password" placeholder="비밀번호" />
      <button type="submit">가입하기</button>
    </form>
  </Popup>
);

ConsultantView 컴포넌트는 member로 인증된 회원에게 팝업을 보여줄지 판단하는 기능을 명확히 구분하였습니다. 이 과정에서 Popup 컴포넌트를 사용하여 재사용성을 잘 활용한 것을 확인할 수 있습니다.

const ConsultantView = ({ showPopup, onTogglePopup }) => (
  <>
    <button onClick={onTogglePopup}>상담사 보기</button>
    {showPopup && (
      <Popup title="상담사 이미지" onClose={onTogglePopup}>
        <img src="/path/to/consultant-image.jpg" alt="상담사" />
      </Popup>
    )}
  </>
);

InputCom은 input 부분을 따로 분리하여, 특정 기능에서만 사용하는 것이 아니라 다른 곳에서도 재사용할 수 있도록 구성되었습니다.

const InputCom = ({ value, onChange }) => (
  <input 
    value={value} 
    onChange={onChange} 
    placeholder="입력하세요" 
  />
);

종합적으로 코드를 구성한 부분을 import하여, 위에 보여준 사진과는 다르게 여기에서는 사용자 회원 여부를 확인하고 컨트롤하는 컴포넌트로 기능을 구현하였습니다. 이렇게 구성함으로써 추후 유지보수도 간단하게 할 수 있음을 확인할 수 있습니다.

const UserTypeButton = () => {
  const [member, setMember] = useState('');
  const [showPopup, setShowPopup] = useState(false);

  const isMember = member === 'ok';

  const handleMemberInput = (event) => {
    const value = event.target.value;
    setMember(value);
  };

  const togglePopup = () => {
    setShowPopup(!showPopup);
  };

  return (
    <>
      <InputCom value={member} onChange={handleMemberInput} />
      {isMember ? (
        <ConsultantView showPopup={showPopup} onTogglePopup={togglePopup} />
      ) : (
        <SignUpForm onClose={togglePopup} />
      )}
    </>
  );
};

추천영상 https://www.youtube.com/watch?v=edWbHp_k_9Y

간략 내용정리

1. 가독성 향상: 명확하고 일관된 코드 스타일을 유지하면 다른 개발자들이 코드를 쉽게 읽고 이해할 수 있습니다.

2. 유지보수 용이: 잘 구조화된 코드는 수정과 업데이트가 쉽습니다. 이는 버그 수정이나 새로운 기능 추가 시 큰 도움이 됩니다.

3. 재사용성 증가: 모듈화된 코드와 재사용 가능한 컴포넌트는 개발 시간을 단축시키고 일관성을 유지하는 데 기여합니다.

4. 협업 효율성: 클린코드는 팀원 간의 협업을 원활하게 하여 프로젝트의 전반적인 생산성을 높입니다.

5. 디버깅 용이: 명확한 코드 구조는 오류를 찾고 해결하는 데 걸리는 시간을 줄여줍니다.

6. 비즈니스 가치 향상: 코드 품질이 높아지면 제품의 신뢰성과 안정성이 증가하여 비즈니스 가치를 높일 수 있습니다.

React Server Component(RSC)의 진행 방식

• 서버에서 요청이 들어오면 RSC Payload를 생성합니다.

• RSC Payload와 클라이언트 컴포넌트의 자바스크립트 인스트럭션을 활용하여 실제 HTML을 생성합니다.

• 클라이언트에서 생성된 HTML을 응답받으면, 먼저 pre rendering이 진행됩니다.

• 이후 RSC Payload가 생성되면 그 정보를 바탕으로 클라이언트에서 reconcile 단계가 진행됩니다.

• reconcile 단계가 클라이언트에서 진행되는 이유는 클라이언트가 가지는 트리 구조에 빈 공간(placeholder)이 있기 때문에 그 공간을 채우는 과정이기 때문입니다.

• 이후 서버 컴포넌트와 클라이언트 컴포넌트가 hydrate되고, HTML에 React를 끼얹어 상호작용이 가능해집니다. 자료출처 : https://www.smashingmagazine.com/2024/05/forensics-react-server-components/

  Next.js에서의 서버 컴포넌트 rendering 진행 순서

• Next.js는 서버에서 React의 API를 활용하여 렌더링을 진행합니다. 렌더링 작업은 개별 경로의 segment와 Suspense 경계에 따라 chunk로 분할됩니다.

• React는 서버 컴포넌트를 RSC Payload라는 특수 데이터 형식으로 렌더링합니다.

• RSC Payload

  • 서버 컴포넌트의 렌더링된 결과
  • 클라이언트 컴포넌트가 렌더링되어야 할 위치의 자리 표시
  • 해당 JavaScript 파일에 대한 참조
  • 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 props가 포함됩니다.

• Next.js는 RSC Payload와 클라이언트 컴포넌트 JavaScript 지침을 사용하여 서버에서 HTML을 렌더링합니다.

• 클라이언트에서 HTML은 초기 페이지 로드에만 사용되며, 빠르고 비대화형적인 경로 preview를 즉시 표시합니다.

• RSC Payload는 클라이언트와 서버 컴포넌트 트리를 조화시키고 DOM을 업데이트하는 데 사용됩니다.

• JavaScript 지침은 클라이언트 컴포넌트를 수화하고 애플리케이션을 대화형으로 만드는 데 사용됩니다. 이상으로 React Server Component(RSC)와 Next.js에서의 서버 컴포넌트 렌더링 과정을 정리해 보았습니다.

자료출처 : https://saengmotmi.netlify.app/react/what-is-rsc/

서버 컴포넌트

const ServerComponent = () => {
    // 이벤트 함수
    const handleClientEvent = () => {
    // client event발생
    console.log('서버에서 발생한 클라이언트 이벤트가 서버에서 처리가 되었습니다!');
   };
return (
    <div onClick={() => handleClientEvent()}>
        서버에서 클릭이벤트가 실행됩니다.
    </div>
    );
};

코드 분석

• ServerComponent는 서버 측에서 정의된 컴포넌트입니다.

• handleClientEvent 함수는 클라이언트에서 발생한 이벤트를 서버에서 처리하는 역할을 합니다.

• 서버 컴포넌트는 onClick 이벤트 핸들러를 통해 클라이언트에서 발생한 이벤트를 받아 처리할 수 있습니다.

  서버 컴포넌트 > 클라이언트로 전달되는 RSC Payload

  서버 컴포넌트에서 클라이언트로 전달되는 RSC Payload는 서버 측에서 설정하는 합니다. 그래서 일반적으로 React Server Components(RSC) 구현에서는 서버 측 코드에서 이 RSC Payload를 생성하여 클라이언트에 전달하게 됩니다.

  // Next.js 서버 측 코드 예시
  export const getServerSideProps = () => {
  return {
    props: {
      rscPayload: {
        type: 'RSC_PAYLOAD',
        data: {
          initialState: {
              // 클라이언트 컴포넌트의 초기 상태 설정
            counter: 0
          },
          eventHandlers: {
              // 클라이언트에서 발생한 이벤트에 대한 핸들러 설정
            onClick: 'handleServerEvent'
          }
        }
      }
    }
  };
  };

  코드 분석

• 서버 컴포넌트에서 클라이언트로 전달되는 데이터 구조입니다.

• initialState에는 클라이언트 컴포넌트의 초기 상태 정보가 포함되어 있습니다.

• eventHandlers에는 클라이언트에서 발생한 이벤트에 대한 핸들러 정보가 포함되어 있습니다.

• payload를 통해 클라이언트 컴포넌트는 서버에서 전달된 초기 상태와 이벤트 핸들러를 활용할 수 있습니다.

  클라이언트 컴포넌트

  const ClientComponent = ({ initialState, eventHandlers }) => {
  // 클라이언트에서 이벤트 핸들러 정의
  const handleClientEvent = () => {
    // 클라이언트에서 발생한 이벤트에 대한 처리
    console.log('클라이언트에서 발생한 이벤트가 클라이언트에서 처리가 되었습니다.');
  };
  
  // 클라이언트에서 이벤트 핸들러 등록됩니다.
  const handleClick = () => {
    if (eventHandlers && eventHandlers.onClick) {
      // 서버에서 전달된 이벤트 핸들러 실행합니다.
      eventHandlers.onClick();
    } else {
      // 서버에서 전달된 이벤트 핸들러가 없는 경우, 클라이언트에서 정의한 핸들러 실행합니다.
      handleClientEvent();
    }
  };
  
  return (
    <div onClick={handleClick}>
      클라이언트에서 클릭 이벤트가 실행됩니다.
      <p>Counter: {initialState.counter}</p>
    </div>
  );
  };

  코드 분석

• ClientComponent는 클라이언트 측에서 정의된 컴포넌트입니다.

• handleClientEvent 함수는 클라이언트에서 발생한 이벤트를 처리하는 역할을 합니다.

• handleClick 함수는 클라이언트에서 발생한 이벤트를 처리하는데, 서버에서 전달된 이벤트 핸들러(eventHandlers.onClick)가 있는 경우 해당 핸들러를 실행합니다.

이러한 교훈들을 바탕으로, 저는 저희 팀을 더욱 강하고 유연한 팀으로 리빌딩하는 데 전념하고 있습니다. 이 과정에서 얻은 경험과 지식을 공유하고자 합니다. 팀 리빌딩은 단순히 구성원을 재배치하는 것 이상의 의미가 있다고 느끼게 되었습니다. 팀원분들의 각자의 잠재력을 최대한 발휘하고, 함께 성장해 나가는 과정이 중요하다는 것도 많이 느끼게 되었습니다. 저와 같은 상황에 처한 다른 개발자분들에게 이 글이 도움이 되길 바라며, 더 나은 팀 문화와 개발 환경을 만드는 데 기여할 수 있기를 희망합니다.

TypeScript 등장 배경

안정적인 개발과 코드 품질 향상을 위해 TypeScript를 사용하는 것이 좋습니다. TypeScript는 동적 타입 언어인 JavaScript를 보완하며 등장했습니다.

그렇다면 TypeScript는 새로운 언어일까요? 아닙니다. TypeScript는 JavaScript의 상위 집합으로, JavaScript 엔진을 사용하며 개발자가 원하는 변수의 타입을 정의할 수 있습니다. 그리고 이렇게 작성된 TypeScript 코드는 JavaScript로 컴파일되어 실행됩니다.

TypeScript & Javascript

TypeScript와 JavaScript의 차이점을 간단히 살펴보겠습니다.

1. 정적 타입 vs 동적 타입

TypeScript는 "정적 타입 언어"이고, JavaScript는 "동적 타입 언어"입니다. JavaScript는 변수의 타입이 실행 시간에 결정되는 동적 타입 지정 방식을 사용합니다. 이는 쉽게 배우고 유연하다는 장점이 있지만, 런타임 에러가 발생할 가능성이 있습니다. 특히 대규모 프로젝트에서는 모듈 간 오류 등을 찾아내기 어려울 수 있습니다. 반면 TypeScript는 컴파일 단계에서 타입을 체크하고, 타입 오류를 미리 알려줍니다. 이를 통해 개발 과정에서 빠르게 오류를 찾아내고 수정할 수 있어, 사전에 버그를 방지할 수 있습니다. 이처럼 TypeScript의 정적 타입 시스템은 JavaScript의 동적 타입 지정 방식이 가진 단점을 보완하고자 등장했습니다. 개발자는 TypeScript를 통해 보다 안전하고 생산적인 코드 작성이 가능합니다.

2. 컴파일 언어 vs 인터프리터 언어 JavaScript와 TypeScript는 언어를 해석하는 과정에서 중요한 차이가 있습니다. JavaScript는 "인터프리터 언어"입니다. 인터프리터 언어는 소스코드를 한 줄씩 읽어가며 즉시 실행합니다. 이로 인해 코드가 빨리 실행되는 장점이 있습니다. 반면 TypeScript는 "컴파일 언어"입니다. 컴파일 언어는 변수의 타입을 명시적으로 지정해야 합니다. 컴파일 단계에서 타입을 체크하기 때문에, 코드 작성 중에 타입 오류를 미리 알려줄 수 있습니다. 이를 "타입 어노테이션"이라고 합니다. 이를 통해 버그를 빨리 발견하고 방지할 수 있습니다.

이처럼 JavaScript와 TypeScript는 언어의 근본적인 특성이 다르기 때문에, 개발 과정과 결과물에서 차이가 있습니다. 개발자는 이러한 차이를 잘 이해하고 프로젝트의 특성에 맞는 언어를 선택해야 합니다.

TypeScript 특징

1. TypeScript의 강력한 타입 시스템은 사전에 버그를 예방할 수 있는 핵심 요소입니다.
2. TypeScript를 사용하면 가장 먼저 마주하게 되는 것이 바로 "타입"입니다. 타입은 변수의 "자료형"을 의미합니다. 문자형, 숫자형, 불리언, 객체, 배열 등 변수가 어떤 형태의 데이터를 가지고 있는지를 나타내는 추상적인 개념입니다.
3. TypeScript는 정적 타입 기반 언어입니다. 즉, 컴파일 과정에서 변수의 타입이 결정됩니다. 이를 통해 컴파일 단계에서 타입 오류를 미리 발견할 수 있습니다. 따라서 TypeScript를 사용하면 컴파일 에러를 사전에 예방할 수 있고, 디버깅 작업도 훨씬 수월해집니다.

이처럼 TypeScript의 강력한 타입 시스템은 안정적인 코드 작성을 가능하게 해줍니다. 변수의 타입을 명확히 정의함으로써 예기치 못한 버그를 사전에 차단할 수 있는 것이 가장 큰 장점이라 할 수 있습니다. 이런 장점 이외에 Typescript만의 장점을 다른 것도 확인해보겠습니다.

TypeScript 장점

• TypeScript는 높은 생산성을 제공합니다. JavaScript로 코드를 작성하면 객체의 필드나 함수의 매개변수로 들어오는 값이 어떤 것인지 파악하기 위해 여러 파일을 확인해야 하는 단점이 있습니다. 하지만 TypeScript를 사용하면 변수와 데이터의 자료형을 쉽게 파악할 수 있습니다.

• TypeScript를 사용하면 개발자는 개발의 큰 구조를 구성하고 핵심 부분에 집중할 수 있습니다. 객체 내부의 값을 전부 기억할 필요가 없어지며, 자동으로 리스트업 해주기 때문에 생산성이 향상됩니다. 이러한 생산성 향상은 예기치 못한 동작을 사전에 방지할 수 있습니다.

• TypeScript는 JavaScript의 상위 집합이기 때문에, 기존에 JavaScript로 구성된 프로젝트를 쉽게 마이그레이션할 수 있습니다. 대규모 코드 수정 없이도 TypeScript로의 전환이 가능합니다.

• 프로젝트 전체를 한 번에 TypeScript로 전환하는 것이 부담스럽다면, 일부 기능에만 한정하여 점진적으로 적용할 수 있습니다. 이렇게 단계적으로 전환을 진행하면 효율적으로 TypeScript를 도입할 수 있습니다. 추후 필요에 따라 점차 나머지 부분으로 TypeScript 적용 범위를 확장해 나갈 수 있습니다.

TypeScript는 자료형 정보를 명시적으로 제공하여 개발 생산성을 높이고, 잠재적인 버그를 사전에 차단할 수 있습니다. 이를 통해 개발자는 핵심 로직에 더욱 집중할 수 있게 되는 것입니다. 이처럼 TypeScript는 기존 JavaScript 코드와의 호환성이 뛰어나, 프로젝트의 점진적인 마이그레이션을 가능하게 합니다. 이를 통해 개발팀은 큰 부담 없이 TypeScript의 장점을 활용할 수 있게 됩니다.

그렇다고 TypeScript에 단점이 없는 것은 아닙니다. TypeScript 역시 장단점이 존재합니다.

TypeScript 단점

• 학습에 어려움이 있고 생산성도 저하 될 수 있습니다. TypeScript를 처음 접하는 개발자의 경우, 타입 시스템 등 새로운 개념을 익히는 데 어려움을 겪을 수 있습니다. 이로 인해 초기 생산성이 저하될 수 있습니다. TypeScript의 사용이 익숙하지 않은 개발자들은 타입 관련 학습 시간이 필요하며, 이는 프로젝트 진행 속도에 영향을 미칠 수 있습니다.

• 타입 정의 및 지정의 어려움이 있습니다. 복잡한 프로젝트에서는 적절한 타입 정의가 쉽지 않을 수 있습니다. 개발자는 매번 타입을 지정해줘야 하는 번거로움을 겪을 수 있습니다. 또한 타입 어노테이션으로 인한 타입 에러 발생 등으로 실제 개발보다 타입을 지정하는 데 더 많은 시간을 소비할 수 있습니다.

따라서 TypeScript 도입 시에는 이러한 학습 곡선과 타입 정의 및 지정의 어려움을 고려해야 합니다. 개발팀의 역량과 프로젝트의 복잡도에 따라 TypeScript의 장단점을 균형 있게 평가하고, 적절한 적용 방안을 모색해야 합니다.

TYPE지정

TypeScript 도입을 위해 기존 JavaScript와 React JSX 파일을 각각 .ts와 .tsx로 변경합니다. 이를 통해 변수와 함수의 타입을 명시하거나 자동으로 정의할 수 있어, 정적 타입 검사로 개발 생산성과 코드 품질을 높일 수 있습니다.

TypeScript는 정적 타입 시스템을 제공하여 변수 선언 시 명시한 타입과 다른 값을 대입하려 하면 컴파일 단계에서 오류를 발생시킵니다. 이를 통해 개발 과정에서 발생할 수 있는 타입 관련 문제를 사전에 방지할 수 있습니다.

String

let variable = "hello";
variable = 15; // fail
variable = "world"; // pass

변수로 선언한 것은 문자열(string)입니다. 하지만 fail로 처리된 부분은 문자열이 아닌 숫자(number) 타입입니다. 이 경우, TypeScript는 "number 형식은 string 형식에 할당할 수 없습니다"라는 type에러를 발생시킵니다.

Number

let age = 20;
age = "20"; // fail
age = 15; // pass

String & Number Type정의

let testString: string;
    testString = 20; // fail
    testString = "hello world"; // pass

let ageWithType: number;
    ageWithType = "hello world"; // fail
    ageWithType = 20; // pass

let testBoolean: boolean;
    testBoolean = "world" // fail
    testBoolean = 2 // fail
    testBoolean = false; // pass

변수 뒤의 ":"는 타입을 정의하는 것으로, 정의한 타입과 변수에 할당된 값이 다를 경우 타입 에러가 발생합니다.

Union Type

let testStringOrNumber: string | number; 
    testStringOrNumber = 10; // pass
    testStringOrNumber = "hello world"; // pass
    testStringOrNumber = false; // fail

유니온 타입은 자바스크립트의 OR(||) 연산자와 같이 "A 아니면 B"라는 의미를 가진 타입을 말합니다. "|" 연산자를 사용해 다양한 타입을 결합하는 이 방법을 유니온 타입 정의라고 합니다. 위의 예시는 string 또는 number인 경우는 type에서 pass하지만 이외 경우 타입이 일치하지 않기 때문에 오류를 발생합니다.

Array

let names = ["jenny", "jane", "tom"];
    names.push(3); // fail
    names.push("john"); // pass

let numbers = [10, 20, 30];
    numbers.push("john"); // fail
    numbers.push(40); // pass

[string] 타입은 names에 추가되는 항목도 문자열이어야 함을 의미합니다. 위의 코드에서는 배열에 문자열 타입이 지정되어 있으며, 숫자를 배열에 추가하려고 하면 타입 에러가 발생하는 것을 확인할 수 있습니다.

Array Type정의

let testStringArray: string[];
    testStringArray = [1, 2, 3]; // fail
    testStringArray = ["jan", "Feb", "Mar"]; // pass

let testNumberArray: number[];
    testNumberArray = ["jan", false, 20]; // fail 
    testNumberArray = [1, 2, 3]; // pass

let testStringOrNumberArray: (string | number)[]; 
    testStringOrNumberArray = [1, 2, "string"]; // pass
    testStringOrNumberArray = [1, 2, "string", true]; // fail

number[]으로 type선언한 부분에서 fail을 보면 number을 제외한 문자열,불리언이 들어오면 타입에러가 발생하는 것을 볼 수 있습니다. 유니온 타입으로 선언한 값에서 fail이 발생한 이유는 string과 number이외에 boolean값이 들어갔기 때문입니다.

Object

let user = {
  username: "john",
  age: 222,
  isAdmin: false,
};

    user.username = "admin"; // pass
    user.age = "20"; // fail 
    user.age = 20; // pass
    user.isAdmin = true; // pass
    user.phone = "+8110123445678" // fail 

에러가 발생한 이유는 user 객체 내에서 phone 항목에 대한 타입이 명시되지 않았기 때문입니다. user 객체에서 phone의 값으로 number가 선언되어 있으므로, 값을 변경하려면 같은 타입을 유지해야 합니다.

Object Type정의

let userObj: {
  username: string;
  age: number;
  isAdmin: boolean;
};

    userObj = {
         username: "john",
         age: 20,
          isAdmin: false,
   };

userObj에서 정의한 타입에 맞지 않으면 형식 오류가 발생합니다. 모든 속성이 올바르게 작성되어야만 통과됩니다.

선택적 인자

let userObj2: {
  username: string;
  age: number;
  isAdmin: boolean;
  phone?: string; // ?: 선택적 인자
};
    userObj2 = {
          username: "hugh",
          age: 20,
          isAdmin: false,
    };

선택적 인자는 "?:"로 타입 앞에 표기하며, 해당 항목이 있을 수도 있고 없을 수도 있는 상황에서 유연하게 대처하기 위해 사용됩니다. 이렇게 구성되면 함수는 유연성을 가지게 되어 더 나은 개발 효율성을 기대할 수 있습니다. 예를 들어, phone이 선택적 인자로 정의되어 있다면, phone이 있어도 되고 없어도 되며, 있을 경우 문자열을 가질 것임을 의미합니다.

Any

let testAny;
    testAny = "john"; // pass
    testAny = 12; // pass
    testAny = true; // pass
    testAny = ["john"]; // pass
    testAny = [true, 20, "John"]; // pass
    testAny = {}; // pass

let testAnyArray: any[];
    testAnyArray = [20, true, "coke", []]; // pass

any 타입은 어떤 타입도 지정할 수 있어, 일반 JavaScript와 다르지 않게 됩니다. 이렇게 되면 TypeScript를 사용하는 이유가 사라지기 때문에, any 타입을 무분별하게 사용하는 것은 추천하지 않습니다. 이는 TypeScript에서도 권장되지 않습니다.

Functions

let sayHi = () => {
  console.log("hello world!");
};
    sayHi = "hello world!"; // fail

let funReturnString = (): string => {
  console.log("hello world!");
  return "world";
};

let multiple = (num: number) => {
  return num * 2;
};

let multiple2 = (num: number): number => {
  return num * 2;
};

함수에서 반환 타입을 선언하지 않고 반환 값이 없다면, 해당 함수는 void로 선언됩니다. 다시 말해, 함수의 () 뒤에 :type을 선언하면 그 함수는 해당 타입으로 지정된다는 의미입니다. 또한, props가 존재한다면, 해당 props의 항목에 사용하는 부분에도 타입이 필요합니다.

Void

let multiple3 = (num: number): void => {
  console.log(num)
};

let sum = (num1: number, num2: number, another?: number) => {
  return num1 + num2;
};
sum(2, 3);

let func = (user: { username: string; age: number; phone?: string }) => {
  console.log("user: ", user.username);
};

void는 함수에서 반환 값이 없을 경우 사용되는 반환 타입입니다. 이는 함수에 return 문이 없거나 명시적으로 값을 반환하지 않을 때 추론되는 타입을 의미합니다.

TypeScript에서 void를 반환 타입으로 지정하면, undefined 외에 다른 값을 반환할 수도 있습니다. 하지만, 일반적으로 void는 반환 값이 없다는 것을 나타내며, 실제로 반환 값을 사용하지 않음을 의미합니다. 따라서, void는 함수가 반환 값을 사용하지 않을 것이라는 것을 명시적으로 나타내기 위해 사용됩니다.

추가적으로, TypeScript에서는 void를 사용하여 반환 값을 명확히 하지 않는 함수를 정의함으로써 코드의 명료성을 높일 수 있습니다. 이는 함수가 부수 효과(side effect)만을 위해 호출된다는 것을 나타내는 좋은 방법입니다.

Type Aliases

type UserType = {
  username: string;
  age: number;
  phone?: string;
};

let betterFunc = (user: UserType) => {
  console.log(user.username);
};

type myFunc = (a: number, b: string) => void;

let write: myFunc = (num, str) => {
  console.log(num + "times" + str);
};

type UserType2 = {
  username: string;
  age: number;
  phone?: string;
  theme: "dark" | "light";
};

const userWithTheme: UserType2 = {
  username: "hugh",
  age: 20,
  theme: "dark",
};

타입 별칭(Type Aliases)은 새로운 타입 값을 생성하는 것이 아니라, 이미 정의된 타입에 대하여 나중에 쉽게 참조할 수 있도록 이름을 지정하는 방법입니다. 타입 별칭과 인터페이스(Interface) 사이의 주요 차이점 중 하나는 타입의 확장 가능성 여부에 있습니다. 인터페이스는 확장할 수 있어서, 기존의 인터페이스에 새로운 속성이나 메서드를 추가하는 것이 가능하지만, 타입 별칭은 한 번 선언되면 그 형태를 변경할 수 없습니다.

따라서, 가능한 경우 인터페이스를 사용하여 타입을 선언하는 것이 좋습니다. 이는 코드의 유연성을 높이고, 나중에 타입을 확장하거나 수정할 필요가 있을 때 보다 쉽게 대응할 수 있게 해줍니다. TypeScript에서 타입 별칭은 특정한 경우에 유용하게 사용될 수 있지만, 일반적으로는 인터페이스를 통한 타입 선언을 권장합니다.

Interface

interface IUser {
  username: string;
  email: string;
  age: number;
}

interface IEmployee extends IUser {
  employeeId: number;
}

const emp: IUser = {
  username: "tom",
  email: "tom@gmail.com",
  age: 20,
};

const emp2: IEmployee = {
  username: "tom",
  email: "tom@gmail.com",
  age: 20,
  employeeId: 10,
};

TypeScript에서 인터페이스는 코드의 재사용성을 높이고, 명확한 계약을 정의하는 데 중요한 역할을 합니다. 특히, 인터페이스를 이용한 상속 기능은 여러 인터페이스의 특성을 결합하여 새로운 타입을 정의할 수 있는 강력한 방법을 제공합니다. 그리고 extends 키워드를 사용하는 인터페이스 상속은 다음과 같은 이점을 가지고 있습니다.

• 다중 상속 지원 : 인터페이스는 다른 여러 인터페이스들의 속성을 상속받아, 복합적인 타입을 만들 수 있습니다. 예를 들어, interface A extends B, C라고 선언하면, 인터페이스 A는 B와 C의 모든 멤버를 상속받게 됩니다.
• 코드 재사용성 증가 : 기존 인터페이스의 속성을 재정의할 필요 없이, 상속을 통해 새로운 인터페이스를 쉽게 확장할 수 있습니다. 이는 코드의 중복을 줄이고, 유지 관리를 용이하게 합니다. 인터페이스 상속을 통해, 개발자는 더 명확하고 강력한 타입 계약을 정의할 수 있습니다. 이는 프로젝트의 안정성과 코드의 가독성을 향상시킵니다.

결과적으로 TypeScript의 인터페이스는 개발자가 더욱 강력하고 유연한 코드를 작성할 수 있게 도와줍니다. 따라서 인터페이스의 확장 기능은 TypeScript를 사용하는 데 있어서 중요한 개념 중 하나입니다.

Generics

interface IAuthor {
  id: number;
  username: string;
}

interface ICategory {
  id: number;
  title: string;
}

interface IPost {
  id: number;
  titles: string;
  desc: string;
  extra: IAuthor[] | ICategory[];
}

interface IPostBetter<T> {
  id: number;
  title: string;
  desc: string;
  extra: T[];
}

const testMe: IPostBetter<String> = {
  id: 1,
  title: "post title",
  desc: "post description",
  extra: ["str1", "str2"],
};

interface IPostEvenBetter<T extends object> {
  id: number;
  title: string;
  desc: string;
  extra: T[];
}

const testMe2: IPostEvenBetter<{ id: number; username: string }> = {
  id: 1,
  title: "post title",
  desc: "post description",
  extra: [
    {
      id: 1,
      username: "tom",
    },
  ],
};

const testMe3: IPostEvenBetter<IAuthor> = {
  id: 1,
  title: "post title",
  desc: "post description",
  extra: [
    {
      id: 1,
      username: "tom",
    },
  ],
};

const testMe4: IPostEvenBetter<ICategory> = {
  id: 1,
  title: "post title",
  desc: "post description",
  extra: [
    {
      id: 1,
      title: "category title",
    },
  ],
};

TypeScript의 제네릭은 타입을 고정된 값이 아닌, 변할 수 있는 '변수'처럼 다루어 코딩의 유연성을 극대화하는 기능입니다. 이를 통해 개발자는 더 일반화된 코드를 작성할 수 있으며, 이는 코드의 재사용성과 타입 안정성을 동시에 증가시킵니다.

제네릭을 사용하면, 꺾쇠(<>) 안에 변수명을 넣어 타입 변수를 선언할 수 있습니다. 이때, 자주 사용되는 변수명으로는 T가 있는데, 이는 Type의 약자로 볼 수 있습니다. 하지만, T 외에도 U, V 등 개발자가 원하는 어떤 이름도 사용할 수 있습니다.

예를 들어, 배열의 모든 요소를 포함하는 함수를 만들 때, 제네릭을 사용하면 다양한 타입의 배열에 대해 같은 함수를 사용할 수 있습니다. 이는 함수나 클래스 등을 다양한 타입에 대해 재사용 가능하게 만들어 줍니다.

위 코드에서 T는 사용자가 함수를 호출할 때 결정되는 타입으로, 이는 제네릭이 코드를 더 유연하게 만드는 방법 중 하나입니다. 제네릭을 사용함으로써, TypeScript 개발자는 타입 안정성을 유지하면서도 다양한 타입에 대해 동작하는 재사용 가능한 컴포넌트를 생성할 수 있습니다. 이는 크게 코드의 품질을 향상시키고, 개발 과정을 더욱 효율적으로 만듭니다.

React

ReactNode Type

const Parent = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      <h1>This is the parent</h1>
      {children}
    </div>
  );
};

export default Parent;


const ChildrenPropExample = () => {
    return (
        <div>
            <Parent>
                <Child />
                <SecondChild />
            </Parent>
        </div>
    );
};

export default ChildrenPropExample;

ReactNode 타입은 JSX 내에서 사용할 수 있는 모든 요소의 타입을 포괄합니다. 이는 ReactChild, ReactFragment, ReactPortal을 포함하며, 또한 boolean, null, undefined 값까지 다룹니다. 이로 인해 ReactNode는 매우 유연하며 다양한 형태의 자식 요소를 JSX 내에서 표현할 수 있게 해줍니다.

클래스 컴포넌트에서는 render 함수가 이 ReactNode 타입을 반환하는 것이 일반적입니다. 이는 클래스 컴포넌트가 화면에 렌더링할 내용을 정의할 때 ReactNode를 사용하여 다양한 형태의 출력을 지원한다는 것을 의미합니다.

반면에, 함수 컴포넌트는 ReactElement 인터페이스를 반환합니다. 이 차이는 ReactElement가 보다 구체적인 JSX 요소를 나타내는 반면, ReactNode는 더 넓은 범위의 타입, 즉 JSX에서 사용될 수 있는 거의 모든 것을 포괄한다는 점에서 비롯됩니다.

이러한 특성 덕분에, React 개발자들은 다양한 타입의 자식 요소들을 효과적으로 관리하고 조합할 수 있으며, 이는 React 애플리케이션의 유연성과 확장성을 크게 향상시킵니다.

parent안에 들어가는 children같은 경우 parent에서 React.ReactNode로 type을 정의했기 때문에 문제없이 props로 child가 들어가는 것을 확인 할 수 있습니다.

Event Type

const EventExample = () => {
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        console.log(e.target.value);
    };

    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        console.log("Searched!");
    };

    const handleDelete = (e: React.MouseEvent<HTMLButtonElement>, id: number) => {
        e.preventDefault();
        console.log(`Post ${id} has been deleted!`);
    };

    return (
        <div className="eventExample">
            <form>
                <input type="text" placeholder="Search for anything..." onChange={handleChange} />
                <button onClick={handleClick}>Search</button>
            </form>
            <form className="post">
                <h1>{"타입스크립트의 이벤트 항목(1)"}</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
                <button onClick={(e) => handleDelete(e, 1)}>Delete</button>
            </form>
            <form className="post">
                <h1>{"타입스크립트의 이벤트 항목(2)"}</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </p>
                <button onClick={(e) => handleDelete(e, 2)}>Delete</button>
            </form>
        </div>
    );
};

export default EventExample;

React에서는 다양한 이벤트 핸들러를 제공하며, 대표적으로 onClick과 onChange 이벤트 핸들러를 사용할 수 있습니다.

onClick 이벤트의 경우, 주로 HTML의 button 태그 요소와 함께 사용되므로 HTMLButtonElement 타입이 필요합니다. 또한, 마우스 이벤트가 발생할 때는 React.MouseEvent 타입을 사용합니다. 따라서 onClick 이벤트의 타입은 "React.MouseEvent"에 HTMLButtonElement가 됩니다.

반면에, onChange 이벤트는 일반적으로 HTML의 input 태그 요소와 함께 사용되며, 이 경우 HTMLInputElement 타입이 필요합니다. 입력 이벤트가 발생할 때는 React.ChangeEvent 타입을 사용하므로, onChange 이벤트의 타입은 "React.ChangeEvent"의 HTMLInputElement 가 됩니다.

특정 액션(예: 삭제 또는 선택)을 구분해야 할 경우, 이벤트와 함께 ID를 전달할 수 있습니다. 이때 해당 ID의 타입도 명확히 정의해 주어야 합니다. 이를 통해 이벤트 핸들러는 더욱 명확하고 타입 안전성을 보장할 수 있습니다.

이러한 타입 정의를 통해 React 이벤트 핸들러는 보다 견고하고 유지보수하기 쉬운 코드 작성을 가능하게 합니다.

UseRef Type

const UseRefExample = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const usernameInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const handleClick = () => {
    console.log("username is: " + usernameInputRef.current?.value);
  };

  return (
    <div className="useRefExample">
      <input ref={inputRef} type="text" placeholder="focus here" />
      <input ref={usernameInputRef} type="text" placeholder="username" />
      <button onClick={handleClick}>Send</button>
    </div>
  );
};

export default UseRefExample;

useRef를 사용할 때는 참조하는 HTML 태그의 타입을 정확히 지정하는 것이 중요합니다. 예를 들어 input 태그를 참조한다면 HTMLInputElement 타입을 사용해야 하고, button 태그를 참조한다면 HTMLButtonElement 타입을 사용해야 합니다.

이렇게 적절한 타입을 지정하면 코드의 타입 안전성이 높아지고, 참조 객체의 속성과 메서드를 보다 안전하게 활용할 수 있습니다. 타입을 명확히 지정함으로써 컴파일 타임에 오류를 사전에 방지할 수 있고, 코드 자동 완성 기능을 통해 개발 효율성도 높일 수 있습니다.

따라서 개발 과정에서 이 점을 잘 기억하고 적용하면 보다 견고하고 유지보수하기 쉬운 React 애플리케이션을 만들 수 있습니다. 타입스크립트의 강력한 타입 시스템을 최대한 활용하는 것이 핵심입니다.

UseState Type

interface UserType {
    sessionId: number;
    name: string;
}

const UseStateExample = () => {
    const [username, setUsername] = useState("");
    const [user, setUser] = useState<UserType | null>(null);
    // OR
    // const [user, setUser] = useState<UserType>();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setUsername(e.target.value);
    };

    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setUser({
            name: username,
            sessionId: Math.random(),
        });
    };

    const handleClickLogout = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setUser(null);
    };

    return (
        <div className="useStateExample">
            {user ? (
                <>
                    <b>{user.name} logged in Typescript </b>
                    <button onClick={handleClickLogout}>Logout</button>
                </>
            ) : (
                <form>
                    <input type="text" placeholder="Username" onChange={handleChange} />
                    <button onClick={handleClick}>Login</button>
                </form>
            )}
        </div>
    );
};

export default UseStateExample;

useState 훅을 사용할 때, 상태 값의 타입을 명확히 정의하는 것은 매우 중요합니다. 예를 들어, 상태 값이 UserType이 될 수도 있고 null일 수도 있는 경우와, 상태 값이 항상 UserType이어야 하고 초기 값에 null을 주지 않는 경우 두 가지로 나눌 수 있습니다. 이 부분은 상황에 맞게 타입을 정의하면 됩니다. 위 코드를 기준으로 설명하도록 하겠습니다.

• UserType 또는 null을 허용하는 경우 상태 값이 UserType이거나 초기 상태로 null일 수 있음을 명시합니다. 예를 들어, 사용자가 로그인하기 전에는 null로 설정하고 로그인 후에는 UserType 객체로 설정할 수 있습니다.
• 항상 UserType만을 허용하는 경우 상태 값이 항상 UserType이어야 하며, 초기 값도 UserType 객체로 설정합니다. 예를 들어, 애플리케이션이 시작될 때 기본 사용자 정보를 로드하여 상태에 설정할 수 있습니다.

  UseContext & UseReducer Type

  interface StateType {
    theme: string;
    fontSize: number;
  }
  

interface ColorActionType { type: "CHANGE_THEME"; } type SizeActionType = { type: "CHANGE_FONTSIZE"; payload: number; };

type ActionType = ColorActionType | SizeActionType;

export const ThemeContext = createContext<{ state: StateType; dispatch: React.Dispatch; }>({ state: INITIAL_STATE, dispatch: () => {}, });

useReducer를 사용할 때, state와 dispatch 모두에 대해 타입을 정의하는 것이 중요합니다. state는 상태 항목에 들어가는 부분의 타입을 정의하고, dispatch는 action을 실행하기 때문에 React.Dispatch를 사용하여 ActionType을 정의합니다.
- **상태와 액션 타입 정의** : 먼저 상태 타입과 액션 타입을 정의해야 합니다.

interface StateType { theme: string; fontSize: number; }

interface ColorActionType { type: "CHANGE_THEME"; } type SizeActionType = { type: "CHANGE_FONTSIZE"; payload: number; };

type ActionType = ColorActionType | SizeActionType;

- **리듀서 함수 정의** : 리듀서 함수는 상태와 액션을 받아 새로운 상태를 반환합니다.

const reducer = (state: StateType, action: ActionType) => { switch (action.type) { case "CHANGE_THEME": return { ...state, theme: state.theme === "dark" ? "light" : "dark", }; case "CHANGE_FONTSIZE": return { ...state, fontSize: action.payload, };

default:
  return state;

} };

- **useReducer 훅 사용** : useReducer 훅을 사용할 때 초기 상태와 리듀서 함수를 전달합니다. 이때 state와 dispatch의 타입이 자동으로 유추됩니다.

const INITIAL_STATE = { theme: "dark", fontSize: 20, };

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { const [state, dispatch] = useReducer(reducer, INITIAL_STATE);

return <ThemeContext.Provider value={{ state, dispatch }}>{children}</ThemeContext.Provider>; };

- **컴포넌트에서 사용** : state와 dispatch를 컴포넌트 내에서 사용하여 상태를 관리하고 액션을 디스패치할 수 있습니다.

const UseContextExample = () => { const { state, dispatch } = useContext(ThemeContext); console.log(state);

return (
    <div className="useContextExample">
        <button onClick={() => 
        dispatch({ type: "CHANGE_THEME" })}>Change Theme</button>
        <button onClick={() => 
        dispatch({ type: "CHANGE_FONTSIZE", payload: 20 })}>Change Font Size</button>
    </div>
);

};

export default UseContextExample;

useReducer를 사용할 때 상태와 액션의 타입을 명확히 정의하면, 코드의 타입 안전성을 높이고, 유지보수성 및 가독성을 향상시킬 수 있습니다.

DracoLoader

three.js doc dracoLoader

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

const dracoLoader = new DRACOLoader()

dracoLoader.setDecoderPath('/draco/')
gltfLoader.setDRACOLoader(dracoLoader)

DracoLoader는 Three.js에서 제공하는 로더 중 하나로, Google의 Draco라는 기술을 활용해 3D 모델의 메쉬(Mesh)와 텍스처(Texture) 데이터를 압축하여 로딩 시간을 단축시키는 데에 목적이 있습니다. Draco는 특히 3D 그래픽 데이터의 크기를 상당히 줄일 수 있으며, 이로 인해 웹 환경에서 3D 콘텐츠를 더 빠르게 로드하고 렌더링할 수 있게 해줍니다. 하지만 무조건 장점만 존재하지 않습니다.

• 장점
  • 로딩 시간 단축: 큰 사이즈의 3D 모델과 텍스처 파일을 압축하여 웹 환경에서의 로딩 시간을 크게 줄일 수 있습니다.
    • 네트워크 효율성: 데이터 전송량이 적어지므로 네트워크 사용량이 감소하며, 특히 데이터 사용이 중요한 모바일 환경에서 유리합니다.
  • 사용자 경험 개선: 로딩 시간 감소로 인해 사용자의 대기 시간이 줄어들어, 전반적인 사용자 경험이 향상됩니다
• 단점
  • 처리 시간: 압축된 데이터를 원래대로 복구하는데 추가적인 처리 시간이 필요할 수 있습니다. 이는 클라이언트의 성능에 따라 달라질 수 있습니다.
  • 호환성 문제: 모든 3D 엔진이나 플랫폼에서 Draco 압축을 지원하는 것은 아니므로, 호환성을 고려해야 합니다.

동작원리

• DracoLoader의 동작 원리는 기본적으로 Draco 압축 알고리즘을 사용하여 3D 모델 데이터를 효율적으로 압축하고, 이를 다시 웹에서 사용할 수 있도록 해제하는 과정입니다.
  • 압축 단계: 3D 모델의 메쉬와 텍스처 데이터는 Draco 압축 도구를 사용하여 압축됩니다. 이 과정에서 데이터 구조가 최적화되어 파일 크기가 줄어듭니다.
  • 전송 단계: 압축된 파일은 웹 서버를 통해 클라이언트에 전송됩니다.
  • 해제 단계: 클라이언트 측에서 DracoLoader를 사용하여 압축된 데이터를 해제하고, Three.js 엔진이 이해할 수 있는 형태로 변환하여 렌더링합니다. 이 과정을 통해, 원본 3D 모델 데이터보다 훨씬 작은 파일을 전송하고 처리할 수 있으므로, 로딩 시간을 단축시키고 사용자 경험을 개선할 수 있습니다.

glTF-Pipeline

NPM Gltf-pipeline

glTF-Pipeline은 glTF (.gltf/.glb) 모델을 최적화하고 변환하는 도구입니다. 이 도구를 사용하여 모델 파일의 크기를 줄이고 로딩 시간을 개선할 수 있습니다. 예를 들어, glTF 모델을 Draco 압축을 사용하여 최적화하거나, 이미지를 KTX2 형식으로 변환하여 텍스처의 크기를 줄일 수 있습니다. 그리고 3D 모델과 씬(Scene)을 최적화하고 변환하는 도구입니다. 이 도구는 glTF (GL Transmission Format) 형식의 3D 모델을 위한 공식적인 처리 파이프라인으로, 모델의 크기를 줄이고 로딩 시간을 단축시키며, 다양한 플랫폼과 장치에서의 호환성을 높이는데 중점을 둡니다. glTF는 "JPEG of 3D"로 불리며, 웹과 모바일 환경에서 3D 콘텐츠를 전송하기 위한 효율적인 포맷입니다.

• 장점
  • 성능 향상: glTF-Pipeline을 통해 3D 모델의 파일 크기를 줄이면서도 품질을 유지할 수 있어, 로딩 시간이 단축되고 전체적인 성능이 향상됩니다.
    • 호환성: 다양한 플랫폼과 장치에서의 호환성이 높아집니다. glTF 형식은 널리 지원되므로, 변환된 모델은 다양한 환경에서 사용할 수 있습니다.
  • 자동화: glTF-Pipeline은 명령줄 도구나 Node.js API를 통해 쉽게 자동화할 수 있으며, 대규모 3D 콘텐츠의 배치 처리에 적합합니다.
• 단점
  • 처리 시간: 대규모 파일이나 복잡한 모델의 경우, 변환 과정에서 상당한 처리 시간이 소요될 수 있습니다.
  • 특정 기능의 제한: 모든 3D 모델링 기능이나 특성이 glTF 형식으로 완벽하게 변환되지 않을 수 있으므로, 일부 디테일이나 기능의 손실이 발생할 수 있습니다.

작동원리 glTF-Pipeline의 작동 원리는 상당히 직접적입니다. 이 도구는 glTF 형식의 3D 모델을 입력으로 받아, 다양한 최적화 작업을 수행합니다. 이러한 작업에는 드라코(Draco) 메시 압축, 이미지 및 텍스처 최적화, 불필요한 데이터 제거, 그리고 파일 분할 등이 포함됩니다. 최적화 과정을 거친 후, 훨씬 작은 파일 크기로 변환된 glTF 파일이 출력됩니다. 이 과정을 통해, 원본 모델의 품질을 유지하면서도 전송 및 로딩 시간을 크게 줄일 수 있습니다.

설치

npm install -g gltf-pipeline

설치 후 glb파일 최적화 적용

gltf-pipeline -i originalModel.glb -o optimizedModel.glb -d

상대 경로를 사용하여 src 폴더 내부로 접근이 필요한 경우, gltf-pipeline을 활용하여 파일을 압축하였을 때 압축률이 개선되고 로딩 속도 역시 눈에 띄게 향상되는 것을 확인했습니다.

gltf-pipeline -i src/assets/models/originalModel.glb -o src/assets/models/optimizedModel.glb -d

gltf-pipeline option적용 예시

gltf-pipeline -i src/assets/models/dymnt.glb -d -o src/assets/models/draco.glb --draco.quantizePositionBits 14

gltf-pipeline을 사용한 결과는 다음과 같습니다. 적용 전에는 DracoLoader만 사용할 경우, 3D 파일과 텍스처를 모두 불러오는 데 21.45초가 소요되었습니다. 그러나 gltf-pipeline을 적용한 후에는 13.45초로 약 38%가량 줄어 사용자 경험이 크게 향상되었습니다. 또한, 리소스 파일 크기도 기존 746MB에서 650MB로 약 12.87% 감소하여 최적화가 잘 이루어졌음을 확인할 수 있었습니다.

• 로딩 시간 평가: 전체 화면 로딩 완료 시점
  • 이 시간은 사용자가 웹 페이지와 상호작용할 수 있는 시점까지의 총 로딩 시간을 의미합니다.

GltfLoader만 적용 초기 측정 결과, 전체 화면 로딩 완료까지 소요된 시간은 평균 28.93초로 나타났습니다.

DracoLoader만 적용 초기 측정 결과, 전체 화면 로딩 완료까지 소요된 시간은 평균 21.45초로 나타났습니다.

DracoLoader + gltf-pipeline 적용 초기 측정 결과, 전체 화면 로딩 완료까지 소요된 시간은 평균 13.45초로 나타났습니다.

• 무조건 압축은 좋은 부분은 아닙니다. 그만큼 화질이 깨져 단점도 존재하니 적절하게 사용하시는 걸 추천드립니다.

Next.js에서는 서버의 각 가져오기 요청에 대한 캐싱 및 재검증 동작을 구성할 수 있습니다.

• 데이터 캐싱

  const getData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", { cache: "force-cache" });
  if (!res.ok) {
    throw new Error("Something went wrong");
  }
  return res.json();
  };

  fetch 내에 있는 cache 옵션 중 force-cache를 사용하면, 기본적으로 Next.js가 반환된 값을 서버의 데이터 캐시에 자동으로 저장합니다. 이는 빌드 시간이나 요청 시간에 데이터를 불러오고, 캐시하여, 각각의 데이터 요청마다 재사용 가능하다는 것을 의미합니다. 데이터 캐시는 설정된 시간 동안 웹 서버로 들어오는 모든 요청에 대해 활성화됩니다. 이러한 메커니즘 덕분에 1000명의 사용자가 접속한다 해도 실제로 API로는 단 한 번의 요청만이 이루어져서 큰 효율성을 자랑합니다. 또한, 캐시되지 않은 데이터(예: { cache: 'no-store' })는 항상 데이터 소스에서 직접 가져와 저장됩니다.

• 데이터 재검증

  const getData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", { next: { revalidate: 1000 } });
  if (!res.ok) {
    throw new Error("Something went wrong");
  }
  return res.json();
  };

• 데이터 재검증(Revalidating Data)*은 데이터 캐시를 제거하고 최신 데이터를 다시 가져오는 과정입니다. 이는 데이터가 변경되어 최신 정보를 제공해야 할 때 유용합니다. 현재 next.revalidate를 1초로 설정해두었기 때문에, 1초 동안 1,000명의 사용자가 접속하더라도 실제 API 요청은 단 한 번만 전송됩니다.

SEO

SEO(Search Engine Optimization, 검색 엔진 최적화)는 구글과 같은 검색 엔진에 친화적인 사이트를 구축하여, 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업을 의미합니다. 웹사이트의 기술적인 부분을 개선하여 검색 엔진이 웹사이트의 콘텐츠를 잘 이해하고 인덱싱할 수 있도록 하는 것도 최적화 작업의 중요한 부분입니다. 그러나 궁극적으로, SEO는 사용자들에게 유용하고 양질의 콘텐츠를 제공함으로써, 다양한 관련 키워드로 검색 결과 페이지에 노출되는 것을 목표로 하는 마케팅 전략입니다. 이를 통해 웹사이트의 온라인 가시성을 크게 개선할 수 있습니다.

export const metadata = {
  title: "FEDown | Introduction",
  description: "Frontend developer",
};

Next.js에서는 이러한 SEO를 간편하게 구성할 수 있습니다. 아래 코드는 정적 메타데이터를 설정하는 예입니다. SEO를 위해 페이지나 레이아웃에 메타데이터를 추가하고, 웹 페이지의 제목과 설명을 작성하면 됩니다.

metadata를 사용 시에는 server component로 구성된 공간에서만 사용이 가능합니다. 만약 client component가 되는 공간에는 아래와 같은 에러가 발생합니다.

Error: × You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive.

아울러 app의 layout.js파일에 아래와 같은 코드로 작성 시 반복적으로 처리 된 내용을 하나로 묶어서 진행 할 수도 있습니다.

export const metadata = {
  title: {
    default: "FEDowon | home",
    template: "%s | FEDowon",
  },
  description: "Frontend developer",
};

about page

export const metadata = {
  title: "About",
  description: "About Description",
};

동적 metadata

export const generateMetadata = async ({ params }) => {
  const { slug } = params;
  const post = await getPost(slug);
  return {
    title: post.title,
    description: post.desc,
  };
};

metadata를 동적으로 구성하기 위해서는 비동기적으로 데이터 처리를 진행하고 그 상태에서 title와 description을 작성하면 됩니다.

Server action

server action을 사용하기 위해서는 "use server"를 작성하여 진행합니다.

const ServerTestPage = () => {
  const actionComponent = async () => {
    "use server";
    console.log("it works back");
  };
  return (
    <div>
      <form action={actionComponent}>
        <button>Test me</button>
      </form>
    </div>
  );
};
export default ServerTestPage;

함께 server가 작성된 code입니다. lib안에 action.js를 만들고 form action에 actionComponent를 넣어도 동일하게 작동 됩니다. 일단 "use server"를 작성함으로서 server에서 동작할 수 있게 됩니다.

다음 사진과 같이 "Test me" 버튼을 클릭하면, 서버에서 반응하여 터미널에 console.log 값이 출력되는 것을 확인할 수 있습니다. 또한, 네트워크 탭에서도 서버의 동작이 진행된 것을 확인할 수 있습니다.

revalidatePath

export const addPsot = async (formData) => {
  "use server";
  const { title, desc, slug, userId } = Object.fromEntries(formData);
  try {
    connectToDb();
    const newPost = new Post({ title, desc, slug, userId });
    await newPost.save();
    revalidatePath("/blog");
  } catch (err) {
    console.log(err);
    return { err: "Something went wrong" };
  }
};

revalidatePath 함수는 특정 경로에 대해 필요에 따라 캐시된 데이터를 제거하고, 최신 데이터를 제공하기 위해 캐시된 데이터를 재검증하는 데 사용됩니다.

API Route

URL에서 확인할 수 있듯이, 'api/blog/post1' 같은 경로 구성이 가능합니다. Next.js에서는 앱 내부에 'api'라는 폴더를 만들어 이와 유사한 방식으로 진행할 수 있습니다. 예시코드는 mongodb를 이용하여 만든 route.js입니다.

import { Post } from "@/lib/models";
import { connectToDb } from "@/lib/utils";
import { NextResponse } from "next/server";

export const GET = async (req) => {
  try {
    connectToDb();
    const posts = await Post.find();
    return NextResponse.json(posts);
  } catch (err) {
    console.error("Failed to fetch posts");
  }
};

작성된 코드를 보면 NextResponse이 있습니다. NextResponse는 더 많은 편의 기능을 제공하는 웹 응답 API를 확장합니다.

NextResponse option

• cookies : 응답의 Set-Cookie 헤더를 읽거나 수정할 수 있습니다.
• set(name, value) : 주어진 이름에 대한 값을 사용하여 응답에 쿠키를 설정합니다.

  let response = NextResponse.next()
  response.cookies.set('show-banner', 'false')
  return response
  // Response will have a `Set-Cookie:show-banner=false;path=/home` header

• get(name) : 쿠키 이름을 제공하면 해당 쿠키의 값을 반환합니다. 쿠키를 찾을 수 없는 경우 undefined가 반환됩니다. 여러 개의 쿠키가 발견되면 첫 번째 쿠키가 반환됩니다.

  let response = NextResponse.next()
  // { name: 'show-banner', value: 'false', Path: '/home' }
  response.cookies.get('show-banner')

• getAll() : 쿠키 이름을 제공하면 해당 쿠키의 값들을 반환합니다. 이름이 제공되지 않은 경우 응답에 있는 모든 쿠키를 반환합니다.

  let response = NextResponse.next()
  // [
  //   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
  //   { name: 'experiments', value: 'winter-launch', Path: '/home' },
  // ]
  response.cookies.getAll('experiments')
  // Alternatively, get all cookies for the response
  response.cookies.getAll()

• delete(name) : 쿠키 이름이 주어진 경우, 해당 쿠키를 응답에서 삭제합니다.

  let response = NextResponse.next()
  // Returns true for deleted, false is nothing is deleted
  response.cookies.delete('experiments')

• json() : 주어진 JSON 데이터를 포함한 응답을 생성합니다.

  import { NextResponse } from 'next/server'
  

export async function GET(request: Request) { return NextResponse.json( { error: 'Internal Server Error' }, { status: 500 } ) }

- redirect() : URL을 생성하여 수정한 후 NextResponse.redirect() 메서드에서 사용할 수 있습니다. 예를 들어, request.nextUrl 속성을 사용하여 현재 URL을 가져와서 다른 URL로 리다이렉션할 수 있습니다.

import { NextResponse } from 'next/server'

return NextResponse.redirect(new URL('/new', request.url))

- rewrite() : 제공된 URL을 유지하면서 다시 작성(프록시)하는 응답을 생성합니다.

import { NextResponse } from 'next/server'

// Incoming request: /about, browser shows /about // Rewritten request: /proxy, browser shows /about return NextResponse.rewrite(new URL('/proxy', request.url))

- next() : 메서드를 사용하면 일찍 반환할 수 있고 라우팅을 계속할 수 있습니다. 미들웨어에 유용합니다.

import { NextResponse } from 'next/server'

return NextResponse.next()

### Auth.js
[Auth.js API Reference](https://authjs.dev/reference/overview)
auth.js는 Next.js를 포함한 다양한 웹 프레임워크를 지원하며, 인증 관련 개발을 더욱 쉽고 다양하게 진행할 수 있게 도와줍니다. 예를 들어, 카카오, 네이버, 구글, 깃헙 등의 로그인을 손쉽게 구현할 수 있습니다.
![](https://velog.velcdn.com/images/korea-dollar/post/4a8015a9-f481-4bc4-960b-ac4f53efca75/image.png)
사진보다 더 많은 provider을 지원하여 쉽게 auth를 개발할 수 있습니다.
예시) 깃헙일 경우

import NextAuth from "next-auth"; import Github from "next-auth/providers/github"; export const { handlers: { GET, POST }, auth, signIn, signOut, } = NextAuth({ providers: [Github({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET })], });

login page

import { signIn } from "@/lib/auth"; import React from "react";

const LoginPage = () => { const handleGithubLogin = async () => { "use server"; await signIn("github"); }; return (

export default LoginPage;

위에 코드로 구성하면 이제 우리가 깃헙으로 로그인하던 모습이 나타납니다.
![](https://velog.velcdn.com/images/korea-dollar/post/52a8f982-478e-4fb3-8cf0-067421777e65/image.png)

개발하실 때 주의사항은 async, await같은 경우 client가 아닌 server component에서 진행하는 것이 좋습니다.

const Navbar = async () => { const session = await auth();

return (

### Middleware
[Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware)
미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행하여 다양한 작업을 수행할 수 있습니다. 이는 들어오는 요청에 따라 요청이나 응답 헤더를 재작성하고, 리디렉션을 수행하며, 요청을 수정하거나 직접 응답을 제공하여 응답을 조정할 수 있습니다. 구체적으로 다음과 같은 기능을 제공합니다:

- 인증 및 권한 부여: 특정 페이지나 API 경로에 접근하기 전에 사용자의 신원을 확인하고 세션 쿠키를 검사하여 적절한 권한을 부여합니다.
- 서버 측 리디렉션: 특정 조건에 따라 서버에서 사용자를 다른 경로로 리디렉션합니다.
- 경로 재작성: 요청 속성을 기반으로 API 경로나 페이지에 대한 경로를 동적으로 재작성하여 A/B 테스트, 기능 출시, 레거시 경로 지원 등을 구현할 수 있습니다.
- 로깅 및 분석: 요청을 페이지나 API에서 처리하기 전에 데이터를 캡처하고 분석하여 유용한 통찰을 얻습니다.
- 기능 플래그 지정: 기능을 동적으로 활성화하거나 비활성화하여 기능 출시나 테스트를 원활하게 수행합니다.

이러한 기능을 통해 미들웨어는 웹 애플리케이션의 유연성과 관리성을 크게 향상시킵니다.
![](https://velog.velcdn.com/images/korea-dollar/post/260c1524-a1a4-46e8-ae68-249c1d620f83/image.png)
middleware.js파일은 src 디렉토리 경로에 있어야 합니다.

import NextAuth from "next-auth"; import { authConfig } from "./lib/auth.config";

export default NextAuth(authConfig).auth;

export const config = { matcher: ["/((?!api|static|.\..|_next).*)"], };

### useFormState
useFormState는 React Hook의 일환으로, 폼 관련 데이터 및 상태 관리에 주로 활용되며, 입력 필드의 값 관리나 유효성 검사에 있어 매우 유용하게 쓰입니다. 이를 통해 React 양식에서의 데이터 처리가 한층 더 간결하고 효율적으로 이루어집니다.

- **상태 관리의 간소화**: React Hook을 통해 폼 상태를 손쉽게 관리할 수 있어, 코드의 복잡성을 줄이고 개발 과정을 더욱 신속하게 진행할 수 있습니다.
- **강력한 유효성 검사 및 오류 처리 기능**: React Hook Form과 같은 라이브러리를 함께 사용함으로써, 정교한 유효성 검사와 오류 처리가 가능해져, 사용자 경험을 크게 향상시킬 수 있습니다.
- **성능 최적화의 이점**: React Hook을 활용함으로써, 필요한 경우에만 컴포넌트가 리렌더링되도록 하여 불필요한 리렌더링을 방지할 수 있으며, 이는 애플리케이션의 전반적인 성능 최적화에 기여합니다.

이러한 특징들 덕분에 useFormState는 React 기반의 웹 애플리케이션 개발 시 폼 관리를 위한 강력한 도구로 자리매김하고 있습니다.

"use client";

import { addPost } from "@/lib/action"; import styles from "./adminPostForm.module.css"; import { useFormState } from "react-dom";

const AdminPostForm = ({ userId }) => { const [state, formAction] = useFormState(addPost, undefined);

return (