본문 바로가기
728x90
반응형

Frontend45

this const obj = { name: "daegon", showName() { console.log(this); }, }; //출력 obj = { name: 'daegon', sayname: [Function: sayname] } //this는 obj를 가리킴 obj.showName(); const showN = obj.showName; //여기서는 obj의 this가 Window를 가리킴 showN(); 콘솔창 확인해보면 같은 함수를 호출했는데 값이 다르게 나온다.. 왜일까? 중요!! this는 보통 함수가 호출하는 방법에 따라 달라진다고 합니다. showN(); 호출시 window를 가르키며 obj를 붙여서 obj.showName() 을 호출시에 this는 obj를 나타냅니다. showName()을 화.. 2023. 6. 20.
[React.js ] spinners (로딩 시 대체 효과) 안녕하세요!! 오늘은 제 프로젝트에 적용된 스피너를 소개해 드릴까 합니다. axios를 사용하여 server 쪽으로 비동기 통신을 할 때 딜레이 시간이 생기는데.... 딜레이 시간 동안 유저에게 좀 더 쾌적하게 화면을 보여주기 위해서 적용해 봤어요!! client단코드 styled components를 사용해서 스피너 컴포넌트를 따로 만들었습니다. 로딩 중일 때 띄울 스피너 이미지를 처음에는 아무거나 가져다 썼더니... 사이즈 변경 시 깨져서 알아보다 보니 svg가 안 깨진다고 해서 가져와서 쓰고 있습니다~~ 안 깨지니까 너무 좋아.. 제가 사용한 이미지 스피너 테스트할 때 계속 보다 보니까 멍해져서 "뭐 하고 있었지??" 정신 줄 놓는.... 조심하세요.. 이미지 import 한 뒤에 저 표시만 있으면.. 2023. 6. 17.
JavaScript Spread Spread Operator로 객체를 복사할 시, 복사한 객체의 값을 변경해도 원본에는 영향을 주지 않는다.(얕은 복사) JavaScript에서 스프레드 문법은 배열이나 객체의 요소를 펼쳐서 전개하는 기능을 제공합니다. 스프레드 문법은 주로 배열이나 객체를 복사하거나 합치는 등의 작업에 사용됩니다. 배열에서 스프레드 문법을 사용하려면 세 개의 점 (...)을 사용합니다. 다음은 배열을 펼쳐서 복사하는 예시입니다: const array1 = [1, 2, 3]; const array2 = [...array1]; console.log(array2); // 출력: [1, 2, 3] 위 예시에서 ...array1은 array1 배열의 모든 요소를 펼쳐서 array2에 복사합니다. 또한, 여러 배열을 합치는 경우에.. 2023. 6. 15.
반응형이란? CSS 반응형 디자인은 다양한 화면 크기와 디바이스에 대응하여 웹 페이지를 조정하는 기술입니다. 이를 통해 사용자들이 모바일 기기, 태블릿, 데스크탑 등에서 웹 페이지를 일관되게 사용할 수 있습니다. 반응형 디자인을 구현하기 위해 CSS 미디어 쿼리를 사용합니다. 미디어 쿼리는 화면 크기, 해상도, 장치 유형 등과 같은 특정 조건에 따라 스타일을 적용하는 조건문입니다. 이를 활용하여 웹 페이지의 레이아웃, 폰트 크기, 이미지 크기, 네비게이션 메뉴 등을 유연하게 조정할 수 있습니다. 반응형 디자인의 목표는 사용자 경험을 최적화하는 것입니다. 작은 화면에서는 콘텐츠를 단순화하고 수직으로 쌓아올리는 것이 일반적입니다. 태블릿 화면에서는 데스크탑과 비슷한 레이아웃을 유지하면서 콘텐츠의 크기를 조정할 수 있습니.. 2023. 6. 12.
tag 종류 HTML에서는 다양한 태그를 사용하여 웹 페이지의 구조와 내용을 정의할 수 있습니다. 여기에는 몇 가지 일반적인 HTML 태그의 종류가 포함됩니다: : HTML 문서의 루트 요소를 정의합니다. : 문서의 헤더를 정의하며, 메타데이터 및 외부 스타일 시트, 스크립트 등을 포함할 수 있습니다. : 문서의 제목을 정의합니다. : 문서의 본문을 정의하며, 웹 페이지의 실제 내용을 포함합니다. , , , ... : 제목을 나타내는 태그로, 숫자가 작을수록 더 큰 제목 수준을 나타냅니다. : 단락을 정의합니다. : 앵커(링크)를 정의하며, 다른 문서, 페이지 또는 위치로 이동할 수 있는 하이퍼링크를 생성합니다. : 이미지를 삽입합니다. , , : 비순서형 목록(unordered list), 순서형 목록(ordere.. 2023. 6. 12.
Next.js란? Next.js는 React 기반의 JavaScript 프레임워크입니다. Next.js는 SSR(서버 사이드 렌더링) 및 정적 웹 애플리케이션을 빌드하기 위한 기능과 도구를 제공합니다. Next.js는 React 애플리케이션을 구축하기 위한 많은 기능을 제공합니다. 그 중 하나는 서버 사이드 렌더링(SSR)입니다. SSR은 클라이언트 사이드 렌더링과 달리 서버에서 초기 페이지 렌더링을 수행하여 빠른 로딩 속도와 검색 엔진 최적화(SEO)를 가능하게 합니다. 이는 사용자에게 초기 빈 화면이 보이지 않고, 완전히 렌더링된 페이지를 보여줄 수 있게 해줍니다. 또한, Next.js는 정적 웹 애플리케이션을 구축하기 위한 기능도 제공합니다. 이를 통해 사전에 렌더링된 페이지를 정적 파일로 생성하여 CDN(Conte.. 2023. 6. 12.
팀 프로젝트 회고.. 팀원들과의 첫 만남 첫 프로젝트 개인발표를 기준으로 강사님께서 팀원을 정해주셨습니다. 생각보다 나이대가 20대 중반부터 30대 초반까지 다양해서 놀랐으며 초기라서 그런지 다행히 다들 하고자 하는 열정이 있어 보여서 그래 나만 잘하면 되겠지라는 희망찬 생각을 하게 됩니다... 팀원들과의 첫 만남도 잠시... 첫 이별 주제는 아직 미정으로.. 일단 페이지, 기능별로 임무분담을 한 상태에서 며칠 전부터 메인 페이지를 맡으신 분이 안 나오기 시작했습니다. 한 분이 그만두신 관계로 다시 모여서 다시 임무분담을 나눴습니다. 기획 단계 한 분 한 분 생각해온 아이디어들을 들으면서 최종적으로 전국 관광지 api 정보를 가져와서 지도 위에 마커를 표시하여 지역별로 검색 시 관광지 정보가 노출되게 구현하자고 의견 통일이 .. 2023. 6. 12.
게시글 일부만 로드(클릭시 조건에 따라 추가 로드) 게시글이 늘어날 경우를 대비해서 부분적으로 불러올 수 있는 관련 메서드를 찾아봤습니다. mongoose에서 제공하는 limit() 메서드를 사용하면 조건을 줘서 일부 doc만 불러올 수 있다고 합니다. 아래 참고 링크의 내용을 간략하게 보자면 find() 메소드를 사용하면 모든 document 들을 출력해주기 때문에 limit() 메소드와 skip() 메소드를 통하여 보이는 출력물의 갯수를 제한 할 수 있다고 합니다. server 코드 아래처럼 체이닝으로 넣어주고 limit(5)로 설정하여 5개의 doc만 불러올 수 있게 하였습니다. router.post("/list", (req, res) => { let sort = {}; if (req.body.sort === "최신글") { sort.createdA.. 2023. 6. 8.
게시글 검색기능 추가 검색 입력값 관리하기 위해서 state 추가 및 input태그 사용 const [search, setSearch] = useState(""); { /* enter 키 코드 13(enter key) 실행시 searchHandler함수 실행 */ e.keyCode === 13 && SearchHandler(); }} onChange={(e) => { setSearch(e.currentTarget.value); }} /> sort 상태 변경시마다 listChange함수 실행 useEffect(() => { listChange(); }, [sort]); 검색 버튼 클릭 시 listChange 함수 실행 const SearchHandler = () => { listChange(); }; listChange 함수에.. 2023. 6. 8.
728x90
반응형

티스토리툴바