SeaPlus

✅ 김버그의 UI 개발 부트캠프 자취생 들의 필수어플 "오늘의 집" 의 상품판매 페이지의 UI 를 SCSS 를 활용해 크게는Layout 단위부터 componet 단위까지 자세하게 분석한뒤 똑같이 만들어 볼수 있다. 프런트엔드를 구성하는 가장 기초적인 assets 단위부터 SCSS를 통해 상태관리하는 방법 과 SCSS의 문법 등을 배울수 있다. - 기술스택 : HTML, CSS, SCSS, JavaScript 🔨 구현방법 1. Asset 파일 준비 Image 웹페이지에서 이미지의 용량은 약 60%를 차지할 정도로 코드파일보다 크고 많은 영향을 끼친다. 랜더링 타임을 줄이고 사용성 증진을 위해, 목적에 맞는 이미지 확장자(jpg, png, svg, webp)를 선택. Icon svg 파일을 icon으로 변환..

데이터바인딩이란? 화면에보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다. - 1. 사용자가 입력한 정보를 얻어옴 - 2. 찾아온 데이터를 갱신 클라이언트 사이드 랜더링 이란? 웹서비스 개발방식은 두가지가 있습니다 서버사이드 랜더링, 클라이언트 사이드 랜더링 서버사이드 랜더링 1. 서버에서 HTML 파일을 미리 다 완성해서 보내주는 방법 클라이언트사이드 랜더링 2. 서버에서 텅빈 HTML 파일 + 중요데이터만 보내고 HTML에 데이터바인딩을 한뒤 완성하는건 클라이언스 사이드에서 자바스크립트로 하는 방법 오늘날은 서버사이드에서 모든 데이터를 처리하면 무겁고 처리 속도또한 느려지기 때문에 반드시 서버사이드에서 처리해야할 중요하고 보안성이 필요한 데이터를 제외하고는 클라이언트 사이드 랜더링으..

form 에서 상품들을 선택하면 그에 맞게 사이즈 option들이 변하는 UI 이다. 소핑몰 웹사이트에서 흔하게 볼수 있는 매우 기본적인 UI로, 하드코딩 방법과 동적프로그래밍 방법으로 구현해봤다. (JQuery 사용!) 하드코딩이란? - 상수나 변수에 들어가는 값(문자열, 정수 등)을 literal이라고 하는데, 이 값을 소스코드에 직접 쓰는 게 하드코딩 - 반대로, 소스코드에 직접 쓰지 않고 데이터를 외부 파일로 빼서 따로 관리하는 것을 '로딩'이라고 한다. 장점 - 육안으로 값을 직접 확인할수있다. - 로딩절차 없이 다이렉트로 읽을수 있어 속도가 비교적 빠르다. 단점 - 자주바뀌는 데이터를 하드코딩하면 계속해서 수정하고 ,재컴파일, 재배포 해야한다. - 유지보수, 운용이 어렵게 된다. [HTML] ..