기록일지

1. print() 함수 : 데이터 출력 print() # 빈 줄을 출력한다. print("Hello", "world") # Hello world (공백이 생성된다.) print("Hello" + "world") # Helloworld (연결이라고 생각하기!) - print()를 변수에 넣지 않는다. ex) age = print(20) (X) - 문자열끼리는 더할 수 있지만, 문자열과 숫자는 더할 수 없다. (곱셈은 가능한데, 이는 반복의 의미이다.) print(">_>> ") print("[" + num * int(num) + "]") # num >>> 3 # [333]

1. 선언(Declaration)실행 컨텍스트의 변수 객체에 변수를 등록하는 단계스코프에 변수를 등록하는 단계(변수를 정의함으로써 존재를 알려주는 단계라고 생각하면 쉽다 !!)2. 초기화(Initialization)실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계선언된 변수에 저장 공간을 만들고 초기값으로 undefined를 준다고 생각하면 된다 !(콘솔에 찍어봐도 쉽게 확인할 수 있다.)let initialization;console.log(initialization); // undefined3. 할당(Assignment)undefined로 초기화 된 메모리에 다른 값을 넣는 것'=' 연산자를 통해 값을 할당해 줄 수 있다.let assignment = '할당';con..

1. 스코프(Scope)란? 스코프의 정의는 "변수에 접근할 수 있는 유효범위"이다. 중괄호(블록)이나 함수에 의해 달라진다. 2. 스코프의 2가지 타입 1. 전역 스코프 (Global Scope) 전역에 선언되어 있어 어느 곳에서든 해당 변수에 접근 가능하다. 어디서나 접근 가능해서 이게 최고다!!라고 생각할 수도 있지만 오히려 Scope Pollution이라는 문제가 생길 수 있다. 전역변수를 선언하고 그 뒤 어떤 블록에서 그 변수를 다시 선언하면 그 변수의 값은 변하게 되는 것이다. 2. 지역 스코프 (Local Scope) 크게 함수 스코프와 블록 스코프로 나뉜다. 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데 이를 함수 스코프라고 한다. 블록은 중괄호({})를 의미하는데,..

1. 랜딩페이지 CSS 마무리 미로로 랜딩페이지를 약간 엎어서 디자인을 새로 했다. 그리고 각자 다시 수정을 한 후 현수님과 줌으로 만나서 진행했는데 새벽까지 했다...처음 만들었을 때보다 너무 깔끔하고 이뻐서 만족스럽게 마무리했다. 가장 많이 바꾼 부분은 랜딩페이지의 맨 위 부분이었던 것 같다. 처음엔 이미지로 시작했는데 지도 GIF를 넣고 글씨를 옆에 띄우는 걸로 바꾸었다. 2. 스크롤 애니메이션 랜딩페이지에 애니메이션이 없다보니 밋밋하다는 생각이 들어서 스크롤을 내리면 대상객체가 나타나도록 하고 싶었다. 그러던 중 검색을 통해 AOS라는 라이브러리를 알게 되어 사용했다. 아래 사이트인데 쉽게 사용할 수 있어서 좋았다. https://michalsnik.github.io/aos/ 우선 라이브러리 설치..

1. ReadMe 수정 개인적으로 깃헙 위키나 ReadMe 파일을 꾸미는 게 재밌어서 ReadMe 파일에 글이랑 구조를 수정해서 마무리했다. ReadMe 파일을 쓰니까 정말 거의 끝났구나 싶었다... 2. 지도페이지 반응형 지도페이지 반응형이 사실 어떻게 할지 좀 막막했던 것 같다. 우선 내비게이션 바 반응형으로 위에 부분이 좀 잘려서 그 부분을 가장 먼저 수정했다. 대부분 반응형은 아래와 같이 max-width를 설정해서 했다. @media screen and (max-width: 1023px) { // 내용 } 검색 부분은 왼쪽에 치우쳐 있고 내용을 입력하지 않으면 리스트가 뜨지 않아서 반응형에 큰 문제가 없었는데 상세정보 창이 가장 고민이었다. 최대한 간단하면서 깔끔하게 하고 싶어서 일단 이미지가 ..

1. DB 수정 DB에 CafeInfo 테이블이 있는데 지도페이지에서 마커를 클릭했을 때 나오는 상세정보 창의 내용이 담겨있다. 여러 필드가 존재하는데 그 중 이미지 부분에서 문제가 있었다. 카페 사진이다 보니 검색을 해서 이미지 주소를 넣은 것이었는데 일부 이미지 파일은 보이지 않았다. 문제가 생긴 이미지들을 확인해보니 특정 사이트에서 검색하고 그 이미지의 원본 주소를 가져오지 않고 검색한 결과 이미지 주소를 가져와서 생긴 문제인 것 같았다. 그래서 이미지를 검색하고 원본 링크로 들어가서 그 이미지의 원래 주소를 가져오거나 다른 사이트에서 검색해서 모두 바꾸는 작업을 했다. 그리고 아무래도 직접 정보를 넣다보니 50~60개 정도 카페 정보가 있었는데 좀 더 전국적으로 보여지고 싶어서 100까지 노가다를..

1. 오버레이 닫기 버튼 추가 오버레이에 마우스, 클릭 효과를 모두 주도록 수정했는데, 마우스 효과는 마우스를 옮기면 알아서 닫히도록 했으니 문제가 없었다. 그런데 클릭 효과는 닫는 버튼을 만들어 주어야 해서 아이콘을 넣고 닫히도록 바꾸어주었다. 2. 오버레이 수정하고 싶은 것 지금은 클릭을 하면 하나씩이 아니라 전부 누를 수 있는데 이미 한 개가 눌려있으면 다른 걸 눌렀을 때 기존 오버레이가 닫히도록 수정하고 싶다.

1. 지도 오버레이로 코드 수정 기존에는 카카오 API 중 인포윈도우로 카페명을 표시했었는데 디자인도 어렵고 클릭이벤트, 마우스이벤트를 동시에 주고 싶어서 오버레이로 코드를 수정하기 시작했다. 오버레이 이벤트 주는 코드만 첨부하면 아래처럼 썼는데 mouseover, click은 되는데 mouseout 이벤트 때문에 클릭 이벤트는 작동이 안 되는 것 같아 보였다. window.kakao.maps.event.addListener(marker, 'mouseover', function () { overlay.setMap(map); }); window.kakao.maps.event.addListener(marker, 'mouseout', function () { overlay.setMap(null); }); wi..

1. 검색 카테고리 수정 DB를 정리하면서 카테고리를 수정했다. etc는 정보가 많지 않아서 빼기로 했고, 카페명, 할인금액, 가게분류만 남았다. 각 카테고리에 맞게 placeholder 값을 수정했다. 2. 배포 처음에는 서버에서 정보를 받아오는데 undefined/~~이런 식이여서 심지어 서버 도메인도 아니었다. 뭐가 문제지 했는데 env 파일 설정을 vercel에서 어디서 해야하는지 몰라서 따로 안 했던 게 문제였다. 검색하다가 따로 설정하는 부분이 있는 걸 알게 돼서 수정하니까 SSL 오류로 변했다ㅠㅠ 꽤 오래 배포를 붙들고 있었는데 아직 상점페이지도 남았고 CSS도 남아서 시간을 더 끌 수 없었기에 내 위치를 포기하고 http로 배포하기로 했다. 리팩토링 하면서는 https로 배포하고 싶다.ᐟ.ᐟ

1. Nav 수정 기존엔 비로그인 상태일 때 마이페이지 버튼이 아예 안 보이게 했었다. 개인적으로 나는 비회원이어도 마이페이지 존재(?)는 알아야 한다고 생각해서 회의 때 얘기를 했고 다들 동의해주어서 마이페이지 버튼도 보이게 수정했다. 대신 비회원일 때는 누르면 로그인 모달이 뜨도록 했다. 2. 배포 내 위치 기능 때문에 이번에 백엔드를 맡으신 분들이 계속 https 배포를 시도했는데 SSL 오류부터 시작해서 다양한 오류들로 안 됐다ㅠㅠ 타임아웃 에러도 나고...나도 저번에 백엔드였어서 같이 얘기를 하다가 시도하게 됐는데 일단 클라이언트는 vercel로 배포했다. 그리고 서버도 배포를 다 했는데 비슷한 에러들로 막혔다ㅠㅠ