Workflow
Figma MCP agent에게 구간별 UI 변화 설명하기
Figma MCP agent에게 Figma URL 하나를 던지고 "반응형으로 해줘"라고 하면 자주 깨진다. 문제는 구현력이 아니라 읽기 기준이 비어 있다 는 점이다. 에이전트가 어떤 프레임을 기준으로 읽었는지, 모바일·태블릿·데스크톱…
Flutter
실기기에서 Flutter 앱이 혼자 안 돌 때: iOS는 JIT, Android는 옛 APK (feat. RN 비교)
앞서 vision camera 얼굴 인식을 Flutter로 재구현한 글의 마지막 과제가 실기기 검증 이었다. iOS·Android 둘 다에서 "앱이 혼자 안 돈다"는 같은 증상 을 만났는데, 파보니 원인이 서로 달랐다. 게다가 "RN…
Flutter
vision-camera 얼굴인식을 Flutter로 재구현: ROI crop과 throttle로 15→20fps
예전에 React Native + 로 얼굴 인식 카메라를 만들면서 성능 최적화를 한 적이 있다. 전체 프레임에서 얼굴을 찾으니까 연산이 너무 무거워서, ROI(관심 영역)로 인식 범위를 잘라내고 프레임 처리 빈도를 500ms로 thr…
Testing
배포 후가 더 문제였다: Playwright·유닛 테스트로 엣지 케이스와 QA를 줄이기
기획 초안을 받아서 화면을 만든다. 만들면 QA를 돈다. 여기까진 정상인데, 진짜 문제는 항상 배포하고 난 뒤 에 왔다. 기획서에 안 적혀 있던 상태값, 아무도 상상 못 한 입력, "그 경우엔 뭐가 떠야 하지?" 싶은 분기. 이런 게…
Workflow
병렬 워커 오케스트레이션 실전: 마찰 2건과 해결
여러 작업을 동시에 굴리고 싶다는 욕심은 늘 있었다. 티켓을 하나씩 잡고 브랜치 파고 PR 올리는 흐름은 안정적이긴 한데, 서로 안 겹치는 작업 두세 개를 굳이 순서대로 할 이유가 없다. 그래서 병렬 워커를 붙여 여러 작업을 한 번에…
Workflow
작업 타임라인 기록법
"오늘 하루 종일 뭐 했지?"가 저녁마다 떠오른다면, 대부분은 실제로 안 한 게 아니라 기록을 안 한 것 이다. 나도 그랬다. 스탠드업에서 어제 한 일을 말하려는데 기억이 안 나서 커밋 로그를 뒤지는 게 일상이었다. 그래서 작업 타임…
Design System
공통 UI를 확장 가능하게: DCButton variant 시스템과 vanilla-extract 토큰 바인딩
디자인 시스템 시리즈의 한 편. 앞선 글에서 흩어진 토큰을 빌드 파이프라인으로 세운 얘기를 했다면, 이번엔 그 토큰을 실제 컴포넌트 로 소비하는 첫 실물, 공통 버튼 얘기다. 버튼 하나 만드는 게 왜 이렇게 어렵나 버튼이다. 세상에서…
Design System
모노레포 도입한다고요? 그럼 이때가 기회다 — 디자인 시스템 리뉴얼 (왜 npm이 아니라 서브모듈인가)
디자인 시스템 시리즈 세 번째 글. 어느 날 "프론트엔드 모노레포를 도입한다"는 얘기가 나왔다. 만든 건 팀 동료지, 내가 아니다. 근데 그 소식을 듣자마자 든 생각은 하나였다 — "이때다. 늘 채택률 0%로 방치되던 디자인 시스템,…
Three.js
Three.js로 3D 차량 뷰어 만들기
데이터를 화면에 잘 보여주는 일에 관심이 많다. 자동차 도메인에서 일하다 보니 "차를 웹에서 3D로 돌려보게 하면 어떨까"가 자연스럽게 떠올랐고, Three.js를 붙잡고 3D 뷰어의 기초를 잡아봤다. 이 글은 Three.js Jou…
Design System
디자인 토큰 도입기: 채택률 0%에서 시작하기
디자인 시스템 시리즈 1편. 우리 프론트엔드가 왜 이렇게 파편화됐는지, 그걸 토큰부터 풀기로 한 이야기다. 시작은 "레포가 몇 개죠?" 디자인은 하나인데 구현은 여러 개다. 이게 무슨 말이냐면, 웹회사(v2) 말고도 앱웹 화면용 레포…
Architecture
바텀시트 오픈 전 API 프리페치 패턴
이 글은 '프론트엔드 아키텍처 패턴' 시리즈의 한 편이다. 들어가며 차량 상세 페이지에서 "등급 변경" 버튼을 누르면 바텀시트가 스윽 올라오면서 등급 목록을 보여준다. 그런데 초기 구현은 이런 순서였다. 1. 버튼 클릭 2. 바텀시트…
Architecture
블록 기반 에디터 만들기
이 글은 '프론트엔드 아키텍처 패턴' 시리즈의 한 편이다. 커뮤니티/아티클 글쓰기 화면을 만들면서 정리한 "블록 기반 에디터" 설계 노트다. 들어가며 커뮤니티에 글을 쓰고 댓글을 달 수 있게 만들면서 처음엔 그냥 하나 놓으면 되는 줄…
Workflow
코드리뷰에서 나온 질문 정리
딜러 관리자 웹 작업을 하면서 리뷰 때 반복적으로 나온 질문들을 정리했다. 리뷰는 결국 "왜 이렇게 했어?"의 연속인데, 좋은 질문일수록 그 자리에서 답하기가 애매하다. 나중에 또 나올 질문이라 아예 답을 문서로 박아둔다. 실제로 딜…
Architecture
확장 가능한 Analytics 이벤트 아키텍처
이 글은 '프론트엔드 아키텍처 패턴' 시리즈의 한 편이다. 들어가며 이벤트 로깅은 처음엔 참 쉬워 보인다. 버튼 클릭할 때 한 줄 넣으면 되니까. 그런데 우리 서비스는 마케팅 어트리뷰션은 Airbridge, 제품 분석은 GA4, 앱 …
Flutter
Flutter WebView 연동과 네이티브 브릿지
시리즈 '웹뷰·네이티브 연동' 1편. 회사 앱은 상당 부분이 웹(피키 웹뷰)으로 굴러간다. 앱 껍데기는 Flutter, 알맹이는 웹. 이 구조에서 제일 많이 터진 게 웹↔네이티브 경계였다. 앱을 하다 보면 "이거 그냥 웹뷰로 감싸면 …
Flutter
Flutter 크래시 잡기: WebView dispose와 scheme 누락 방어
RN → Flutter 전환 시리즈의 크래시 편. 스토어 나가고 나서 Crashlytics에 쌓인 상위 크래시 두 개 — WebView dispose 시 , 그리고 scheme 누락 링크로 가 터지는 문제 — 를 어떻게 막았는지 적는…
Design System
Figma에서 코드까지: 디자인–데이터 브릿지 (데이터브릿지 플러그인)
디자인 시스템 시리즈 2편. 1편이 "토큰이라는 값의 파편화"였다면, 이번 편은 "디자인 안에 들어가는 데이터 의 파편화" 이야기다. 카드 하나 만드는데 왜 이렇게 손이 많이 가지 차량 카드 목업을 만들 때마다 반복되는 장면이 있다.…
CI/CD
Shorebird 버전 관리와 작성자 태그
Shorebird 배포 편에서 이어지는 버전 관리 편. OTA 코드푸시를 굴리다 보면 "이 사용자가 지금 정확히 어떤 버전 + 몇 번 패치를 쓰고 있나"가 미궁이 된다. 버전 문자열을 앱에 노출하고, versionCode를 어떻게 계…
CI/CD
Shorebird로 OTA 코드푸시 배포하기
RN → Flutter 전환 시리즈의 배포 편. RN 시절 CodePush로 하던 "스토어 심사 없이 Dart 코드만 갈아끼우는" 배포를 Flutter에서는 Shorebird로 옮겼다. release/patch 분리, dev/prod…
Flutter
딥링크 처리: cold start부터 파라미터 수집까지
시리즈 '웹뷰·네이티브 연동' 2편. 딥링크는 "링크 누르면 앱 열리는 거" 아니냐고 쉽게 보다가 제일 오래 잡은 버그였다. 특히 앱이 완전히 꺼진 상태(cold start)에서 링크로 진입하는 케이스. 딥링크는 상태가 세 가지다. …
Flutter
AndroidManifest 뜯어보기: 딥링크 intent-filter
RN → Flutter 전환 시리즈. 딥링크가 실제로 어떻게 라우팅되는지(cold start 처리 등)는 다른 글에서 다룬다. 이 글은 그 앞단, AndroidManifest에서 딥링크가 앱으로 들어오는 입구를 어떻게 구성했는가 에 …
CI/CD
iOS vs Android 앱 서명 방식 정리
RN → Flutter 전환 시리즈. Shorebird 배포 파이프라인을 만들면서 CI에서 두 플랫폼의 코드 서명을 세팅해야 했다. iOS와 Android가 서명을 대하는 방식이 근본부터 달라서, 한 번 정리해두면 두고두고 도움이 된…
React-Native
커뮤니티 글쓰기 기능 개발기
앱에 커뮤니티 글쓰기 기능을 붙이고 오래 유지보수했다. "글 하나 쓰는 기능"이 뭐 얼마나 복잡하겠나 싶지만, 자동차 커뮤니티라 글에 딸려오는 게 많다. 차량 태그, 차량 비교, 이미지 여러 장, 링크 프리뷰, 투표까지. 글쓰기 하나…
Flutter
Flutter 라우팅 설계기: 바텀시트 컨트롤러를 걷어낸 이야기
RN에서 Flutter로 넘어오는 시리즈 중 라우팅 편. 초반에 만들어 쓰던 "글로벌 바텀시트 컨트롤러"를 결국 걷어내고 push/pop + 로 돌아온 과정을 적는다. 처음엔 커스텀 컨트롤러였다 Flutter로 앱을 새로 짜면서 바텀…
Flutter
키보드 어보이딩 문제 해결기
시리즈 '웹뷰·네이티브 연동' 번외. 웹뷰 얘기는 아니지만, 커뮤니티 글쓰기처럼 네이티브 폼이 웹뷰와 섞여 도는 화면에서 만난 UX 버그다. "바텀시트를 열었는데 키보드가 안 내려간다"는 사소해 보이는 오류가, 결국 Flutter 버…
Flutter
Flutter 전환기: 왜 RN에서 Flutter로 갔나
회사 앱을 React Native에서 Flutter로 새로 쓴 기록을 시리즈로 남긴다. 이 글은 그 시작. 왜 갈아엎었고, 무엇을 각오했는지에 대한 이야기다. RN 시절의 우리 원래 회사 앱은 React Native로 만들어져 있었다…
Node.js
메모리 누수 사냥기: 그래프 하나를 두고 열두 번 의심하기
'React 성능·메모리' 시리즈의 실전편. 원인 하나를 규명하는 데 열두 번 의심하고, 그중 몇 번은 헛다리였다. 그 사냥 기록이다. 관측에 쓴 부하·모니터링 스택(k6 + Prometheus + Grafana)은 동료가 세팅해 준…
React
React 재렌더링과 함수 재할당이 OOM으로 이어지기까지
시리즈 'React 성능·메모리' 2편. 오늘 한 일 노트를 정리하며, "재렌더링 → 함수/객체 재할당 → 메모리 압박"의 연결고리를 따라가 본다. 오늘 이벤트 로깅 쪽을 손보다가 문득 "이거 왜 매번 이벤트가 두 번 찍히지?"에서 …
React
SSR 환경에서의 OOM - 서버가 메모리를 먹는 이유
시리즈 'React 성능·메모리' 5편. 앞 편들이 브라우저(클라이언트) 메모리였다면, 이번엔 서버(SSR) 메모리다. 같은 React인데 서버에서 OOM이 나는 이유는 결이 다르다. 클라이언트 메모리 누수는 "한 사용자의 탭"에서 …
React
Sneaky React Memory Leaks: useCallback과 클로저의 함정
시리즈 'React 성능·메모리' 3편. 유명한 "Sneaky React Memory Leaks" 류 아티클을 읽고 정리한 노트에, 실제 프로젝트에서 겪은 재생성/누수 사례를 접목했다. 메모리 누수라고 하면 보통 "리스너 안 지웠네"…
React
클로저와 useCallback: 무엇을 언제 memoize할까
시리즈 'React 성능·메모리' 4편. 3편(클로저의 함정)의 심화. 이번엔 "그래서 뭘 memoize하고 뭘 하지 말까"를 실제 사례로 판단 기준을 세운다. memoize는 공짜가 아니다. / 도 값을 캐시하고 deps를 매 렌더…
React
SSR 렌더링 전략 기초 - landing을 SSR로 옮기며 배운 것들
시리즈 'React 성능·메모리' 1편. 렌더링 전략을 어디서 결정하느냐가 초기 성능을 좌우한다. 오토캐시백 landing 페이지를 열면 처음엔 멀쩡한데, 이미지가 뒤늦게 들어오면서 아래 내용이 우르르 밀려 내려갔다. 소위 CLS(C…
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…