TIL

1. 모바일 웹 구현시 이미지 파일의 이해 > SVG : ✔ 확장 가능한 벡터 그래픽(Scalable Vector Graphics). ✔ 그래픽을 마크업 하기 위한 xml의 일종의 형식. ✔ 벡터 기반의 형식이므로 크기를 조절했을 때 해상도가 깨지지 않는 장점이 있음 ✔ HTML, CSS, JS와 함께 동작 가능하다는 점 📍 로고 또는 단순화 이미지에...

개발자 도구란? 개발자도구는 브라우저에 제공하는 하나의 Tool이다. 개발 환경을 개선할 수 있고, 웹 사이트를 즉각적으로 수정하고 문제발생시 원인 파악하고 해결하기에도 좋다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있습니다. 개발자 도구에는 여러개의 패널 존재한다! 이 중에서 가장 자주 사용하게 될 패널들...

함수 스코프 Scope : 범위, 유효공간, 유효 범위 함수 스코프 : 함수에 의해서 생기는 범위. 변수의 유효범위. 블록 스코프 : Block Scope : 블락에 의해 생기는 유효범위 { }에 의해서 변수의 유효범위가 결정된다. 변수 선언 방식 종류 var, let, const ✔ 예제 1번 ✔ 예제 2번 👇 var → let 으로 바꾸기 �...

1. Linux 💡 운영체제란? Operation System. 전원을 켰을 때 나오는 소프트웨어 ex. 윈도우, mac, 리눅스 💡 리눅스를 왜 쓸까? 오픈소스 소프트웨어 누구나 자유롭게 확인, 수정, 배포할 수 있는 코드로 이루어져 있기 때문! 가격 경쟁력 AWS(서버 컴퓨터)가 계속 실행될 수 있게 하기 편리함(무료이므로!) 자기 프로젝트에 ...

1. Database(DB) 💡 Data? 컴퓨터 안에 기록되어 있는 숫자(0,1,0,1..) "정리된" 데이터들의 집합을 데이터베이스라고 함 💡 Web System 내의 데이터베이스 모든 데이터를 저장하고, 필요한 데이터를 요청했을 때 그 데이터만 응답해서 보내 줄 수 있는 시스템을 의미한다. (저장소 느낌) 2. DBMS Database Man...

HTML : 브라우저가 이해할 수 있는 언어로 문서가 어떤 의미를 지니고 어떤 구조로 이루어져있는지를 나타내는 것 (백지) CSS :시각적인 요소를 추가하기 위한 언어(물감) 💡 HTML, CSS 연결하는 방법? Inline Style Style tag Link 를 통한 input Javascript : 웹페이지를 동적으로 만들어주기 위한 언어 프로...

6. DOM 조작 DOM manipulation : 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것 6-1. innerHTML Element.prototype.innderHTML : 요소 노드의 HTML 마크업을 취득하거나 변경한다. 요소 노드 콘텐츠의 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환 📍참고📍 te...

1. 통신과 HTTP ▪ HTTP의 특징인 stateless를 설명할 수 있다. ▪ HTTP의 Request와 Response의 구조를 알 수 있다. HTTP란? Hyper Text HTML(Hyper Text Markup Language) Hyper Text = 문서와 문서가 링크로 연결 Transfer HTML로 만든 웹페이지 문서를 보낸다. Pr...

Props 컴포넌트에 내장되어 있는 객체이다. 그 중에서 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달해주는 객체이다. 넘겨주고 싶은 정보는 부모 영역에 존재한다. 자식 요소에게 넘겨주고 싶을 때 : 작명 = {변수명} 📌부모 컴포넌트 📌자식 컴포넌트 넘겨주는 행위가 아니라, 넘겨주는 자료가 있어야 할 공간을 'props'라고 한다. 변수, 배열,...

1. React 기본용어  React  : UI를 만들기 위한 자바스크립트 라이브러리  CRA  : Creative-React-App 의 줄임말, react 개발환경을 더 편리하게 사용하기 위해서 사용하는 tool chain  node.js  : 탈웹! 브라우저 외에서도 자바스크립트를 실행하게 해주는 실...

전체 UI화면에 공통사항으로 적용될 Navigation 컴포넌트 작성하기 > 필수구현사항 대메뉴에 마우스 Enter시 메뉴 slide-down, 메뉴에서 마우스 Leave 시 메뉴 slide-up 반복되는 내용은 컴포넌트로 분리, Array.map( ) 활용 state와 props 적절하게 활용할 것 > * Refactoring Review* 1. i...

Default Export : 하나의 파일에서 단 하나의 변수 또는 클래스 등으로만 export 한다. import 할 때는 아무 이름으로나 import 할 수 있다. 참고 : var, let, const`를 바로 default 할 수 없다. > Named Export : 한 파일 내에서 여러 변수 또는 클래스 등으로 export 할 수 있다. ...

> 필수구현 사항 구매 수량 버튼을 눌렀을 때 수량에 따른 가격 변동 탭 메뉴 클릭 시 스타일 변경 및 스크롤 위치 이동 새로고침시 scrollTop 구현 Mock Data 활용해서 리뷰창 구현하기 → 추후 API 통신 > 1. state를 활용하여 구매 수량에 따른 가격 변동 버튼 만들기 🐝debugging : 백만원 단위 이후로 ,표시가 안...

Using Fetch 네트워크를 통해 json 파일을 호출해서 콘솔에 data를 찍어보는 과정이다. fetch( )함수는 url, 즉 API 주소를 첫번째 인자로 옵션 객체를 두번재 인자로 받고, Promise 타입의 객체를 반환한다. 두번째 then에서는 data를 응답 받은 후의 로직을 작성한다. API 호출 성공시 응답(response)...