본문 바로가기

분류 전체보기280

[220326] 연극 예매사이트 팀플 기록) 8. 깨지는 css 수정, git commit message 수정,삭제, git 원상복구하기 현재 하고있는 것 1) margin, padding까지 계산해서 vh 만드는거 고침 아아ㅏㅏㅏ https://velog.io/@edie_ko/Tip-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-100vh-%EC%A0%81%EC%9A%A9-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-iosandroid 2) 깃 왜이래ㅐㅐ 충돌일어났는데 오도가도못하고 오류만 뿜어냄 깃 리베이스 https://gamsungcoding.tistory.com/entry/Git-Git-Advanced-Rebase-i-%ED%99%9C%EC%9A%A9%EB%B2%95 https://blog.appkr.dev.. 2022. 3. 27.
[220325] 연극 예매사이트 팀플 기록) 7. 통일성 있는 디자인을 위해 수정하기 현재 하고있는것 1) 통일성 있는 디자인을 위해 컬러칩, 전체적인 nav툴 작성 완료. 후보로 만들었던 nav 디자인들. 2) list/grid/calendar 형태를 url 이동 없이 ajax를 사용해서 그려야함. 일단... 저 3개를 통일성 있는 형태로 꾸겨 넣어보자. 버튼식으로 클릭할때마다 리스트형, 앨범형, 캘린더형으로 바뀌도록. 3) 공용폰트 지정함 사용자/개발자/브라우저렌더링-들을 다 체크하고 폰트를 정하는게 맞구나... 이거 안 정하고 진행했다가 폰트이슈 처절.. 이슈 발생 배경 웹폰트가 사용자 컴퓨터에서 구동되지 않을때 폰트가 깨지는 것을 방지하고자, 서버에 폰트를 업로드함. 이슈 발생 다운로드 받은 폰트명이 프로그램상에서 보이는 폰트명이랑 안 맞음. 이슈 해결과정 공통적으로 웹폰트를 받은.. 2022. 3. 25.
[220324] 연극 예매사이트 팀플 기록) 6. 스키마 수정, 캘린더 구현, 파일 업로드기능 추가 현재 하고있는것 팀원 의견을 받아 디자인 세부 수정 및 확정된 디자인 사이트에 구현화 개인적으로 보충학습해야할 것 캘린더에 일정 입력하기 파일 업로드 기능 팀플 현재 진도 좋아요, 찜목록 플래그를 테이블을 나눠서 구현하는것을 스키마 수정 2022. 3. 24.
[220323] 연극 예매사이트 팀플 기록) 5. 스키마 수정, 캘린더 프론트 디자인 80% 완성 현재 하고있는 것 캘린더 프론트 디자인 80% 완성. 팀원들의 의견을 들어보고 세부적인 곳들 수정예정. 개인적으로 보충학습해야할 것 달력 만드는법. 팀플 현재 진도 전체 페이지 구조 사이트에서 사용할 스키마 팀원회의 및 수정 2022. 3. 24.
[220322] 연극 예매사이트 팀플 기록) 4. 스키마 짜기, DB 공부 현재 하고있는 것 프론트 디자인 진행중. 개인적으로 보충학습해야할 것 데이터베이스에서 데이터 생성/삭제/수정/검색 기능 다시 공부 현재 사용하는 서버와 데이터베이스 연결해서 sql문 사용하는법 다시 공부 2022. 3. 24.
[220321] 연극 예매사이트 팀플 기록) 3. 작업물 할당받음 220321 작업물을 할당받음 내가 할당받은 작업량 교수님 지정해주신 프론트 디자인 board 백엔드 총괄, 파일 업로드 수업 복습 미흡한 점 개인공부 파일 업로드, 덧글 기능, 페이징 기능, Oath 오늘 작업한 내용 유툽으로 figma를 배워서 디자인함 기존 adobe 디자인 툴이랑 많이 다르지 않아서 배우기 쉬웠다. user calendar랑 show calendar front 디자인 끝냄 의도한 내용 사용자가 보기엔 한 화면에서 모든 것을 조작하고 있다고 느낄 수 있도록. 하지만 구역별 내용은 확실하게 나누기 https://www.youtube.com/watch?v=LmLchZ4tCXc 이 영상을 보고서 피그마를 사용했다. 영상을 보고서 디자이너랑 개발자의 소통이 힘들다는건 대충 알았는데 피그마를.. 2022. 3. 23.
[220321] 연극 예매사이트 팀플 기록) 2. 초기설계 220321 초기 설계 teamProject-gardenSite 팀 주제 : 정원 페이지 목적 정원이라면 역시 나무 -> 가드닝하는 커뮤니티 페이지를 만든다 가정 페이징 기능 덧글 작성 기능 쿠키 기능 DB 스키마 적극 활용 컬러칩 (아직 이미징 단계. 구체적 컬러칩 못 정함) 명도 낮고 채도가 살짝 낮은 진초록이 깨끗한 이미지를 주기 위해서 흰색 아주 연한 회색, 검은색 중심 디자인 상징적 숫자: 6, six 대체로 곡선의 유려한 디자인. 동글 둥글. 자연적인 이미지니까. 페이지 홈 팀 소개 팀원 소개 페이지 3장 2-1. 주제가 정원이니까 각자 탄생목+좋아하는 물체/자신 상징 이미지 받아서 이미징. 2-2. 팀 3명이니까 S/I/X를 하나씩 나눠가져서 2-1에서 받은 물체로 이미징 board 기능 b.. 2022. 3. 23.
[220322] 자바스크립트로 달력만들기 1. 현재 날짜를 가져오는 함수 new Date() date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. let dateToday = new Date() console.log(dateToday) console.log(typeof(dateToday)) //출력값 //2022-03-22T13:35:12.509Z //object 그 외에도 원하는 시각을 넣어서 객체를 작성할 수 있다. console.log(new Date(2021, 11, 6)); console.log(new Date('2021-12-06T03:24:00')); //결과 //2021-12-05T15:00:00.000Z //2021-12-05T1.. 2022. 3. 23.
[220317] socket.io 설치 & 세팅 socket.io 설치 $ npm install socket.io socket.io 의 구조 Namespace ㄴ Room ㄴ Socket socket.io는 이런 구조로 이루어져있다. Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다. socket.io 세팅 원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다. 빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아..... 그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음) ( socket.io 공식 홈페이지 : https://socket.io/docs/.. 2022. 3. 18.
[220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18.