Karice의 여행 & 코딩 블로그

나만의 웹사이트 도전기

Karice — Sun, 29 Jun 2025 22:05:16 +0900

시작하며

벌써 2025년의 상반기가 지나갔다.

올해 상반기에는 개발자로서 나를 성장시키기 위해, 혼자 프로젝트를 했다.

기획부터, 디자인, 개발, 홍보까지 모든 부분을 혼자 진행했다.

월간 조회수 25만

결과는 위와 같이 1개월 동안 25만 명이 내가 만든 사이트에 들어왔다.

아직 프로젝트가 끝나진 않았지만, 스스로 배운 점과 어떤 생각을 하면서 진행했는지 정리해 보았다.

목표

내가 이 프로젝트를 시작한 목적은 아래와 같다.

1. 내가 풀고 싶은 문제를 내 지식을 활용해서 스스로 해결한다.

2. AI를 활용해서 내가 부족한 부분을 보완한다.

3. 출시하고 끝이 아닌 계속 유지보수하고 업데이트하며 실제 제품을 만들어 본다.

기획

첫 시작은 문제점 파악이었다. 내가 하는 모바일 게임이 있는데, 해당 게임은 공략을 찾기가 정말 어려웠다. 나를 비롯해 많은 사람들이 정보를 빠르게 찾고 싶은데 대부분 정보는 중국어로 되어있거나 산개되어 있어서 그런 문제를 해결해 보기로 했다.

해결하고 싶은 문제 :

게임 정보를 찾기 힘들고, 정보가 산개되어 있으며, 부정확한 정보가 많음.

정보를 정리한 곳이 있다고 해도, 구글시트에 정리되어 있어 UX가 별로임

해결 방법 :

사람들이 게임 정보를 더욱 쉽고 빠르게 찾고 활용할 수 있게 하며, 본인의 플레이에 맞춰 여러 추가 정보를 볼 수 있는 웹사이트 개발

기대 효과 :

사이트를 활용해서 더 빠르게 본인에게 필요한 정보를 찾고, 절약한 시간만큼 게임을 더 즐길 수 있음.

추가 기획 :

모바일 게임 정보 사이트이기에, 모바일 최적화가 이루어져 있으며, PWA를 활용해서 앱처럼 사용할 수 있게 한다.

대부분의 기획은 내 메모장에 정리되어 있으며, 가끔 AI를 활용해서 보완할 점이나, 어떤 점을 고려하면 좋을지 물어보면서 진행했다.

디자인

디자인은 배운 적이 없어서, 대부분은 참고하며 진행했다.

여러 게임 정보 사이트를 돌아다니며 UI를 분석하고 정리했다.

디자인은 UX와 직결되어 있어서 내가 하는 게임의 정보를 사람들이 어떻게 보면 잘 정리되고 바로 인지할 수 있을지 고민하며 했다.

구체적인 디자인 패턴은 따로 없이, 필요할 때마다 다른 디자이너들은 어떤 고민을 하며 선택을 하는지만 찾아보았다.

간단하게 시안만 패드로 그려보고 나머지는 개발로 구현하면서 디테일을 정리했다.

개발

이번에는 내가 잘하는 언어가 아닌, 평소에 써보고 싶었던 언어를 사용했다. 그래서 가장 많이 AI 도움을 받으며 진행했다.

NEXT.JS를 사용하며, 웹프론트만 구현하고, PWA를 활용했다.

개발을 잘하거나, UI를 잘 만들지는 못했지만 최대한 UX를 좋게 하려고 노력했다.

결국 문제를 잘 해결하는 게 좋다고 생각했기 때문이다.

여러 라이브러리, 프레림워크, 방법론을 써보면서 대략 NEXT는 어떻게 써야 하는지 이해됐다.

물론 아직 처음부터 하라고 하면 잘 모르겠지만, 어떤 구조로, 어떻게 하는지 정도만 알게 됐다.

Front Server만 Vercel로 배포를 했고, Backend나 데이터베이스는 없이 진행했다. 서버 유지비는 6월부터 유료결제해서 20달러가 나왔다.

Amplify, CloudFront 등은 세팅할 게 많고, 내 서비스와 잘 안 맞아서 포기했다.

Next.js, Google Analytics, Cursor를 사용했다.

도메인은 가비아로 구매했으며, 현재는 supabase로 구글 로그인을 붙이려고 진행 중이다.

90% 이상을 AI를 사용해서 진행했으며, 그러면서 MCP, AI 사용법 등을 많이 익힐 수 있었던 것 같다.

홍보

어떻게 보면 홍보는 가장 문외한인데, AI 없이 진행해 봤다.

최대한 구글광고 등의 돈 드는 것 지양했기에, 손수 여러 사이트를 돌아다니며 홍보했다.

1. 가장 해당 게임을 많이 하는 카페나 사이트를 방문해서, 홍보글을 작성했다.

2. 사람들이 제일 많이 방문하는 시간대에 내 사이트의 기능을 추가하고 업데이트 내역을 알려주는 홍보글을 작성했다.

3. 매번 다음 개발 할 거를 투표로 받고, 가장 호응이 많은 기능을 개발했다.

4. 카페나 커뮤니티에서는 내 제품으로 해결할 수 있는 질문들에 사이트 주소와 함께 답변해 주기.

5. 피드백이나 아이디어를 수용하고, 댓글에 답변 달아주기

이런 흐름으로 여러 사이트들에 홍보했다.

이렇게 사람들에게 각인시키고, 즐겨찾기를 하게 만들며 재방문을 하도록 만들었다.

그렇게 재방문고객을 늘리고, SEO를 통해서 자연유입도 꾸준히 받을 수 있도록 사이트를 관리했다.

결국 내가 많은 홍보를 하지 않아도 웹검색을 해서 올 수 있도록 하고 싶었기 때문이다. 그 결과는 위 사진과 같이 검색 유입이 엄청 늘었다

마무리하며

언젠가 나만의 서비스를 만들어보고 싶어서 해본 프로젝트인데, 처음부터 꽤나 만족스러웠다. 앞으로는 최대한 유지보수와 데이터만 추가하면서 진행 예정이다. 최근에 AI의 사용으로 풀고 싶은 문제들을 빨리 풀어보고 싶기 때문. 앞으로도 파이팅

이번에 만든 사이트 : https://www.reverse1999-simulator.com

버틴의 여행가방

리버스 1999의 모든 정보를 한눈에 찾아보세요.

www.reverse1999-simulator.com

1. 마케팅이 정말 중요하다.

2. 이제 풀 문제만 잘 파악하면 AI로 문제를 풀 수 있다.

3. 내가 하고 싶은 것 = 사람들이 원하는 것 일수록 좋다.

4. 우상향해도, 항상 트래픽은 떨어질 수 있다

5. 자연유입 SEO가 중요하다.

2023 인프콘 후기

Karice — Wed, 16 Aug 2023 20:15:37 +0900

서문

2023.08.15 인프콘이 열렸다.

1년에 한번 밖에 없는데다가, 추첨이라서 가기도 힘든 기회인데 운좋게 당천되서 참가하게됐다.

최대한 즐기고 배우기 위해 여러글을 찾아봤었고, 나만의 간단후기와 함께 팁을 써보려고 한다.

처음 컨퍼런스 갔거나, 인프콘에 대해 궁금하면 많은 도움이 될 것이다.

1. 사전준비

이미 티켓팅은 마쳤다는 전제로 글을 작성할 예정이다

인프콘은 매년 8월에 진행하고, 인프런에서 신청 가능하다. 하지만 추첨제이니, 신청하고 기도하는게 최선..

하지만 다시보기는 할 수 있으니 너무 걱정하지 마시길

사전 준비는 별로 할게 없지만, 두개는 꼭하면 좋을 듯하다.

1. 시간표 짜기

시간표는 보통 인프런 사이트에서 세션(프로그램) 소개하는 곳에서 함께 설정할 수 있다.

막상 가서 어떤 프로그램을 들을지 정하려면 힘드니, 어떤 세션을 들을지 미리 확인해보는게 좋다.

한개의 Time Cell에 여러 세션이 진행되니, 자신이 가장 듣고 싶은 세션을 미리 지정해두고 시간표를 만들어두자.

흔한 백엔드 개발자의 시간표

2. 부스 확인하기

크게 시간은 안들여도 되고, 간단하게 어떤 기업들이 참여하는지만 살펴보자. (함께하는 기업들에 있다.)

어짜피 가서 다 볼거지만, 미리 알아둬서 나쁠 건 없다고 생각한다.

보통 시간표나 부스는 인프콘 홈페이지에서 확인 가능하다.

2. 인프콘 당일

입장할때 받는 굿즈

당일에도 도착하기 전에는 준비할것은 따로 없다.

세션을 들으면서 필기할 노트나 노트북과 가방만 있으면 된다. (굿즈 담을 가방은 현장에서 준다.)

해당 장소 (2023은 코엑스) 가서, 문자로 받은 QR코드를 보여주고, 입장 굿즈를 받아서 들어가면된다.

보통 시간에 맞춰서 가면 줄도 별로 없고 바로 입장가능한 것 같다.

이제 할일은 3가지 정도가 있다. (선택)

1. 부스 탐방

컨퍼런스를 후원해주는 기업들이 부스를 열고 굿즈나 이벤트를 하며 참여자들과 소통하는 곳이다.

대부분의 유명한 부스들은 줄서는 시간이 대부분(5분~ 20분정도)이다.

부스들의 목적은 많은 개발자들을 자신들의 인재풀에 등록하고 네트워킹하기 위함이다.

덤으로 회사 소개도 하고 네트워킹 및 자사 서비스 소개도 가능하다.

부스에가면 굿즈도 주고, 안가면 여러모로 손해본다고 생각해서 꼭 한번 다 돌아보는 것을 추천한다.

2. 세션 듣기

미리 정리해온 시간표를 보며 알맞는 강연실에 가면 된다.

인기 세션은 사람들이 많아서 앉을 자리가 없거나, 못들어가게 할 수 있으니 5분전에 미리 도착하는게 좋은 것 같다.

그리고 세션을 들으며 필기할 준비도 하면 정말 금상첨화이다.

세션의 퀄리티나 내용은 호불호나 케바케가 많아서 따로 말할건 없지만, 웬만해서는 관심있으면 다 들어보는게 좋은 것 같다.

그리고 세션이 끝나면 따로 발표자에게 질문을 할 수 있는 공간이나 시간이 있으니 너무 걱정하지는 말자.

3. 네트워킹

15시 40분 부터는 따로 네트워킹 시간이 있다.

내향적이거나, 별로 할것도 없을 것 같아서 많이 안가는 분들이 많겠지만, 은근 숨겨진 보석인 것 같다.

다양한 개발자들과 기업 채용담당자나 실무자들과 대화도 해볼 수 있는 기회이다.

내향형이라도 가면 열심히 매칭시켜주고 대화를 할 수 있도록 도와주니 걱정하지 않아도 될듯

3. 2023 인프콘 후기

여러모로 정말 많이 배우고, 느낀것이 많았던 시간이다. 여러 개발지식 + 네트워크를 얻을 수 있는 좋은 기회였다.

다들 비싼돈 주고 컨퍼런스를 가는지 이해가 됐다. 다음에도 좋은 기회가 있으면 꼭 참여해야겠다.

마지막으로 인프런에서 정리한 인프콘2023 정리글을 소개하며 마무리하겠다.

https://www.inflearn.com/pages/infcon-2023-report

숫자로 돌아보는 인프콘 2023 - 인프런 | 스토리

뜨거웠던 IT인의 축제, 인프콘 2023! 함께해 주신 많은 분의 열정 덕분에 두 번째 인프콘도 성황리에 마무리할 수 있었습니다. 인프콘 2023에는 어떤 직무의 참가자가 가장 많았을지, 가장 많은 참

www.inflearn.com

https://www.inflearn.com/pages/infcon-2023-sketch

벌써 두 번째 개최, 인프콘 2023 현장 스케치 - 인프런 | 스토리

인프런의 오프라인 IT 콘퍼런스, 인프콘 2023이 8월 15일 코엑스 그랜드볼룸과 아셈볼룸에서 개최되었어요. 무려 8,700 여명이 참가 신청을 해주신 가운데, 추첨을 통해 선발된 참가자 및 세션 발표

www.inflearn.com

2023 토스 NEXT 개발 챌린지 후기

Karice — Wed, 16 Aug 2023 20:15:26 +0900

늦은 감이 있지만, 이번 2023 토스 NEXT 개발 챌린지 후기를 남긴다.

Sever 직군 기준이니 참고바란다.

아마 토스 NEXT 관련 준비하는데, 도움이 될수도..?

1. 코딩 테스트

코딩테스트는 엄청 어려운 정도는 아니였다.

알고리즘 문제 4~6개 정도, 서술형 문제 4~7개 정도가 나왔었다. (정확한 갯수는 기억이 잘...)

알고리즘 문제

알고리즘 문제는 엄청 어려운 수준은 아니고 평소에 알고리즘을 풀어봤다면 느낌이 오는 수준이었다.

프로그래머스 Lv2 정도 난이도 인데, 문제 유형은 다양하게 나왔다. (NP, BFS, Backtracking 등)

사실상 인터넷을 접속할 수 있게 해주어서, 정말 안풀리는 사람들은 검색찬스를 썼을지도 모르겠다.

요즘 ChatGPT에게 물어보면 다 알려준다고 들었어서, 복붙해볼까 생각은 해봤지만, 역시나 문제는 그림도 있고, 글은 복사가 안되게 설정되있었다.

서술형 문제

사실상 고비였던 서술형 문제. 사실 이 부분 답변을 제대로 못해서 떨어졌을거라 생각했을 정도.

기본 CS보다는 진짜 최적화, 기능 향상, 문제상황 파악 및 문제해결 느낌으로 나왔다.

관련 지식을 접해보지 못했다면 손도 못댈수준 정도였다. 그래도 어찌어찌 3~4문제 정도 답변을 써서 제출했다.

이부분은 맥락이나 사전지식이 없으면 검색자체를 못하기 때문에, 여기서 변별력을 내려고 하는게 보였다.

그리고 사실상 서술형을 잘 못봐서 포기하고 있었는데, 코테 합격소식이 들려왔다.

소식 이후 1.5주 뒤에 1차면접이 잡혔다. (나는 늦게 면접을 본 편) 대부분 1~2주 안에 잡히는 것 같았다.

2. 포트폴리오 제출

그다음 할일은 포트폴리오 제출이다. 이부분은 미리 준비해두면 좋을 듯하다. 기간이 5~7일 정도 기간을 줬던 것 같다.

포트폴리오로 합불을 정하는게 아니라, 면접때 볼 소스를 미리 확인하려고 하는 것 같다.

그렇다고 대충내도 되는게 아니라, 면접을 생각해서 정말 자신있는 항목들만 쓰는것을 강추! (잘 모르는 것들을 내면 나중에 후회한다.)

이력서 참고한 사이트들

1. https://famelee.oopy.io/

FameLeeㅣ말에 힘이 있는 창업가

새로운 패러다임을 만들고 싶은 창업가입니다. 말에 힘이 있는 사람이 되기 위해 하루하루, 성장을 갈망합니다.

famelee.oopy.io

2. https://techblog.woowahan.com/2531/

이직초보 어느 개발자의 이력서 만들기 | 우아한형제들 기술블로그

{{item.name}} 안녕하세요 저는 올해 2월부터 우아한형제들의 배라개발팀에서 일하고 있는 구인본입니다. 작년 연말에 잠시 휴식을 가진 후 1월부터 이직을 준비하면서 경험했던 것 중에 이력서를

techblog.woowahan.com

3. https://wonny.space/writing/work/engineer-resume

개발자 이력서 작성하기 (feat. 이력서 공개) | Wonny Log

이력서 작성 시 참고하면 좋을 정보와 체크리스트 공유 | 2022년 4월 8일 업데이트 안녕하세요, 워니입니다. 이력서 작성 방법에 대한 글을 올린 후, 수많은 강의 제안과 이력서 …

wonny.space

4. 내 포트폴리오 : https://www.notion.so/lyva/30bcb036bcc443dc81eadeabe829d2bc?pvs=4

3. 1차 면접

면접 준비

1차면접 발표가 나자마나 일단 카카오톡 오픈톡방을 찾아들어갔다.

보통 대기업, 유니콘에서 하는 공채는 오픈톡방이 만들어져있고, 거기서 정보공유도 하기때문이다.

그곳에서 미리 면접본 사람들의 Tip이나 정보를 조금은 주워들을 수 있다. 합격하면 공유도 가능!

그다음으로는 server직군에 맞는 CS관련 공부를 했다. (오랜만에 하니까 꽤나 어려웠다.)

CS는 유명한 질문들을 모아둔 github을 보며 공부했고, 개인적으로 대규모 트래픽 처리와 관련된 책을 읽었다.

참고한 깃헙 주소들 :

https://rokrokss.com/post/2019/04/06/%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84-%EC%A0%84%EC%82%B0-%EC%88%98%EC%97%85-%EC%B4%9D%EC%A0%95%EB%A6%AC.html#ds-and-algo

ROKROKSS

rokrokss.com

https://gyoogle.dev/blog/

‍ Tech Interview

최종 수정 : 12/17/2022, 7:23:59 AM

gyoogle.dev

면접 후기

그리고 대망의 면접날

면접은 1시간 30분 정도 Google Meet로 진행됐다.

면바면이니 참고만 하도록 하자.

진행은 말하기 어려우니.. 간단하게 말하면 트래픽 처리 및 서버 문제나 오류가 있을때 어떻게 대처할지 물어봤다.

그리고 포트폴리오에서 세세하게 물어보면서 3~4번 꼬리질문을 받는데, 정말 생각하기 힘든 질문도 받았다.

그럴때, 정말 토스 개발자들은 이정도까지 생각하고 고려하면서 개발하구나..를 떠올렸다.

예상못했던 질문들이 많아서 그런지.. 생각보다 답변을 제대로 못했다.

그래도 면접관님들은 나를 편하게 해주려고 하고, 해서 끝까지 집중해서 했었다.

마지막 10분은 준비해왔던 역질문을 하고 회의실을 나왔다.

면접이 끝나고 복기하면서 되돌아보는데, 씁쓸했다.

아무리 면바면이라고 하지만.. 나라도 나를 안뽑을 것 같았다.

그리고 다음날까지 전화가 오지 않으며 결국 탈락 메일을 받았다. (합격한 사람들은 보통 1~2일내에 전화로 합격통보를 받는다고 한다.)

4. 후기

그래도 토스에서는 어떻게 일하고, 어떤 가치나 기술들을 중요하게 여기는지 알 수 있는 좋은 기회였고, 면접을 준비하면서 새로운 것들도 배우고, 잘 몰랐던 것들도 다시 공부할 수 있어서 좋았다. 앞으로 또 어떤 기회가 있을지는 모르겠지만, 자주 면접보는 것도 좋은듯.

[SQL] 원하는 순서대로 새로운 정렬 규칙 만들기

Karice — Wed, 21 Dec 2022 16:40:09 +0900

상황

기존의 desc, asc를 넘어서, 나만의 정렬 규칙을 커스텀하고 싶은 상황이었다.

예를들면, 값이 10, 20, 21이 있으면 정렬을 20,21,10 이렇게 하고 싶었다.

해결방법

SQL의 FIELD를 사용하면 된다.

새로운 규칙을 만들어준다.

아래 코드에서, FIELD안의 첫번째 인자는 Table의 Column을 지정해주고, 주고 싶은 순서대로, 쭉 콤마로 연결해주면 된다.

코드

SELECT fieldname FROM table ORDER BY FIELD(fieldname, 'G15', 'G30'), fieldname;

참고

https://mohading.tistory.com/36

[SqlAlchemy] 연산한 row를 기준으로 정렬하고 싶을때

Karice — Wed, 21 Dec 2022 16:27:04 +0900

상황

SqlAlchemy에서 count 한 것을 비교해서 having에 넣어 준 후 결과값을 받으려고 한다.

따로 aliased를 사용하지 않고, 그냥 바로 .label() 한 column 명을 넣고 싶은데 그냥 값을 넣어도 계속해서 에러가 뜨는 상황

해결방법

.literal_column을 사용하면, label한 값도 filter, having, order에서 사용할 수 있다.

평소에는 text()를 이용하면 잘 되지만, 부등호나 사칙연산이 필요할 경우 무조건 .literal_column()을 써줘야 한다.

아니면 그냥 aliased로 지정해서 바로 변수처럼 써도 된다

코드

  test = db.session.query(
            func.count(Association.seller_id).label('use_count'),
            CommonCode.code_value.label('limit_count')
        ).select_from(Counselor) \
        .group_by(Counselor.id) \
        .having(literal_column('membership_use_count') < literal_column('membership_limit_count'))

참고

https://stackoverflow.com/questions/51793704/sqlalchemy-reference-label-in-having-clause

SQLAlchemy reference label in Having clause

We have a query that we need to use as part of a select, and also in the having clause. The problem is that the resulting SQL expands the query in both places when I would expect to not expand it i...

stackoverflow.com

https://stackoverflow.com/questions/30313872/using-a-label-in-a-having-clause-in-sqlachemy

Using a label in a having clause in sqlachemy

I'm trying to use a label in a having clause with sqlalchemy, but I'm having problems getting it working. I'm trying something like this: qry = db.session.query( Foo.id, Foo.name...

stackoverflow.com

[Vue] 같은 컴포넌트이지만, 새로고침을 하고 싶을 때

Karice — Wed, 19 Oct 2022 10:58:34 +0900

상황

같은 컴포넌트를 사용하지만, URL만 바뀌여서 새로 rendering이 안되는 상황

하지만 새로운 URL로 페이지를 바꿔주고 싶은 상황

this.$router.push(`/api-doc/${api_path_id}`)

위의 코드로 실행하니, URL은 수정이 되는데 페이지는 전혀 변동이 없다.

Data의 변동도 없어서 보니, Created가 실행안되는 상황이었다.

해결방법

Watch를 $route에 걸어주었다.

$route(URL)이 바뀌면서 새로 데이터를 받아오도록 설정했다.

새로고침 할 필요없이, 새로 데이터를 받아오고 뿌려주었다.

  watch: {
    $route() {
      this.pending = true
      const query = this.$route.params.apiId
      this.init(query).then(() => {
        this.pending = false
      })
    }
  },

[SQL] 여러 값을 한개로 합칠때 (group_concat)

Karice — Mon, 26 Sep 2022 11:57:22 +0900

상황

여러 줄의 값을 한줄로 합치고 싶어서 찾아보았다. python의 join과 비슷한 느낌임.

해결방법

group_concat을 select문에 넣어주고, 어떤 것들을 넣어줄지만 알려주면 된다.

자주 안쓰일 것 같은데, 잊힐때만 하면 쓰이는 일이 생기는 녀석

코드

select type, group_concat(name order by name) 
from test 
group by type ;

참고

https://fruitdev.tistory.com/16

[MySQL] GROUP_CONCAT 사용하기

필요에 의해 서로 다른 결과를 한줄로 합쳐서 보여줘야 할 경우가 있다. 전체 결과값을 가져와서 java 와 같은 프로그램 언어에서 for 문을 돌며 문자열을 붙여도 되긴 하지만 Select 쿼리를 던질때

fruitdev.tistory.com

[Vue] Component 강제 업데이트

Karice — Mon, 26 Sep 2022 11:54:14 +0900

상황

자주 실수하는 것중 하나.

기존 List가 있고, Api를 통해 리스트의 값을 받아서 기존 List에 저장했는데, 화면에는 전혀 변화가 없는 경우

해결방법

새로운 List객체에 Api로 받은 리스트를 받고, 기존 List에 새로운 List객체를 대입한다.

Vue의 reactivity 시스템은 모든 변화를 감지하지 못합니다..(언제그러는지는 정확하게 모르겠으나 개발하다보면 왕왕 있습니다..)

그래서 변화를 감지하지 못할때 강제 리렌더링을 해줍니다.

코드

아래와 같은 코드는 headerList가 기존 리스트이다.

새로운 열을 추가하고 싶을때는 아래와 같이 해준다.

...this.headerList는 기존 리스트를 뜻한다.

addHeaderRow() {
  this.headerList = [
    ...this.headerList,
    {
      header_name: '',
      header_value: ''
    }
  ]
},

참고

https://hyeonyeee.tistory.com/97

[Vue] Component Force Rerendering 하기 (강제로 rerender)

vue 개발을 하다가 data의 값이 잘 바꼈는데 컴포넌트 rerendering이 잘안돼서 그대로 이상한 값이 남아 있는 경우가 있었다. 그래서 찾아보니 좋은 stackOverFlow를 발견.. 강제로 rerendering을 시켜주고 싶

hyeonyeee.tistory.com

[Vue] v-text-input에서 숫자 입력범위 제한하기 (ev, limit)

Karice — Mon, 26 Sep 2022 11:47:12 +0900

상황

v-text-input에서 별점을 입력받는데, 1~5사이의 값만 받고, 만약 5이상의 값을 넣어도, 5로 설정하고 싶었다.

해결방법

@input.native를 사용하면 된다.

:max, :min값은 줘도 생각보다 별로였다.

코드

// HTML

<v-text-field
  @input.native="handleInput_solution" //input 값 5이상이면 변경하게하기
  type="number" //숫자만 받게 하기
  placeholder="선택"
/>

//Script
handleInput_solution(ev) { // 5이상 값을 넣으면 5로 만들어주는 함수
  if (Number(ev.target.value) > 5){
    this.reviewSurveyAnswers.solution = 5
  }
},

참고

https://stackoverflow.com/questions/57063387/setting-max-and-min-limit-on-input-field

Setting max and min limit on input field?

i am having this issue where i have a vuetify text-field and i am trying to set a max and min limit on it. Now setting min=0 and max=10 works but seems like you could still paste values more than 1...

stackoverflow.com

[Vue] 목록에서 v-checkbox 전체선택, 해제

Karice — Mon, 26 Sep 2022 11:42:08 +0900

상황

Vue에서 리스트 안에 체크박스들을 넣었는데, 전체선택하는 함수를 만들고 싶었다.

해결방법

모든 리스트를 돌면서 현재 체크 상황과 똑같이 해주면 된다. 의외로 간단함

코드

HTML 코드

  <tbody>
    <tr
      v-for="(row, index) in paramList"
      :key="row.id"
      :style="row.param_apply ? null : { opacity: 0.4 }"
    >
      <td>
        <v-checkbox
          v-model="row.param_apply"
          @change="apply_check" //이부분!!
        />
      </td>
      <td>
        <TextInput
          v-model="row.param_name"
          dense
          required
          :error-messages="inputCheck(row.param_name, 'Param_Name')"
        />
      </td>
      <td>
        <v-text-field
          v-model="row.param_value"
          dense
          :error-messages="
            inputCheck(row.param_value, 'Param_Value')
          "
        />
      </td>
      <td>
        <v-text-field v-model="row.param_desc" dense />
      </td>
      <td>
        <v-btn x-small fab depressed>
          <v-icon color="error" @click="removeParamRow(index)">
            mdi-minus
          </v-icon>
        </v-btn>
      </td>
    </tr>
  </tbody>

Script

checkedAll(checked) {
  this.allChecked = checked
  for (let i in this.paramList) {
    this.paramList[i].param_apply = this.allChecked
  }
},

참고

https://linked2ev.github.io/vue/2020/12/06/Vue-%EB%AA%A9%EB%A1%9D%EC%97%90%EC%84%9C-%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4(checkbox)-%EC%A0%84%EC%B2%B4%EC%84%A0%ED%83%9D-%EB%B0%8F-%EC%A0%84%EC%B2%B4%ED%95%B4%EC%A0%9C(all-selected,-deselected)/

[Vue] 목록에서 체크박스(checkbox) - 전체선택 및 전체해제(all selected, deselected)

Vue에서 체크박스 전체 선택 및 전체 해제에 대한 코드 포스팅

linked2ev.github.io