스파르타코딩클럽 - [왕초보] 나만의 수익성 앱, 앱개발 종합반 강의를 듣고 내용을 정리한 게시글입니다. 스파르타코딩클럽 5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의 spartacodingclub.kr 앱 화면 만들기 - DetailPage 구현 ▼ myapp/pages/DetailPage.js 더보기 import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity, Alert, } from "react-native"; export default function DetailPage() { const tip = { idx: 9, category: "재테크", title: "렌탈 서비스..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com DetailSection detailSection 추가하기 ▼ myapp/components/home/MapSection.tsx 더보기 더보기 import styles from '../../styles/detail.module.scss'; import { IoIosArrowUp } from 'react-icons/io'; const DetailSection = () =>..

스파르타코딩클럽 - [왕초보] 나만의 수익성 앱, 앱개발 종합반 강의를 듣고 내용을 정리한 게시글입니다. 스파르타코딩클럽 5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의 spartacodingclub.kr JSX JSX : 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어 용도에 맞는 태그를 정해놓았기 때문에, 필요한 태그를 그때그때 꺼내서 사용하면 된다. 화면의 구역을 잡을 때는 태그 글자를 쓸 때는 태그를 사용 ▼ JSX 문법 예시 import { Text, View } from 'react-native'; Hello, I am {props.name}! 앱 개발 준비 - 리엑트 네이티브 & Expo 설치 및 실행 React Native : 자바스크립트 언어 하나로 안드로이드 ..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런...www.inflearn.com네이버지도 API를 위한 타입 정의 패키지 설치 npm install --save @types/navermaps네이버지도 API 불러오기▼ components/MapSection.tsx  ▽ Map 컴포넌트를 호출 import Map from './Map';const MapSection = () => { return ( { con..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com Header 컴포넌트 작성하기 ▼ components/Header.tsx import Link from 'next/link'; import styles from '../src/styles/header.module.scss'; interface Props {} const HeaderComponent = ({}: Props) => { return ( ); }; export ..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com getStaticProps gatStaticProps 함수에서 리턴된 props를 받아서 pre-rendering할 수 있다 ▼ src/pages/section1/getStaticProps.tsx ▽ 2초 대기 후 랜덤한 값을 data로 리턴하고 그 값을 받아 화면에 출력하는 기능을 한다. import type { NextPage } from 'next'; interfa..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com 프로젝트 생성 $ npx create-next-app@latest --typescript ESLint # ESLint : 코드에 대한 룰 $ npm rin lint - .eslintrc.json 파일이 자동 생성되며, 권장 사항인 next/core-web-vitals 라는 룰로 설정된다. Prettier # Prettier : 코드를 좀 더 깔끔하게 만들어주는 code ..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co getServerSideProps - SSR를 선택할 수 있게 한다. ▼ myapp/src/pages/index.tsx import { GetServerSideProps } from "next"; /* ... */ const Home = ({ results }: { results: movie[] }) => { return ( {results?.map((movie) => ( /* ... */ export const getServerSideProps: GetServ..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co Layout - 모든 페이지에서 공통으로 사용하는 header, footer 등을 공통 레이아웃으로 설정하여 반복된 코드를 줄일 수 있다. ▼ myapp/components/layout.tsx import NavBar from "./NavBar"; const Layout = ({ children }) => { return ( {children} ); }; export default Layout; - 공통으로 들어가는 NavBar를 레이아웃 안에 넣어줌 - pro..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 페이지 라우팅하기 ▼ myapp/src.index.tsx const Home = () => { return ( Home ); }; export default Home; ▼ myapp/src.about.tsx const About = () => { return ( About ); }; export default About; NavBar 컴포넌트 ▼ myapp/components/NavBar.tsx import Link from "next/link"; const N..