티스토리

Time waits for no one

검색하기

블로그 홈

Time waits for no one

xxilliant.tistory.com/m

FE 개발자 지망생의 기술 블로그입니다.

구독자: 9

방명록 방문하기

주요 글 목록

[Springboot] 자바 스프링부트 Swagger 기본 설정 풀스택 미니 프로젝트를 진행하면서 메모하는자바 스프링부트 스웨거 설정 🔥 기본 URL = http://localhost:8080/swagger-ui/index.html#/ 🔥 디렉토리 = java/com/example/{프로젝트 이름}/global/config 🔥 build.gradle 의존성 추가 내용// swagger implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.7.0' 🔥 SwaggerConfig 기본 코드package com.example.kiosk_be.global.config;import io.swagger.v3.oas.annotations.OpenAPIDefinition;import io.swagger... 공감수 2 댓글수 1 2025. 5. 1.
[NextJS] SSR 컴포넌트 vs CSR 컴포넌트 (Server Component와 Client Component), 페이지 로딩 사용자 경험 문제 해결 Next.js - Server Component와 Client ComponentNext.js 13부터 app 디렉토리 구조가 도입되면서, 컴포넌트가 서버(Server) 컴포넌트인지, 클라이언트(Client) 컴포넌트인지 구분하는 것이 매우 중요해졌습니다.이 글에서는 Server Component와 Client Component가 무엇인지, 각각 어떤 특징과 장단점을 가지는지, 그리고 언제 어떤 걸 선택해야 하는지 쉽게 정리해보겠습니다.Server Component란?Next.js에서 page.tsx나 layout.tsx 컴포넌트들은 기본적으로 Server Component입니다.Server Component는 서버에서 렌더링되고, 최종 결과만 HTML로 브라우저에 전달됩니다.✅ Server Compone.. 공감수 4 댓글수 0 2025. 4. 26.
[NextJS] 이미지를 렌더링하는 두 가지 방법 : img vs Image 태그 비교 Next.js에서 img와 Image 컴포넌트 비교Next.js로 웹 개발을 하다 보면 이미지 태그를 삽입할 때 두 가지 선택지가 있다. 바로 HTML 기본 태그인 와 Next.js가 제공하는 컴포넌트다. 비슷해 보이지만, 두 방법은 내부 동작 방식, 성능 최적화, 사용 편의성 측면에서 상당히 다르다. Next.js를 사용하는 목적 자체가 최적화된 React 개발이기 때문에, 이미지 또한 전용 컴포넌트를 적극 활용하는 것이 바람직하다."빠르고 가벼운 웹 서비스" 를 목표로 한다면, Next.js의 를 사용하자! 1. 기본 정의 정의HTML 표준 이미지 태그Next.js 전용 고성능 이미지 컴포넌트제공 주체브라우저 표준Next.js (next/image 모듈)2. 동작 방식 태그그냥 HTML 그 자체.. 공감수 2 댓글수 0 2025. 4. 26.
[NextJS] 라우팅 시스템 종류 - app vs pages 디렉토링 방법 비교, 폴더 구조 예시, useRouter 오류 디버깅 Next.js에서 app 디렉토리와 pages 디렉토리는각각 다른 방식으로 페이지 라우팅을 처리하는 두 가지 방법을 제공합니다.1. pages 디렉토리import { useRouter } from 'next/router'; 사용/pages 구조 예시 index.tsx → / about.tsx → /about # 👤 사용자용 client/ dashboard.tsx → /client/dashboard profile.tsx → /client/profile blog/ [id].tsx → /client/blog/:id # 🛠 관리자용 admin/ i.. 공감수 2 댓글수 0 2025. 4. 25.
[React] Redux 개념 및 역할, 파일 구조 디렉토링 개발을 처음 진행할 때는 리덕스 내용을 한 파일에다가 모아두다가,인턴 하면서 디렉토링 하는 방법을 배웠었는데 또 써먹을 일이 생겨 기록해둔다. Redux는 애플리케이션의 상태를 한곳에서 관리하는 라이브러리이다. 여러 컴포넌트에서 같은 데이터를 공유할 때 유용하다. 1️⃣ Redux 파일 구조 (in React typescript) /redux /actions # 액션 정의 (이벤트 발생 시 필요한 데이터 정의) categoryActions.ts /reducers # 리듀서 정의 (상태가 어떻게 변경될지 결정) categoryReducer.ts store.ts # 스토어 설정 (전체 상태 관리) 각 파일은 Redux의 핵심 요소인 액션(Acti.. 공감수 3 댓글수 0 2025. 2. 27.
[React] Hook "useState" is called in function ~ that is neither a React function component nor a custom React Hook function. Error :React Hook "useState" is called in function "windowFour" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".eslintreact-hooks/rules-of-hooks -> 컴포넌트 함수 이름 첫 문자를 대문자로 바꿔주면 해결된다. 리액트의 컴포넌트는 항상 대문자로 시작할 것!!!! 공감수 1 댓글수 0 2025. 2. 5.
Naming Convention(네이밍 컨벤션) : 코드 네이밍 규칙과 좋은 네이밍 습관 💡 일반적으로 사용되는 네이밍 규칙 1. 카멜 케이스 (Camel Case)• 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 표기하는 방식.• 예시: myVariableName, calculateTotalPrice• 주로 변수명이나 메서드명에 사용됨. 2. 파스칼 케이스 (Pascal Case)• 모든 단어의 첫 글자를 대문자로 표기하는 방식.• 예시: CustomerName, ProductList• 주로 클래스명이나 함수명에 사용됨. 3. 스네이크 케이스 (Snake Case)• 단어 사이에 밑줄(_)을 사용하여 구분하는 방식.• 예시: user_name, total_price• 파이썬 변수명이나 데이터베이스 필드명에 자주 사용됨. 4. 대문자 스네이크 케이스 (Upper Snake .. 공감수 4 댓글수 2 2025. 2. 4.
[React] MVC vs MVVM : 한눈에 비교하기 요즘 개발자 채용공고 우대사항을 보면, 'MVC, MVVM에 대한 이해'를 요구하고는 한다.그럼 어떡해? 공부해야지~!!MVC, MVVM 아키텍처란? 소프트웨어 아키텍처는 코드를 체계적으로 구조화하는 방식이다.MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)은,프론트엔드에서 UI와 데이터 처리를 분리하기 위한 구조. 1. MVC (Model-View-Controller) • Model (모델): 데이터 및 비즈니스 로직 (예: API, DB 데이터) • View (뷰): 사용자에게 보여지는 UI (예: HTML, 화면) • Controller (컨트롤러): Model과 View를 연결하여 흐름을 제어 (예: 이벤트 처리) ✅ 특징: • 프론트엔드보다는 백.. 공감수 5 댓글수 0 2025. 1. 31.
[Chrome Extension] ☃️"붕어빵 스테이션" 크롬 확장 프로그램 개발 기록 "북마크가 너무 많은데 쉽게 관리할 수 없을까?" 라는 아이디어로 토이 프로젝트를 시작했고,며칠 동안 개발을 진행해보았습니다.사용한 툴은 React js, Chrome bookmark API 등입니다. 이라는 크롬 브라우저 시작화면 대시보드를 개발하였고,이번주에 버전 1.0 배포가 완료되었습니다. (개발기간 약 3~5일) 아래 링크에서 다운받으실 수 있습니다. https://chromewebstore.google.com/detail/%EB%B6%95%EC%96%B4%EB%B9%B5-%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%85%98-chrome-dashboard/ecpkcgdaahhpdlanhdobigdkadgmedna 붕어빵 스테이션 - Chrome Dashboard - Chrome 웹 .. 공감수 6 댓글수 1 2024. 12. 6.
[Git] 깃허브 빌드 X 표시 / 빌드 실패 / All checks have failed 프로젝트 배포 후 git action을 추가한 뒤, 계속 github상에서 빌드가 잘 되다가 갑자기 연동이 안될때가 있었다. 일단 깃허브 레포지토리 메인에서 저 commits 버튼을 눌러서 커밋 리스트로 들어가자. 저 X표시를 누르면 이런 팝업이 뜬다. Details를 눌러서 자세히 보도록 하자. 그러면 아래와 같이 Build 실패 요인이 비교적 자세하게 나온다. 이걸 꼼꼼히!!! 읽어보고 원인을 찾아야 한다. 나의 경우에는 Swiper 경로 문제였다. 수정해주고 push하니 바로 체크 표시가 뜸 npm start 시 아무 문제가 없었다고 하더라도 이처럼 빌드 실패 가능성이 있으니 배포된 페이지가 연동이 되지 않는다면 깃허브를 확인할 것! 공감수 2 댓글수 0 2023. 7. 12.
[React/Typescript] TS2307: Cannot find module 'swiper' or its corresponding type declarations. 기존 프로젝트에 슬라이더를 만드려고 시도. swiper 써야되는데 자꾸 에러가 났다 Error : TS2307: Cannot find module 'swiper' or its corresponding type declarations. 해결 방법 1. npm i @types/swiper 설치 2. tsconfig.json 파일에 types를 추가한다. { "compilerOptions": { "types": ["react-transition-group"], // 이거 추가하니 에러가 사라짐 ... } } 공감수 1 댓글수 0 2023. 7. 5.
[React] Swiper Effect 정리 - Cards, Coverflow, Creative, Cube, Fade, Flip 알고리즘 떄문에 개발유튜브 보다가 swiper가 뜨길래 봤는데, 재미있어보이길래 포트폴리오를 만드는 중이다 사용해보다가 전환효과 (effect)의 종류별로 뭐가 다른건지 궁금했는데, 한번에 다 비교해놓은 글이 없길래 그냥 내가 하나씩 해봤다. 자세히 보고 싶은 분들은 공홈의 데모를 보셔도 된다 https://swiperjs.com/demos#effect-fade Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Effect에는 cards, coverflow, creative, cube, fade, f.. 공감수 1 댓글수 0 2023. 7. 2.
[React/Typescript] 검색 시 자동 렌더링 안될때/ 자동 새로고침/ 강제 렌더링/ location reload 문제 원래는 Header에 있는 검색창에 검색을 위한 input 데이터(키워드) 입력 후 엔터 or 검색 버튼을 누르면 -> Search Page로 넘어가서 api url의 검색 결과 리스트를 보여줌. 근데 Search Page에서 재검색을 하면 url은 바뀌는데 자동으로 검색 결과가 바뀌진 않음! 내가 직접 새로고침을 해줘야 바뀐 결과가 나왔다. 해결 자동으로 새로고침하는 방법 페이지 이동 이벤트 함수 내에 window.location.reload()를 추가한다! 그럼 검색어를 입력하고 엔터 or 검색버튼을 누르는 행위를 할 때, 바로 새로고침이 되면서 새로운 검색결과가 반영된 페이지가 나오게 된다. 끝 공감수 1 댓글수 0 2023. 5. 23.
[Git] github 자주 쓰는 명령어 모음 : status, add, commit, push, checkout, restore, pull, remote, vi, reset ... 변경 상태 확인하기 $ git status 모든 변경사항 스테이징 (원격저장소에 업로드) $ git add . 스테이징 취소 (add 취소) $ git reset HEAD 파일명.js 커밋 (스테이징된 변경사항을 로컬저장소에 업로드) $ git commit -m "my commit" 가장 최근 커밋을 취소하기 $ git reset HEAD^ 커밋 메시지 수정 $ git commit --amend -m "메시지 수정" 푸시 (로컬저장소 내용을 깃허브에 업로드) $ git push origin main(or master or branch name...) 풀 (깃허브 내용 다운로드 받기) $ git pull origin main(or master or branch name...) (git add 전) 수정한.. 공감수 1 댓글수 1 2023. 5. 21.
[React/Typescript] 화면 전환 효과 / 페이드인 애니메이션 / Fade 컴포넌트 종설 개발 중에 화면 전환 효과가 있으면 좋을 것 같아 넣어본 fade 효과 컴포넌트입니다. duration 변수로 fade in 시간 조절 가능하고, 전환 애니메이션 상태 속성은 아래 참고. entering: 컴포넌트가 화면에 진입하는 애니메이션을 수행 중인 상태를 나타냅니다. entered: 컴포넌트가 화면에 완전히 진입한 상태를 나타냅니다. exiting: 컴포넌트가 화면에서 사라지는 애니메이션을 수행 중인 상태를 나타냅니다. exited: 컴포넌트가 화면에서 완전히 사라진 상태를 나타냅니다. 혹시 나중에 써먹을 일 생길까봐 & 필요하신 분 있을까봐 공유! 아 참고로 react에서 transition 쓰려면 설치 먼저 해줘야한다. Javascript : npm install react-transit.. 공감수 2 댓글수 0 2023. 4. 29.
[React/Typescript] error 'TransitionStatus' 형식의 식을 ~ 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 'TransitionStatus' 형식의 식을 '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' 형식에 'unmounted' 속성이 없습니다.ts(7053) 페이지 전환 시 페이드인/페이드아웃 효과를 주는 Fade 컴.. 공감수 1 댓글수 0 2023. 4. 29.
[React] Movie App 만들기 (개인 프로젝트) - 4 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/76 [React] Movie App 만들기 (개인 프로젝트) - 3 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/75 [React] Movie App 만들기 (개인 프로젝트) - 2 John Ahn님의 인프런 강의를 따 xxilliant.tistory.com 1. 진행 사항 (현 포스팅 기준) (1) 영화 세부정보 데이터를 가져와서, 서브페이지에 띄우고 출연진 사진 보여주기 (2) 좋아요 버튼 만들기 2. 배운 내용들 (1) fetch .. 공감수 1 댓글수 0 2023. 4. 2.
[React] error:0308010C:digital envelope routines::unsupported error:0308010C:digital envelope routines::unsupported 며칠전까지 잘 돌아가던 npm start.. 오늘 갑자기 크롬에서 Localhost 3000 ERR_CONNECTION_REFUSED 에러가 떴음 뭔일인가 하고 터미널을 봤더니 아래와 같은 에러가 떠있었다. error:0308010C:digital envelope routines::unsupported 구글링해보니 노드 버전 때문에 발생하는 에러라고 하는데, node js를 다운그레이드해줘야 했다 나는 현재 설치된 버전이 lts 18 버전인데, 16버전으로 낮추면 해결된다고 함 1. 현재 버전 확인 node -v 2. 캐시 삭제 sudo npm cache clean --force 3. n 플러그인 설치 (없으.. 공감수 1 댓글수 0 2023. 4. 2.
[React] Property 'mainBestItem' does not exist on type 'JSX.IntrinsicElements' VS code에서 React, typescript로 코딩하고 있는데 Property 'mainBestItem' does not exist on type 'JSX.IntrinsicElements' 어쩌구 라는 에러가 뜰때 1. 변수명이나 파일명 잘못 썼는지 체크 - 대부분 오타 때문에 발생하는 에러이다. 2. 타입스크립트는 component 이름이 대문자로 시작해야 인식이 된다. 소문자로 시작하는 파일명이나 컴포넌트를 만들었다? 바로 고치셈 끝~ 공감수 0 댓글수 0 2023. 3. 29.
[Git] ! [rejected] master -> master (non-fast-forward)error: failed to push some refs 해결 방법 만약 터미널에 명령어 git push origin master을 쳤는데 아래와 같은 오류가 나온다면? To https://github.com/inthhh/travel_web_react.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/inthhh/travel_web_react.git' hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull .. 공감수 2 댓글수 0 2023. 3. 29.
[Git] VS code 깃허브 연동 해제 / 재설정 remote 명령어 / add, commit, push 새 프로젝트 깃허브에 레포 만들고 vs code 에서 레포 연동하려는데 구글링해보니까 다들 초기화 버튼만 누르면 된다는데 난 초기화 버튼이 없었음;; 그래서 이미 있던 레포 연결 해제하고 다시 연결해주었다. 1. 현재 연결된 레포 확인 git remote -v 2. 위 결과가 존재할 시 연결 해제 명령어 git remote remove origin 3. 다시 연결된 레포 확인해보고, 결과가 없다면 이제 원하는 레포지토리 링크 복사해서 재연결! git remote add origin {url} 연동 성공했다. 4. 이제 첫 커밋 및 푸시를 해보자. 아래의 세 명령어를 순서대로 치면 됨 git add . git commit -m "first commit" git push origin master 끝~~ 공감수 4 댓글수 0 2023. 3. 29.
[React] TypeError: Cannot read properties of undefined (reading 'prototype') 리액트 프로젝트 도중 이상한 에러가 떴다. 찾아보니 vs code 자동완성으로 아래 코드가 들어가있었는데, 이 코드가 문제였음 import { response } from "express"; 이 친구를 지워주니 에러가 싹 사라졌다. 편-안 공감수 1 댓글수 0 2023. 3. 25.
[React] Movie App 만들기 (개인 프로젝트) - 3 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/75 [React] Movie App 만들기 (개인 프로젝트) - 2 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/73 [React] Movie App 만들기 (개인 프로젝트) - 1 John Ahn님의 인프런 강의를 따 xxilliant.tistory.com 1. 진행 사항 (현 포스팅 기준) Load More (더보기 버튼) 기능 만들기 2. 함수 분리 버튼을 누르면 불러오는 page가 변경되도록 함수를 짤건데, fetch 부분을 재사.. 공감수 4 댓글수 0 2023. 2. 20.
[React] Movie App 만들기 (개인 프로젝트) - 2 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/73 [React] Movie App 만들기 (개인 프로젝트) - 1 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 1. Mongodb 몽고디비 가입 후 클러스터 0 디비 생성까지 해놨다. 나중에 로그인 기능을 위해 가입 xxilliant.tistory.com 1. 진행 사항 (현 포스팅 기준) 영화 grid card 컴포넌트 만들기 2. ES7 vs code에서 ES7 다운받고 나서 빈 js 파일에서 rfce 라고 치고 엔터 누르면 아래와 같은 기본 함수 틀이 짜잔-하고 나온다 3. 기억할 .. 공감수 2 댓글수 1 2023. 2. 20.
[React] npm ERR! code ELIFECYCLE errno 1 npm start 두 번 입력해서 나온 에러 ㅠㅠ 세상에는 참 다양한 오류가 있고.. 내 손으로 만들어가는 행복한 에러 세상^^ npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-boiler-plate@1.0.0 start: `node server/index.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boiler-plate@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of .. 공감수 2 댓글수 0 2023. 2. 20.
[React] Movie App 만들기 (개인 프로젝트) - 1 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 1. Mongodb 몽고디비 가입 후 클러스터 0 디비 생성까지 해놨다. 나중에 로그인 기능을 위해 가입해놓는듯. 2. Movie API https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 이 사이트에서 영화 api를 제공해준다고 합니다. (일단 순위가 한국 기준은 아닌듯..? 아님말고) 가입 후 api를 받음. 친절하게 API 문서도 다 있네요. 아쉽게도 현재까지는 영어만 지원한다고 합니다 .. 공감수 4 댓글수 0 2023. 2. 20.
[React] Attempted import error: does not contain a default export Attempted import error: does not contain a default export 리액트 프로젝트 강의를 따라가던 중 마주친 에러이다. 뭐가 문제인가 싶어서 번역기 돌려봄 가져오기 시도 오류 : './Sections/MainImage.js'에 기본 내보내기('MainImage'로 가져오기)가 없습니다. 이런 내용이었다. 즉, import 해놓은 MainImage 파일에 내보내기 코드가 없다는 말임. export default 코드를 깜빡했음ㅋㅋ export default MainImage; MainImage 파일에 위 코드를 추가해주니 정상적으로 작동되었다. 아직 리액트가 익숙하지 않아서 자꾸 이런거 빼먹는 실수를 한다. 정신차려.. 공감수 3 댓글수 0 2023. 2. 20.
[Git] local 내용 날아가도 괜찮을 때 강제 pull 하기 push할 내용 별로 없는데 merge생겨서 push 못할때 혹은 origin의 main 브랜치 내용을 강제로 전부 pull해오고 싶을 때 내용 싹 받아와야하는데 merge때문에 다시 clone하기 귀찮을때 아래의 명령어를 순서대로 입력하면 된다. 참고로 리셋하기 전에 push할 바뀐 내용은 어디 다른데에다가 복붙해놓기..! git fetch --all git reset --hard origin/main //(혹은 돌아갈 브랜치 이름) git pull origin main //(혹은 pull할 브랜치 이름) 그럼 로컬 내용이 현재의 브랜치 내용을 다 받아오면서 브랜치 코드로 초기화된다. 초기화 후 복붙해놨던 코드로 다시 바꾸고 push하면 merge없이 push가 잘 진행됩니다-! 공감수 2 댓글수 1 2022. 11. 27.
[객체지향설계 5원칙] About SOLID principle 이번에 우테코 프리코스 진행하면서 알게 된 객채지향 설계의 5원칙이다! 앞으로 SOLID를 잘 지켜가면서 프로그래밍을 해보아야겠다 컴퓨터 프로그래밍에서 SOLID란 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 소개한 것이다. 프로그래머가 시간이 지나도 유지 보수와 확장이 쉬운 시스템을 만들고자 할 때 이 원칙들을 함께 적용할 수 있다. SOLID 원칙들은 소프트웨어 작업에서 프로그래머가 소스 코드가 읽기 쉽고 확장하기 쉽게 될 때까지 소프트웨어 소스 코드를 리팩터링하여 code smell(코드에서 더 심오한 문제를 일으킬 가능성이 있는 특징)을 제거하기 위해 적용할 수 있다. 이 원칙들은 애자일 소프트웨어 개발과 적응적 소프트웨어 개발의 전반적 전략의 일부이다. 출처 위키백과 객체지향설계의 5.. 공감수 3 댓글수 0 2022. 10. 28.
[JS] 자바스크립트 기초 강좌 정리 YouTube 코딩앙마 님 기초 강좌 요약본. 스탠다드한 자바스크립트를 정식으로 공부해본 적은 없어서, 예전에 유튜브로 강의 들으면서 노션으로 정리해놨었는데 필요한 사람이 있을까봐 공유. 참고로 본인은 코딩 관련 개념이 어느정도 있는 상태라서 필기가 꼼꼼하진 않음! 변수 const a= “나는 ”; const b= ‘따옴표’; console.log(a+b); → “나는 따옴표” const num=30; // number console.log(a, num); → “나는” 30 console.log(a+num); → “나는 30” (+를 하면 문자열로 변환됨) const new_a = `this is new ${a}` ; 1 옆에있는 ₩₩ 얘를 영어키로 쓰면 ``임. 내부에 변수 사용 가능. 대화상자 ale.. 공감수 3 댓글수 1 2022. 10. 20.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.