본문 바로가기

FE54

coustom hook보다 일반 function이 나을 수도 있다. 기술과제를 구현하던 중 열심히 만든 코드가 문득 눈에 들어왔다. api를 호출해 결과 값을 전역 상태에 넣는 커스텀 훅이었다. 생각이 드는 대로 코딩하다 보니, 그리고 동작하는 데 주안을 두다 보니 처음엔 알아차리지 못했다. 아래 사진이 그 코드다. // useGetEurInfo.tsx import { useCallback, useEffect } from "react"; import { useRecoilState } from "recoil"; import { EurInfoAtom } from "../store/eurInfo"; export const useGetEurInfo = () => { const [eurInfo, setEurInfo] = useRecoilState(EurInfoAtom); cons.. 2023. 1. 19.
SPA & MPA SPA는 Single Page Application, MPA는 Multi Page Application의 약자다. 있는 그대로 페이지가 하나냐, 여러 페이지를 갖고 있느냐가 두 차이를 가른다. 더불어 장단점도 서로 상쇄한다. MPA MPA는 말 그대로 여러 페이지를 가진 어플리캐이션이며, 웹이 처음 나왔을 때부터 존재한 방식이다. 사용자가 페이지를 요청할 때마다 서버는 리소스(HTML, CSS, Javascript)등 을 반환한다. 페이지를 이동하든, 새로고침하든 마찬가지로 리소스를 계속 반환한다. 장점 - SEO(검색엔진최적화)에 유리하다 페이지 단위로 검색하는 검색엔진 크롤러들에게도 적합하다. 페이지 하나당 완성된 HTML 하나를 리소스로 받기 때문이다. 단점 - 페이지 이동 시 깜빡임 페이지마다 새.. 2023. 1. 4.
useForm handleSubmit이 동작하지 않는다. 게시판에서 등록과 수정은 항상 세트다. 통신 부분만 빼면 퍼블리싱 코드는 같다. 따라서 재활용해야 제맛이다. 그런데 등록은 정상 작동하는데, 수정 버튼이 눌려지지 않는다. 문제 수정 시 서버에서 데이터를 불러와 input들에 정보를 띄우는 것은 문제 없다. 다만 수정하고 수정 버튼을 누르면 아무 반응이 없다. form은 다음과 같다. .... {isEdit ? "수정하기" : "등록하기"} 수정 상태냐, 아니냐(isEdit)에 따라 onSubmit가 보내는 함수가 달라지게 수정했다. vscode나 콘솔 어디를 봐도 오류도 나타지않아 당황스러운 부분이었다. 등록은 되는데 수정이 안된다니. 시도 1 혹시 onClickUpdate함수를 잘못 작성했나 싶어 처음부터 다시 코드를 확인했다. 혹시 통신 부분에서 잘.. 2022. 12. 12.
SEO Search Engine Optimization. SEO는 검색 엔진 최적화다. 즉, 내가 만든 사이트에 검색 엔진이 들어왔을 경우 정보를 잘 가져가도록 조치해 놓는 것. 제작하려는 사이트가 쇼핑몰이거나 전파되길 바라는 정보를 담고 있는 경우 SEO는 필수다. 사용자는 우리 사이트에 들어오는 것보다. 네이버, 구글 등 포털사이트 검색을 통해 들어오기 때문이다. 검색 엔진 검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라간다. 찾은 콘텐츠 색인을 생성하는데, 검색 결과 시 보이는 게 바로 이 콘텐츠 색인이다. 검색 엔진을 봇 혹은 크롤러라고 부르는데, 이 크롤러는 일정한 규칙을 따른다. (이 규칙은 구글에 따른 규칙, 네이버에 따른 규칙 등 검색 엔진을 만드는 업체마다 다르다.) 따라서 검색 .. 2022. 12. 11.
HTTPS vs HTTP 개발자에게 http와 https 중 고르라고 한다면 100명 중 100명은 https를 선택한다. 이는 보안이 걸린 문제이기 때문이다. 보안 걱정 없는 사이트라면 http도 문제없지만, 로그인 기능 등 개인 정보가 들어간다면 개발자는 여지없이 https를 채택할 테다. http는 무엇이고, https는 무엇이 다른 지 살펴보자. HTTP http는 hyper text transfer protocol의 약자로, 국문으론 하이퍼본문전송규약으로 부른다. 하이퍼는 직역하지 않는 이유는 여기서 hyper는 이동의 의미를 갖기 때문일 듯하다. 다시 말해 www상에서 정보를 주고받는 약속을 뜻한다. 유럽 입자 물리 연구소의 팀 버너스 리가 속한 팀에서 HTML과 텍스트 기반 웹 브라우저 기술을 발명했고, 여기에 ht.. 2022. 10. 27.