Workflow
Figma MCP agent에게 구간별 UI 변화 설명하기
Figma MCP agent에게 Figma URL 하나를 던지고 "반응형으로 해줘"라고 하면 자주 깨진다. 문제는 구현력이 아니라 읽기 기준이 비어 있다 는 점이다. 에이전트가 어떤 프레임을 기준으로 읽었는지, 모바일·태블릿·데스크톱…
CI/CD
CI/CD 파이프라인을 통한 민감 데이터의 안전한 배포 방법(1)
Google AdSense를 등록하던 도중 ads.txt를 찾을수 없다는 알림이 보였다. 그래서 ads.txt를 어떻게 넣어야 할까 고민을 하던중 여기저기 검색해봤는데 띠용..? 너무 간단한 방법이긴 한데.. 내가 숨겼던 id나 개인…
Zippu 프로젝트 후기
프로젝트 소개 어디야? 지각을 뿌시는 그날까지 매번 약속 때마다 거짓말 하는 친구들의 본격 지각 타파를 위한 서비스를 제공하기로 했다. 작업 기간: 2023.04 2023.10 지각뿌셔는 이런 기능들을 제공해요! 1. 그룹…
p5.js로 헤엄치는 고래 만들기(2)
프로젝트 소개 지난 포스트 에 이어서 오늘은 제일 복잡했던 고래의 움직임에 대해 글을 쓰려고 한다. 👉🏻 소스 코드 고래의 움직임 (1) whale.ts 1. 고래위치 위치 = 위치 + 속도 wPos는 고래의 현재 위치를 나타내며…
p5.js로 헤엄치는 고래 만들기(1)
프로젝트 소개 👉🏻 소스 코드 Nature of code 4장까지 스터디를 진행하면서 주로 물속에서 물체의 움직임과 관련하여 발표를 주로하였다. 4장까지의 내용을 복습할겸 해당 프로젝트를 진행하게 되었다. 목표 구현 화면 고래상어…
공공 API 활용하기: 옷체통
Desktop, mobile 프로젝트 개요 사건의 발단은 간단하다. 친구 짐정리를 도우러갔다가 헌옷수거함을 찾기가 어려웠던것에서부터 이 프로젝트는 시작되었다. 흔히 보이던 헌옷수거함이 막상 찾으니까 없었다. '자치구' 마다 헌옷수거에…
JavaScript
Hash Map과 Javascript Map과 Set의 연관성
Hash Map과 Javascript Map과 Set의 연관성 해시 맵(Hash Map)과 JavaScript의 Set 및 Map은 모두 데이터를 저장하고 관리하는 데 사용되는 자료 구조입니다. 이들 간에는 몇 가지 연관성이 있습니다…
첫 오픈소스 contribution
라이브러리가 deprecated되었다 오랜만에 블로그를 작성하려하는데 에..? upstream/master로 chirpy theme repository를 업데이트 후 conflict 대잔치.. 그러던 중 plugin관련 라이브러리가 …
Git
ssh로 git clone 하기
SSH SSH 란 Secure Shell 의 줄임말로, 두 컴퓨터 간 통신을 할 수 있게 해주는 하나의 protocol Protocol 이란, 서로 다른 통신 장비 간 주고 받는 데이터의 양식과 규칙입니다. 인터넷 연결만 되어있어도 …
Algorithm
프로그래머스를 Github에 연동
1. 백준허브 (BaekJoonHub) 플러그인 설치 백준허브 확장 프로그램을 'Chrome에 추가' 설치 2. 백준허브 플러그인에 Github 계정 인증 플러그인 더블클릭 'Authenticate' 클릭 3. 레포지토리 연결 기존 …
React-Native
App 카메라 최적화
얼굴 인식 성능 최적화: App 카메라 최적화 사례 프로젝트 개요 라이브러리를 활용하여 얼굴 인식을 구현하였다. 하지만 전체 화면에서 얼굴 인식을 수행할 때 성능 저하가 발생하여, 이를 해결하기 위한 최적화 작업을 진행하였다. 💡 …
Frontend
Sentry로 효율적인 에러수집하기
Sentry Sentry는 소프트웨어 개발 및 운영에서 발생하는 버그와 에러를 모니터링하고 추적하는 플랫폼. 주요 기능 및 특징은 다음과 같다: 1. 실시간 에러 모니터링: Sentry는 실시간으로 애플리케이션에서 발생하는 에러를 모…
Android
Android 배포 후 keystore 보안
배경상황 안드로이드 개발 후 Play Store 에 배포를 하기 위해서는 키스토어(Key Store)를 이용하여 Signing된 apk 또는 aab(Android App Bundle)이 필요합니다. 디버그 및 릴리즈 빌드할 때 key…
Android
Android Studio Keystore 생성하기
Command로 Keystore 생성하기 keytool은 jdk 설치 폴더의 bin에 위치해 있기 때문에 Java를 환경변수설정으로 지정해주었다면 위치와 상관없이 command창에서 실행이 가능하지만, 환경변수설정을 지정 하지 않았다…
Android
Proguard로 안드로이드 소스코드 난독화
안드로이드 앱의 보안 중요성 안드로이드 앱을 빌드하면 aab apk 파일로 만들어 진다. 이들은 단순히 우리가 작성한 코드들의 압축에 불과하다. 따라서 apk의 압축을 풀면 우리가 작성한 코드의 내부가 모두 보인다. 안드로이드 스튜디…
Android
APK파일 크기를 왜 줄여야 할까?
APK파일 크기를 줄이는게 왜 필요할까? 한국 사용자들은 대부분 네트워크 환경이 좋고, 최신 플래그십은 256GB, 심지어 보급형 기기도 128GB 고용량의 스마트폰을 사용한다. 하지만 모두가 이런 환경을 가지고 있을까? 전 세계적으…
Zippu
앱 삭제 후 알림이 안와요
FCM?? 먼저 푸시 알림을 보내기 위해서는 파이어베이스에 대한 이해가 필요하므로, 파이어베이스의 공식문서를 차근차근 정리해 보았다. FCM 아키텍처? Firebase 클라우드 메시징(FCM)은 무료로 메시지를 안정적으로 전송할 수 …
Frontend
Web RTC?
1. Web RTC ? 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림 할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술 드라이버나 플러그인 설치 없이 웹 브라우저 간 …
Zippu
React Native 각 OS 화면비율 맞추기
Problem iOS화면만 보고 개발했을 때 AOS의 화면이 와장창.. Improvement 해당 코드는 React Native 프로젝트에서 화면 크기, 여백, 글자 크기 등을 일정한 기준에 맞추어 설정하기 위한 유틸리티 함수와 상수…
Blogging
State and Props
데이터 바인딩 데이터 바인딩? 화면상에 보여지는 데이터(View) 와 브라우저 메모리에 있는 데이터(Model) 를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것 = HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화…
Blogging
Clean Architecture: Practice
Clean Architecture 도입 배경 초창기 "회사 관리자 웹서비스"는 패턴을 사용해서 개발을 진행했습니다. 처음 MVVM 패턴을 도입하면서 Activity or Fragment에서 처리되었던 UI + 비즈니스 로직들이 UI(…
Frontend
Micro Frontend: Practice
마이크로 프론트엔드 아키텍처 소개 별도로 개발 및 배포 가능한 여러 작은 웹 애플리케이션을 조합하여 하나의 웹 애플리케이션을 만드는 개발방법론. 마이크로프론트엔드는 한 팀이 하나의 유닛으로 독립적으로 개발하고, 시험하고, 배포할 수 …
Frontend
Micro Frontend
마이크로 프론트앤드는 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식이다. 여기서 작동 단위에 사용된 프론트앤드 프레임워크로 Angular 이든, React 또는 Vue 또는 Vanilla…
Frontend
Why We Use React?
https://velog.io/@youthfulhps/React React를 사용하는 이유 https://okayoon.tistory.com/entry/프레임워크와 라이브러리React는 뭐야 https://m.blog.naver.co…
Frontend
Data Model
1. 사용 이유가 있나요? 그렇다면 DTO와의 차이는 무엇인가요? 해당 모델을 사용한 목적과 도입한 결과에 대해서도 설명해주세요. https://emewjin.github.io/model/ https://yozm.wishket.com…
Zippu
React Native를 선택한 이유 및 프로젝트 환경설정
왜 React Native를 도입해야 하는가 ? 🧐 1. 앱개발은 처음이라.. ✨ React Native는 React 문법을 통해 앱 개발을 할 수 있는 프레임워크이다. React와 매우 유사하므로 React를 통한 웹 개발 경험이…
Frontend
Next.js에 i18n 적용하기
사용자의 지역 다국어 지원을 위해 유저가 어떤 locale의 유저인지 알 수 있어야한다. 클라이언트 window.navigator 유저가 브라우저를 사용하고 있는 환경이라면 Web API 이용 가능. navigator.language…
JavaScript
Class
Classes 클래스는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터 와 이를 조작하는 코드 를 하나로 추상화 한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다…
JavaScript
반복문
반복문을 왜 써야할까? 만약에 어떤 변수에 1부터 10까지 더한다고 생각해보자. 반복문이 없다면 우리는 변수에 계속해서 숫자를 더하는 코드를 10줄 써야할 것이다. 100까지 더하면 100줄, 1000까지 더하면 1000줄로 늘어나는…
Programming
객체지향적 프로그래밍(Object Oriented Programming)
프로그래밍 패러다임(programming paradigm) 개념 : 프로그래밍 패러다임에는 함수형, 논리형, 절차형, 객체지향형이 있다. 이들은 선언형과 명령형으로 분류할 수 있다. 이 중 선언형 프로그래밍(Declarative Pr…
Architecture
Model and View
들어가며 앞서 클린아키텍처에서 살펴보았듯이 설계적 관점에서의 좋은 코드는 확장과 수정에 용이하며, 설계 이후에도 추가적인 유지 보수에 적은 비용이 들어가는 코드를 말한다. 이를 실현하기 위해 추구해야 할 설계 방향은 다음과 같다. “…
Architecture
Clean Architecture (2)
계층을 나누는 목적 로버트마틴이 추구한 아키텍쳐의 큰 두 가지의 가치는 다음과 같다. 첫 째, 같은 목표를 가진다. 둘 째, 소프트웨어를 계층(layer)로 나눠서 관심사를 분리한다. 아키텍쳐는 선을 긋는 기술이며, 이 선을 경계(b…
Architecture
Clean Architecture
Clean Architecture 1. 기본 개념 (1) Architecture? : 여러가지 컴퓨터 구성요소들에 대한 전반적인 기계적 구조를 설계하는 방법. (2) Software Architecture? : 시스템을 쉽게 이해하고…
Project
Clone Project(2): Care of Legend
Care of Legend Github Repository : Front end Care of Legend Github Repository : Back end 프로젝트 소개 구독 커머스(서브스크립션 커머스: Subscription C…
JavaScript
Scroll Top
문제점 내가 맡은 상품상세페이지의 길이가 너무 길다. 한 번에 이동하고싶다. 또한 페이지 이동시 스크롤을 상단에 위치하고 싶다. 해결방안: scrollTo() 1. Syntax 2. window.scrollTo() 어디로 위치를 이동…
Project
Clone Project(1): 마켓 쵸컬리(Market Cho-Kurly)
Market Chokurly Github Repository: Front end Market Chokurly Github Repository: Back end 프로젝트 소개 " 마켓컬리는 신선 및 친환경과 뗄 수 없는 관계이다. 마켓…
JavaScript
fetch API
백엔드로부터 데이터를 받아오기위해 꼭 거쳐야하는 ,, 목데이터를 퍼블릭으로 부터 받아오기 위한 필수관문,,,, 이번 포스트에서는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 살펴보겠다. …
JavaScript
Object?
만약 프로토타입글을 보지 않았다면 보고온뒤 객체로 올것. 이유는 읽다보면 알게될지도,, 1. 의의 JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나…
React
컴포넌트
컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다. '컴포넌트 초기 생성 업데이트 제거' 순서대로 살펴보겠다. 💡 현재는 함수형 컴포넌트+Hooks가 권장됩니다. 아래는 클래스형 컴포넌트 라…
Web
마진 상쇄(margin collapsing)
분명 margin top(또는 margin bottom)을 먹였는데... 왜죠 왜 사라지는거죠;; '마진 상쇄(Margin collapsing)'가 일어나는 원인을 알아보고 아래 사진처럼 대참사가 일어나지 않게하는 방법을 찾아보자. …
Web
Containing Block(CB), Position, zIndex
(position: fixed를 설정한)A레이아웃 아래를 지나가야할 (position: relative를 설정한) B레이아웃이 아무렇지 않게 위를 지나갈때의 그 당황스러움이란,,, 1. Containing Block(CB) 1 1 의…
Web
블록 서식 맥락(block formatting context)
요소의 박스보다 내용이 길어질 경우 어떻게 보여줄 것인가? 이와 관련된 개념으로 블록 서식 맥락(block formatting context; 이하 'BFC')에 대해 살펴보고 BFC가 생성되는 overflow의 상황을 살펴보고자 한…
Web
<canvas> 와 SVG
HTML5에서는 와 를 이용하여 기존에 플래시, 실버라이트로 했던 그래픽 처리를 대체할 수 있다. 1 . Canvas 1 1. 의의 Canvas는 자체가 그래픽을 구현 하는 것이 아닌 웹문서에 그래픽 구현을 위한 영역을 정의하고 실제…
Web
DOM (Document Object Model)
DOM (Document Object Model) 1 1. 개념 및 의의 DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이…
Web
변수의 선언(declare)vs. 변수 값 할당(assign)
1. 약속어(Reserved Words) : 이미 사용중인 함수 단어들 이므로 코딩할 때 함부로 사용할 수 없다. ::예시1 alert() : 알림창 \ 사용자에게 안내하고 싶은 텍스트를 보여줌 ::예시2 console.log() :…
Web
HTML과 CSS파일의 연결
CSS? = HTML tag에 디자인을 입혀주는 것 HTML과 CSS파일의 연결: 1. HTML document에 CSS파일 불러오기 : HTML file과 CSS file과의 관계를 설명 2. HTML에 CSS적용는 방법(in CS…
Web
Semantic HTML
웹페이지에 이미지를 생성하는 방법은 크게 두가지로 구분할 수있다. HTML tag를 활용하는 방법과 CSS에서 tag에 attribute 추가하는 방식이다. 두 방식의 특징과 차이점에 대해 검토하기에 앞서 Semantic HTML 과…
Web
Types
Data type Data type(데이터 형) 은 쉽게 말하자면 '메모리에 저장되는 방식'을 의미한다. 자바스크립트 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다. 타입 체크가 쉽다는 건 다른 언어보다 편하다고 할 …
Web
HTML
Codecademy의 Beginer friendly courses 중 HTML과정에서 배운내용을 다시 정리해보고자 한다. HTML이란 무엇인지 그 의미를 알아보고 이후 HTML의 속성 및 요소들 대해 검토하겠다. 참고자료: https…