작업 기간2024.01.05 ~ 2024.02.20팀원 구성1인 개발기술스택Typescript, HTML, CSS, git, jira, wiki (라이브러리, 프레임워크 사용 X)후기처음으로 라이브러리와 프레임워크를 사용하지 않고 개발을 해보았는데, 어려움이 많았습니다. 어떤 구조로 개발을 진행할 것인지, 렌더링과 상태관리는 어떻게 진행할 것인지 고민하였습니다. React와 비슷한 구조로 진행하였으나, 부족한 부분들이 많았던것 같습니다.요구사항을 만족하는 것을 우선적으로 개발을 진행하였으며, 모든 요구사항을 구현하였습니다. 하지만 설계에 시간을 더 사용해서 확장성과 재사용성이 높은 구조로 개발하였어야 한다고 생각합니다.애자일 방식으로 개발을 진행하였으며, 꾸준히 리팩토링을 진행하였습니다. 설계에서 부족한..

작업 기간2023.10.10 ~ 2023.11.17팀원 구성개발 6명기술스택프론트엔드 : React, Nextjs, CSS협업 및 배포 툴 : figma, gitlab, Notion, mattermost, jira후기개발을 하면서 차트 라이브러리를 많이 사용했었습니다. 하지만 원하는 기능이 없거나, SVG, Canvas 중 하나만 지원하거나, 디자인이 마음에 안드는 경우가 있었습니다. 이러한 부분들을 개선하고자 차트라이브러리 개발을 기획하였습니다.오픈소스로 개발을 진행하며, 누구나 기여할 수 있도록하며, NPM에 배포하여 실제 사용자들을 받는 것을 첫번째 목표로 하였습니다. 최대한 다양한 기능들을 지원 하도록 개발을 하였으며, NPM에 배포한 후 주간 1400회의 다운로드를 기록하는 성과를 가질 수 있었..

작업 기간2023.08.28 ~ 2023.10.06팀원 구성프론트엔드 : 3명백엔드 : 3명기술스택Typescript, React, Tailwind, PWA, React Query, Recoil, Jest, Figma, Jira, Git 후기PWA를 사용해서 금융앱을 만드는 프로젝트로 진행하였습니다. 마이데이터를 사용해서 실제 금융 서비스를 구현해보고 싶었는데, 마이데이터는 개인이  사용할 수 없어서 더미데이터를 사용해야 했습니다.팀원에 개발에 익숙하지 않은 팀원이 많아서 이번 프로젝트는 학습을 목표로 개발을 하였습니다. 프론트에서는 PWA, Recoil, React Query, Jest를 학습했습니다.결제, 이체, 조건 이체(미션), 관계 설정(부모 자식) 등의 기능으로 금융 서비스를 제공하는 앱을 만..

코드는 이해하기 쉬워야 합니다.- 짧은 코드가 반드시 이해하기 쉬운 것은 아닙니다.console.log(++x ++x;if(x 위의 코드가 아래의 코드보다 간결하나, 아래 코드가 더 이해하기 쉽습니다.1인 프로젝트라고 하더라도, 긴 시간이 흐른후에 해당 코드를 보았을 때 낯설게 보일 수 있으므로 이해하기 쉽게 코드를 작성하는 것을 목표로 합니다.변수, 함수, 클래스 등의 이름을 결정할 때 정보를 담아내야합니다.- 구체적인 이름 사용 - 보편적이지 않은 단어 사용- 접두사, 접미사로 추가적인 정보 담기ex)구체적인 단어get, set 보다 구체적인 의미를 담은 단어 사용하기 stop -> resume이 되는 경우 : pause / 되지 않는 경우 : kill make -> create, set up, bu..

Compression Streams APIgzip 또는 deflate 형식을 사용하여 데이터 스트림을 압축 및 압축 해제 할 수 있는 JavaScript API를 제공파일 압축, HTTP 응답 압축에 많이 사용표준 HTTP 응답압축된 HTTP 응답deflate허프만 코딩 알고리즘의 조합을 사용하여 데이터를 압축gizpdeflate 알고리즘을 사용하여 데이터를 압축gzip은 추가적인 헤더와 풋터를 포함하여, 파일 이름, 타임스탬프 등의 메타데이터를 저장호환성, 안정성이 높음문자열을 UTF-8 바이트 배열로 인코딩합니다.인코딩된 데이터를 ReadableStream에 전달하여 스트림을 생성합니다.생성된 스트림을 CompressionStream을 통해 파이프하여 gzip으로 압축합니다.압축된 데이터 스트림을 읽..

디자인 패턴이란 프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다. 1. Presentation & Container React 디자인 패턴 중 가장 기본적인 패턴으로, 데이터 로직을 수행하는 Container 컴포넌트와 데이터를 출력하는 Presentation 컴포넌트를 분리하여 구현하는 디자인 패턴 Container 컴포넌트 - API호출, State 관리, 이벤트 처리 등의 작업을 수행하는 컴포넌트 입니다. - 변경된 상태 값을 props를 통해 Presentation 컴포넌트로 전달해줍니다. Presentation 컴포넌트 - UI를 표시하는 컴포넌트입니다. - 직접 상태값을 관리하지 않고 Container 컴포넌트가 전달해준 props를 받아 출력합니다. 특징 - 컴포넌트간 의..

SEO (search engine optimization) 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정 크롤링 검색엔진이 온라인에 있는 문서를 수집하는 과정 색인 검색엔진에서 수집한 데이터를 백과사전 형태로 등록하는 과정 검색엔진 최적화 가이드 문서 웹문서가 정제되지 않은 데이터로 존재하면 검색엔진이 의미 있는 데이터를 뽑아내기가 어려움 => 구글이나 네이버에서 검색엔진 최적화 가이드 문서를 제공 메타태그 - 검색 포털이 잘 가져갈 수 있게 구조화를 하는 과정 title meta name="decription" meta name="author" meta name="keywords" - sns 미리보기를 꾸미는 과정 meta name="og:site_name" ..

작업 기간 2023.07.10 ~ 2023.08.18팀원 구성FrontEnd : 3명 / BackEnd : 3명기술스택 프론트엔드 : Typescript, React, Tailwind, Open Vidu백엔드 : Spring Boot, Spring Sequrity, JPA, Stomp협업 및 배포 툴 : figma, gitlab, docker, jenkins, Notion, mattermost, jira 후기 7주동안의 프로젝트가 끝났습니다. WEB RTC를 활용한 라이브 화상 채팅 마피아 게임을 만들었습니다. 09시부터 18시까지 싸피에서 작업하고, 집에와서 밥먹고 강아지를 산책시킨 후 20시~04시까지 작업하는 날들을 반복했습니다. 팀장이라는 책임감과 이번 프로젝트에서 반드시 성과를 내겠다는 다짐을 ..