이번 스터디 과제로 프론트엔드멘토에 있는 예제로 디텍스트자인 구현부터 서버 배포까지 도전해보았다. 가장 쉬운 걸로 선택했음에도 불구하고 우여곡절이 많았고, 좌절감을 맛보기도 하였다..
이렇게 배워나가는 거겠지..?
html
최대한 div를 남발하지 않고 시맨틱하게 작성하려고 했다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element
시맨틱 태그는 많이 연습해야할것 같다.
html 글씨 일부분만 바꾸는 법도 알게되었다.
밖에 폴더 연결하기: ../ 이걸 안해서 사진 연결 오류가 계속있었다.
css
css는 역시나 반응형이 가장 문제였다.
이전에 flex는 여러번 만들어 보았으나 반응형에는 grid가 최적이라고 해서 다음번에는 grid를 사용하여 css를 구현해보고 싶다.
이번 반응형 구현에 사용한건
max-width,% 정도 였다.
새로 안점은 이미지에 굳이height를 안줘도 원래 비율에 맞게 알아서 크기를 잡는다는 점~
그리고 아이콘 사용법
다음 반응형때에는 미디어 쿼리도 사용해보고 싶다.
그리고 이번css에는 약간의 구멍이 있다.
- 아이콘과 아이콘을 감싸고 있는 span에 각각 hover효과를 줬다. --> 아이콘의 바깥 즉 span에만 마우스가 올라갈시에 span에만 효과가 들어간다.
- 아이콘에 패딩값이 제각각이다.
- 이미지의 크기에 반응형효과를 줬더니 일반화면에서는 너무 크고 , 작은화면에서는 너무 작았다.
javascript
이번에 구현해야할 기능
1. 이메일 db에 저장-> jquery사용
2. 이메일 validation (공백, 양식확인 )
3. db에서 중복된 이메일 찾기 ----> 실패
역시나 시작은 preventdefault로...
만약 validation에 대한 구체적인 지시사항이 없었더라면, 이렇게 preventdefault함수를 쓰지않고, html에서 바로 서버와 통신할 수도 있다.
예를 들어, form type을 email로 하고, action속성까지 넣게되면 자동으로 emailvalidation + submit까지 하게된다. 따라서 굳이 preventdefault를 쓸필요가 없게된다. 하지만 요청하는 디자인과 달라지기 때문에 함수를 사용하는 방법으로 구현을 하였다.
이메일 양식에 맞게 입력했는지 확인하는 것은 정규식을 사용하였다.
이메일 정규식 : /^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}$/;
정규식 사용방법 : 정규식.test(test할 값)
처음에는 includes함수를 사용하여 @포함여부에 따라 if문으로 체크하였는데 그럴 경우 다른 특수기호가 들어가거나, 도메인이 잘못됐을 경우에도 submit이 되기 때문에 정규식을 사용하였다.
마지막 목표였던 중복이메일 찾기는 며칠을 짱구를 돌려봐도 답을 찾지 못했다. 구글링으로는 대부분 react, php를 이용한 예시들 뿐이어서 copy도 어려웠다.값을 가져오는것 까지는 성공했지만 값을 요리하는데는 실패했다.
나중에 능력자의 도움을 받은결과
불가능한 구현은 아니었지만 아무래도 아직은 콜백함수라던가, break문 등 함수이용이 자유자재로 되지 않아 못만들었던거 같다.
다음주에는 함수를 만드는 연습을 해야겠다.
처음 if문을 구현햇을때 if문이 계속 false로 나오는 오류가 있었다.
if((email.includes("@")) === false) --> 괄호안에 괄호를 또넣음
그래서 ===false를 추가한것
하지만 if(email.includes("@")) 이렇게 괄호를 빼면 false가 없어도 실행이 된다.
아래 글을보고 힌트를 얻었다.
python
플라스크를 해본적이 있지만, 앞으로봐도, 뒤로봐도, 거꿀로 봐도 이해가 되지 않아 생활코딩으로 공부를 하고 시작하였다.
생활코딩을 따라하면서 연결을 했지만.
처음 플라스크를 연결했을때 새로고침이 안되는 오류가 있었다.
app.run() : 디버그 모드였다.app.run을 삭제하니 디버그 모드가 on으로 바뀌면서 새로고침이 되었닫. 터미널을 잘 읽어보면 무슨오류가 있는지 힌트가 나오는 것 같다.
두번째 오류 들여쓰기였다 : expected an indented block
통신을 끝내고 ajax에 대해 이리저리 찾아보니
내가 배운건 jquery를 이용한 ajax가 유일한데, fetch라던가, xhr이라던가 다양한 방법들이 존재해서 큰 혼란이 있었다. 게다가 플라스크까지...
통신방법정리
https://velog.io/@wiostz98kr/Ajax%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95XHR-jquery-fetch-vs-axios
서버와 통신하는 방법에는 다양한 방법들이 있다.
jquery, axios, fetch api xhr이 있는데 각각 장단점이 있으니 상황에 맞게 사용할줄 알아야 할 거같다.
처음 axios를 시도했지만 프로그램을 설치하는 것부터문제가 생겨서 백엔드는 이쯤에서 만족하고 내가 할수 있는 것들에 집중하기로 마음을 다잡았다. axios는 주로 리액트와 함께 사용되니 리액트를 배운 뒤에 사용해봐야 겠다.
서버배포하기
처음에 서버배포는 : aws에 Elastic Beanstalk을 사용해보았다.
내가 만든 file을 압축하여 넣기만 넣기만 하면 된다. 하지만.
아래와 같은 오류가 계속 발생되어 다른 방법을 찾게 되었다.
ngrok
:ngrok은 서버 배포전에 잘돌아가는지 시험하기위해 서버를 열때 보통 사용한다고 한다. 과정도 생각보다 간단하여, 미니프로젝트할때 자주사용하게 될거 같다.
1. cmd cd 파일 위치
2. ngrok 키 붙여넣기
3. http 5000
단, 5000포트 열어 놓기
cmd를 통해 연결에 성공하면 아래와 같은 화면이 뜨게 된다.
참고사이트
https://kibua20.tistory.com/150
마치며
이번 스터디과제는 많은걸 배울 수 있었다. 그리고 역시나 나는 프론트엔드가 더 적합하단걸 알게해 준거같기도 하다.
너무 모르는게 많아서 하루하루 새로운것들을 알아가는 것이 재밌다.
