본문 바로가기

Front-End

 (13)
초성 검색 기능 구현하기 INDEX Stack #VanillaJS, #Jquery Preview 이번 포스팅은 초성 검색 알고리즘을 참고해 실무에 적용해 본 기능에 대한 내용입니다. 검색 기능 중 마치 노래방 검색기능 초성 검색 기능이 있으면 매우 편리해집니다. 대부분의 금융앱에서 이체 내역 화면을 보면 계좌번호 혹은 상대방의 이름을 통해서 검색해 원하는 계좌만 볼 수 있도록 하는 기능들 많이 보셨을 겁니다. 이 알고리즘을 활용된 부분입니다. Array.prototype.includes(), String.prototype.includes()를 사용해 문자열에서 원하는 원소를 찾는 방법을 사용할 수도 있지만 초성 검색 기능 혹은 한 문자열 안에서 이어져있는 문자열만 찾는 것이 아니라 좀 떨어져 있는 문자열도 찾는 기능을 추가하면 ..
ReactJs에서 addEventListener 사용하기 INDEX Stack #ReactJs, #useEffect, #addEventListener Preview 보통 리액트에서는 토글 기능이나 Toast, window 와 같은 status가 'ON', 'OFF' 인 컴포넌트를 구현할 때 useState를 사용합니다. 만약 아래와 같은 상황에서 어떻게 구현해야 할까요? 위 이미지에서 왼쪽에 있는 버튼은 공지사항 내용이 있으면 빨간 동그라미가 있고 없으면 표시하지 않도록 구현을 하려 합니다. 노티 이미지를 클릭했을 때 위 이미지처럼 공지사항 내용이 보여져야(show) 하고 해당 공지사항 영역 외의 영역을 터치하거나 노티 이미지 영역을 다시 클릭하면 공지사항 영역이 다시 hide 되어야 합니다. Methodology 처음엔 단순하게 생각했습니다. "useStat..
프로그래머스 과제 테스트-좋아하는 언어 검색기 INDEX Stack #VanillaJS 문제와 풀이(모범답안..)는 링크로 걸어두겠습니다. https://school.programmers.co.kr/skill_check_assignments/298 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr https://prgms.tistory.com/139 '2022 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 과제 테스트 해설 프론트엔드 개발자의 이직/구직을 위한 데브매칭! 지난 2022년 3월 12일 토요일 오후 2시부터 5시까지 3시간 동안 '2022 Dev-Matching: 웹 프론트엔드 개..
OpenWeatherMap api by fetch and axios INDEX Preview https://openweathermap.org/api openweathermap.org 간단하게 날씨 정보를 OpenWeatherMap api를 호출해서 불러오려고 합니다. api를 호출하는 방법엔 fetch, axios, ajax 등이 있습니다. api key는 위 사이트에 접속해서 회원가입 후에 my api key 메뉴에 들어가면 있습니다. (하지만 몇 분 내지 몇십 분을 기다려야 해당 key를 사용할 수 도 있습니다) Fetch! 우선 class component 방식은 아래와 같습니다. api 정보 중 wind (바람)의 speed 값만 표현하려고 합니다. const weatherAPI = "317e6f3e4ae59c61e364c9c3d15a02b3"; const cit..
Delaying of Function INDEX Stack #VanillaJS Preview JS로 개발하다 보면 비동기 처리에 항상 신경을 쓸 수밖에 없습니다. *https://sieon-dev.tistory.com/56 이전 포스팅에서 한 번 다뤘었는데 좀 부족한 듯해 추가로 다뤄보려 합니다. (나중에 보면 이 글도 많이 부족해보이겠죠..ㅎ) Methodology 만약 얼마나 걸릴지 알수없는 함수 longTimeFunc(Function) 가 있고 그 함수를 호출해야 하는 함수는 오래 걸리는 메서드의 프로세스가 끝난 뒤에 결과 값을 출력해야 하는 경우라면 어떻게 해야 할까요? const RandomTimeSec = parseInt(Math.random() * 10); const longTimeFunc = () => { setTimeout(..
[JS] Object 는 call by reference 함수에서 값을 전달하는 대신 주소값을 전달하는 방식을 call by reference 라고 합니다. 참조를 호출하다 라는 뜻인데요, C언어에서 나온 개념입니다. 주소값을 전달하기 때문에 전달받은 변수를 변경하면 원본 데이터 역시도 변경이 되는거죠. JS에서 객체는 call by reference 입니다. 객체가 아니면 call by value 이구요. call by value 는 값을 호출하다, 라는 뜻을 가지고 있어 원본 데이터의 값을 호출하여 사용합니다. 즉 전달받은 변수를 변경해도 원본 데이터의 값에는 지장이 없는 것이죠. 쉽게 말해 복사한다고 합니다. 예를 들어볼게요. var a = 1; var b = a; b = 3; console.log("a :" + a + " b : " +b); 결과는 a ..
[JS] 계층(hierarchical) 구조의 데이터를 JSON 데이터로 변환하기 INDEX 다음과 같은 구조의 데이터가 있다. var obj =[ {'level' : 1, 'name' : 'grandParent1'}, {'level' : 2, 'name' : 'parent1'}, {'level' : 3, 'name' : 'child1'}, {'level' : 3, 'name' : 'child2'}, {'level' : 3, 'name' : 'child3'}, {'level' : 2, 'name' : 'parent2'}, {'level' : 1, 'name' : 'grandParent2'}, {'level' : 2, 'name' : 'parent3'}, {'level' : 3, 'name' : 'child4'}, {'level' : 3, 'name' : 'child5'} ] 이를 도식..
[JS] new Date() 함수의 위험성 JS의 Date 객체는 쉽게 말해 JS로 현재 시스템 날짜를 제어할 수 있게 도와주는 JS에 내장된 객체입니다. 그래서 Date.prototype을 찍어보면 다음처럼 나옵니다. *시스템 날짜이기 때문에 휴대폰에서는 기기의 시간, PC에서는 PC에 설정되어 있는 시간대를 이용하죠. constructor을 찍어보면 native code 라고 나오고 실행시켜보면 현재 시간을 계산하여 return 해줍니다. 더보기 constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다. 내부 코드를 볼 순 없지만 사실 개발하면서 굳이 내장 함수를 들여다볼 일이 별로 없긴 해서 저도 찾아보다 포기했습니다ㅠ 이 Date 함수의 사용법에 대한 자료는 찾아보시면 많습니다. 이번 포스팅을 통해 얘..

티스토리툴바