코딩하는 감자

React 복잡한 코드를 숨기고 사용자 정의 태그(컴포넌트)를 만들어 부품처럼 사용할 수 있도록 해줌 1. 개발환경 - node.js 설치 - vscode를 사용하여 개발 - 터미널에 npx create-react-app my-app 입력 - 설치가 완료되면 npm start로 시작 🔔 npm: 자바스크립트를 위한 패키지 관리자, 런타임 환경 Node.js의 기본 패키지 관리자 이다. - index.js 파일에 코드를 작성 , 각 기능을 구현한 여러 js파일을 import하여 사용 - npm run build : 배포판을 생성 - npx serve -s build: 배포 서버를 생성 2. 컴포넌트 생성 컴포넌트(함수형) 이름은 대문자로 시작 컴포넌트 생성 전 코드 //기존의 코드 function App(..

React 공식 홈페이지: https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 1. React? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 프론트엔드 라이브러리: 동적인 웹페이지를 효율적으로 관리하기 위해 사용 배우기 쉽고, 복잡함이 적음 복잡한 UI를 쉽게 구성하도록 도와줌=> 사용자의 View에 초점 선언형: 높은 생산성을 보장 컴포넌트 기반 : 여러 부분을 분할하여 코드의 재사용성과 유지보수성을 증가 🔔 컴포넌트: 하드웨어처럼 독립적인 기능을 수행하는 단위 모듈, re..

서버사이드렌더링(SSR) 클라이언트사이드 렌더링(CSR) 1. 서버사이드렌더링(SSR) - 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법 - 페이지를 이동할때마다 새로운 페이지를 요청 - 모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 🔔렌더링(rendering): 요청받은 내용을 서버에서 받아 브라우저 화면에 표시하는 것 - MPA(multi page application)의 방식으로 사용됨 🔔MPA: 전통적인 웹 애플리케이션 개발 방식, 여러개의 페이지로 이루어진 앱 검색 엔진 최적화(SEO) 🔔 SEO(Search Engine Optimization) - 검색엔진으로부터 웹사이트 트래픽의 품질과 양을 개선하는 과정 - 검색엔진의 방식에 맞게..

REST(Representational State Transfer) - 효율적이고 안정적이며, 확장 가능한 분산 시스템(ex. www)을 가져올 수 있는 소프트웨어 아키텍처 디자인 제약의 모음 - 자원(resource)의 표현(representation) 에 의한 상태 전달 - Client와 Server사이의 통신 방식 중 하나 - HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미 🔔 RESTful: 제약들을 준수했을 때 시스템의 상태 🔔 CRUD: CREATE(POST), READ(GET), UPDATE(P..

ECMASCRIPT(ES) ① Ecam International이 ECMA-262기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어, 자바스크립트의 표준 규격을 위해 만들어졌다. ② ES5(2009년)-> ES6(2015년) : 과거 코드 유지보수 및 리팩토링을 위해 차이를 인지할 필요가 있음 🔔 자바스크립트는 ECMASCRIPT사양을 준수하는 범용 스크립트 언어이다 🔔 Ecam International: 정보 통신 기술 표준화기구 🔔리팩토링 Refactoring consists of improving the internal structure of an existing program’s source code, while preserving its external behavior =>버그를 ..

1. JSON - JavaScript Object Notation : simplest data interchange format key-value 프로그래밍 언어나 플랫폼에 독립적 - Object to JSON : stringfy(value,replacer?) json=JSON.stringify(['apple','banana']); //["apple","banana"] const rabbit={ name:'tori', color:'white', size: null, birthDate: new Date(), //함수는 json에 제외 +symbol도 제외 jump: ()=>{ console.log(`${this.name} can jump!`); }, }; json=JSON.stringify(rabbit);..

1. 배열(Array) index는 0부터 시작 한 배열안에는 동일한 타입의 데이터를 넣음 (javascript는 여러 타입이 가능하지만 권장x) - 선언(Declaration) const arr1=new Array(); const arr2=[1,2]; const fruits=['🍎','🍌']; console.log(fruits); - index position: index로 접근 console.log(fruits[0]); //apple console.log(fruits[fruits.length-1]) //마지막 data - 전체 탐색 a. for for(let i=0;iconsole.log(fruit)); callback 함수 forEach(callbackfn:(value: T, index: numbe..

1. class vs object - class : 틀의 역할(template) class Person{ constructor(name, age){ this.name=name; this.age=age; } speak(){ console.log(`${this.name}:hello!`); } } 객체지향 언어의 특징, 캡슐화, 상속,,, 한번만 정의(데이터는 x) 속성(field) : name, age method: speak() - object: 틀에 데이터를 넣어 생성한 것(instanxe of a class) const jieun=new Person('jieun',24); console.log(jieun.name); console.log(jieun.age); jieun.speak(); 여러번 생성 가능..

1. 스크립트 태그 처리 방법 html태그를 parsing하다가 script태그를 만나면 js파일을 서버에서 다운받아서 실행하고 다시 parsing하는 순서 1) head안에 script 포함 => 만약 js가 너무 크고 느리다면 문제 발생 2) body안에 script 포함 => 사용자가 기본 html 컨텐츠는 빨리 볼 수 있지만, 자바스크립트에 의존적인 웹이라면 정상적인 사이트를 볼때까지 딜레이가 발생 3) head+async속성 => 병렬로 js파일을 다운로드하고 계속 parsing을 진행하다가 다운로드가 완료되면 js파일을 실행 => 시간이 절약되지만, html이 더 빠르고 설치가 끝났을때 parsing이 멈추기 때문에 딜레이 발생 가능 4) head+defer => parsing과 함께 js파일..

반응형 웹디자인(responsive web Design) => 최근 다양한 사이즈의 기기가 생겨나며 필요성이 생김 "content is like water" 1. fluid layout을 위한 속성 => flex grid, flex box, %, vw, vh 2. 보통 규격 mobile: 320px~480px tablet: 768px~1024px desktop:1024px~ 3. 재배치 되는 기능: Media queries @media screen/print/speech/all and/not/only/, (min-width:800px) {} 4. 반응형 웹 실습: 화면 크기가 줄어들면 네비게이션 메뉴 변경 ① 기본 메뉴: 3개의 박스로 나누어 flexbox의 속성들을 이용하여 정렬 display: fle..