개발 일지

1. React 기본용어 React : UI를 만들기 위한 자바스크립트 라이브러리 CRA : Creative-React-App 의 줄임말, react 개발환경을 더 편리하게 사용하기 위해서 사용하는 tool chain node.js : 탈웹! 브라우저 외에서도 자바스크립트를 실행하게 해주는 실행 환경 npm : node package manager. node로 실행되는 여러가지 패키지들을 관리함 node-modules : package들 관리하는 파일 .gitignore : github에 올리지 않을 파일들의 모음. 기본적으로 node modules는 ignore에 들어가있다. package.json : dependencies를 통해서 필요한 모듈을 설치해준다. index.js : import React..

Props 컴포넌트에 내장되어 있는 객체이다. 그 중에서 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달해주는 객체이다. 넘겨주고 싶은 정보는 부모 영역에 존재한다. 자식 요소에게 넘겨주고 싶을 때 : 작명 = {변수명} 📌부모 컴포넌트 import React, {Component} from "react"; import Child form "./Child/Child"; class Parent extends Component { render(){ const name ="Kim"; test = () => { console.log('테스트입니다') } return ( Parent ); } } export default Parent; 📌자식 컴포넌트 import React, {Component} f..

1. 통신과 HTTP ▪ HTTP의 특징인 stateless를 설명할 수 있다. ▪ HTTP의 Request와 Response의 구조를 알 수 있다. HTTP란? Hyper Text HTML(Hyper Text Markup Language) Hyper Text = 문서와 문서가 링크로 연결 Transfer HTML로 만든 웹페이지 문서를 보낸다. Protocol HTML을 어떻게 주고 받을지에 대한 통신 규약/약속 HTTP는 어떻게 통신하나? 📌Request 와 Response 관계로 주고 받는다. 📌Statless HTTP 개별 통신은 모두 '독립적', 과거의 HTTP 통신의 결과(상태)를 보존하지 않는다. State(상태) + less(없음) → 매 통신마다 요청에 대한 필요한 정보들을..

6. DOM 조작 DOM manipulation : 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것 6-1. innerHTML Element.prototype.innderHTML : 요소 노드의 HTML 마크업을 취득하거나 변경한다. 요소 노드 콘텐츠의 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환 📍참고📍 textContent는 HTML 마크업을 무시하고 텍스트만 반환 **BUT!** innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로를 반환 단점 : ① 크로스 사이트 스크립팅 공격 문제 ② 고비용. 비효율 → 그대로 있어야 할 요소들까지 전부 삭제하고 다시 새로운 자식 노드를 생성해서 반영해야 하기 때문 ③ 위치를 지정할 수 없다. 기존 요소를 ..

HTML : 브라우저가 이해할 수 있는 언어로 문서가 어떤 의미를 지니고 어떤 구조로 이루어져있는지를 나타내는 것 (백지) CSS :시각적인 요소를 추가하기 위한 언어(물감) 💡 HTML, CSS 연결하는 방법? Inline Style Style tag Link 를 통한 input Javascript : 웹페이지를 동적으로 만들어주기 위한 언어 프로그래밍의 논리적 특성을 이용해서 동적으로 구현한다. HTML과 연결하는 방법? : script tag / .js 외부링크 import What is DOM? 👉HTML, JS를 연결하기 위한 중간다리 역할 👉웹 페이지에 접근해서 요소를 생성, 내용 추가, 클래스 부여 등등을 할 수 있다. Document Object Model 문서(html)를 객체화 시킨 모..

1. Database(DB) 💡 Data? 컴퓨터 안에 기록되어 있는 숫자(0,1,0,1..) "정리된" 데이터들의 집합을 데이터베이스라고 함 💡 Web System 내의 데이터베이스 모든 데이터를 저장하고, 필요한 데이터를 요청했을 때 그 데이터만 응답해서 보내 줄 수 있는 시스템을 의미한다. (저장소 느낌) 2. DBMS Database Management System, DBMS 데이터베이스를 효율적으로 관리하는 소프트웨어 저장장치 내 저장된 데이터 집합인 DB와는 다른 개념 하드에 저장되어있는 DB를 꺼내와주는 역할을 하는 소프트웨어~ 💡 Database와 DBMS를 사용하는 이유 1. 데이터 보존 프로그램 실행시 메모리로 올라가는데, 메모리는 일시적인 저장소이다. 전원 ON/OFF하면 데이터가 사..

1. Linux 💡 운영체제란? Operation System. 전원을 켰을 때 나오는 소프트웨어 ex. 윈도우, mac, 리눅스 💡 리눅스를 왜 쓸까? 오픈소스 소프트웨어 누구나 자유롭게 확인, 수정, 배포할 수 있는 코드로 이루어져 있기 때문! 가격 경쟁력 AWS(서버 컴퓨터)가 계속 실행될 수 있게 하기 편리함(무료이므로!) 자기 프로젝트에 맞는 개발환경에 맞추어 사용하기 용이 개발자가 배포되는 코드가 리눅스 환경에서 구현되기 때문! 2. Linux 핵심구조 2-1. 파일구조 root, /bin/, /home/ 에 대해 알아보자! root directory 모든 파일을 아우르는 디렉토리(최상위 경로) / 로 접근한다. home directory 유저 공간( C드라이브/Users/사용자명 ⇒ 바탕 화..

함수 스코프 Scope : 범위, 유효공간, 유효 범위 함수 스코프 : 함수에 의해서 생기는 범위. 변수의 유효범위. 블록 스코프 : Block Scope : 블락에 의해 생기는 유효범위 { }에 의해서 변수의 유효범위가 결정된다. 변수 선언 방식 종류 var, let, const ✔ 예제 1번 { let a = 10; { let a = 20; console.log(a) //20 } console.log(a) //10 } console.log(a) //reference error ✔ 예제 2번 function hasValue(p) { console.log(v) //undefined if (p) { //truthy var v = 'blue'; console.log(v); //blue } el..

개발자 도구란? 개발자도구는 브라우저에 제공하는 하나의 Tool이다. 개발 환경을 개선할 수 있고, 웹 사이트를 즉각적으로 수정하고 문제발생시 원인 파악하고 해결하기에도 좋다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있습니다. 개발자 도구에는 여러개의 패널 존재한다! 이 중에서 가장 자주 사용하게 될 패널들에 대해 알아보자! 1. Element Panel CSS(스타일 속성), 웹 페이지의 구성(DOM)을 확인하고 수정할 수 있는 패널이다. 수정한 내용을 실시간으로 확인할 수 있기 때문에 프론트엔드 개발자에게는 필수적이다. 💡 Styles 부분의 순서가 의미하는 것은? 하나의 element에도 여러개의 css가 적용될 수 있다. 예를 들면, div tag에..

1. 모바일 웹 구현시 이미지 파일의 이해 SVG : ✔ 확장 가능한 벡터 그래픽(Scalable Vector Graphics). ✔ 그래픽을 마크업 하기 위한 xml의 일종의 형식. ✔ 벡터 기반의 형식이므로 크기를 조절했을 때 해상도가 깨지지 않는 장점이 있음 ✔ HTML, CSS, JS와 함께 동작 가능하다는 점 📍 로고 또는 단순화 이미지에 활용 2. 모바일 웹 화면 크기 보통 이미지 시안을 잡게 되면 모바일은 다음의 모바일 크기에 최적화된 이미지를 제작한다. 화면크기 최소크기 320px 보편적 크기 360px wide하게 잡은 크기 400px 시안(× 2배) 640px 720px 800px 📍 웹 pc 화면에서 구현되는 이미지는 모바일에서는 굉장히 wide하게 보일 것이다. 따라서 모바일 siz..