잼굴 코딩공장

투표 커뮤니티. 오늘 뭐먹을지 골라줘, 옷 어떤거 살지골라줘, 어디 놀러갈지 골라줘 등 일상생활속 선택을 투표로 받는 커뮤니티 사용기술 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..

Virtual Dom(가상 DOM) 가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다. ..? 우선 가상 DOM을 이해하기 위해서 DOM이 뭔지 부터, 브라우저 렌더링 과정을 알아야 한다. https://jamgul.tistory.com/76 브라우저 렌더링을.araboja 브라우저 렌더링 과정을 이해하기 위해서 먼저 웹 브라우저의 구조를 알아야한다. 사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버 jamgul.tistory.com 요약 브라우저가 렌더링할때, HTML파일과 CSS파일을 DOM으로 만들고, 그걸 화면에 어떻게 출력할지 계산..

브라우저 렌더링 과정을 이해하기 위해서 먼저 웹 브라우저의 구조를 알아야한다. 사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버튼) 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 연결하는 것 렌더링 엔진: HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 것 통신: 네트워크 요청을 수행 UI 백엔드: 기본적인 위젯을 그려주는 것 JS엔진: 자바스크립트 코드를 실행하는 인터프리터 자료 저장소: 로컬 스토리지나 쿠키같은 보조기억장치에 데이터를 저장하는 파트 여기서 우리는 렌더링 엔진에 대해서 이야기할것이다. 렌더링 엔진의 목표 1. HTML,CSS,JS,이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다. 2. 업데이트가 필요할 때,..

CSR: 클라이언트 사이드 렌더링 SSR: 서버 사이드 렌더링 CSR = 클라이언트측에서 렌더링 하는 방식 SSR = 서버측에서 렌더링 하는 방식 +)SSG 라는것도 있음: Static Side Generation SSR이랑 SSG 둘다 서버측에서 HTML을 보내는거라 비슷한데.. SSR은 요청이 들어오면 만들어서 보냄 (미리 만들어두기 어려운 경우) SSG는 미리 다 만들어둔거 (캐싱해두기 좋은 경우) CSR의 동작 과정과 특징 동작 과정 1. 유저가 웹사이트 방문한다. 2. 브라우저가 서버에 콘텐츠를 요청한다. 3. 서버는 빈 뼈대 HTML만 보내준다. 4. 브라우저가 연결된 JS링크를 통해 서버를 통해 JS를 다운받는다. 5. JS를 이용해 동적으로 페이지를 만들어서 브라우저에 띄운다. 특징 1. ..

문제 1. 콜라 문제 풀이 순서 1. while문을 사용, 조건은 빈병의 개수(n)가 빈병 요구량(a) 보다 크면 반복한다. 2. 빈병 개수와 요구량을 나눠주고, 마트에서 주는 콜라 개수를 곱한다. 3. 처음에 갖고 있던 빈병과 요구량을 나누고 남은것들이랑 마트에서 받은 콜라빈병이랑 더하고 계산을 다시한다. function solution(a, b, n) { let answer = 0; while (n >= a) { const remain = n % a; n = Math.floor(n / a) * b; answer += n; n += remain; } return answer; } 후..