프로그래밍 공부하기

땅땅마켓 우리 동네 경매장 땅땅마켓에서 여러분들의 중고 물품을 등록해 경매 주최자가 되어보세요! 등록된 물품을 입찰하고 실시간 채팅을 통해 거래할 수 있습니다. 경매를 통해 원하는 가격으로 거래하세요! 주소: https://ttangttang.shop/ 깃허브: 백엔드 프론트엔드 백엔드: Node.js, socket.io, Multer, MySQL, Sequelize 프론트엔드: TypeScript, React Hooks, Redux, socket.io, Styled-Component, SCSS 배포: AWS CodeBuild, EC2(ELB), S3, CloudFront, Route53, Docker 기능: 로그인 지역기반 물품 검색 실시간 입찰 및 가격 변동 업데이트 경매 물건 등록 나의 경매 필터링..

SongNumberBook 노래방에서 노래부르는 시간보다 노래를 고르는 시간이 더 많지 않으셨나요? 다른사람이 노래를 부를때 핸드폰만 만지며 어떤 노래를 부를지 고민하지 않으셨나요? 결국 선택된 노래가 어제 부른 그 노래가 아니었나요?! 이제 노래를 검색하고 나만의 리스트에 저장해보세요! 깃허브: 백엔드 프론트엔드 배포: https://songnumberbook.shop/ 프론트엔드: React-Hook, styled-component 백엔드: Node.js MySQL, Sequelize, Cheerio 기능: 로그인 노래검색 나만의 노래목록 생성/편집/삭제 서비스 소개 나는 노래방가는 것을 좋아한다. 하지만 막상 노래방에 가면 어떤 노래를 불러야할지 고민하다 인기차트에 있는 노래만 부르고 오게 된다. ..

파이널 프로젝트의 SR 작업의 결과 프로젝트에서 가장 핵심적인 부분이 Timer와 SocketIO를 이용한 실시간 통신이라는 결론을 얻게 되었다. 따라서 타입스크립트를 2일간 공부하면서 해당 부분을 간단하게 구현해 보기로 하였다. 1. TypeScript, React, Redux Setting -추후 포스팅하거나 생략 2. Timer const convertSecToHourString = (targetSec: number): string => { const hour = Math.ceil(targetSec / 3600); const min = Math.ceil(targetSec%3600/60); const sec = Math.ceil(targetSec%3600%60); return `${hour}:${mi..

Tour Sight Search 우리나라 관광지 검색 서비스 깃허브: 프론트 엔드, 백엔드 프론트엔드: React-Hook, Apollo, GraphQL, styled-component 백엔드: GraphQL, REST API 사용 API: 한국 관광공사 Tour API 3.0 기능: 키워드 검색 관광지 좋아요 표시 GraphQL을 이용하여 간단한? 우리나라 관광지 검색 서비스를 만들어보았다. 처음 시작은 정말 간단히 끝날 것이라 생각했지만 GraphQL이 지난 년도에 바뀐 부분이 좀 있어서 공식문서 외의 구체적인 자료를 찾기가 상당히 어려웠다. 또한 리액트에 아직 익숙하지 않아서 고생했던 부분도 있었다. 하지만 계속 노력하니 내가 원하는대로 결국 만들어졌다! 물론 나중에 보면 내부코드나 디테일한 부분들..

동작 영상 간단한 실시간 채팅 사이트의 서버와 클라이언트를 만들어 보았다. 처음에는 메시지를 보낼 때마다 refresh하여 서버에서 전체 메시지를 다시 가져와 뿌려주도록 작성하였는데, socket.io 라는 모듈을 알게되어 사용하였더니 새로운 메시지가 생길 때마다 자동으로 클라이언트에게 보내줄 수 있었다. 간단히 표현한 흐름은 위와 같다. client가 접속하여 로그인 하면 전체 채팅 메시지를 보내주고, 채팅을 입력하면 다른 클라이언트에게 채팅을 전달함으로써 실시간으로 채팅할 수 있는 것이다. 주요코드는 다음과 같다. 1. Client 1) html post ... ... 클라이언트는 username과 text를 입력하고 post 버튼을 눌러서 메시지를 보낼 수 있다. 메시지들은 id가 chats인 di..

SubClassDanceParty 2일간 BrawlStars GunFight!라는 주제로 간단한 게임을 만들었다. 각 기능과 관련 클래스를 정리해본다. 1. CSS 1) calc .topbar { --widthA: 100px; --widthB: calc(var(--widthA) / 2); width: var(--widthB); } height: calc(100% - 50px); css에서도 간단한 사칙연산을 수행할 수 있다. 단위가 맞지 않아도 사용 가능하며, var와 중첩하여 사용 가능하다. 위의 영상이 과거에 찍은 것이라 topbar의 크기만큼 스크롤이 생겨있는 모습을 볼 수 있는데 최근 calc를 활용하여 해결하였다. 2) animation .enemy { animation-name: move; a..

2일간 트위터를 따라한 트위틀러 만들기 프로젝트를 수행하였으므로 주요 내용을들 정리해보았다. CSS 1. CSS 변수 사용하기 CSS 속성에 구체적인 값, 숫자를 넣는 것을 지양하고 변수를 선언하여 속성에 할당한다. 현재 같은 값을 갖고 있으면서 디자인 변경 시 함께 같은 값으로 변경될만한 속성들은 같은 변수를 할당한다. :root{ --main-color: #1ea2f1; --dark-color: #16212b; --light-color: #75cafe; --white-color: #ffffff; --invalid-color: #630000; --font-size: 1.25rem; --input-border-bottom-style: 1px solid var(--white-color); --invalid..

HTML+CSS+Javascript로 계산기 만들기 프로젝트를 수행했으므로 어떻게 만들었는지 주요 내용들을 정리해보려 한다. CSS 1. 버튼에 마우스를 올리면 색상 바꾸기 .button__row > button:hover { background-color: #FFB2F5; } .button__row > button:active { background-color: #ef7993; } 2. 버튼 정중앙 정렬(ex. AC, Enter 버튼) .clear__and__enter { display: flex; flex-direction: row; justify-content: center; align-items: center; } .clear__and__enter > button { border-radius: 1..