🚨 발생 문제 Next.js: Failed to compile Failed to compile ./src\app\intro\page.tsx ReactServerComponentsError: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials 🤔 문제 원인 useState를 사용하는 컴포넌트에 Client Compo..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 구슬을 나누는 경우의 수 1) ❓ 문제 설명 머쓱이는 구슬을 친구들에게 나누어주려고 합니다. 구슬은 모두 다르게 생겼습니다. 머쓱이가 갖고 있는 구슬의 개수 balls와 친구들에게 나누어 줄 구슬 개수 share이 매개변수로 주어질 때, balls개의 구슬 중 share개의 구슬을 고르는 가능한 모든 경우의 수를 return 하는 solution 함수를 완성해주세요. 2) 🚫 제한 사항 1 ≤ balls ≤ 30 1 ≤ share ≤ 30 구슬을 고르는 순서는 고려하지 않습니다. share ≤ balls 3) ✅ 입출력 예 balls share result 3 2 3 5 3 10 입출력 예 #1 서로 다른 구슬 3개 중 ..
💡 TIL 20230819 - Tailwind CSS 장단점, 연습예제 1. Tailwind CSS란 Tailwind CSS는 utility-first 컨셉을 가진 CSS 프레임워크이다. 부트스트랩과 비슷하게 m-1(.m-1 {margin: 0.25rem}), flex(.flex {display: flex})와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. tailwind는 제로 런타임으로 동작하며 빠르고, 유연하다. 1) 장점 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, css 작업 시간이 절약된다. 컴포넌트 생성이 쉽고, 관리 및 유지보수가 편하다. 커스터마이징이 쉬워 원하는 대로 디자인을 바꾸..
💡 TIL 20230817 - SSR vs SSG vs ISR 저번 글에서는 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 차이점에 대해 공부했다면, 오늘은 SSR, SSG, ISR에 대해 정리해보았다. 1. SSR (Server Side Rendering) 1) 서버 사이드 렌더링 SSR은 CSR과 반대되는 개념으로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js에서 SSG나 ISR과 구분되는 이유는 렌더링되는 시점 때문인데, SSR은 사용자가 요청할때마다 그 시점에 페이지를 새롭게 렌더링한다. 그렇기 때문에 fetch 해야하는 데이터가 빈번하게 변경될 때 사용된다. 2) getServerSideProps getServerSideProps 함수는 serv..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 특정 문자열로 끝나는 가장 긴 부분 문자열 찾기 1) ❓ 문제 설명 문자열 myString과 pat가 주어집니다. myString의 부분 문자열중 pat로 끝나는 가장 긴 부분 문자열을 찾아서 return 하는 solution 함수를 완성해 주세요. 2) 🚫 제한 사항 5 ≤ myString ≤ 20 1 ≤ pat ≤ 5 pat은 반드시 myString의 부분 문자열로 주어집니다. myString과 pat에 등장하는 알파벳은 대문자와 소문자를 구분합니다. 3) ✅ 입출력 예 myString pat result "AbCdEFG" "dE" "AbCdE" "AAAAaaaa" "a" "AAAAaaaa" 2. 사용한 메서드: sl..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 부족한 금액 계산하기 1) ❓ 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 2) 🚫 제한 사항 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음..
💡 TIL 20230816 - redirect와 rewrite 1. redirect, rewrite의 공통점/차이점 redirect와 rewrite 유저가 어떤 path로 접근하는 경우, 다른 path나 경로로 자동으로 이동시켜주는 기능이다. 공통점 next.js에서 기본적으로 제공하는 기능이다. 두 가지 모두 유저가 특정 path로 이동 시 의도한 path로 이동시키 위해 사용한다. 차이점 redirect는 정해진 path로 url이 변경되어 유저가 확인할 수 있다. 반면 rewrite는 redirect 해주는 것은 똑같지만, 유저가 처음 입력한 url 그대로 유저에게 보여진다. 2. redirect, rewrite 설정 방법 1) next.config.js // next.config.js module..
💡 TIL 20230815 라이브러리 vs 프레임워크, CSR vs SSR 1. 라이브러리(React) vs 프레임워크(Next.js) React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있다. 1) 📚 라이브러리 React는 JavaScript Library 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 응용 프로그램이 라이브러리를 사용한다. 개발자로서 사용하는 것 2) 🛠️ 프레임워크 Next.js는 React Framework 코드를 작성하는 기본 틀을 제공하여 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 응용 프로그램은 프레임워크에 의해 사용된다. 개발자가 코드를 불러오는 것 코드를 적절한 위치에 잘 적기만 한다면 f..
🇰🇷 20230815 TIL Next.js 기초 강의를 듣던 중 프로젝트 create를 npx로 하길래 npm과 뭐가 다르지? 그렇다면 yarn이랑은? 궁금해져서 간단하게 찾아보고 정리하였다. 1. npm 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 Node Package Manager라는 말 그대로 노드 환경에서의 패키지 매니저를 의미한다. 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라고 하는 Getting Started가 많고 사용 빈도가 높다. `npm install 모듈명 -g` : npm을 통해 -g 옵션을 주면 매 프로젝트마다 모듈을 설치해 줄 필요가 없고 내 컴퓨터 안에서 글로벌하게 모듈이 설치되어 프로젝트마다 같은 모듈을 공유해서 사용할 수도 있다. 단..
