[이준영] sprint4 #99
[이준영] sprint4 #99
Conversation
1. Add login page 2. Add social icons 3. login button focus in/out check
1. make signup html 2. make signup css (login page와 매우 유사하게 만듬)
color 값들을 css 변수로 등록해서 사용 (login, signup page만, login page에 변수 등록)
index, login, signup page에 사이트 배포 후 google analytic code 추가
1. modify input text color -> black 2. signup top margin -> 231px
맨 위 여백 (판다마켓 위 여백) 고정 완료
Add img file & clean up img file
edit readme.md file with markdown language
email check and password check at login & signup time
facebook & twitter .. add meta tag edit mobile setting
판다마켓 로그 페이지 업데이트 완료
meta tag 오류 해결 mobile 중앙 정렬 시도
각 해결한 스프린트 미션을 새로 업데이트
잘못된 경로에 있던 main.js, product.js, article,js 올바른 경로로 이동시킨 후 배포 완료
soonoo
left a comment
soonoo
left a comment
There was a problem hiding this comment.
async/await을 활용해서 api 호출 코드를 깔끔하게 구현해주셨네요! 고생 많으셨습니다.
There was a problem hiding this comment.
node_modules 같이 양이 많고 사이즈가 큰 파일/디렉토리는 특히 주의해서 꼭 .gitignore에 추가해주세요!
| const res = await instance.delete(`/${id}`); | ||
| return res.data; | ||
| } catch (e) { | ||
| handleError(e, 'deleteArticle'); |
There was a problem hiding this comment.
handleError 함수로 에러 처리가 한결 깔끔해졌네요!
에러 처리 이후에 값을 반환하거나 예외를 다시 throw해서, 함수를 호출하는 쪽에서 예외 발생 여부를 명시적으로 알 수 있도록 해보는건 어떨까요?
|
|
둘 다 많이 사용됩니다. fetch가 더 최신이고 기술적으로도 더 앞서있어서 권장되기는 하나, axios가 interceptor나 공통 모듈화해서 관리하기는 더 편해서 니즈에 맞게 골라 사용됩니다. Fetch API와 XHR(XMLHttpRequest)의 차이에 대해 검색해보시면 관련된 http 라이브러리들이 많이 나오니 찾아보시는 걸 추천드립니다.
위에서 잠깐 설명하긴 했는데, fetch는 비교적 최신 기술이 사용되었고 별도 설치가 필요 없는게 장점입니다 (node.js에 포함). |
| <link rel="stylesheet" href="login.css"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> |
There was a problem hiding this comment.
login.css에 pretendard import가 들어가있으니 8번째 줄은 빠져도 될 것 같습니다
|
|
||
| <div class="pandaLogo"> | ||
|
|
||
| <img src="img/logo.png" alt="logo" id="logo" onclick="location.href='index.html'"> |
There was a problem hiding this comment.
onclick 태그로 이동시키는 것보다, a태그를 이용하는 것이 더 적절합니다. (웹 접근성 측면)
| <img src="img/logo.png" alt="logo" id="logo" onclick="location.href='index.html'"> | |
| <a href="index.html"> | |
| <img src="img/logo.png" alt="logo" id="logo"> | |
| </a> |
| if (!user) { | ||
| showError("등록되지 않은 이메일입니다."); | ||
| return; | ||
| } | ||
|
|
||
| if (user.password !== password) { | ||
| showError("비밀번호가 일치하지 않습니다."); | ||
| return; | ||
| } |
There was a problem hiding this comment.
이렇게 구현해도 전혀 문제는 없는데, 보안적으로는 이메일과 비밀번호 중 어떤게 틀렸는지 알려주지 않는게 좋습니다.
로그인 창에서 '이메일이 틀렸습니다' 또는 '비밀번호가 틀렸습니다' 라고 알려주는 것보다, '이메일 또는 비밀번호가 틀렸습니다' 라고 알려주는게 보안상 더 좋다는 말이죠. 그러면 해킹을 시도할 때 어떤 값이 틀렸는지 모르니까 경우의 수가 훨씬 많아지겠죠?
4 participants
Sprint Mission 4 - 판다마켓 API 구현
기본 요구사항
공통
📝 Article API (
https://panda-market-api-crud.vercel.app/articles)getArticleList(): GET 메서드를 사용해 주세요.page,pageSize,keyword쿼리 파라미터를 이용해 주세요.getArticle(): GET 메서드를 사용해 주세요.createArticle(): POST 메서드를 사용해 주세요.title,content,image를 포함해 주세요.patchArticle(): PATCH 메서드를 사용해 주세요.deleteArticle(): DELETE 메서드를 사용해 주세요.fetch 혹은 axios 를 이용해 주세요.
응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.
.then()메서드를 이용하여 비동기 처리를 해주세요..catch()를 이용하여 오류 처리를 해주세요.🛒 Product API (
https://panda-market-api-crud.vercel.app/products)getProductList(): GET 메서드를 사용해 주세요.page,pageSize,keyword쿼리 파라미터를 이용해 주세요.getProduct(): GET 메서드를 사용해 주세요.createProduct(): POST 메서드를 사용해 주세요.name,description,price,tags,images를 포함해 주세요.patchProduct(): PATCH 메서드를 사용해 주세요.deleteProduct(): DELETE 메서드를 사용해 주세요.async/await을 이용하여 비동기 처리를 해주세요.try/catch를 이용하여 오류 처리를 해주세요.📂 파일 구조
export를 활용하여 모듈화ProductService.js: Product API 관련 함수 작성ArticleService.js: Article API 관련 함수 작성main.js: 이외의 코드 작성 및 함수 실행import를 활용하여 모듈을 불러옴주요 변경사항
스크린샷
.
멘토에게
fetch와axios중 어떤 방식을 더 선호하나요?axios의 장점과fetch를 사용할 때의 이점이 궁금합니다!