리액트를 복습하는데.. 참 새로운 것들이 많아졌다. 그리고 라떼는 없었던, 지금 왠만한 유명 서비스는 거의 대부분 도입해서 운영 중이라는 그 HOT 한?- next.js를 알아보게 되었다. https://nextjs.org/
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
공식 문서를 찾아 읽던 중.. 와우! 할만한 인상적인 워딩이 있었는데 바로, aim to improve the Developer Experience 였다.
사용자 경험.. 그 전에 먼저 개발자 경험. 아, 역시.. 이래서 NEXTjs NEXTjs 하는구나.. 뷰가 다르구먼.. TMI로 next.js 공식 사이트 또한 사용자 친화적이었다. 게다가 learn 과정에서 접할 수 있던 UX writing은 단연 최고였다.
따라가는 중에 일부 추가로 알아본 리서치 링크와 메모들을 기록해본다.
From JavaScript to React
01. React: A declarative UI library
https://sung-studynote.tistory.com/m/109
선언형(declarative) vs 명령형(imperative)
선언형 무언가를 작업하기 위하여 어떻게 진행할 것인지를 나열하는 것을 뜻한다. 언어 : Haskell, HTML, SQL, 등... 명령형 무언가를 작업하기 위한 방법을 정의하는 것을 뜻한다. 언어 : Java, C, 등...
sung-studynote.tistory.com
02. ReactDom
1) BabelScript
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Babel Script -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>2) JavaScript
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const headerContent = document.createTextNode(
'Develop. Preview. Ship. 🚀',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>
03. Essential JavaScript for React
Functions and Arrow Functions
Objects
Arrays and array methods
Destructuring
Template literals
Ternary Operators
ES Modules and Import / Export Syntax
04. React Core Concepts
Components
Props
State
05. Props used that adding attributes to HTML elements for in React
1) warning code
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li>{name}</li>
))}
</ul>
</div>
);
}If you run this code, React will give us a warning about a missing key prop. This is because React needs something to uniquely identify items in an array so it knows which elements to update in the DOM.
2) correct code
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
06. State and Hooks
React has a set of functions called hooks. Hooks allow you to add additional logic such as state to your components.
You can use state to store and increment the number of times a user has clicked the like button. In fact, this is what the React hook to manage state is called: useState()
function HomePage() {
// ...
const [likes, setLikes] = useState()
function handleClick() {
setLikes(likes + 1)
}}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Likes ({likes})</button>
</div>
)
}From React to Next.js
To add Next.js to your project, you will not need to load the react and react-dom scripts from unpkg.com anymore. Instead, you can install these packages locally using the Node Package Manager: npm.
음.. 역시.. 티스토리는 쓰기 불편해서..
다시.. 노션으로 이동해서 다시 정리중.. ㅜ
https://www.notion.so/thinknormal/next-js-854a71ca3d9c41aa841957c15004a1c5
next.js
From JavaScript to React
www.notion.so
'새로워지기 > 마흔의 생활코딩' 카테고리의 다른 글
| [gpt 3.5] 그 흔한 ChatGPT 가스라이팅해서 온라인 점집차리기 (0) | 2023.03.30 |
|---|---|
| Wow! airtable 에어테이블 정말.. 님쏘굳! ( -ing) (0) | 2023.02.12 |
| Fast api로 잘못 읽어서 시작한 Fast ai (0) | 2022.05.02 |
| FAST API 혼공 내용 공유 (0) | 2022.04.26 |
| 그 흔한 인공지능-머신러닝-딥러닝 개요 (0) | 2022.01.30 |
댓글