칠구의 블로그

FAQ는 frequently asked questions의 약자로 자주 묻는 질문들이라는 뜻이다. 요즘 앱들을 보면 FAQ를 자주 접할 수 있다. 이번엔 그걸 구현해 보겠다. FAQList 클래스 선언하기 -> 내가 원하는 곳에 적용하기 짧게 요약하면 이렇다 먼저 StatelessWidget에 선언한다 class FAQList extends StatelessWidget { const FAQList({super.key}); @override Widget build(BuildContext context) { return const SingleChildScrollView( child: Padding( padding: EdgeInsets.symmetric(horizontal: 3.0), child: Column..

저번에 화면 구현을 완료했고 이번엔 게임을 진행해보았다. 솔직히 금방 끝날 줄 알았는데 생각보다 오류가 많이 발생해서 오래걸림 ㅠㅠ var text = ""; var images = []; //이미지 데이터들을 담을 곳 var rounds = ["16강", "8강", "4강", "결승", "우승자"]; // 라운드별 이미지 수 var roundIndex = 0; // 현재 라운드 인덱스 var matches = rounds[roundIndex] === "16강" ? 8 : (rounds[roundIndex] === "8강" ? 4 : (rounds[roundIndex] === "4강" ? 2 : 1)); // 현재 라운드의 경기 수 var currentMatch = 0; // 현재 진행 중인 경기 var..

document 객체는 쉽게 말해서 현재 웹 페이지를 나타내는 객체라고 생각하면 편하다 getElementById(id) : 저장된 아이디를 가진 HTML 요소를 찾아 반환 딱 하나 밖에 없는 고유한 속성을 가지고 있는 HTML 요소에 적용해줄 때 사용하며 자바스크립트를 이용해서 코딩을 하다보면 가장 자주 보게 된다 document.getElementById('winnerContainer').style.display = 'block'; 위는 winnerContainer 요소에 display 속성으로 block 으로 지정하는 내용으로 getElementById 사용한 간단한 예시이다 querySelector(selector) : 특정 조건을 만족하는 여러 엘리먼트 중 원하는 것 선택한 후 반환 queryS..

저번에 image_picker에 이어 이번엔 OCR 기술을 이용해서 텍스트를 인식해본다. 영상은 카메라로 찍은 이미지지만 당연히 갤러리에 있는 이미지도 OCR이 잘 작동한다. flutter_tesseract_ocr | Flutter package (pub.dev) flutter_tesseract_ocr | Flutter package Tesseract 4 adds a new neural net (LSTM) based OCR engine which is focused on line recognition. It has unicode (UTF-8) support, and can recognize more than 100 languages. pub.dev OCR은 tessract를 사용했다. 위의 사이트에 들어..

저번에 피그마로 구상했던 화면 구현을 완료했다. 막상 구현하다보니 수정된 부분들이 조금 있다. 기능 부분은 아직 구현 전이다. 메인화면 아이돌 이상형 월드컵 👩여자 아이돌 시작 랭킹 👨남자 아이돌 시작 랭킹 라운드 선택 (팝업창) 👨남자 아이돌 라운드 16강 8강 4강 결승 시작 라운드 진행 여자 아이돌 16강 👑당신의 이상형👑 🏆여자 아이돌 랭킹🏆 🥇1등🥇 여기에 이름 여기에 픽 🥈2등🥈 여기에 이름 여기에 픽 🥉3등🥉 여기에 이름 여기에 픽 4등 여기에 이름 여기에 픽 5등 여기에 이름 여기에 픽

이번엔 위의 사진처럼 플러터(프론트)와 플라스크(벡) 연동을 해보겠다. 파이썬과 플라스크가 설치되어 있다고 가정하고 진행해보겠다. 1. flask 설치 및 파이썬 파일 준비 먼저 플라스크를 설치 설치 방법은 터미널에 pip install flask 을 입력해주면 설치가 된다. 그후 파이썬 파일 준비 from flask import Flask, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/') def home(): data = {'message': 'Hello, World!', 'user': '남빈'} return jsonify(data) if __name__ == '__main__': app.run(deb..

자바스크립트를 공부하며 작은 토이 프로젝트를 하면 좋겠다라고 생각을 했고 이상형 월드컵을 만들어봐야겠다고 생각을 했다 메인 화면 -> 팝업창 (라운드 선택) -> 월드컵 -> 우승자 -> 랭킹 이렇게 프로토타입을 구성했고 피그마를 통해 화면을 구상해봤다. 일단 남자 , 여자 아이돌 16 / 8 / 4 / 2 라운드로 구현할 예정이다 화면 구상 -> 화면 구현 -> 기능 구현 -> 벡엔드 연동 이렇게 진행해볼 예정 메인 화면 구별하기 쉽게 여자 아이돌은 7D3AD2 15% 남자 아이돌은 2293D2 15%로 대표 색을 지정했다. 라운드 선택 팝업창 라운드 진행 우승자 랭킹 화면

자바스크립트를 이용한 할 일을 추가할 수 있는 캘린더 구현이다 날짜를 클릭하고 할 일을 추가하면 달력 밑에 메모에서 적은 내용을 볼 수 있고 해당 날짜에 동그라미로 할 일이 추가된 것을 확인할 수 있다. 또 메모가 입력 된 날짜를 클릭하면 내용을 수정 할 수 있다. See the Pen Untitled by pronambin (@kimnambin) on CodePen. html / css 일 월 화 수 목 금 토 📝메모 전체적으로 rap을 이용해서 감싸고 header / dateHead / dateBoard /memoContainer 이 들어가 있다 header -> 버튼과 타이틀 / dateHead -> 요일 / dateBoard -> 일 (day) / memoContainer -> 추가한 메모 .da..

See the Pen Untitled by pronambin (@kimnambin) on CodePen. 이번엔 자바스크립트를 이용해서 할 일을 적을 수 있는 간단한 투두 리스트를 만들어보겠다 ▪ '낮음', '보통' , '높음', '아주 높음'으로 우선 순위를 체크하고 할 일을 추가 ▪ 한번 적은 할 일 리스트를 수정 및 삭제 ▪ 총 할 일 리스트를 '전체' , '완료' , '미완료' 로 구분해봤고 구분해서 볼 수 있게 하였다 주석으로 보는 코드 먼저 body 부분 📝TO DO LIST 전체 완료 미완료 ➕ 낮음 보통 높음 아주 높음 ✍️LIST 자바스크립트 부분 // 할 일 목록 const todoList = []; // 할 일 추가 function add() { const inputtodo = doc..

ocr을 사용한 앱을 개발 중인데 갤러리에서 가져온 이미지는 ocr이 잘 적용하는데 카메라로 찍은 이미지는 ocr이 되지 않고 Null check operator used on a null value 이 오류가 자꾸 발생했다 ㅠㅠ GPT , POE , 구글링 등등으로도 해결이 안 되다가 이번에 드디어 해결했다. 참고로 난 tesseractocr을 사용했고 이 오류 때문에 엄청 애먹었는데 이 글을 보고 조금이나마 도움이 됐으면 좋겠다 한 줄 요약 : 카메라로 찍은 사진이 갤러리에 저장되게 하고 여기서 이미지를 가져와 OCR 수행시킴 오류 먼저 오류가 나던 코드다 import 'package:flutter_tesseract_ocr/flutter_tesseract_ocr.dart'; import 'packag..