배운 JS문법은 아주 기초적인데 제공받은 코드를 보니 배우지 않은 심화개념이 마구 튀어나온다. 코드이해가 돼야 응용을 하던가 할텐데 이해하기가 난해하다. 부분이 중간중간 튀어나와서 그냥 튜터님의 코드를 최대한 활용하는쪽을 진행하기로 했다. 내일은 제공받은 코드를 이해하려고 하기보다는 외부문서를 보면서 이해해봐야될 것 같다.
Frontend
얻게된 것 SPA지식, Firebase지식을 배운것도 큰 수확이지만, 정신적으로 많이 성숙해질 수 있는 뜻깊은 주였다. 우선, 프로젝트가 시작되었는데 모르는 지식을 많이 응용해야해서 처음에는 부담감에, 부정적인 감정이 많이 올라왔다. 평소에도 낙천적인 편이 아니라, 더 스트레스를 받았던 것 같다. 근데 이러한 부분은 개발자라는 직업상 필연적일 것같아 매일아침 일어나자마자 to do list에 '부정적인 생각이 올때마다 그 속에서 긍정적인 면 찾기'라고 적어놓고 계속계속 부정적인 생각이 올라올때마다 Reframe해줬다. 처음 몇번은 지나칠때도 있었지만 하다보니 점차 내것이었던것처럼 자연스럽게 부정적인 감정이 많이 줄어들어 공부에 집중할 수 있게 되었다. 팀원분중 재성님과 서로 알게된 지식을 서로서로 공유해..
SPA const route = (event) => { event.preventDefault(); //CSR // preventDefault()는 새로고침을 방지한다. window.location.hash = event.target.hash; //event.target의 hash값을 window.location.hash값에 할당하라 //event.target은 index.html의 a태그를 말하는 것 //결과적으로 window.location.hash에 #about이라는 값을 할당함 -> 도메인뒤(주소창)에 그냥 #aobut이 들어감 // document.getElementById('main-nav').children[2].hash 를 통해 해시값을 확인 가능 //->아래 hashchange가 실행 };..
JS SPA에서 Hashed Routing이 필요한 이유 Hashed url path: 주소+# -> # 뒷 부분 : 호스팅 서버에서는 로컬로 취급 브라우저의 디폴트 기능 : 새로고침을 하면 GET 요청 -주소#about 로 첫 랜딩 혹은 새로고침 -> 브라우저는 index.html 파일 하나만 로드 주소/about 로 첫 랜딩 혹은 새로고침 -> 브라우저는 호스팅 서버에 /about에 해당하는 별도의 페이지를 요청하며 오류가 난다(404 Not Found) 공유받은 코드 보면서 이해하기 ②preventDefault(): 새로고침 방지 주소에 ①의 a 태그에 있는 hash가 붙음 ① route(event)함수가 실행 ③ 해쉬가 변경 되면 handleLocation 함수 실행 ④ #를 공백으로 만들고 경로..
객체 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수와 실수 구분 없이 숫자 하나의 타입만 존재한다. 문자열 타입 문자열 불리언 타입 논리적 참(true)과 거짓(false) undefined 타입 선언된 변수(let,const, var)에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된 7번째 데이터 타입 객체 타입 객체, 함수, 배열 객체는 데이터타입의 일종이다. 복합데이터(원시데이터를 묶어서 사용하는 데이터)를 활용하는 데이터타입이다. 객체타입의 데이터자체는 Heap이라는 메모리저장공간에 저장되어있으며 객체를 선언할때의 이름은 이 Heap의 주소값을 저장하고 있다. 만약 아래 순수데이터객체의 예시를 빌려오자면, apple..
프로젝트명: PETFAM PETFAM:반려동물(pet)과 가족(family)의 합성어로 반려동물을 진짜 가족처럼 생각하는 사람들을 뜻한다. 유기견을 발견한 사람, 유기견을 입양시키고싶은사람, 유기견을 입양받고싶은사람들이 활동할 수 있는 커뮤니티이다. 구상한 와이어프레임 https://www.figma.com/file/O0J62vM2Cw8bl1DhPDnfqT/Untitled?node-id=0%3A1&t=BzqWvMS8gSj0jhiV-0 메인페이지및 로그인창(모달창으로 구현 게시글작성부분 마이페이지 및 북마크등록현황 구현할 기능 구현원리 모달창을 통한 로그인, 회원가입 Firebase 유튜브 영상 재생 Sourcecord 게시글작성, 수정, 삭제 CRUD Firebase
SPA를 구성하는법도 아직 익숙하지않은데, Firebase까지 사용하는 프로젝트를 하려니 너무 막막하다. git과 Github를 사용하는 방법도 아직 잘 모르는데.............. 아니다. 부정적인 감정은 아무런 도움이 되지않는다. 마음을 고쳐먹자. 훌륭한 판단은 경험에서 비롯되지만, 경험은 서투른 판단에서 비론된다. -나폴레옹1세 (프랑스의 제1통령•황제) 그 곳을 빠져가는 가장 좋은 방법은 그 곳을 거쳐 가는 것이다. -로버트 프로스트 (미국의 시인) 태도는 사소한 것이지만, 그것이 만드는 차이는 엄청나다. 즉 어떤 마음가짐을 갖느냐가 어떤 일을 하느냐보다 더 큰 가치를 만들 수 있다. -윈스턴 처칠 Firebase Firebase란 서버리스 (Serverless)의 일종이다. 서버가 없는 것..
SPA 개념 SPA는 위의 사진과 같이 처음 서버에서 한번만 HTML및 CSS파일과 JS파일을 받아온다. 그 뒤로는 이미 작성한 HTML을 body태그에 삽입하고, 소거하는 식으로 화면을 출력해준다. 아래의 코드를 보면 메인 HTML코드가 매우 단순하게 작성되어있으며, 카테고리에 소개해줄 내용HTML이 따로 존재하는 것을 알 수 있다. 이러한 내용HTML을 필요에 의해 그때그때 삽입, 소거하는 식이다. Hashed url path vs. Non-hashed url path Hashed url path 해시(#)이전까지의 url을 브라우저에서는 호스팅서버에서 데이터 또는 문서를 GET 받아오는 것으로 인식한다. 브라우저는 url에 #가 있으면 #포함 그 이후부터 페이지로 받아들이지 않기때문에 #뒤의 내용은..
