Next.js 14에서의 스타일링 방법을 알아보겠습니다.특히, Next.js 공식 팀이 권장하는 테일윈드 CSS를 중심으로 설명드리겠습니다. 테일윈드(Tailwind CSS)테일윈드는 Next.js 공식 팀이 권장하는 스타일링 방법 중 하나입니다. 설치 과정에서 테일윈드 설치 여부를 물어보며, 이를 통해 손쉽게 스타일링을 시작할 수 있습니다.Next.js 보일러 플레이트 생성 과정에서 테일윈드 사용 여부를 Yes로 선택하면, 별다른 설정 없이 자동으로 포함됩니다. 테일윈드는 처음부터 도입해서 사용하는 것을 권장합니다. 중간에 설치를 원한다면, 공식 문서를 참고해서 그대로 설치하면 됩니다. 테일윈드 공식 문서 - Next.js 가이드  Install Tailwind CSS with Next.js - Tai..

안녕하세요, 웹 개발자 여러분!오늘은 Next.js설치 방법을 알려드리려고 합니다.여러분도 아시다시피, Next.js는 요즘 대세죠? 저도 처음에는 살짝 어려워 보였지만, 실제로 해보니 너무 간단하고 강력하더라구요!Next.js 설치 방법먼저, 다음 명령어를 실행해 Next.js 프로젝트를 만듭니다:$ npx create-next-app@latest .령어를 입력하면 다음과 같은 질문들이 나옵니다. 하나씩 답해볼게요!Would you like to use TypeScript?: 원하시면 Yes, 아니면 No.Would you like to use ESLint?: 코드 품질을 위해 Yes 추천!Would you like to use Tailwind CSS?: 당연히 Yes! Would you like to..

안녕하세요, 여러분! 👋 오늘은 컴공생인 저가,, “알고리즘”에 대해 한 번 짚어보려고 해요.알고리즘, 왜 중요할까요?먼저, 알고리즘이 뭔지부터 알아볼까요?알고리즘은 문제를 해결하기 위한 단계적인 절차를 말해요. 쉽게 말해, 우리가 어떤 문제를 해결하기 위해 따라야 할 ‘레시피’라고 생각하면 돼요.🍰컴퓨터가 빠르고 효율적으로 문제를 해결할 수 있도록 도와주는 이 ‘레시피’가 알고리즘이에요. 알고리즘이 실제로 어떻게 쓰일까?알고리즘은 우리가 매일 사용하는 앱이나 웹사이트에서도 중요한 역할을 해요.이해를 돕기 위해 예를 들자면, 구글 검색이나 유튜브 추천 영상들이 신기할 정도로 본인의 관심사에 맞게 떠오르지 않나요?모두 알고리즘 덕분에 우리가 원하는 정보를 빠르게 찾을 수 있는 겁니다. 🔍 또한, 알고..

안녕하세요, 요즘은 핫한 웹 프레임워크, Next.js에 대해 알아보려고 합니다!개발을 해보셨거나 공부해보신 분이라면 한 번쯤 들어보셨을 텐데요, Next.js가 도대체 무엇인지, 어디서 나왔는지, 그리고 왜 인기가 많은지 알려드릴게요! 🎈 Next.js란? 🤔Next.js는 React를 기반으로 한 서버 사이드 렌더링(SSR) 프레임워크예요. React는 자바스크립트 라이브러리로, 컴포넌트를 만들어서 웹 애플리케이션을 구축하는 데 사용되는데, Next.js는 이 React를 더 강력하게 만들어주는 도구라고 할 수 있죠.더보기서버 사이드 렌더링(SSR) ????SSR이란 사용자가 웹페이지를 요청할 때 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식을 의미합니다. 이 방식은 초기 페이지로 속도..

🗣️ "호이스팅이 뭔지 설명하세요" 네 호이스팅에 대해 설명드리겠습니다.호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에, 변수와 함수의 선언부를 스코프의 맨 위로 끌어올리는 것처럼 동작하는 특성을 말합니다. 이게 실제로 코드가 변경되는 것은 아니고, 컴파일 단계에서 메모리에 저장되는 방식입니다.제가 이해한 바로는 호이스팅이 중요한 이유가 코드의 실행 흐름을 예측하는데 영향을 주기 때문입니다.특히 var로 선언한 변수에서 이 특성이 두드러지게 나타납니다.예를 들어 console.log로 변수 x를 출력한다고 작성하고 다음 줄에 var키워드로 변수 x를 선언하면 에러가 날 것 같지만 undefined가 출력됩니다. var x부분만 코드의 최상단으로 끌어올려져서 작동되기 때문입니다.개인적으로 호이스팅을 ..

🗣️ "var, let, const의 차이가 무엇인가요?" 네 var, let 그리고 const의 차이점에 대해서 설명드리겠습니다.먼저 var는 JavaScript의 초기부터 사용된 변수 선언 키워드입니다. 함수 스코프를 가지며 호이스팅이 발생합니다. 하지만 var의 사용은 몇 가지 문제를 일으킬 수 있습니다. 예를 들면 var로 선언된 변수는 if문을 선언했을때 밖에서도 접근이 가능하여 변수가 전역 스코프로 노출 되거나 중복선언도 가능하여 변수 재선언으로 인한 버그를 발생시킬 수도 있습니다.그래서 ES6부터 let과 const가 도입이 되었습니다. let은 블록 스코프를 가지며 재할당이 가능하지만 재선언은 불가능합니다. const의 경우에는 재선언과 재할당 모두 불가능합니다.저의 사용경험에서는 var..

🗣️  "스크립트 태그 속성 중에 async vs defer 차이가 뭐에요?" 네, 지금부터 차이를 설명드리겠습니다.async(어씽크)와 defer(디퍼)는 HTML문서에 JavaScript 파일을 비동기적으로 로드하는 두 가지 방법입니다.async 속성부터 설명드리겠습니다. 스크립트가 HTML파싱을 하는 동시에 백그라운드에서 로드되며, 로드가 완료되는 즉시 파싱이 끝나지 않았더라고 실행되게 됩니다. 이는 다른 스크립트나 HTML파싱이 끝날때까지 기다려주지 않기 때문에 스크립트의 실행순서가 보장되지 않습니다. 이런 async 태그의 특징의 경우 광고 스크립트처럼 다른 스크립트와 독립적으로 동작할때 유리합니다.다음 defer속성에 대해 설명드리겠습니다. 스크립트가 HTML파싱과 동시에 백그라운드에서 로드..

면접을 준비하는 글을 쓰며. 면접은 누구에게나 긴장되고, 부담되고, 떨리는 순간일 것이다.Why? => 합격 여부가 걸려있다는 생각에 마음이 무거워지기도 하기 때문.BUT. 나는 면접을 회사가 나의 자질과 역량, 적합성을 판단하는 테스트일 뿐만 아니라,,,/ 나 역시 회사에 대해 "과연, 이 회사가 나와 잘 맞을까?" 라고 생각해보는 가벼운 커피챗으로 여기고 있다. (물론, 이 마인드를 위해서는 뒷받침할만한 역량과 수준을 갖춘 상태여야 한다.)더보기☕커피챗이란?커피챗(Coffee Chat)은 가벼운 이야기를 나누는 인터뷰나 면접을 의미해요. 정식 면접보다는 비공식적이고 편안한 분위기에서 대화를 나누는 것을 말해요. 서로를 알아가는 시간을 통해, 회사와 지원자 간의 적합성을 확인할 수 있죠.  면접에 대한..