본문 바로가기

부트캠프교육중/react80

wireframe, mockup # wireframe - 디자인에 들어가기 전단계로 선(wire)을 이용해 윤곽선을 잡는것. -이작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할수있다. -웹페이지의 레이아웃과 UI요소 등에 대한 뼈대. #목업 mockup -데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한것 -데모시연, 평가를 위한 최소한의 기능만 담은 모형 2023. 1. 25.
SPA # MPA (multi page application) 전통적인 웹사이트(MPA)에서는 페이지이동시 매번 HTML파일로 된 페이지 전체를 불러와야했다. 전통적인 웹사이트는 페이지 전체를 로딩하고 이와같이 페이지 전체를 불러오는 행위를 깜빡인다고 표현한다. # 전통적인 웹사이트의 한계와 단점 매번 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰다. 사용자와 서비스 사이의 상호작용 증가는 트래픽 증가와 사용자 경험의 저하를 야기했다. # SPA (single page application) -HTML문서 전체가 아니라 필요한 데이터만 받아, 자바스크립트를 통해 변경된 부분만 업데이트하여 다시 보여주는 방식 -menu와 footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러.. 2023. 1. 25.
변수를 적용하는경우 {tweet.username} 변수를 적용하게 바꾸는 경우 const Tweets = () => { return ( {dummyTweets.map((tweet) => { const parklassName = //여기에 변수추가!! tweet.username === 'parkhacker' ? 'tweet__username tweet__username--purple' : 'tweet__username'; return ( {tweet.username} //여기에 변수적용! {tweet.createdAt} {tweet.content} ); })} ); }; 2023. 1. 22.
create react app # create react app -리액트 spa를 쉽고 빠르게 개발할수 있도록 만들어진 툴 체인이다. #폴더안에서 npx create-react-app 프로젝트명 이렇게 입력하면된다. cd codestates npx create-react-app react-project #package.json파일의 scripts부분에 start에 react-scripts start라고 쓰여있다. react-scripts start라고 터미널에 치는거랑 npm run start라고 터미널에 치는거랑 같은거다. npm run start를 치면 리액트앱이 뜨는걸 확인할수있다. (안되면 localhost:3000을 인터넷주소에 친다) index.js에 들어가면 이렇게있다 ReactDOM.render( , document.g.. 2023. 1. 21.

티스토리툴바