취업과외 서비스 개발기1
몇달간 글이 없엇다
왜냐면 진자 뒤지게 바빳기 때문에....
여기서 더바빠질 수 도있는데 아직 잘모르겟고 일단 바쁜이유는
티비 홈쇼핑 앱과, 취업과외 서비스 개발을 동시에 진행해서다.
홈쇼핑앱의 경우 지금은 밝힐 수 없고 (추후 문제가 될 수 있으니) 자료도 없으니 취업과외 서비스 개발부터 풀어보자
https://moigeul.com/
자소서, 논술, 작문 쓰는 법을 몰라서 몇번이고 떨어졌었어요. 그래도 일대일로 코칭을 받으니까 어떻게 써야하는지 감이 잡히더라고요! -아나운서 지망생 박○후-
moigeul.com
시작과 동시에 완성품을 들고 왔다
완전히 완성은 아니지만 어느정도 서비스 할 구색은 갖추엇다고 본다
먼저 이 프로젝트는 nuxt 로 되어있엇다.
다만 되어있는 프로젝트는 샘플 수준이엇고 직접 서비스 하려면 고도화가 필요하니
내가 만들기 편한 react로 새로 마이그레이션 한 후 고도 화를 진행했다.
next.js 13 버전을 사용했는데 처음 접한 next는 생각보다 괜찮았다.
폴더구조로 간편한 라우팅이 최대 장점으로 보였고 (react router dom이 필요없으니 router 에 관련된 코드가 전혀 없어도 괜찮다) 이프로젝트와 홈쇼핑 프로젝트를 동시에 진행하면서 실력이 많이 늘었다. 프론트는 거의혼자 다했으니...
개발기 라고 적엇고 내가 만들걸 기억할겸 어떻게 만들었는지 찬찬히 풀어보자
먼저 서술하건데 이건 개발 순서와는 상관없다 지금생각으로는 메인페이지와 그 외의 소개페이지, 마이페이지와 타입관리, 수강신청과 수락, 수업방페이지 순서로 가게될듯 싶다.
먼저 메인페이지를 보자 어디까지 공개를 할 수 잇을지 모르겟지만 이정도는 괜찮겟지 싶은 정도만 공개 하겠다
먼저 next의 페이지 구조 부터 알아보자 처음 next 프로젝트를 만들면 pages 라는 폴더와 _app.js, _document.js, index.js 가 있다 여기서 _app.js 가 메인페이지를 담당한다
import { UserContextProvider } from "@/context/context.js";
import "../styles/globals.css";
import Layout from "../components/Layout";
//import "react-datepicker/dist/react-datepicker.css";
import React, { useEffect, useState } from "react";
import MobileComponent from "./MobileComponent";
export default function App({ Component, pageProps, children }) {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= 600);
};
handleResize();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return (
<UserContextProvider>
{isMobile ? (
<MobileComponent />
) : (
<Layout>
<Component {...pageProps} />
</Layout>
)}
</UserContextProvider>
);
}이게 _app.js
import DesktopComponent from "./DesktopComponent";
import MobileComponent from "./MobileComponent";
import React, { useState, useEffect } from "react";
export default function Home() {
const [isIndex, setIsIndex] = useState(true);
//const isMobile = window.innerWidth <= 600;
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= 600);
};
handleResize();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []); // Empty dependency array means this effect runs once on mount and cleanup on unmount
return <div>{isMobile ? <MobileComponent /> : <DesktopComponent />}</div>;
}이게 index.js다
여기서 볼 수 있는건
1. 페이지를 모두 레이아웃으로 감쌋다는것
2. 모바일화면과 데스크탑화면 각각 다른걸 보여준다는것
3. contextAPI를 쓴다는것이다.
redux toolkit을 쓰려다가 그냥 contextAPI 가 더 편해서 contextAPI를 썻다 악명과 다르게 생각보다 난 편하더라
contextAPI 를 쓰면 이전에는 할 수 없엇던 전역처리를 가능하게 해준다
이전 유니티에서 아무렇지 않게 쓰던 퍼블릭 선언과 같다고 보면된다
그리고
import React from "react";
import Image from "next/image";
export default function MobileComponent() {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<div>
<p
style={{
fontFamily: "Noto Sans KR",
fontSize: "16px",
fontWeight: "Regular",
marginBottom: "10px",
}}
>
1:1 온라인 취업과외
</p>
<Image
src="/mobile/logoMobile.png"
alt="logo Mobile"
width={119}
height={69}
style={{ marginBottom: "40px" }}
/>
</div>
<p
style={{
fontFamily: "Noto Sans KR",
fontSize: "24px",
fontWeight: "Regular",
marginBottom: "82px",
textAlign: "center",
position: "absolute",
}}
>
모바일 화면도 곧 보여드릴게요! <br />
우선,PC로 접속 부탁드려요!
</p>
<Image
src="/mobile/ment.png"
alt="ment Mobile"
width={328}
height={134}
style={{ marginBottom: "30px" }}
/>
<div>
<Image
src="/mobile/manMobile.png"
alt="man Mobile"
width={146}
height={176}
/>
</div>
</div>
);
}모바일 페이지를 먼저 소개하면 아직 준비가 되지 않아서 이미지와 글만 보여준다
이전 index.js에서 작성한
const handleResize = () => {
setIsMobile(window.innerWidth <= 600);
};이 코드로 화면 크기를 읽어 모바일인지 데스크탑인지 판단하게 된다.
또 이미지 방식이 기존 react와 조금 다른데 next만의 이미지 적용방식이 따로 있다
퍼블릭 폴더를 src가 알아서 찾아가기에 경로만 적어주면 되고 꼭 가로 세로값을 필수로 넣어줘야 한다
<Link
href="https://blog.naver.com/zx406/223012791989"
style={{ marginTop: "30px", marginLeft: "0px" }}
>
<div
style={{
width: "350px",
height: "36px",
position: "relative",
zIndex: 1,
backgroundColor: "#e94b41",
borderRadius: "10px",
}}
/>
<div>
<p
style={{
marginTop: "-31px",
marginLeft: "8px",
position: "relative",
zIndex: 3,
color: "white",
fontFamily: "Noto Sans KR",
letterSpacing: "-0.2px",
}}
>
6개월 만에 언론고시 합격한 실제 후기 보러 가기 →{" "}
</p>
</div>
</Link>비슷한 예로 nextjs 13 버전부터는 <a/> 태그가 사라지고 <Link/> 로 대채되었다
<a/>태그를 쓰면 오류나니 주의 해야 한다
<Link href="/description">
<Image
src={p1}
alt="mainImg13"
width={2000}
height={1600}
style={{ cursor: "pointer" }}
/>
<div
style={{
position: "absolute",
top: "50%",
left: "38%",
transform: "translate(-50%, -50%)",
fontSize: "35px",
color: "white",
padding: "10px",
fontFamily: "Noto Sans KR",
letterSpacing: "-3.3px",
}}
>
지금{" "}
<span style={{ color: "#E94B41", letterSpacing: "-3.3px" }}>
현직자 또는 전직자로
</span>{" "}
등록하고
<br />
<span style={{ letterSpacing: "-3.3px" }}>
수익을 창출해보세요!
</span>
</div>
</Link>메인페이지 마지막을 보면 클릭으로 멘토관련 소개 페이지를 볼 수 있는데
처음에는 삼항연산자와 조건부 랜더링으로 메인페이지를 다시 렌더링 했으나
뒤로가기 버튼으로 다시 되돌아 갈 수 없어서 링크로 대채했다.
생각보다 글이 길면서 영양가는 없어보이는데 소스를 다 공개하기도 조금그렇고 하니 여기까지 하고(대단한건 없지만 내가 대표가 아니기에) 다음에 진짜 개발이라고 할 수 있는 마이페이지의 멘토와 멘티 상태관리에 대해 말해볼까 한다.
참고로
1 - 멘티
2 - 승인대기중인 멘티
3 - 멘토 승인된 멘티
4 - 거절된 멘티
10 - 멘토
로 나뉜다