Toy Project
[드로잉 윗유] 채팅방관련 정리(React, Socket.io)
react는 spa이기 때문에 한번 소켓이 연결이 되면 새로고침을하지 않는 이상 소켓이 계속 연결되어있습니다. 그래서 조금 어려웠던 부분들을 정리해보려고합니다. 리액트에서 socket.io 사용하기 / 방 목록 요청하기 리액트에서 socket.io를 사용하려면 socket.io-client를 사용하면 됩니다. 설치 방법은 https://socket.io/docs/v4/client-installation/ 에서 확인하실 수 있습니다. //src/server.jsx import {io} from 'socket.io-client' const URL = 'http://localhost:3000' export const socket = io(URL) import {socket} from "../server.jsx..
[드로잉윗유]디자인..너 참 어렵다
혼자하는 개발의 제일 큰 단점은 기획, 디자인, 화면개발, 서버개발 등 혼자 모든것을 해야하는 것이라고 생각합니다. 그 중 디자인에 관련한 내용입니다. 전 한번도 디자인을 해본적이 없기때문에 저의 모든 미적 감각을 끌어모아 디자인을 해야만 했습니다. 디자인을 할때 고려 했던 것들은 세가지 정도 였습니다. 1. 재사용이 될 수 있는 디자인인가 2. 나의 의도대로 사용자가 움직일 수 있는가 3. 접근성이 좋은가 또한 이전에 개발한 함께그리와의 차별점도 있어야 했습니다. 이름은 다르지만 나름 버전 2거든요..!
[드로잉윗유] 서버와 프론트 연결하기(Vite,CORS 정책)
디자인이 아직 완성은 되지 않았지만 기본적인 서버와 웹페이지를 연결하고 싶었습니다. 기술 스펙 Backend : express, socket.io Frontend : react Creact React App이 아닌 Vite로 React 시작하기 최근 새로운 리액트 문서에 리액트 애플리케이션을 시작하는 방법으로 create-react-app(CRA)를 지양하고 다른 스타트 키트를 권장하고 있다는 글을 보았습니다. 언제나..CRA로 간편하게 리액트 애플리케이션을 제작 했었는데요. webpack을 사용하는데 처리해야할 코드의 양이 많아지면 느린 속도를 채감할 수 있다고 해요. 그래서 vite를 사용해 보기로 했습니다! Vite란? create-react-app(CRA)와 크게 다르지 않아서 CRA의 후계라고 ..
[드로잉윗유] 와이어 프레임 제작
와이어프레임이란? 화면 레이아웃과 그 흐름을 설계하는 작업 본격적인 그래픽 디자인 작업에 들어가기 앞서 뼈대를 잡는 작업 디자인 툴인 framer을 이용하여 간단한 와이어 프레임을 제작하였습니다. framer의 경우 레이아웃 잡기가 편리하여 자주 이용하고 있습니다. 원래 조금 더 자세하게 구현해야하지만, 개인 프로젝트이기도 하고, 디자인하면서 제대로 만들고 싶었습니다. 메인 화면 기능 현재 생성되어있는 방의 리스트가 보여지게 됩니다. 닉네임의 경우 홈페이지에 들어오면 자동 설정 됩니다. 닉네임 변경을 원할경우 닉네임 변경을 클릭히여 원하는 닉네임으로 설정 할 수 있습니다. 검색 창에 방 이름을 입력하고, 해당 방이름으로 설정된 방이 없다면 방이 생성됩니다. 있다면 아래쪽 리스트에서 입장하기를 하면 됩니다..
[드로잉윗유] 드로잉 윗유 제작기 기획부터!
드로잉윗유는 지난 번에 만들었던 그림판을 React를 사용하여 제작하려고합니다. 드로잉윗유의 기획 사람들과 같이 그릴 수 있는 홈페이지가 있었으면 좋겠다 웹페이지에서 자유롭게 그림을 그리고 싶다. 사람들과 소통하고 싶다. 사용하기 쉬운 UI/UX로 누구나 온라인에서 대화를 할 수 있는 기회가 필요하다. 지극히 개인적인 이유로 제작을 하게 되었습니다. 취미로 그림을 그리고 있긴하지만.. 혼자그리면 조금 심심 하거든요..핳.. 이 홈페이지의 타겟 유저는 저와같은 그림을 그리는 사람들 입니다! 혼자서 그림을 그릴수도 있고, 같은 캠퍼스를 공유하며 함께 그림을 그릴수 있는 그런 웹페이지를 만들어 보려고합니다.
node.js, socket.io를 사용해서 그림판 업그레이드 하기
노마드 코더에 있는 강의[ZOOM 클론]를 보고 그림판을 업그레이드하면 재밋을것 같아 한번 도전해보려고합니다! 추가되는 기술로는 node.js, socket.io 입니다. 폴더 구조부터 정리해 줬습니다 Front -> public 폴더를 만들어주고 그안에 넣었습니다. back -> src 밑에 server.js를 만들어 줬습니다. 닉네임 설정 부분입니다. 완료 다음에도 입력한 닉네임을 사용하시겠습니까? 닉네임 없이도 방에 입장할 수 있습니다. 화면은 이렇게 구성해 줬습니다. 닉네임 입력창이 있고, submit은 버튼을 만들어 줬습니다. 또한 닉네임을 저장하고 싶은 사람이 있을수도 있으니 checkbox를 만들어 줘서 저장을 원하는지 물어보도록 하였습니다. //app.js const canvasSectio..
[HTML, CSS, JS] 크롭앱 만들기
이번에 노마드 코더에서 무료로 강의하고있는 크롬앱을 만들어 볼 예정입니다. 강의 내용을 다 듣고, 그대로 따라하는 것이 아닌 제가 필요한 기능을 만들어 보려고 해요! 우선 노마드코더 크롬앱에서 만든 기능은 크게 6가지 입니다. 1. 로그인 기능(이름을 입력하면 해당 입력창이 없어지면서 인사문구가 나옴) 2. 시계 기능 3. 배경화면 랜덤 4. 명언 랜덤 5. 위치에 따른 날씨 기능 6. 할일 리스트 그럼 저만의 크롬앱 만들기를 시작해 볼게요! 우선 로그인 기능은 넣어 보고 싶습니다. 완전한 로그인은 아니고 이름을 입력하면 그게 저장이되어서 화면에 표시되는 것이긴 하지만 그동안 로컬스토리지를 컨트롤 해보고 싶었기 때문에 좋은 경험이 될 것 같았습니다. 또 시계 기능도 넣고 싶었어요! 우선 두가지 기능 구현..
[HTML,CSS,JavaScript] 그림판만들기[3]
하루만에 그림판을 모두 완성하고 싶었지만 코로나를 또 걸려 이제야 완성할것 같습니다. 오늘은 CSS를 입혀 보잘것없는 그림판을 멋있게 만들어 보려고합니다! 현재 그림판의 모습입니다. 멋있게 만들어 볼까요! 우선 도구가 옆으로 갔으면 좋겠다라는 생각이 들었습니다. 또 각각 제대로 구분을 줘야 할것 같다고 생각이 들었어요. 저번에 브러쉬를 버튼으로 조절했었는데 그걸 슬라이더로 바꿔줬으니 버튼은 삭제 하겠습니다. 또 선굵기의 사이즈와 불투명도의 숫자가 잘 보일수 있게 옆으로 나란히 배치해주겠습니다. 선 굵기 10 불투명도 1 브러쉬 모양 / O ☐ 페인팅 지우개 초기화 브러쉬 색상 무작위 색상 최근 사용 색상 다운로드 body{ display: flex; flex-direction: row-reverse; j..