자바스크립트86 [220325] 연극 예매사이트 팀플 기록) 7. 통일성 있는 디자인을 위해 수정하기 현재 하고있는것 1) 통일성 있는 디자인을 위해 컬러칩, 전체적인 nav툴 작성 완료. 후보로 만들었던 nav 디자인들. 2) list/grid/calendar 형태를 url 이동 없이 ajax를 사용해서 그려야함. 일단... 저 3개를 통일성 있는 형태로 꾸겨 넣어보자. 버튼식으로 클릭할때마다 리스트형, 앨범형, 캘린더형으로 바뀌도록. 3) 공용폰트 지정함 사용자/개발자/브라우저렌더링-들을 다 체크하고 폰트를 정하는게 맞구나... 이거 안 정하고 진행했다가 폰트이슈 처절.. 이슈 발생 배경 웹폰트가 사용자 컴퓨터에서 구동되지 않을때 폰트가 깨지는 것을 방지하고자, 서버에 폰트를 업로드함. 이슈 발생 다운로드 받은 폰트명이 프로그램상에서 보이는 폰트명이랑 안 맞음. 이슈 해결과정 공통적으로 웹폰트를 받은.. 2022. 3. 25. [220324] 연극 예매사이트 팀플 기록) 6. 스키마 수정, 캘린더 구현, 파일 업로드기능 추가 현재 하고있는것 팀원 의견을 받아 디자인 세부 수정 및 확정된 디자인 사이트에 구현화 개인적으로 보충학습해야할 것 캘린더에 일정 입력하기 파일 업로드 기능 팀플 현재 진도 좋아요, 찜목록 플래그를 테이블을 나눠서 구현하는것을 스키마 수정 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. [220318] 연극 예매사이트 팀플 기록) 1. 사전회의 220318 사전회의 팀프로젝트의 목표 : DB기능과 스키마 활용을 빛낼 수 있는 사이트 만들기 프로젝트 기간 : 3주 현재 하고있는 작업 원래 오래만져야하는건 예뻐야 할 마음이 생기는 법이라 어떻게 아웃풋을 짤까 레퍼런스 찾아보는중. 씐난다씐난다 예쁜 디자인을 보고 만드는건 언제나 신난다 내가 그런걸 못 만들어서 그렇지 어차피 상업적인거 하는것도 아니고, db 만드는거니까 마음놓고 레퍼런스 뒤져서 대충 틀을 짰다. 팀 주제 : 정원 페이지 목적 : 정원이라면 역시 나무지. 가드닝하는 커뮤니티 페이지를 만든다 가정하고 게시물 짜야지. 컬러칩 : 명도 낮고 채도가 살짝 낮은 진초록이랑 깨끗한 이미지를 주기 위해서 흰색이랑 아주 연한 회색, 검은색 상징적 숫자 : 6, six (팀 번호가 6번이라서) 대체로.. 2022. 3. 15. [220307] 응답코드를 여러가지 방식으로 작성하기 (fetch, axios, async/await) 작성할 코드의 조건 1. 아이디의 중복여부를 중복체크 버튼을 눌러 확인하자 2. 중복일 경우는 2, 중복이 아닐 경우는 1을 반환하는 코드를 작성하기 3. 회원가입 버튼을 눌러서 입력한 아이디, 패스워드 입력한 값을 보여주는 화면을 만들자 코드가 들어갈 자리 document.addEventListener('DOMContentLoaded',init) function init(){ const btn = document.querySelector('#idcheck_btn') const userid = document.querySelector('#userid') const msg = document.querySelector('#msg') btn.addEventListener('click',clickHandler).. 2022. 3. 10. [220304] 간단히 보는 AJAX 개념 [목록] 1. AJAX란? 2. 비동기통신 코드 만들기 1. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트. 간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다. 사용하는 기본 내장 객체로는 XMLHttpRequest이 있다. XML은 데이터 통신을 하는 옛날 형식을 말한다. 요즘은 JSON으로 대체되고 있다. 엘리먼트 형태인 XML보다 객체형태인 JSON으로 작성했을때 코드 길이가 1.5배가 줄어들기 때문. 통신할때 html보다는 데이터만 주고 받음. 그 데이터를 받는 형태가 옛날.. 2022. 3. 10. [220304] AJAX를 응용해서 입력값 받아오기 [목록] 1. ajax를 사용하여 로그인 정보 받아오기 2. 비동기통신 코드 만들기 3. 비동기통신으로 받아온 값을 출력하기 1. submit버튼을 누를때 form이 시작되지 않게 만들고 싶음. = submit을 누를때 액션값으로 이동이 안되게 하고싶음 = 이 곳에서 submit이나 form을 조작할 수 있어야 가능함. = 코드를 언제 실행시킬지 시점을 잡을 수 있어야함. //DomContentLoaded : body영역까지 html 렌더링이 끝난 후에 init이 실행됨. document.addListener('DomContentLoaded',init) function init(){ } 1.1 DomcontentLoaded 이벤트 작성 1.2 form 가져오기 or 조작할 수 있는 환경 만들기 1.3 d.. 2022. 3. 4. 이전 1 2 3 4 5 6 7 ··· 9 다음
