Frontend

오늘은 프로젝트 프론트엔드에서 발생한 버그들을 해결하고자 했다. 일단 발견한 문제는 2가지가 우선 있었다. 1. 로그아웃 시 직접 새로 고침을 해야 로그인이 가능한 버그 수정 일단 기본적으로 인증된 사용자(localStorage에 유효한 토큰이 있는 사람)이면로그아웃 버튼이 보이고인증이 되어 있지 않은 사용자(localStorage에 유효한 토큰이 없는 사람)이면로그인, 회원가입 버튼이 보인다. 위 사진을 보면 로그아웃 버튼이 보이고 로그인 된 사용자라는걸 알 수 있다. 문제가 무엇이냐면 먼저 로그아웃 버튼을 누르면 화면상으로 로그인과 회원가입 보이는 걸 확인할 수 있고 localStorage도 잘 비워진걸 볼 수 있다. 그런데 로그인 버튼을 누르면 아무 반응이 없는 버그가 있었다. 새로고침으로 해결할 ..

1. 문제 랜딩 페이지를 만들던 도중 한가지 문제에 부딪혔다. [ 아직까지 큰 문제 없는 사진 ] 그런데 박스 크기 높이를 높이고 싶어서 height를 늘렸더니 정렬이 맞지 않았다. 여기까지는 정렬 적용 하지 않은것이니 당연했다. [ html 부모 자식 구조 알아보기 ] 가장 상단에 멤버 display를 flex로하면 기본값이 row이니까 내용물이 횡으로 정렬되고 flex기본값 축(횡 방향)과 같은 축을 조정하는 justify-content에 space-between을 주어 최대 간격으로 정렬하고 align-items 종 축이 될테니 center를 주어 이걸로 맞추려고 했다. 그런데.. 결과가 이렇게 나왔다. 이걸 원한게 아니었다. 2. 원인 예상 일단 프로그램은 틀리지 않기때문에 내가 뭔가 잘못한게 있..

HTML CSS JavaScript 먼저 3가지로 나눠서 포스팅 할 예정 이후 조금씩 업데이트 하는것마다 올릴 예정인데 CSS 손봤던 과정에 대해서 정리해보았다. 전 편인 HTML쪽에서 설계한게 CSS 에서도 보여져야 할 것 같아서 가져와봤다. 1. 설계 먼저 Power Point 로 간단히 계획을 짜보았다. 각 컴포넌트들의 위치를 정리해보았다 [ 컴포넌트 위치 정리 ] 위와 같이 만들기 위해 div박스들을 어떻게 배치해야 할지 생각했다 다음으로는 저렇게 만들기 위해 div로 각 가장 큰 구역을 나누기로했다.기준은 CSS에서 display : flex flex-direction : row 적용할 곳 기준으로 생각해봤다 # display : flex flex-direction : 이것은 해당 div속에 있..

HTML CSS JavaScript 먼저 3가지로 나눠서 포스팅 할 예정 이후 조금씩 업데이트 하는것마다 올릴 예정입니다 # 원래 게임 사진 위와같이 원래 있는 게임인데 게임방식은 1. 자동으로 1초당 돈이 계속 오른다. 2. 수동으로 터치해도 돈이 계속 오른다. 3. 번 돈으로 옵션을 구매해서 더 부자가 되는 시스템 # 옵션은 1초당 돈이 점점 많이 오르는 것이나 터치 시 돈이 더 많이 오르는 등 그런것 위주이다. 자세히 따라하기보다 그냥 웹에다 비슷하게 작동하는걸 간단히 따라해보고 싶었다. 1. 설계 먼저 Power Point 로 간단히 계획을 짜보았다. 각 컴포넌트들의 위치를 정리해보았다 [ 컴포넌트 위치 정리 ] 위와 같이 만들기 위해 div박스들을 어떻게 배치해야 할지 생각했다 다음으로는 저렇게..

오늘은 시계를 만들고 싶어서 알아본 과정에 대해 간단히 정리해보았다. # HTML 연습용으로 h1태그로 만들어았다. 1. new Date() new Date()를 통해 현재 시간에 대한 정보를 얻을 수 있었다! [ new Date() 실행 결과 ] 그 중에 new Date().getHours() = 시 new Date().getMinutes() = 분 new Date().getSeconds() = 초 이런식으로 시 분 초 각각 따로 얻을 수 있었기에 시계를 만들기에 딱 좋았다. [ new Date().getSeconds 실행 결과 ] [ new Date().getSeconds 반환값이 초마다 바뀌는 모습 ] 2. setInterval() setInterval()함수는 setInterval(함수명,실행주기..

문제 이해 [HTML 부분] 버튼 포스팅박스 JQuery의 toggle 함수처럼 postingbox를 접었다 폈다 하는 조건문 함수를 작성했고 버튼 누르기 전 / 버튼 누른 후 / 다시 눌렀을 때 3가지 상황 중 마지막 부분에서 문제가 발생했다. [버튼 누르기 전] [버튼 누른 후] 문제 없이 잘 출력 [버튼 다시 한번 눌렀을 때] display가 none이 되지않는 문제가 발생 시도해본 것 2가지 구글링 진행 1. JQuery toggle vanilla JS = EventListener, classlist 같은 답변위주라서 큰 도움을 받지 못함 2. CSS display if문 2번째 구글링에서 몇가지 페이지를 참고해봤는데 모두 아래와 거의 유사한 답변 문제 해결 본인이 작성한 것과 거의 유사하나 가장..