Frontend

Flutter로 Repick 개발 중 갑자기 위와 같은 오류가 발생했다. 오류 문구를 보면 KGP(Kotlin Gradle Plugin) 최신 버전을 요구한다 .. 같은데 이와 같은 오류를 검색해보니buildscript { ext.kotlin_version = '1.9.20' repositories { google() mavenCentral() } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" }}을 `android/build.gradle`에 추가하면서 최신 버전을 적용하면 된다고 하지만 전혀 해결되지 않앗다. . 2시간 반동안 위와 ..

여러장의 이미지를 Carousel형태로 보여주기 위해 한번 react-responsive-carousel을 사용해보았다. 공식문서(https://www.npmjs.com/package/react-responsive-carousel)를 참고하여 이것저것 커스텀 해 보았다. react-responsive-carouselReact Responsive Carousel. Latest version: 3.2.23, last published: 2 years ago. Start using react-responsive-carousel in your project by running `npm i react-responsive-carousel`. There are 438 other projects in the npm r..

동아리에서 진행했던 중고 의류 거래 플랫폼 Repick을 웹에서 앱으로 새로 개발을 하면서 장바구니 ListView를 구현하였는데, 아래와 같이 scroll시에 AppBar의 색상이 바뀌는 현상이 있었다 AppBar Color 변경 https://api.flutter.dev/flutter/material/AppBar/scrolledUnderElevation.html scrolledUnderElevation property - AppBar class - material library - Dart API double? scrolledUnderElevation final The elevation that will be used if this app bar has something scrolled underne..

구현 먼저 구현하기 위해 간단한 핸드폰 번호 입력 폼과 전송 버튼을 간단하게 만들어보았다. 기능에 초점을 두기 위해 최대한 디자인은 심플하게 구성하였다. import styled from "styled-components"; export default function Verification() { return ( 인증번호 전송 ); } const Wrapper = styled.div` display: flex; flex-direction: column; `; const Form = { Wrapper: styled.div` display: flex; gap: 8px; `, Input: styled.input` padding: 12px 18px; border: none; border-radius: 8px; ..

문제 발생 아래와 같은 상태에서 엔터를 누르면 자연스레 Auto import 확장프로그램 덕분에 import { useState } from "react"; 와 같은 import를 해주지만 미리 선언을 해주지 않고 useState를 사용하려고 할 때, 우리는 useState 아래 빨간 밑줄에 마우스 커서를 갖다 대면 아래와 같은 Quick Fix에서 import할 수 있도록 도와주길 기대한다. 하지만 실제로 아래와 같이 Quick Fix에는 Add import from 'react'와 같은 import를 하지 않았음에 대한 기능적인 해결을 하지 않고 오류를 나타내지 않는 것에 대한 해결만을 보여주고 있다. 해결 방안 공식문서에 따르면 이는 vscode가 js파일을 독립적인 파일로 취급을 하기 때문이다. ..

React로 관리자 페이지 개발을 하던 중 위 그림과 같은 차트를 메인에 띄우려고 한다. Javascript에서 가장 많이 사용하는 Chart.js의 React Component용 react-chartjs-2가 있어서 사용해보았다. 공식문서 react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org react-chartjs-2 사용법 npm으로는 아래와 같은 명령어로 다운받았다. npm install --save chart.js react-chartjs-2 공식문서에 있는 간단한 예시로 아래와 같은 Component를 만들었고 // ChartComponent.jsx import { Chart as ChartJ..