Next.js와 프론트엔드 개발의 미래 1. 프론트엔드 개발자의 변화 프론트엔드 개발자의 역할이 점차 변화하고 있습니다. 단순히 자바스크립트를 알고 있는 것만으로는 더 이상 충분하지 않습니다. 외주 개발을 맡기거나 인공지능이 코드를 생성하는 시대에, 프론트엔드 개발자는 어떤 가치를 가질까요? 2. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) CSR은 브라우저에서 HTML을 실시간으로 만드는 방법이고, SSR은 서버에서 HTML을 미리 만들어 보내는 방법입니다. CSR은 이쁘고 부드러운 사이트를 만들 수 있지만, 첫 페이지 로딩 속도 저하와 SEO 문제 등의 단점이 있습니다. 반면 SSR은 이러한 문제점을 해결할 수 있습니다. 3. SSR과 프론트엔드 전문성 SSR을 사용하면 최근 몇 ..

나만의 레시피 기록 사이트 Front End 작업내역순서 1. 최초 파일셋팅 (Page 폴더생성) 2. 테일윈드 css 도입 테일윈드 패키지 설치 설정 파일 추가 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind.config.js에 다음 내용 추가 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } 내 css파일에 다음 내용 추가 index.css @tailwind base; @t..

문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 입출력 예 s return "3people unFollowed me" "3people Unfollowed Me" "for the last week" "..

문제 설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 입출력 예 s return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" function solution(s) { let arr = s.split(' ').sort((a,b)=>a-b); return arr[0]+ " "+arr[arr.length-1] }

문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..

프론트 터미널에서 명령어 입력 npm create vite@latest √ Project name: . or 생성할 폴더명(본인이름) √ Package name: movie-app √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev # 스타일 컴포넌트 npm install styled-components # 라우터 npm install react-router-dom 컴포넌트 폴더에는 ReviewListItem 파일이 들어가 있고 페이지 폴더에는 Home 페이지, ReviewList 페이지, ReviewWrite 페이지가 들어가있습니다. App.jsx import { BrowserRouter as Rou..