매일 해내는 개발/Develog62 [Develog] 11월 4주차 이번주 로그 벌써 내일배움캠프를 시작한지 한달이 지났다. 두번째 프로젝트는 생각보다 순조로웠다. 첫번째로 똑똑한 팀장이 머릿 속에 뭘 해야할지를 다 알고 큰 그림을 그렸기 때문이고 두번째로 큰 그림을 바탕으로 팀원들이 제 역할을 충실히 했기 때문이라고 생각한다. 그리고 팀원들 간의 시너지 효과가 발생해서 나도 엄청 열정적으로 팀프로젝트에 임할 수 있었고 퀄리티를 높이기 위해 하나하나 신경쓰다보니 오류 하나 해결하는 데도 굉장히 큰 희열을 느꼈다. 11/18(금) 프로젝트 첫 날 정적페이지를 하나씩 분배해서 주말동안 먼저 구현했다. 11/21(월) 이 날 부터 본격적인 기능 구현을 진행했다. 류제천 튜터님의 코드와 강의를 토대로 복습하면서 진행하다보니 시간은 오래걸렸지만 코드의 흐름은 확실히 잡혀갔다. 11/22(화).. 2022. 11. 27. [Develog] 바닐라js로 게시글 수정 기능 구현 현재 로그인한 유저가 isOwner이면 수정, 삭제 버튼이 보이도록 한다. 이 때 isOwner은 autherService의 currentUser의 uid가 DB의 post 콜렉션의 creatorId와 일치하는지 여부로 판단할 수 있다. 이 때 수정 버튼을 누르게 되면 OnEditing 함수가 반응하게되는데 onEditing 함수가 반응하게되면 수정, 삭제 버튼이 안보이고 완료버튼이 나타나게 되고 기존의 텍스트 데이터들은 안보이고 input창, textarea창, 지역선택 창이 보이도록 한다. 또 제목란(input)에는 setAttribute 속성을 통해 기존 데이터가 보이도록 한다.(textarea는 html에서 적용함) 기존 데이터를 넣어주지 않고 공백으로 제출하게되면 제목 또는 내용이 사라지는 경우.. 2022. 11. 27. [Develog] 파이어베이스 + 자바스크립트 / 바닐라js로 게시글 삭제 기능 구현 삭제 버튼의 속성에 name을 추가해서 id 값을 지정한다. 이 때의 id값은 DB에 저장되는 post 콜렉션의 문서 id이다. 삭제 버튼을 누르게 되면 event.target.name은 문서의 번호가 되게 된다. 따라서 doc에 id 값을 줄 수 있게 되고 해당 id의 문서를 지울 수 있도로 구현할 수 있다. 2022. 11. 27. [Develog] 자바스크립트 새로 고침해도 로그인 유지하는 방법 localStorage와 sessionStorage 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. sessionStorage는 새로고침해도 데이터가 사라지지 않게하고 localStorage는 브라우저를 다시 실행하도 데이터가 사라지지 않고 남아있다. 쿠키를 사용해도 되는데 왜 웹 스토리지 객체를 사용할까? 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 부라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. 쿠키와 또 다른 점은 서버가 HTTP .. 2022. 11. 27. [Develog] 11월 22일 오늘의 로그 메인페이지에 데이터 뿌리기, 글쓰기 페이지에서 데이터 넘기기 완료 2022. 11. 23. [Develog] 11월 21일 오늘의 로그 핑계를 대자면 저번 주가 너무 바빠서 튜터님의 강의를 제대로 듣지 못했다. 그래서 오늘 파이어베이스에 연동하는 단계에서 많이 막혔다. DOM 코드로 작성하려니 모르겠어서 결국 못들었던 강의를 다시 켰다. 마음은 급한데 진행이 더뎌서 조금 속상했지만 이렇게 직접 만들어가면서 공부하는게 제일 집중이 잘 되고 남는 것도 많은 것 같다. 우리 팀원들 너무 멋있고 잘한다. 특히 효진님은 리더로서 정말 자질이 있는 것 같고 진산님과 효진님의 케미가 참 좋아보인다. 다들 의욕이 넘치고 원장님께서 기대감 높은 피드백을 주셔서 열심히 하고자 하는 의욕이 생겼다. 오늘까지 하기로 했던 html 구현은 한명도 빠짐없이 완료했고 오늘은 firebase, SPA 라우팅 부분을 나눠서 구현했다. 효진님은 SPA 부분을 반나절만에.. 2022. 11. 21. [Develog] 11월 3주차 이번주 로그 금요일에 토익시험을 보고, 대전으로 출발했다. 예상보다 많이 막히진 않아서 2시간 정도 찍혔는데 중간에 안산 트레이더스를 들러 한시간 넘게 소요했다.. 도착하자마자 얼음사고 씻고 저녁 겸 야식 겸 안주를 먹고 새벽 4시가 넘어서 잤다... 술을 생각보다 너무 많이마셔서 다음날 내내 숙취에 시달렸다.. 그리고 9시에 일어나서 유성호텔에서 열리는 멀티미디어학회에 참석했다. 한 시간 반 동안 서있다가 설명해달라는 사람에게 설명해줬는데 준비를 많이 안하고 가서 좀 버벅거렸다. 마지막으로 단체 사진 찍은 후에 은행동 지하상가에 있는 아이스크림 떡볶이를 먹으러 갔다. 줄을 서있어서 놀랐는데 다행히 자리가 바로 나왔다. 떡볶이 답지 않게 엄청 부드럽고 달았는데 대신 먹다보니 좀 느끼했지만 색다른 맛이었다. 그리고 성.. 2022. 11. 21. [TIL] 2022년 11월 18일 회고록 오늘 정말 정신 없었다. 아침부터 차 사고가 났다... 도보에서 나오던 트럭이 나를 못보고 들이 박았다.... 다행히 내가 안다쳤고 차도 크게 손상된게 아니었고 아침에 일찍 출발해서 많이 늦지 않았지만 그래도 첫 사고라 너무 놀랐다. 계속 손 떨리고 발제시간에 집중도 안돼서 혼났다. 그래도 잘 정신 차리고 팀원들과 회의를 통해 아래와 같은 프레임워크를 짤 수 있었다. 하지만 회의 후에 바로 렌트카 업체의 연락과 카센터의 연락과 토익시험이 있어서 진행이 어려웠다. 현재 시험보고 온 후 간단하게 TIL을 쓰고 이제 멀티미디어 학회 학술대회로 인해.. 레이는 처음 몰아보는데 별 일 없길 기도해본다. 2022. 11. 18. [특강] 자바스크립트 SPA(Single Page Application) 1. 웹 트렌드 ~1990년대 중반 : 정적 웹 페이지(Static Sites) 사용자가 특정 사이트에 접속(요청)하게 되면 서버에 이미 잘 만들어져서 배포되어 있는 HTML 문서를 서버에서 받아와 보여주는 형식이다. 정적 페이지이기 때문에 페이지 내의 다른 링크를 클릭하게 되면 다시 서버에서 해당 HTML 파일을 받아와 페이지 전체가 업데이트 되어야 하기 때문에 사이트가 뚝뚝 끊기는 느낌이 들고 사용성이 떨어진다. 1996년 ifram 태그 도입 문서 내에 또 다른 문서를 담을 수 있는 ifram 태그가 도입이 되어 이 때부터는 페이지 내에서 부분적으로 문서를 받아와 업데이트 할 수 있게 되었다. 1998년 XMLHttpRequest fetch API의 원조 XMLHttpRequest API가 개발되어.. 2022. 11. 16. 이전 1 ··· 3 4 5 6 7 다음
