본문 바로가기

Development/Web

(9)
랜덤 한글 단어 만들기 서론 학교에서 진행 중인 프로젝트 '주다'는 온·오프라인 학습에서 쓸 수 있는 보조 플랫폼입니다. 방에 입장하기 위한 초대 코드와 출석체크에 필요한 출석 코드를 만들어야 하는데 흔히 쓰이는 알파벳 코드가 아닌 한글 단어로 이루어진 코드를 만들어 보기로 했습니다. 이런 느낌으로요! 🅰 알파벳은 알겠는데... 한글? 알파벳으로만 이루어진 코드는 예전에도 해봤었고, 구글링을 통해 쉽게 자료를 얻을 수 있었습니다. 알파벳을 담은(A-Z, a-z) 문자열 변수를 만들어주고 랜덤 한 인덱스를 뽑은 뒤 이에 매칭 되는 알파벳을 골라주면 됩니다. const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; const generateCode = (..
학교 인트라넷 프로젝트: 수정과 개발기 갑자기 인트라넷? 각 학교마다 여러 가지 행사들이 있습니다. 저희 학교의 경우 '우산대여제'라는 사업(행사)이 있습니다. 아래와 같은 프로세스로 굴러가는데, 비가 오거나 눈이 오는 등으로 우산이 필요할 때 시행합니다. 학생회에게 보증금을 2천원을 먼저 주고 우산을 받습니다. 우산을 반납하면 보증금을 돌려받습니다. 우산 반납이 연체되면 보증금을 돌려받을 수 없습니다. 또한 3일 이내에 반납이 이루어지지 않으면 블랙리스트에 등록되며 영구적으로 이용할 수 없습니다. 간단하지만 사람이 많다면 복잡한 과정이라고 생각합니다. 우산 대여자가 많아지면 학생회의 일이 커지게 되는데 이를 자동화할 수 없을까? 라는 생각에서 출발했습니다. 코로나19로 인해 원격 수업이 잦아지면서 구글 클래스룸, Zoom 등 수업 링크를 기..
🌐 HTTP Status Code, 301 vs 302 301과 302의 차이점 웹 개발을 하다보면 페이지 리다이렉트를 할 일이 생기는데 그 때마다 항상 찾아보는 코드이다. (어떻게 볼 때마다 까먹는지 지금은 기억함.. ㅎ) 301 (Permanent redirect) 페이지가 영구적으로 이동했다는 의미를 갖고있습니다. foo.com에서 bar.com으로 이동했다면 검색엔진은 영구적으로 페이지가 변경되었다 판단하고 검색 결과를 bar.com으로 표기합니다. 주로 도메인 이전으로 foo.com에서 bar.com으로 변경되거나 www.bar.com으로 접속했을 때 bar.com으로 리다이렉트 되는 경우에 쓰입니다. 302 (Temporary redirect) 페이지가 임시적으로 이동했다는 의미를 갖고있습니다. 301 코드와 달리 foo.com`에서 bar.com..
교내 문제풀이 사이트 개발기 자격증 시험을 보거나 연습하기 위해 CBT(컴퓨터로 문제 푸는 거) 문제풀이 방식을 사용합니다. 학교 시험공부를 CBT로 하면 어떨까라는 생각으로 시작하였습니다. (만들어놓고 거의 안씀) (아마 시험 2주전인가 1주 전에 제작했던 걸로 기억) 소프트웨어와 관련된 학교이고 반이기 때문에 "소프트" 유사 단어인(???) "수프트"로 프로젝트 이름을 결정하였습니다. 늘 만들던 데로 Front-End는 TypeScript, React로 Back-End는 TypeScript, NodeJS로 결정했습니다. 초기 계획은 관리자가 과목별로 문제를 작성하고 일부 문제는 랜덤으로 출제되는 방식입니다. 학교에서 배우는 것중 제일 간단하고 기초적인 문제는 '2진수를 10진수로 변환하기'와 같은 진수 변환입니다. 랜덤 한 숫자..
Ask 익명질문 개발기 Typescript + Vue(Nuxt) + Firebase를 이용하여 Ask페이지를 만들어보았습니다.디자인하기 위해 Bulma.io 프레임워크를 사용했습니다. 페이지에서 질문 요청을 날리면 답변을 대기하기까지 기다리는 공간 또는 답변이 완료돼서 질문이 저장될 공간(DB)를 마련해야되는데 Firebase cloudstore 을(를) 이용하였습니다. Bulma를 이용하여 디자인을 완료하였습니다.Firebase가 server-side, client-side 둘 다 지원하는 라이브러리라서 client-side를 server-side로 쓰다보니 삽질을 많이 했었습니다. 페이지에서 질문을 요청하면 HTTP(Rest) API를 통하여 서버로 요청을 하게 만들었습니다. 메인 페이지에서 질문을 클릭하면 상세 페이지로 ..
AirQualityTool 디자인 재작업 2018년 8월에 아두이노를 이용해서 웹에서 집의 온도, 습도, 공기품질을 확인할 수 있는 프로젝트를 진행하였습니다.당시에는 웹디자인을 부트스트랩으로 제작하였으며 각 그래프들을 한 페이지에 표시해 보기 편하지는 않았습니다. 그래프의 가독성을 조금이나마 높이고자 디자인을 변경해보았습니다. 기존에 쓰던 부트스트랩을 안쓰고 Bulma.io를 이용하였습니다.Nuxt.js를 이용하여 프론트엔드를 제작하였으며 Express로 만들어진 백엔드를 JavaScript에서 TypeScript로 변경하였습니다. 본문과 사이드바를 나누어주었습니다.사이드바는 컴포넌트로 분리하고 어느 페이지에 가도 항상 표시되기 때문에 layouts/default.vue에 넣어두었습니다. 마지막으로 본문에 그래프를 넣어 완성하였습니다. 온습도 ..
기록 Node.js - 라우터 라우터 라우터는 클라의 요청 패스를 보고 요청 정보를 처리하는 곳.기능 전달의 역활. 이걸 합쳐서 라우팅이라고 칭함. 클라가 /test로 요청을 보냄 ->미들웨어(응답 처리용)를 만듬 ->get() 함수로 라우터 등록 ->등록한 정보로 호출 ->함수 안에서 클라로 응답 보냄 예)/login 으로만 요청이 들어왔을때만 응답을 보냄. 1234567891011121314const express = require('express');const app = express();const path = require('path');const router = express.Router();const static = require("serve-static"); app.use(static(path.join(__dirname,..
기록 Node.js - 미들웨어 미들웨어 노드js 모듈 중 하나인 익스프레스는 미들웨어를 사용한다. 독립적인 기능을 가진 함수이다. next() 함수로 다음 미들웨어 호출 가능.미들웨어는 클라 요청은 전달 받을 수 있음.순서대로 전달.end()로 전달을 끝내고 결과를 보여줌. req: 요청res: 응답 예) 12345678910111213const express = require('express');const app = express(); app.use(function(req,res,next){ console.log("첫번째 미들웨어"); req.test = "Hello, World"; next();});app.use('/',function(req,res,next){ console.log("두번째 미들웨어"); res.end("" + ..