공부하다가 갑자기 리터럴이라는 단어가 되게 낯설게 느껴지는거 있죠?저 스스로에게 설명해보라 하는데 저도 명확이 얘기를 못하더라고요..그래서 정리해봤습니다.리터럴이란...코드에 직접 작성하는 값을 의미합니다. 쉽게 말해서 변수나 함수에 저장되는 것이 아닌, 코드 자체에 포함되어 있는 값을 말하는데요, 잘 이해가 안되시죠?코드로 설명드릴게요.// 변수에 저장된 값let name = "Jun";// 코드에 직접 작성된 값 (리터럴)console.log("문자열1");console.log(24); // 숫자 리터럴여기서 "Jun", "문자열1", 24가 모두 리터럴에 해당합니다.1. 문자열 리터럴 (String Literal)문자열 데이터를 표현할 때 사용합니다. ' ', " ", 또는 벡틱 ` `을 사용할 수..

자바스크립트(JavaScript)는 동적인 웹 페이지를 작성하기 위해 사용되는 언어입니다.모든 웹브라우저에서 지원하며, 웹 페이지를 보다 상호작용적으로 만들 수 있게 해줍니다. HTML이나 CSS와 달리, 자바스크립트는 웹 페이지에서 동적으로 콘텐츠를 업데이트하거나 사용자 이벤트에 반응할 수 있습니다. 동적 웹 페이지 작성 언어: 자바스크립트는 사용자가 웹 페이지와 상호작용할 수 있도록 해줍니다.브라우저 호환성: 대부분의 웹 브라우저는 자바스크립트를 기본적으로 지원합니다.자바스크립트의 주요 특징들을 알려줘 인터프리터 언어: 코드를 한 줄씩 해석하여 실행하는 방식의 언어입니다.동적 타이핑(Dynamic Typing): 변수의 타입이 고정되지 않고, 실행 시점에 결정됩니다.객체 기반 언어: 객체를 중심으로 ..

타입스크립트에서 타입을 지정하는 방법을 알려드리겠습니다.const a = { name: "Kim", age: 24,};console.log(a);//결과 : { name: 'Kim', age: '24' }변수 a를 const로 선언하고 객체를 할당했을 때,console.log로 변수 a를 출력하게 되면 다음과 같은 결과를 출력받게 됩니다. 이떄 타입스크립트에서는 Type을 지정할 수가 있습니다.const a: { name: string; age: number } = { name: "Kim", age: 24,};console.log(a);위의 코드와 같이 상수 a에 name은 문자열 age는 숫자형으로 명시해줌으로써 타입을 지정해줄 수가 있습니다.타입을 지정할때에는 해당 상수, 변수에 :를 붙이고 ..

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..

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

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

자바스크립트의 Math 내장 객체안녕하세요, 친구들! 오늘은 자바스크립트의 강력한 내장 객체 중 하나인 Math 객체에 대해 알아볼 거예요. 숫자와 관련된 다양한 작업을 쉽게 할 수 있게 도와주는 이 객체를 통해 코딩을 더욱 재미있게 만들어봐요! 🚀1. Math.min(val1, val2, val3, val4)Math.min 메서드는 주어진 숫자 중 가장 작은 값을 반환해요.let result = Math.min(10, -10, 20, 50, -30);console.log(result); // -30 2. Math.max()Math.max 메서드는 주어진 숫자 중 가장 큰 값을 반환해요.let result = Math.max(10, -10, 20, 50, -30);console.log(result); ..