본문 바로가기

전체 글58

번들링(Bundling)과 웹팩(Webpack) 번들링(Bundling) - 번들(bundle) : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음. - 번들링(bundling) : 파일들을 하나의 꾸러미(bundle)로 묶어 압축시켜 사용자에게 전달하는 방식. - 알집으로 여러 파일들을 한 곳에 압축시키는 모습과 비슷하다. - 사용자가 브라우저 주소창을 입력하면, 마치 알집을 풀듯 하나로 묶여져있던 파일들이 실행되면서 사용자에게 제공된다. - 번들링의 목적 : '빠른 로딩 속도', '높은 성능', '코드 보안'을 위해서라고 할 수 있다. 웹팩(Webpack) - 현재 기준, 애플리케이션 배포를 위해 전세계에서 가장 많이 사용되는 번들러(Bundler). - 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러. - 모듈 번들러 : HTML, C.. 2022. 7. 25.
[HTML/CSS] 브라우저/반응형 웹 브라우저(Browser) 일명 '웹 브라우저'를 지칭하는 것으로써, 양방향 통신을 통해 HTML 문서나 이미지, 동영상 등을 열람할 수 있는 GUI 기반 소프트웨어 프로그램이다. HTTP 프로토콜을 통해서 서버와 송수신을 한다. 웹(World Wide Web) - 브라우저 상에서 제공되는 웹은 인터넷 상에서 콘텐츠를 하이퍼텍스트 방식으로 연결해서 제공한다. - 웹 사이트 = 웹 페이지의 집합 - 웹 브라우저의 종류로는 인터넷 익스플로러, 크롬, 엣지, 파이어 폭스 등이 있다. 웹 브라우저의 동작 원리 브라우저의 구조 브라우저 렌더링 1. 사용자가 브라우저를 통해 웹 사이트에 접속합니다. 2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받습니다. 3.. 2022. 7. 23.
[Section 3] 모의 기술면접 준비 자료 재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. 재귀 함수는 자기 자신을 호출하는 함수로서, 주어진 문제를 비슷한 구조나 동일한 구조의 더 작은 문제로 나눌 수 있는 경우, 반복문이 중첩되는 횟수가 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우에 사용하면 좋다. UI/UX UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요. UI : user interface의 약자로서, 사용자 인터페이스를 의미한다. 다시 말해, 사람과 컴퓨터가 상호작용하는 시스템을 일컫는 것으로서, 물리적 요소(스마트폰의 전원 및 볼륨 버튼)와 그래픽 요소(터치스크린, 애플리케이션 화면 등)를 모두 포괄하는 개념이다. UX : user experience의 약자로서, 사용.. 2022. 7. 20.
웹 표준, 웹 접근성 1. 웹 표준 1-1. 웹 표준이란 ? 웹 개발 형식을 통일시킨 것으로서, 웹에서 표준적으로 사용되는 기술이나 규칙을 일컫는다. 운영체제 및 브라우저 종류에 상관없이 동일하게 웹 페이지가 작동되고 구현되도록 만드는 제작 기법. 웹 표준의 장점 유지 보수의 용이성 웹 호환성 확보 검색 효율성 증대 웹 접근성 향상 1-2. Semantic HTML 웹 표준에서는 개발자 간 소통, 검색 효율성, 웹 접근성의 이유로 Semantic HTML의 중요성을 강조 시맨틱 요소의 종류 1-3. 크로스 브라우징 웹 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공하도록 만드는 작업. 웹 표준만 잘 준수하여도 어느정도 크로스 브라우징을 실현하게 된다. 크로스 브라우징 워크 플로우 초기 기획 개발 테스트/발견 수정/반복 .. 2022. 7. 12.
Redux Redux 란? ‘상태 관리 라이브러리'로서, 컴포넌트와 상태를 분리하여 상태를 좀 더 효율적으로 활용할 수 있게끔 해준다. React에 종속된 라이브러리가 아니기 때문에, 별개로 사용이 가능하다. 언제 사용하는 것이 좋을까? Redux를 이용하지 않는 경우 : 최상위 컴포넌트가 특정 상태를 사용하지 않음에도 다른 하위 컴포넌트로 해당 상태를 Props로 내려주기 위해 ‘상태 끌어올리기'로 최상위 컴포넌트를 거쳐 상태를 받아서 내려줘야한다 → 비효율적 Redux 이용 시 : 전역 상태 저장소인 ‘Store’를 사용하여 해당 상태를 ‘Store’를 통해 목표 컴포넌트로 직접 전달이 가능하다. Redux의 순서 및 구조 Action(객체) → Dispatch(함수) → Reducer(함수) → Store A.. 2022. 7. 7.
[React] Custom Component 키워드 : CDD, Styled Components, Storybook, useRef ... 등 Component Driven Development (CDD) - 부품을 만들어 조립해나가듯, 컴포넌트 단위로 개발하는 방법. - 재사용할 수 있는 컴포넌트를 개발하여 활용한다. CSS in JS - CSS -> CSS전처리기 -> BEM 이후 등장한 가장 최근의 CSS 방법론. Styled-Component - 대표적인 CSS in JS - 리액트에서 사용 가능한 라이브러리로, CSS를 컴포넌트화하여 사용이 가능하다. 컴포넌트 만드는 법 const BlueButton = styled.button`// 선언한 변수에 styled.태그명` background-color: blue;// 속성:속성값; color:.. 2022. 6. 30.

티스토리툴바