본문 바로가기

프론트엔드/코드스테이츠 회고

최적화 최적화 방법들 최적화 기법 (1) DOM 트리 가볍게 만들기 // 수정 전 첫 번째 두 번째 세 번째 // 수정 후 : 불필요한 div 요소 제거 첫 번째 두 번째 세 번째 (2) 인라인 스타일 사용하지 않기 //수정 전 마진 10px 이것도 마진 10px //수정 후 : class와 CSS로 대체 마진 10px 이것도 마진 10px .margin10 { margin: 10px; } (3) 사용하지 않는 CSS 제거하기 (4) 간결한 셀렉터 사용하기 캐시 사용하기 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라짐 로딩이 빨라진 만큼 빠른 사용자 경험 제공 가능 자바스크립트 트리쉐이킹 (1) 필요한 모듈만 import 하기 (2)Babe.. 더보기
웹팩 만들기 1. 디렉토리 생성 2.npm init -y ---> package.json 파일 생성 3. src/index.js. 파일생성 4.웹팩을 사용하기 위해서는 npm으로 webpack, webpack-cli를 설치 npm install -D webpack webpack-cli 5.웹팩 config 파일 작성 // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다. filename: 'app.bundle.js', }, }; 6. 번들링하기 npx webpack 번외.. 더보기
웹표준 웹접근성 웹 표준 : 웹에서 표준적으로 사용되는 기술이나 규칙 웹 : "공간" 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 장점: 1. 유지보수의 용이성 : 각 영역이 분리되면서 유지보수 용이 + 코드경량화 :트래픽 비용감소 2. 웹 호환성 확보:웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과 3.검색 효율성 증대: 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다. 4.웹 접근성 향상 크로스 브라우징(Cross Browsing)이란 웹 사이트에 접.. 더보기
UI/UX UI(User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 미적 요소을 의미합니다. 화면상의 그래픽 요소 + 키보드 + 마우스 등의 물리적 요소 모달 토글 탭 태그 자동완성 드롭다운 아코디언 캐러셀 페이지네이션 무한스크롤 GNB LNB GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경. 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있습니다. --------------------------------------------------------------------------------------------------- UX(User Experience,.. 더보기
Rest Api REST API Http 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기위해 알아보기 쉽고 잘 작성된 메뉴판이 필요! 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 0단계 : HTTP 사용 -단순히 HTTP 프로토콜을 사용하는 것이 REST API의 출발점, REST API를 작성하기 위한 기본단계 -------------------------------------------------------------------------------------------------------------- 1단계 : 개별 리소스와의 통신 준수 모든 자원은 개별 리소스에 맞는 엔드포인트(Endpoint)를 사용해야하며 , 요.. 더보기
객체지향 프로그래밍 (프로토타입과 클래스) JavaScript는 프로토타입 기반 언어이다. 프로토타입(Prototype)은 원형 객체를 말한다. JavaScript의 모든 객체는 각자의 부모 객체와 연결되어 있으며 부모 객체의 프로퍼티나 메서드를 상속받아 사용할 수 있다. 이러한 부모 객체를 프로토타입이라고 한다. 더보기
코드스테이츠 Secton1 마침 -KPT 회고 1.목표 상기하기 학습을 통해 이루고자 하는 것 : 공부습관, 끝까지 파고드는 자세, 이해후 말로 표현가능 --> 자체서비스회사 취직! 2.Keep 적당한 스트레스와 운동, 존버정신 ,아침1시간일찍 기상 ,코테 한문제씩 Problem 잡생각, 인터넷서핑? ,감정컨트롤 3.Try 1.공부할땐 딴짓 금지. 기술외 서칭금지 2.바른자세, 집중안되면 바로 나가기 3.오늘할 것 아침에 상기하기. 적어놓고 꼭 이루기 4. 8시 -11시 빡공 이 모든 공부가 우선은 취업을 위한 것 임을 잊지않기. 면접, 코테, 자소서 섹션1종료 벌써 한달. 솔직히 온 힘을 다해 하지 못했다. 주말활용이 떨어졌고 수업후 반드시 11시까지 집중하고 딱 자기 이번에 못했던 페이지네이션 구현부분 정확하게 짚고 가자. 코테가 늘 마음에 걸린.. 더보기
회고: Dom const oneDiv = document.createElement('div'); ----> oneDiv.textContent = 'dev'; ----> dev oneDiv.classList.add('tweet') ----> dev const container = document.querySelector('#container') container.append(oneDiv) ----> 아이디가 컨테이너인 요소의 자식으로 담는다 oneDiv.remove() ---> append 했던 요소를 삭제할 수 있다. document.querySelector('#container').innerHTML = ''; --->컨테이너의 모든 자식요소 지우기 그렇지만 innerHTML 보안문제 있음 아래처럼 사용 const c.. 더보기

티스토리툴바