frontendschool6 / escape12 Goto Github PK
View Code? Open in Web Editor NEW프론트엔드스쿨 6기 '이게무슨12이야'조
프론트엔드스쿨 6기 '이게무슨12이야'조
게시글 없는 상태 페이지 진행중 입니다.
✅ 야무쌤한테 여쭤볼꺼 한번에 모아볼까용
⭐ 병합하면서 어차피 합쳐질 꺼라서 임시로 남겨놓겠습니다!!!
📢 전체 UI 작업 완료 시키기
더이상 UI 작업하지않고 기능구현에 집중할수있도록!
📢 피그마 시안 변경했습니다. 예시페이지일뿐이니 디자인은 편하게 변경해주세요
📢 저희 박스두께 border-2 로 통일해야할것같습니다!
📢 UI 작업끝나고 글자 크기도 통일해야할것같습니다!
📢 수연님 뒤로가기 버튼 이 코드 써보셨나요?
<Headerback
onClick={() => {
navigate(-1);
}}
>
이 코드쓰면 이전 페이지로 잘 넘어갑니다.
📢 수연님 AddCommunity에 작성자 아이디도 같이 create 되게 해주셔야 남진님이 불러올수있습니다!
📢 등록, 수정, 삭제 등등 이벤트 일어날 시 토스트로 안내문구 해주세용
📢 반응형 바꿔주세요
s: { min: '375px', max: '640px' },
m: { min: '641px', max: '1279px' },
l: { min: '1280px' },
📢 배포하면서 발견한 문제점
EditPage에 import문 headerBack -> headerback 으로 변경
jsconfig.json 변경
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*" : ["src/*"]
}
}
}
vite.config.js 변경
import react from '@vitejs/plugin-react';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import { env } from 'node:process';
import viteImagemin from '@vheemstra/vite-plugin-imagemin';
import imageminGifSicle from 'imagemin-gifsicle';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminPngQuant from 'imagemin-pngquant';
import imageminSvgo from 'imagemin-svgo';
import imageminWebp from 'imagemin-webp';
import { splitVendorChunkPlugin } from 'vite';
const isDev = env.NODE_ENV === 'development';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
splitVendorChunkPlugin(),
viteImagemin({
plugins: {
jpg: imageminMozjpeg(),
png: imageminPngQuant(),
gif: imageminGifSicle(),
svg: imageminSvgo(),
},
makeWebp: {
plugins: {
jpg: imageminWebp(),
png: imageminWebp(),
},
},
}),
],
css: {
devSourcemap: true,
modules: {
generateScopedName: isDev
? '[name]_[local]__[hash:base64:5]'
: '[hash:base64:4]',
},
},
resolve: {
alias: {
'@': resolve(__dirname, './src'),
},
},
// 빌드 시, 청크 파일 생성 매뉴얼 구성
build: {
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom'],
reactRouter: ['react-router-dom'],
animations: ['gsap'],
},
},
},
},
});
갓-건-주🙏
댓글 및 게시물 확인 페이지 진행중입니다
😀 피그마에서 폰트 직접 수정하고싶으시면 다운받아서 로컬에 저장해주세용
Q. 페이지네이션 - 리액트쿼리
Q. 이미지 최적화
Q. useState 사용 시 성능 저하-> useRef로 변경해야 하는가?
저희해야할 기능이 너무 많으니까 각자 맡은 페이지에 들어가야될 기능 정리해서 하나씩 지워가면서 합시당
📢 11:00 ~ 11:25 트러블슈팅방 이동
🦆 페이지네이션 여쭤보고싶습니다
일단 저희가 구현하기로 계획했던거는 전부 구현한 것 같고 내일부터 컴포넌트 나누기, 성능(특히 useState는 성능에 취약함), 코드수정, 웹접근성, 이미지최적화해야합니당!
📢 저녁에 병합 후 2차배포!
📢 2차배포 후 다른 사람페이지에서 수정할 부분 찾아보기
📢 성능검사는 배포후에 하는게 정확할것같습니다
📢 전체
9월 19일 최종 병합 후 배포 예정
📢 수연님 이미지 제가 다 바꿨습니다!
HeaderBack.jsx 코드 변경해주시고 감싸고있는 div 지워주세요😀
import { string, func } from 'prop-types';
Headerback.propTypes = {
children: string,
onClick: func,
};
function Headerback({ onClick = '', children }) {
return (
<header className="flex max-w-[600px] min-w-[320px] m-auto fixed top-0 left-0 right-0 py-3 text-center bg-ec4 text-ec1 text-2xl font-bold z-10">
<button className="absolute left-4" onClick={onClick}>
<
</button>
<p className="mx-auto flex-grow">{children}</p>
</header>
);
}
export default Headerback;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.