끄적끄적 코딩
article thumbnail
Compression Streams API
카테고리 없음 2024. 3. 18. 01:50

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

article thumbnail
React 디자인 패턴
FrontEnd 2023. 9. 7. 17:47

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

article thumbnail
검색엔진 최적화 SEO
FrontEnd 2023. 9. 4. 02:04

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

Who's The ZARA 프로젝트 회고 (WEB RTC를 활용한 화상채팅 마피아게임)
Project 2023. 9. 1. 17:55

작업 기간 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시까지 작업하는 날들을 반복했습니다. 팀장이라는 책임감과 이번 프로젝트에서 반드시 성과를 내겠다는..

[React Native] Expo, React Native CLI
React Native 2023. 8. 28. 16:14

리액트 네이티브를 이용할 때 개발 환경을 세팅하는 방법은 대표적으로 두가지가 있습니다. 1. Expo 2. React Native CLI Expo 무료로 사용하는 3rd Party 서비스 입니다. 이 Expo를 이용하면 React Native 개발할 때 개발자가 쉽게 할 수 있도록 도와줍니다. 장점 쉬운 배포 및 버전 업데이트 Android / X-code가 없이 본인의 휴대폰으로 테스트 가능 빠르고 간단한 설치 및 환경 설정 단점 Expo에서 제공하는기능만 사용 가능 모듈을 만들어 사용 불가 native 파일 제어 불가 Expo는 간단하고 편리한 대신 복잡하고 섬세하게 제어를 못한다는 단점 React Native CLI React Team에서 만들었으며, Expo 같은 툴을 사용하지 않고 React N..

article thumbnail
[React Native] Core Components, Native Components
React Native 2023. 8. 28. 15:47

React Native React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크 Native Components React Native 구성 요소는 Android 및 iOS와 동일한 보기에서 지원되기 때문에 React Native 앱은 다른 앱과 같은 모양, 느낌 및 성능을 제공합니다. 이러한 플랫폼 지원 구성 요소를 Native Components 라고 합니다. React Native를 사용하면 React Component를 사용하여 JavaScript로 이러한 View를 호출 할 수 있습니다. - Android 개발에서는 Kotlin 또는 Java로 View를 작성합니다. - iOS 개발에서는 Swift 또는 Objective-C를 사용..

article thumbnail
[React Native] React Native란?
React Native 2023. 8. 28. 15:31

리액트 네이티브란? - 리액트와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크 - React를 기반으로 하지만 React는 브라우저를 대상으로 하고 React Native는 모바일 플랫폼을 대상으로 합니다. - React Native를 사용하면 Android와 iOS 모두에서 동시에 쉽게 개발을 할 수 있습니다. 장점 1. WebView를 사용하는 다른 크로스 플랫폼과는 다르게 실제 호스트 플랫폼의 표준 렌더링 API를 사용해서 렌더링 - WebView를 사용하면 성능상의 문제와 Native에서 사용하는 기본 UI 요소나 애니메이션을 Javascript, HTML 및 CSS 조합으로 모방하려고 하기에 한계가 있습니다. - React Nativ..

나들이 프로젝트 회고 (지역별 관광 데이터를 활용한 여행 정보 사이트)
Project 2023. 8. 28. 15:16

작업 기간 2023.05.08 ~ 2023.05.25 팀원 구성 프론트엔드 1명 백엔드 1명 기술스택 프론트엔드 : Vue.js, HTML, CSS 백엔드 : SpringBoot, MySQL 라이브러리 : emailjs, cheerio, vue-chartjs 협업 툴 : GitLab, Notion, Jira 후기 3주동안의 프로젝트가 끝났습니다. kakao map API와 전국 관광지 API를 사용해서 여행 정보 사이트를 만들었습니다. 싸피에서는 프론트와 백엔드간에 연결해야하는 부분을 개발하고, 집에서는 더미데이터로 개발을 하고 버그 수정 및 디테일한 UI 추가 작업을 진행하였습니다. 인원이 2명에 개발 기간이 짧아서 최대한 빠르게 개발을 진행하였습니다. 그리고 최우수 프로젝트로 선정 될 수 있었습니다...

검색 태그