728x90 내일배움단40 [TIL] JavaScript - 로딩되는 시점 이벤트 제어 (DOMContentLoaded, load, beforeunload/unload) HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다고 합니다. DOMContentLoaded 란? DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용할 수 있습니다. load 란? HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있습니다. be.. 2022. 11. 25. [TIL] JavaScript - debugger 서론 이건 또 웨않되??? 버튼 클릭 시 onclick event를 줬는데 안 먹힌다... 두 번 더 클릭을 해야 먹히는 이 상황은 뭐징... 어디서 문제가 걸리는지 알고 싶은데 어떻게 해야 할지 모르던 상황에서 튜터님께서 도움을 주셨습니다!!! debugger debugger문을 활용하시면 JavaScript 코드의 실행 흐름을 따라가며 효과적으로 검증이 가능합니다. 사용법은 검증하고 싶은 코드 중간에 debugger문을 끼워 넣어주면 됩니다. 위 사진처럼 debugger를 넣은 위치부터 코드가 실행되는 흐름을 사용자가 원하는 대로 볼 수 있습니다. 이 방법으로 오류 메시지는 없지만 실행이 안 되는 부분, 어디서 꼬였는지 알 수 있습니다. 마치며... 오늘도 참 많은 오류들을 만났고... 같은 오류면 .. 2022. 11. 23. [TIL] CSS - display : fixed 서론 프로젝트 D-3... 웬만한 기능들은 이제 구현이 되고있는 중입니다... 가장 쉬운 메인페이지 구현이면서 오늘에서야 완성을 해버렸....습니다...😭 사실... 100%완성은 아니구... NavBar 반응형까지 완성했으니까 다했다고 해주세요... 문제점 NavBar를 밑으로 내리고 싶은데 무슨 짓을 해도 안내려갑니다... display : flex를 써도 안되고... margin을 주자니 컴퓨터 해상도에 따라 크기가 다르기에 문제가 됩니다... 해결법 ( display : fixed ) 의외로 정말 간단했습니다... css에 display : fixed; 한 후 bottom : 0;을 주면 viewport bottom에 고정이 되게 됩니다... 마치며... 2022. 11. 22. [TIL] JavaScript - innerHTML된 파일에서 함수 구현하기...? 이 타이핑 효과를 구현하기 위해서 많은 시행착오가 있었습니다... 혼자 고민 끝에 결론이 도출되지 않아 매니저님과 튜터님들께 자문을 구했습니다...😥 그냥 HTML에서 JS로 타이핑 효과를 구현하는 것은 성공했었습니다. 하지만 문제는 이번 프로젝트를 SPA방식으로 구현하여야 했고, 그 과정에서 main page를 innerHTML로 뿌려주면서 발생하게 되었습니다. 문제점 Hype Express index.html에서 모든 페이지들을 받아옵니다. 밑에 router.js에서 innerHTML을 이용하여 에 main.html을 뿌려줍니다. //router.js export const route = (event) => { event.preventDefault(); window.location.hash = eve.. 2022. 11. 21. [WIL] 한 주를 돌아보며... 서론 전주 금요일부터 새로운 프로젝트가 시작되었습니다!! 로그인 & 회원가입 페이지와 CRUD를 구현하여 게시판 만들기가 프로젝트의 주제였습니다. 전주 금요일에 면접 일정이 잡혀서 부랴부랴 갔다 오느라 프로젝트에 늦게 합류를 하였는데 이해해주시고 진행 과정을 설명해 주셔서 팀원들께 너무 감사하더라고요...😂😂 본론 진행 상황 현재 저희 프로젝트의 메인페이지 진행상황입니다. 제가 맡은 파트는 메인 페이지 구현이고 디자인은 팀원분들이 제가 면접 갔을 때 회의를 걸쳐서 디자인했다고 합니다. Todo SPA , Firebase를 공부해서 프로젝트에 적용시켜야 합니다. 다른 부분들은 팀원들께서 잘하고 계시지만 서로 안되는 부분은 같이 공유하여 해결해 보려고 합니다. 마치며... 전주는 뭔가 한게 없는데 빠르게 지.. 2022. 11. 21. [TIL] 1차 프로젝트 S.A Hype Express 1. 팀 소개 팀명: Hype Express 팀원: 박진양(팀장), 김예슬, 유영재, 한상권, 조영찬 2. 프로젝트 소개 제목: Hype Express 프로젝트 간단 설명: 여러분들의 공간에 hype함을 배달합니다. 우리 팀의 목표 남들보다 잘하자 각자 맡은 섹션을 소화하고 구현하고 이해하자 발라버리자 기능 모든 페이지를 반응현으로 디자인 각 카테고리별로 뉴스피드 구현 맘에 드는 피드 클릭시 좋아요와 스크랩 기능 추가 구현 로그인 / 회원가입 구현 로그인시 MY PAGE 로 이동시 아이디, 사진 수정할수 있는 설정 부분 구현 내가 쓴글과 좋아요로 구혁을 나눠 나의 자료를 볼수 있게 구현 파이어베이스를 활용한 백엔드 구축 AWS S3로 배포 3. 와이어 프레임 4. APIs 2022. 11. 18. 이전 1 2 3 4 5 6 7 다음 728x90
