본문 바로가기

프론트엔드 공부

 (134)
함수와 class를 이용한 component 만들기, default 값 설정하기 1.함수를이용한 컴퍼넌트 //babel : 예전브라우저, 순수한 자바스크립트로 변경 //https://babeljs.io/setup#installation 에서 cdn 가져올수 있다. //즉, babel + jsx로 사용하게 되면 react > javascript로 바꿀수 있도록 컴파일 해줌 //함수를 이용한 Component //props ---> {message = "안녕하세요"} function Component(props){ //이부분이 렌더가 다시일어나는 부분 return ( {props.message}이것은 함수로만든컴퍼넌트 ); } 2.함수형 Component 기본값 설정하기 //함수형 Component 기본값 설정하기 function Component(props){ //이부분이 렌더가 다시..
React JSX 문법 왜 React.createElement 가 아닌 JSX를 쓰는지? 가독성, bable과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움 JSX 문법 -최상위 요소는 하나 -최상위 요소 리턴하는 경우, ()로 감싸야한다. -자식들을 바로 랜더링하고 싶으면 자식들 사용 => Fragment (최상위 요소가 있는 상태에서 자식을 바로랜더링하고 싶을때, 최상위 요소를 로 묶어주고 자식요소들을 랜더링) -자바스크립트 표현식을 사용하려면, {표현식}사용(변수도 사용가능) -if문 사용할수 없음( 삼항연산자 , 논리연산자를 사용) -style을 이용해 인라인 스타일이 가능 -class 대신 className을 사용해야 class를 적용 -자식요소가 있으면 꼭 닫아야하고 자식요소가 없으면 열면서 닫아야 한다. what
ReactDOM.render / React.createElement(type,[props],[...children])
react cdn 개념이해 //기존 방식 const component = { message : "init", count : 0, render(){ return `${this.message} : ${this.count}` }, }; //rootElement = dom function render(rootElement, component){ rootElement.innerHTML = component.render(); } //초기화 //값이 바뀔때마다 앞뒤로 render해줘야함 render(document.querySelector("#root"),component); document.querySelector("#btn-plus").addEventListener("click",function(){ component.message = "..
react 개념 react 1.angular vs react vs vue angular: 크로스플랫폼, 모든기능이 프레임워크 안에서 이루어짐(full framework) react: view에 초점을 맞춘 라이브러리(library) view: (framework,library)view의 생태계를 끌어와 프레임워크로 사용, 라이브러리로도 사용 (여러가지사용성) 2.only rendering & update 3.component based link,title,content,card 등으로 나누어 사용(component Tree, dom tree와 유사 but 직접 컴퍼넌 트를 만들어 재활용 ) 4.virtual dom(dom을 react에 위임) 가상의 돔을 이용하여 이전과 이후 상태 비교, 바뀐 부분을 자동으로 변경 St..
PARCEL bundler(정적파일연결)pacel-plugin-static-files-copy 패키지 사용하기 생성된 이미지파일 등은 직접 dist 폴더에 넣지 않고 pacel-plugin-static-files-copy 를 npm으로 설치해줘야한다 설치후 package.json 에서 하단처럼 정적경로 폴더를 지정해줘야한다.(링크참조) 이패키지 옵션을 통해 favicon.ico처럼 따로 복사해서 사용할 파일들을 지정할수 있다. "staticFiles":{ "staticPath":'static'} //pacel-plugin-static-files-copy 패키지를 통해 static이라는 폴더를 지정하여 dist라는 폴더로 복사붙여넣기 되는 방식. https://www.npmjs.com/package/parcel-plu
PARCEL bundler 개념정리 번들러 -번들러의 개념 : 웹에서는 순수하게 html,css,js로만 기능을 수행하기에는버거운데 view,ts,svg,sass(기능보충)등의 기능들을 html,css,js(동작반영)로 변환하여 사용하는 과정이 필요 -번들러의 역할 : 외부 패키지 도움을 받아서 이 변환 과정을 도와주는 역할(즉, 필요한 외부패키지들을 직접 설치해야함) -번들러 종류 : 파슬 vs 웹팩 파슬: 구성 없는 단순한 자동번들링(세팅값추가 x 몇가지 설정만), 소형 중형 프로젝트에 적합 웹팩: 매우 꼼꼼한 구성, 중대형 프로젝트에 적합 (디테일한 옵션들까지 제공하여 확인할 작업이 많음)
bootstrap 활용 기존 cdn을 사용하거나 npm install 하는 방법 두가지가 있는데 커스터마이징하기에는 npm 방식이 좋기때문에 이를 사용하는 순서를 나열해보겠다. 우선 bootstrap을 사용할 폴더에 1.index.html파일을 만든후 bootstrap 에서 사용할 예시를 html에 붙여넣고 연동할 js파일이 있다면 연동하기 2.터미널을 열어 package.json 설치 (npm init -y) 3.parcel-bundler 설치 (npm i -D parcel-bundler) 4.package.json에 설치 목록확인후 scripts에 "dev":"parcel index.html", "build":"parcel build index.html" 추가 후 터미널에서 npm run dev로 local 호스트 확인 5..

티스토리툴바