☼ 꿈꾸는 도전자 Felix !

1. 시작하는 글 웹 성능 최적화(개선)은 웹페이지를 효율적으로 동작하게 하는 작업입니다. 웹 성능 최적화를 위해 백엔드, 인프라 최적화 등도 중요한 요소지만 이번 글에서는 웹 프론트엔드에 집중한 웹 성능 최적화 방법을 이야기 해보겠습니다. 물론, 이 글에서 말하는 웹 성능 최적화 작업은 상품 관리자, 프로젝트 매니저, 디자이너 기획자도 알아두면 좋습니다. 상품 관리자, 프로덕트 매니저에게 웹 페이지가 얼마나 빨리 로딩되는지가 그들이 관리하는 서비스 사용자 경험(UX, User Experience)에 영향을 줄 것이며, 자연스레 매출 및 수익에 영향을 줄 수 있기 때문에 웹 성능 최적화를 대략적으로 이해하는 것은 중요합니다. 그리고 기획자, 디자이너 역시 페이지 주요 영역을 디자인하는 복잡도에 따라 나쁜..

필자는 약 10년의 경험을 가진 개발자로서 디자이너와 협업한 경험을 한 토대로 어떠한 것들이 필요한지 적어보겠습니다. 디자이너와 어떻게 일할지 모르는 개발자, 개발자와 어떻게 일할지 모르는 디자이너, 혹은 두 역할자가 어떻게 일할지 모르는 IT인들에게 도움이 되길 바랍니다. 먼저, 웹개발자와 웹 디자이너의 협업에 대해 포커스 맞추어 글을 적어보겠습니다. 1. UI 디자인 기준 1) Width 기준으로 기본 웹 개발 스펙이 있어야 합니다. ex) 1280, 1600, 1920 px 등등 - 반응형 웹을 만들때는 Desktop 해상도와 Mobile 해상도를 구분하고, 때로는 tablet 해상도를 정하기도 합니다. ex) 제가 했었던 프로젝트에서는 Desktop 은 1440px, 모바일은 768px을 경계로 ..

0. 시작하는 글 웹 개발자라면 브라우저 디버깅은 필수이다. iOS는 safari 브라우저에서 디버깅을 많이 하고, Android는 Chrome 브라우저에서 디버깅을 많이 한다. 이번에는 Android Phone에서 Chrome 브라우저를 디버깅 하는 방법을 블로깅 해보았다. 1. 폰에서 개발자 기능 활성화 2. adb 설치하기 1) adb 프로그램을 다운로드 https://developer.android.com/studio/releases/platform-tools 2) PC내 환경변수 설정 - '고급시스템 환경설정' 으로 검색 : 환경변수에서 시스템 변수 path를 편집에서 adb 설치 경로 추가 >> C:\{개인경로}\{adb프로그램 설치경로}\platform-tools 3) cmd를 통한 확인 -..

1. 데이터타입 Javascript의 Data Type(데이터타입)은 Primitive Type(기본형)과 Reference Type(참조형)으로 구분됨 1) Primititye Type : string, number, bigint, boolean, null, undefined, symbol(es6에 추가)로 구분 * null, undefined를 제외한 모든 기본값에는 기본값을 둘러싸는 객체가 있음 * symbol은 es6에서 추가된 변경 불가능한 primitive 타입으로 이름 충돌 위험이 없는 유일한 값. 객체 property key를 만들기 위해 사용됨 2) Reference Type : Obejct 로 하위 에 Array, Function, RegExp, Set / WeakSet(es6에 추가)..

일반적으로 요청하는 쪽과 요청받는쪽이 다르면 브라우저에서 해당 정보를 받아오지 못하게 된다. 그래서 우리는 브라우저에서 흔히 CORS 에러를 접할 수 있다. 그러나 JSONP을 사용하거나, 요청을 허용할 사이트를 서버에 등록하면 CORS 문제 안생기게 할 수 있다. 요청하는 서버에 Access-Control-Allow-Origin에 대한 값을 보내고, 응답하는 서버에도 해당 내용이 있으면 정보를 보낸다. Post man이나 Rest Client 등을 이용하면 CORS 문제를 접하지 않을 수 있지만, Chrome 브라우저에서 Server API를 받아서 만든 앱을 실행하는 경우 CORS(Cross Origin Resource Sharing) error를 맞이하여 불편한 경우가 있다. 이 경우 CORS툴을 ..

Javascript 를 통해 프론트앤드 개발시 기기 OS 구분이 가능하다. 구분을 해야하는 경우는 다양한 이유가 있겠지만, 필자는 Android OS 혹은 iOS에 대한 감지가 필요했고 해당 코드를 통해 분기가 가능했다. 코드 if(/Android/i.test(navigator.userAgent)) { // Android 에 대응하는 코드 } else if(/iPhone|iPad/i.test(navigator.userAgent)) { // iOS에서 iPhone, iPad에 대응 하는 코드 } else { // Android, iOS를 제외한 OS } navigator.userAgent 지원 브라우저 javascript를 통해 모바일 기기 제조사 또한 측정이 가능하긴 하다. 출처 : https://can..

0. 시작하는 글 - SCSS에 간단하지만 꼭 필요한 내용들 적어보았다. 1. SCSS 특징 - SCSS는 CSS Preprocessor(CSS 전처리기) 중 가장 많이 쓰이는 CSS 전처리기 중 하나이고, CSS 코드 사용에 편의성을 제공해 준다. - Sass(SCSS), Less, Stylus가 가장 많이 쓰이는 CSS 전처리기이다. - SCSS와 Sass는 비슷한데, 유효범위를 Sass는 들여쓰기로 구분하고, SCSS는 { } 로 범위를 구분한다. 1) variable 선언 가능 ex) $orange-bg : orange; : 변수로 선언하여 여러 곳에 불러서 쓸 수 있음 - LESS는 @로 변수를 선언함 ex) @orange-bg : orange; - SCSS는 변수 재할당이 가능함 (LESS는 ..

0. 시작하는 글 - CSS3부터 나온 flex속성 덕분에 float이나 , inline-block 없이 정렬을 쉽게 할 수 있도록 만들 수 있게 되었다.. - Parent의 상위 구조에 하위 Child를 같는 구조로 설명되었다. - Parent에는 display, flex-direction, jusify-content, align-items 등의 속성을 사용하며, - Child에는 order, align-self, flex-grow, flex-shrink, flex-basis 등의 속성을 사용한다. - Flex Browser 호환성을 보면 많은 모던 브라우저에서 적용이 가능하다. 그러나 IE에서는 적용이 잘 안되는 속성이 존재한다. 1. Flex 구조 - parent와 child로 나눠서 동작함 - c..

0. 시작하는 글 - 웹 개발시 이미지를 필수적으로 많이 사용하게 된다. JPG, PNG, GIF, WEBP, SVG 중 어떤 것을 사용해야 할까? 물론 상황에 맞게 사용을 해야 용량도 고려할 수 있고 이미지도 깨지지 않고 이쁜 이미지를 만들 수 있다. 아래 내용을 참고하여 이미지를 선택하게 된다면 도움이 많이 될 것이라고 생각한다. 1. 비트맵 - 픽셀이 모여 만들어진 정보 집합으로 레스터(Raster) 이미지라고도 함 - 픽셀 단위로 화면에 렌더링 함 - 비트맵을 이용하는 이미지 종류 : JPG, PNG, gif, webp - 다양한 색상 정교한 것으 잘 표현 2. 벡터(Vector) - 수학정 정보의 형태(Shape)로 만들어 냄 - 점, 선, 면 위치, 색상 정보를 가지고 화면에 렌더링 함 - 비..

CSS 속성 중 상속이 되는 속성 : 상위 엘리먼트에 CSS 스타일을 입히면 하위 엘리먼트에 CSS 스타일이 영향을 받는 것을 말한다. @ 일반적인 CSS 상속 1. font 속성들 - font-size - font-weight - font-family - line-height - letter-spacing 2. text 속성들 - text-align - text-indent - text-decoration - letter-spacing 3. 색상 속성들 - color - opacity @ 강제 상속 - inherit 값을 사용하면 부모에서 자식으로 강제 상속 시킬 수 있음 - 자식은 상속되나 후손에게 적용되지는 않음