뫙뭉

우리가 흔히 사용하는 검색 플랫폼으로는 구글, 네이버 등이 대표적이다. 해당 플랫폼에서 검색을 해보면 단순히 화면만 바뀌는 것이 아니고 URL도 바뀌는 것을 확인할 수 있다. 검색 뿐만 아니라 여러 필터기능도 URL을 변경시키는 것을 확인할 수 있다. 해당 사항은 얼마전 검색 기능을 구현하면서 고민하게 되었던 부분이다. 화면만 바뀌어도 무방할 것 같은데 왜 URL도 바뀌게 한 걸까. 분명히 이에 따른 장점이 있어서 그런것일 텐데.. 그래서 여러 고민과 검색 끝에 알아낸 것이 있다. 검색을 하면서 URL이 바뀌게 해야하는 이유 3가지 1. 사용자 경험 개선 URL에 검색어나 필터를 포함시키면 사용자가 현재 검색상태를 쉽게 이해할 수 있음. 그리고 URL을 통해 검색 결과를 북마크하거나 공유할 수 있게함. ..

컴포넌트를 새로 생성하고 로컬에서 실행해보았는데 위와 같은 오류가 떴다. 이게 뭔말인가 해서 해당 컴포넌트에 가보니 뜬금없이 useRef와 관련된 한 줄에서 오류가 났다고?? 뭐가 문제인가 해서 5분정도 들여다 보다가 발견한 것은 import의 경로 리액트에서 Hooks의 경로는 'react'이다. 아마 자동완성을 쓰다가 자동으로 import 된 것이 이런 문제를 발생 시킨 듯 하다.

최근 프로그래머스의 고양이 사진첩에 대한 과제를 해결하던 도중 오류를 접했다. 참고로 나는 Javascript란 언어에 대해 기본적인 것은 알고 있다는 오만한 생각을 했었으나 해당 과제를 풀어보고 나의 오만함을 깨달을 수 있었다. 프론트엔드를 공부하는 취업준비생들에게 매우 많은 도움이 될 것으로 예상하기에 해당 문제 해설의 링크를 남겨둔다. 문제를 직접 풀어보고 싶으면 해당 링크의 상단에 문제 링크도 포함되어 있으니 참고. https://prgms.tistory.com/53 '2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제 해설 'Dev-Matching 웹 프론트엔드 개발자'의 과제 테스트는 어떠셨나요? 내가 무엇을 잘못하였고, 무엇을 잘했는지 궁금하시지 않으셨나요? 우리 모..

출처: 프로그래머스 강의, '코딩테스트 광탈 방지 A to Z Javascript ' 강의 내용 정리 및 공부 목적으로 게시하는 글임을 알립니다. 해시테이블 자료구조 오늘은 해시테이블 자료구조에 대해 알아보려고 한다. 해시테이블이란? 키와 값을 받아 키를 hashing하여 나온 index에 값을 저장하는 선형 자료구조이다. 키와 값 하면 떠오르는 Javascript 문법이 있을 것이다. 바로 객체, Object가 이에 해당한다. 추가로 이번 강의를 통해 알게 된 문법이 있는데 바로 Map 메소드이다. Map은 const sample = new Map()과 같이 선언하며 sample.set(key, value)로 키와 값을 설정할 수 있으며 sample.get(key)로 해당 키의 값을 불러올 수 있다. ..

State, 변수의 상태관리 리액트에서는 변화하는 값에 대해 클래스형 컴포넌트에서 state를 이용하여 값을 관리하였다. 함수형 컴포넌트에서는 원래 state를 관리할 수 없었기에 state를 사용할 경우 클래스형 컴포넌트를 선택적으로 사용하였는데 이러한 부분을 개선하기 위해 만들어진 기술이 Hooks. state뿐만 아니라 Life-Cycle-Method 의 사용에도 갖고 있었던 문제점을 리액트 16.8에서 Hooks라는 개념이 도입되면서 useState, useEffect 등으로 손쉽게 함수형 컴포넌트에서도 사용이 가능하게 되었다. state를 이용하는 경우는 매우 다양하다. 간단한 예로 로딩 스피너를 들 수 있는데, 듣기에는 아주 단순해 보이는 이런 경우에도 state로 관리할 수 있다. API 호..

큐에 대하여 알아보자 출처: 프로그래머스 강의, '코딩테스트 광탈 방지 A to Z Javascript' 큐란 먼저들어온 것이 먼저 나가는 것을 말한다. 쉬운 예를 들자면 영화관에 줄을 서면 먼저 슨 사람이 먼저 입장하고 줄에서 빠져나간다. 이러한 개념을 자바스크립트로 만들어 보자. class Node { constructor(value){ this.value = value; this.next = null; } } class Queue { constructor(){ this.head = null; this.tail = null; this.size = 0; } enqueue(newValue){ const newNode = new Node(newValue); if(this.head === null){ thi..

이전 포스트에서 열심히 '한글자씩 나타나는 애니메이션'에 대해 만들었다. 그런데 문제가 하나 있다. 해당 요소는 저~~~기 밑에 있는데 사이트가 렌더링이 되자마자 애니메이션이 발동된다면 여태 힘들게 애니메이션을 만든 의미가 없지 않은가!! 요소가 화면 안에 들어왔을 때 애니메이션이 발동되어야 된다 이말이다. 그래야 내가 열심히 만든 애니메이션을 자랑할 수가 있다. 그렇기 때문에 오늘은!! 요소가 화면에 보일 때 애니메이션이 작동하도록 하는 방법에 대해 블로깅하려 한다. 화면의 위치와 요소의 위치 우선 화면의 상단의 위치를 알아야겠지. 이것은 간단하다. window.pageYoffset; window.scrollY; 방법은 위의 두가지가 있는데 둘의 차이가 무엇이냐. window.scrollY 는 구형 브..

axios를 통한 오픈 API 사용방법에 관한 정보는 다음 글을 참고해주세요 https://mwangmoong.tistory.com/8 React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 5 ( axios 통신) 해당 자료는 다른 블로그, 유튜브에 더 자세히, 전문성 있게 설명한 글이 많습니다. 이 글은 제가 해당 개념에 대해 이해했던 흐름을 정리해 놓은 자료이니 참고해주세요. 서버와의 통신 앞의 글 mwangmoong.tistory.com 오픈 API를 사용해보자 오늘은 API 사용기에 대해 적어보려 한다. 현재 내가 만들고 있는 프로젝트는 유튜브, 네이버 검색 API를 이용한 레시피 찾아주기 기능이다. 그전에 우선 API가 무엇인지 간단히 집고 넘어가 보자 내가 이해한 API API..

자동완성 기능을 만들어보자! 전에 소개한 아이디어의 중요한 기능 중 하나가 자동완성 기능이었다. 여러 식재료의 이름들을 샘플로 기본적으로 주고, 검색창에 문자를 입력할 때마다 일치하는 재료만 보이게 하는 것이 목표이다. 내가 하면서 고민해야 될 부분은 다음과 같았다. - 모든 아이템은 처음에 보여지는 상태여야 함. - 타자가 한글자씩 입력 될 때마다 일치하는 항목들만 보여야 함. 시행착오 내가 처음 고민했던 방법은 다음과 같다. 미리 만들어 놓은 식재료 data를 받아온다. className에 화면에 보여질 재료들에 active를 부여하여 목록생성 onChange 이벤트를 통해 input에 값이 입력되면 모든 아이템에 active를 지우고 filter해서 active를 다시 부여하면 일치 항목만 남아 있..