미리보기

(소개) 하나의 컴퓨터가 다른 컴퓨터와 통신할 수 있도록 라우터와 스위치를 적절하게 설정하는 퀴즈를 풀어야 하는 프로젝트

네트워크 계층과 장비의 역할

• 컴퓨터가 통신하기 위한 네트워크 계층과 서브넷의 개념을 배움

• 프로토콜(Ethernet, ICMP, IP)과 네트워크 장비(라우터, 스위치)를 이용하는 통신 과정을 습득

• 클래스 표기법과 CIDR 표기법의 차이점을 습득

• Public과 Private 네트워크 대역의 차이점을 배움

(소개) VirtualBox를 이용해 Wordpress 서버를 배포해보는 프로젝트

가상 머신 네트워크 및 보안 설정

• 가상 머신 외부의 요청을 감지하고 처리하기 위해 호스트 컴퓨터와 포트포워딩 설정

• SSH을 통해 호스트와 가상 머신 간에 암호화된 통신으로 보안을 강화

• ufw 방화벽을 설치해 필요한 포트를 제외하고는 외부 접근을 차단

Wordpress 서버 설치 및 배포

• 외부 HTTP 요청을 처리하기 위한 lighttpd(경량 웹 서버) 설치

• php로 작성된 Wordpress를 실행하기 위한 php-fpm(실행 환경) 구축 및 lighttpd 연동

• Wordpress에서 사용할 MariaDB(데이터베이스) 연동

FTP을 이용한 호스트와 가상 머신 사이의 파일 전송 서비스 추가

(소개) Docker를 이용하여 Wordpress 서버를 배포해보는 프로젝트. 가상 머신을 이용하는 프로젝트와 결과는 같지만 다른 방법으로 진행해보는 프로젝트

Docker 실행 환경 설정

• 컨테이너 간의 통신을 위해 bridge 네트워크를 구축하여 같은 네트워크 대역으로 설정

• 컨테이너가 삭제되어도 자료의 영속성을 위해 호스트 컴퓨터와 컨테이너의 볼륨 마운트

• 일련의 Docker 설정을 편리하게 구성할 수 있는 Docker-compose.yaml 파일 작성

Wordpress 서버 설치 및 배포

• 웹 서버, php 실행 환경, 데이터베이스 프로세스를 컨테이너로 격리하기 위한 Dockerfile 작성

• wp-cli 패키지를 이용하여 초기 Wordpress 설정을 자동화

(소개) 선택지 기반 퀴즈 모델(듀오링고)의 한계점을 보완하고자 시작한 프로젝트. 텍스트 입력으로 정확한 읽기를 학습하여 초급자에서 중급자로 성장할 수 있도록 지원 (링크)

(역할) 기획 및 FE, BE 개발

Next.js를 활용하여 랜딩 페이지를 정적 사이트 생성(SSG)

• 개발 시간을 절약하기 위해 랜딩 페이지 템플릿(HTML / CSS / JS)을 React 코드로 전환

• ScrollReveal 라이브러리 클라이언트 의존 문제를 해결하여 서버 사이드 렌더링 호환성 확보

• 앱에 대한 자세한 소개를 포함하여 SEO 개선

Jotai 비동기 처리 메커니즘 적용 사례

• 코드 재사용성을 위해 컴포넌트에서 비동기 API 로직을 분리하여 Jotai Atom에 결합

• Jotai Write Atom이 Suspense를 지원하지 않는 한계를 발견한 후, Read Atom을 이용하여 API Refresh 상태 관리 로직을 구현

모바일 사용자의 접근성을 고려해 반응형 웹 페이지 설계

• CSS @media-query와 useMediaQuery 훅을 활용하여 UI 크기, 레이아웃을 조정

• 특히 모바일 환경에서 가상 키보드 사용 시, UI 가시성을 유지하기 위해 스크롤을 조정하여 사용자 편의성 향상

(기술) React, Typescript, Next.js, Emotion/styled, Jotai, Material UI, Vercel / Nest.js

(소개) 컨텐츠와 함께 영어 회화를 즐길 수 있는 음성 통화 매칭 플랫폼 (링크)

(역할) 기획 및 FE 개발

실시간 투표와 사용자 컨텐츠 동기화

• 음성 통화 중 몰입도를 증가시키기 위해 모든 사용자의 컨텐츠를 동기적으로 관리

• WebSocket을 활용하여 투표와 컨텐츠 동기화 기능을 구현

WebRTC 연결 최적화로 그룹 통화 참여 가능 사용자 수를 확장

• WebRTC 연결 알고리즘을 서버에서 클라이언트로 옮기고 시간 복잡도 O(n^2)를 제거

• 데이터 구조를 ref<Peer>[]에서 ref<Peer[]>로 수정하여 객체 수를 유연하게 조정

WebRTC 연결 문제 해결

• NAT 환경에서 통화 연결이 불가능한 문제를 발견, WebRTC의 ICE Negotiation 원리 분석

• Public IP를 제공하는 STUN/TURN 서버를 활용해 네트워크 문제를 해결

• NAT, LTE, VPN 등 다양한 네트워크 환경에서 테스트 완료, 안정적인 통화 연결 보장

(기술) React, Typescript, Context API, TailwindCSS, Vite, WebRTC, Socket.io, Axios

• C 라이브러리부터 HTTP 1.1 웹 서버까지, 프로젝트 기반 주 70시간 교육 과정

• 시스템 프로그래밍을 통해 운영 체제와 컴퓨터 과학 지식을 습득

• 인강, 기술 문서, 코드 리뷰, 스터디 등 다양한 매체를 활용하여 학습하는 방법을 배움

• 100+회의 평가를 통해, 다른 사람의 코드를 이해하는 역량을 기름

• Tensorflow, Keras 등 AI 모델을 활용한 다양한 예측 실습

• HTML, CSS, JS 등 웹에 대한 기초를 학습

• 금융 소외 계층의 AI 행원이라는 주제로 최우수 프로젝트상 수상

• 프론트엔드 리더를 맡아 jQuery를 이용한 음성, 키보드, 버튼으로 상호작용하는 챗봇 구현