코드를 위한 기록

React에 Webpack 사용이 필요한 이유 리액트가 주목받게 된 배경 2010 초중반 주류였던 앵귤러는 프레임워크이기 때문에 - 기본적으로 필요한 코드 양이 많음 - 배우는 시간이 오래 걸림 - 번들 사이즈가 커짐에 따라 성능 문제도 커짐 이러한 앵귤러의 단점을 보완하는 대체재로 뷰와 리액트가 거론됨 리액트가 주목받은 이유는 프레임워크가 아닌 라이브러리이기 때문인데 프론트엔드 개발에 필요한 최소한의 기능만 담겨있고 추가로 필요한 기능은 개발자가 설치하도록 하여 자유도가 높음 그러나 시간이 지나며 개발자의 다양한 니즈를 충족하기 위해 더 많은 라이브러리가 필수적이게 되었고 -> react-dom, react-script, react-router-dom, storybook, styled-component..

번들 프로그램 하나 과거에는 한 번에 한 프로그램만 사용할 수 있었음 - 코드를 직접 작성하고 실행하여 원하는 결과물 얻기 - 프로그램(코드)을 저장한 디스크를 삽입하고 마운트하여 원하는 작업 실행하기 2000년대 들어서 상품을 구매하면 사은품처럼 제공하는 것(ex. 콘푸로스트-하얀마음백구, V챔프잡지- 게임팩) 번들링 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위 웹 개발에서의 번들링 웹 애플리케이션을 제공하기 위한 파일 묶음. 1. 사용자가 브라우저를 열고 주소를 입력 2. 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받고 3. 브라우저가 이 파일을 실행하여 웹 애플리케이션을 제공 번들링의 필요성 HTML, CSS, JS를 그대로 전송해도 아무 문제 없을 수 있지만, 아래와..

CSS 애니메이션 @keyframes 키워드를 사용하여 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있음 ① @keyframes 블록 만들기 @keyframes 애니메이션-이름 { 0% { /* 또는 from */ 속성: 속성값 } 50% { /* 1~99% +소수점 사용 // 중간값 */ 속성: 속성값 } 100% { /* 또는 to */ 속성: 속성값 } } 중간값: 애니메이션 재생 시간 기준 ② 셀렉터에 animation 속성 주기 animation 속성에 띄어쓰기로 여러 속성을 설정할 수 있음 필수 animation-name : 애니메이션 이름. 보통 중간 상태를 알 수 있는 이름으로 지정 anmation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정 animation-de..

브라우저 렌더링(브라우저 엔진, 렌더링 엔진) HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에 출력되는 과정 렌더링 엔진은 웹 브라우저마다 전용 엔진을 사용하나 동작 원리는 공통된 부분이 많음 1. 사용자: 브라우저를 통해 웹 사이트에 접속 2. 브라우저: 서버로부터 HTML, CSS, JS 같은 웹 사이트에 필요한 리소스를 다운로드 3. HTML 문서를 파싱(parsing)해 DOM 트리 제작 4. 외부 CSS파일과, 함께 포함된 스타일 요소를 파싱(parsing)해 CSSDOM 트리를 만듦 5. DOM 트리와 CSSOM 트리를 결합해 Render Tree 구축 6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 건지 결정 7. UI 백엔드: Render Tree를 화면에 ..

웹 브라우저(웹 탐색기) 웹 서버와 양방향으로 통신하여 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게하는 GUI 소프트웨어 프로그램 (브라우저는 페이지를 다운로드하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신함) Web(웹) World Wide Web. 브라우저 상에서 제공되는 웹은 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공함 Web Page Web에서 제공된 HTML 언어를 사용하여 작성된 문서 Web Site 서로 관련된 내용으로 작성된 웹 페이지들의 집합 브라우저의 동작 원리 브라우저마다 특징은 조금씩 다르지만 동작 방식은 같음 사용자가 선택한 자원(Resource)을 서버에 요청..

비선형 자료 구조 : 데이터를 순차적으로 나열시킨 선형 구조가 아닌 하나의 데이터 아래에 여러 개의 데이터가 존재할 수 있는 구조 cycle이 존재한다의 의미 : 시작 노드에서 출발한 후 다시 시작 노드로 돌아올 수 있으면 cycle이 존재한다고 함 Tree 트리 비선형 자료구조, cycle이 없는 연결 그래프(Connected Graph), 트리⊂그래프 데이터가 바로 아래에 하나 이상의 데이터를 가지며 한 방향으로만 연결된 단방향 계층적 자료 구조 Tree 용어 1. 루트 Root 트리 구조의 시작점이 되는 노드 2. 노드 Node 트리 구조를 이루는 모든 개별 데이터 3. 간선 Edge 노드와 노드를 연결하는 선 4. 부모 노드(Parent Node) 두 노드가 상하관계로 연결되어 있을 때 상대적으로..

데이터 : 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값 이름, 나이, 키, 집주소, 목소리, 유전자 DNA 데이터 그 자체로는 정보를 가지기 어려움 나이만을 가지고서는 사람의 나이인지, 강아지의 나이인지, 나무의 나이인지 알 수 없기 때문에. => 데이터는 분석하고, 정리하여 활용해야만 의미를 가질 수 있음 = 자료구조 자료구조 : 여러 데이터의 묶음을 저장하고 사용하는 방법을 정의한 것. 데이터를 체계적으로 정리하여 저장해두는 것이 데이터를 활용하는데 있어 훨씬 유리함 사용하려는 목적에 따라 데이터의 특징을 파악/분석하여 구분하고 분류하여 사용 특정한 상황에 놓인 문제를 해결하는 데 특화되어 있음 많은 자료구조를 알아두면 어떤 상황이 닥쳤을 때 적합한 자료구조를 적용하여 문제를..

섹션3 시작 전, 세운 나의 목표 (달성여부) 학습 목표 체크하기(⭐️⭐️⭐️) 잠들기 전 핸드폰 최대 30분만 보기(⭐️) 스터디 늦지않고 미리 들어가기(⭐️) 6시 40분 기상 > 산책 거르지 말기 (⭐️⭐️⭐️⭐️) 딴짓(핸드폰)하지 말고 집중하기(⭐️⭐️⭐️⭐️) 매일 책 읽기(⭐️⭐️⭐️⭐️) 오늘 배운 내용 오늘 블로깅 (⭐️⭐️⭐️⭐️⭐️) 총평 유난히 이론이 많았던 Section 3! 노트필기 -> 블로깅 순서로 공부하는 나에게 너무 빠듯한 스케쥴의 연속이었다...⭐️ 저번 섹션 목표 중 잠들기 전 핸드폰 최대 30분(+새벽 1시 이전에 잠들기)는 완전 대실패. 거의 반은 1시 반~2시에 잤었고, 원래는 중간중간 10분 20분 짬짬히 낮잠 자서 수면시간 채웠었는데 이번에 이론이 너어무 많아..

재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 반복문의 중첩횟수를 예측하기 어려운 경우 반복문(while, for)으로 작성된 코드를 더 간결하고 이해하기 쉽게 작성하고 싶은 경우 예시: 마트료쉬카처럼 객체 안에 객체가 반복되고, 그 반복횟수를 알 수 없는 경우 UI/UX UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요. UI는 사용자가 제품과 상호작용하는 시스템으로 화면의 그래픽 뿐만 아니라 키보드나 마우스같은 물리적인 요소도 포함합니다. UX는 사용자가 제품을 이용하면서 직간접적으로 느끼고 생각하는 총체적인 경험으로 제품 자체에 대한 경험과 제품에 대한 홍보, 접근성, 사후 처리 과정에 느낀 경험을 뜻합..

OAuth 인증을 중개해주는 메커니즘 보안된 리소스에 접근하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화한 프로토콜 사용자 정보를 이미 가지고 있는 웹서비스(Google, Facebook, Github 등)에서 사용자 인증을 대신 해주고, 접근 권한에 대한 토큰을 발급한 후 이를 이용해 내 서버에서 인증 소셜 로그인 선호 추세 - 사용자: 소셜 로그인으로(이미 가입된 계정을 이용해) 빠르게 서비스에 가입하는 것 선호 - 서비스(개발자): 신규 회원가입이나 회원 관리에 신경쓰지 않아도 되기 때문에 선호 보안상 이점 : 유저의 민감한 정보가 App에 노출될 일이 없고, 인증 권한에 대한 허가를 유저에게 미리 구해야 하기 때문에 더 안전하게 로그인 가능 OAuth 용어 Resource Owner: ..