잼굴 코딩공장

공무원 기출문제 CBT사이트 추천 "공모아"

공무원 시험을 준비 하면서 가장 중요한것은 역시 "기출문제"입니다.사실 기출문제만 완벽히 숙지해도 과목별로 80~90점에서 합격까지 할수있는 시험이 공무원 시험문제죠? 이런 기출문제를 모두 모아놓고, 모든 과목의 해설, 섞어풀기, 약점분석까지 제공하는 사이트를 소개하려고합니다.https://gongmoa.kr 공모아 - 공무원 기출문제 무료 자료실 · 온라인 CBT · AI 약점 진단국가직·지방직·경찰·소방 공무원 기출문제를 무료로 열람·다운로드하고 온라인 CBT로 바로 풀어보세요. 틀린 문제는 오답노트에 자동으로 쌓이고, AI가 약점을 개념 단위로 진단합니다.gongmoa.kr 바로 "공모아"입니다. 최근에 생긴 공무원 기출문제 CBT사이트라 UI 디자인부터 깔끔하고 공부할때 있으면 좋겠다 싶던 기..

투표 커뮤니티. 오늘 뭐먹을지 골라줘, 옷 어떤거 살지골라줘, 어디 놀러갈지 골라줘 등 일상생활속 선택을 투표로 받는 커뮤니티 사용기술 1. React 2. TypeScript 3. Redux-toolkit 4. Axios 5. Firebase 기능 1. 커뮤니티 게시물 CRUD 2. 카테고리별 인기게시물 모으기 3. 인기게시물 메인좌측 / 랜덤게시물 메인 우측 4. 내가 올린 게시물들 모아보기 진행 1. 리액트+파이어베이스 연동 ✔️ 2. 회원가입 기능 ✔️ 3. 게시물 CRUD 4. 투표 기능 5. 인기게시물 취합 6. 랜덤게시물 뿌리기 7. 신고기능 참고

Next.js를 사용한다면 클라이언트 컴포넌트와 서버 컴포넌트를 분리해서 컴포넌트를 생성한다. Next.js에서 클라이언트 컴포넌트를 사용하기위해서는 코드 최상단에 'use client'를 작성해두면되고, 이후에는 다양한 함수들을 사용할수있게 된다. 그런데 !!!!! 'use client'를 사용하면 error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () 뭐 이런 에러가 자꾸 뜬다.. 공식문서에서 해보라는 대로해도 똑같고 뭐 자꾸 JSON.parse 파싱에러가 자꾸뜬다... 그렇다고 use client를 안쓰면 1 | // 'use client'; 2 | import { useState } from 'react' : ^..

현재 NEXT.js는 계속 업데이트 되고있다. 지금은 13.3 버전임 ㅎ 12버전 선배님들은 app폴더랑 pages폴더가 따로 구분되어있었다. 그리고 pages폴더에서 만든 페이지들이 자동으로 라우팅이 됐었다. 그냥 pages폴더에 apple.tsx 파일만들면 localhost:3000/apple 가면 끝났음;; 근데 13버전으로 바뀌면서 pages 폴더가 사라졌다. 그래서 사용자가 직접 app폴더안에 라우팅 하고자하는 폴더를 만들고 그곳에 page파일을 만어야 한다. Q) 더 귀찮아진거 같은데.. 하향패치 아님? A) ㅇㅇ;; 더 귀찮아지긴했는데.. 공통 컴포넌트 사용면에있어서 상향됨.. 1. 정적 라우팅 app폴더 안에 라우팅 하기원하는 폴더 만들고 page파일 만들고, 하위 요소들 더 만들고싶으면 ..

CSR과 SSR은 각자 장단점이 있다. CSR (Client Side Rendering) 장점 1. 한번만 로딩되면 나머지 동작에서 빠르다. (브라우저에서 한번에 다 다운받아서) 2. 서버의 부하가 적다. 단점 1. 페이지 로딩 시간이 길다. 2. SEO 최적화 is bad 3. 보안취약 SSR (Server Side Rendering) 장점 1. 페이지 로딩 빠름 2. SEO 최적화 is godd 3. 보안 good 4. 실시간 데이터 OK, 사용자별 데이터 OK 단점 1. 서버에 부하가 있을수 있다. 2. 요청할때마다 받아와서 조금 느릴수있다. NEXT.js를 사용하면? 얘는 하이브리드라서 CSR이 필요한 곳엔 CSR로, SSR이 필요한곳엔 SSR로, 한페이지라도 CSR+SSR 섞어서 사용가능함 ㄷㄷ..

Next.js를 설치하면 해당 폴더구조로 설치된다. app폴더: 코드를 직접 짜는 공간 page.js : 메인페이지, 리액트의 App.js layout.js: 메인페이지를 감싸는 용도. 리액트의 index.js public폴더: 이미지나 static 파일 보관하는 공간 api 폴더 : 서버기능 만드는 공간 next.config.js : nextjs 설정 파일 node_modules 폴더 : 설치한 라이브러리 보관용 폴더 package.json : 설치한 라이브러리 버전 기록용 파일 이렇게 구성되어있다. 일단 기존 리액트랑 비슷하다..! Next.js 설치방법 (터미널을 킨다) 1. npx create-next-app@latest --experimental-app 2. 프로젝트 명 설정하고, 타입스크립트니..

HTML Todo List Add Clear All CSS * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { text-align: center; } form { display: flex; justify-content: center; margin-top: 20px; } input[type="text"] { padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; width: 70%; } button[type="submit"] { padding: 10px; border-radius: 5px; bord..

첫번째 코인 상세페이지에서 사용할수있는 댓글 기능 import React, { useCallback, useEffect, useState } from 'react' import { useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import dayjs from 'dayjs' import { addDoc, collection, getDocs, query, where } from 'firebase/firestore' import { db } from '../../firebase' import CommentBox from '../atom/CommentBox' import CommentItem from '../molecu..

첫 번째 useEffect dependency를 추가하였다. ▼ 기존 useEffect(() => { onAuthStateChanged(auth, (userAuth) => { if (userAuth) { // 유저가 존재하면 login dispatch dispatch( login({ email: userAuth.email, uid: userAuth.uid, }) ) } else { dispatch(logout()) } }) }, []) ▼ 변경후 useEffect(() => { onAuthStateChanged(auth, (userAuth) => { if (userAuth) { // 유저가 존재하면 login dispatch dispatch( login({ email: userAuth.email, uid..

리덕스툴킷!! 리덕스 툴킷을 사용하고자, 기존 기능들을 리팩토링 하였다. npm install @reduxjs/toolkit 우선 툴킷을 설치했다. import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import App from './App' import { BrowserRouter } from 'react-router-dom' import { Provider } from 'react-redux' import ConfigureStore from './store/configureStore' const root = ReactDOM.createRoot(document.getElementById('root')..