전체 글
-
[React] 검색어 자동완성 키보드 이벤트 기능 구현React 2023. 1. 5. 16:40
영화 검색 기능 구현 인풋에 텍스트를 작성하면 인풋 아래 자동 완성 목록이 나타나게 되는데 위와 같이 검색키보드 이벤트를 통하여 목록들 하나씩 선택되도록 구현해보려고 한다. 키보드 아래 방향키를 누르면 아래의 자동완성 목록들이 하나씩 선택되고 인풋에 선택된 영화의 제목이 나타난다. 자동 완성 목록 끝에서 아래 방향키를 누르면 다시 목록의 첫번째 아이템으로 이동한다. 첫번째 아이템에서 방향키 위를 누르면 기존의 내가 검색한 텍스트가 다시 나타난다. 선택된 검색 아이템을 기준으로 스크롤이 자동으로 된다. 엔터를 누르면 인풋에 나타난 텍스트를 쿼리로 받아 검색 결과 페이지로 라우팅된다. * 기능 구현 과정에 초점을 두어 코드를 간소화하여 작성하였다. 사용될 state 및 ref const [isAutoSear..
-
[JavaScript] 특정 요소에 따른 스크롤 자동 조정 : scrollIntoView()JavaScript 2023. 1. 3. 22:49
element.scrollIntoView scrollIntoView()를 호출하면 호출된 요소가 사용자에게 보여지도록 상위 요소의 스크롤이 이동된다. element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean 파라미터 element.scrollIntoView(scrollIntoViewOptions); // Object 파라미터 alignTop true : 상단을 기준으로 스크롤 - scrollIntoViewOptions: {block: "start", inline: "nearest"}와 동일하다. false : 하단을 기준으로 스크롤 - scrollIntoViewOptions: {block: "end", inline: "nearest..
-
[Cookie] 다른 도메인 간의 쿠키 전송etc. 2022. 12. 28. 17:07
사용자 인증에 관련하여 클라이언트와 서버 간에 쿠키를 주고 받는 코드를 작성하였다. 하지만 네트워크 탭 응답 헤더의 Set-Cookie를 보면 분명 잘 뜨지만 애플리케이션 탭의 쿠키를 확인해보면 뜨지 않았다. 문제가 무엇일지 찾아본 결과 cors 정책 때문에 클라이언트, 서버 각각 credentials 설정을 해주어야 했다. 클라이언트 나의 경우 rtk query를 사용하고 있어 baseQuery에 credentials: "include"를 추가하였다. baseQuery: fetchBaseQuery({ baseUrl: 서버도메인, credentials: "include", }), 서버 express를 사용하고 있어 cors 모듈 옵션에 추가하였다. app.use(cors({ origin: 클라이언트도메인..
-
[electron] gatsby + electron으로 데스크탑 앱 배포etc. 2022. 12. 18. 16:17
기존의 gatsby 프로젝트에 electron을 설치하여 데스크탑 앱을 만들어 배포하려 한다. 아래의 글을 기반으로 작성되었다! GitHub - soulehshaikh99/create-gatsby-electron-app: Discover the easiest way to get started with the blend of Gatsby and Electro Discover the easiest way to get started with the blend of Gatsby and Electron JS App - GitHub - soulehshaikh99/create-gatsby-electron-app: Discover the easiest way to get started with the blend of ..
-
[React] 별점 기능 구현React 2022. 12. 14. 17:19
별점 기능에 대해 참고할만한 글이나 영상들을 찾아보다가 리액트로 별 반개 씩 별점을 주는 기능은 별로 없어서 써본다. import { useState } from "react"; import StarInput from "./StarInput"; const StarRating = () => { const [rating, setRating] = useState(0); const handleClickRating = (value) => { setRating(value); }; return ( 별점 // 생략 {rating} ); }; export default StarRating; 대략 전체적인 구조로 useState를 사용하여 rating이란 이름으로 상태를 관리하였고 라디오 인풋으로 5점부터 ~ 0.5점까지..
-
[티스토리 오류] 특정 브라우저 카카오 로그인 안됨etc. 2022. 11. 24. 00:57
분명 아이디랑 비밀번호를 맞게 입력하여도 잘못된 비밀번호라며 오류가 떠서 답답했다. 그래서 크롬말고 티스토리 앱과 다른 웹 브라우저로 시도해보니 로그인이 돼서 황당티비... 가끔 티스토리가 자체가 HTTP 에러가 뜨는데 그때 쿠키를 지우면 해결이 되었던 기억이 있어 티스토리랑 카카오 관련 쿠키랑 인터넷 사용 기록들을 삭제해 봤더니 그래도 똑같았다.... 그래서 그냥 인터넷 사용 기록 삭제를 전부 다 적용하여 삭제를 했더니 해결은 되었다. 휴 근데 왜 꼭 티스토리는 이런 문제가 생길까.... 흑
-
[컴활] 컴활 1급 합격 후기etc. 2022. 11. 11. 11:54
드디어 컴퓨터활용능력 1급 6트만에 합격...! 합격한 시험 볼 때 당시에 이정도면 합격이라는 느낌이 딱 왔었다. 그래서 다음 시험 신청을 하지 않았다. (불합격 했으면 좀 절망했을지도) 5트에서는 그 느낌이 긴가민가 했는데 엑셀 66으로 불합격했었다. 너무너무 아쉬웠다. 사실 액세스는 전부 합격이라서 엑셀만 조금 더 신경쓰면 됐었다. 엑셀같은 경우에는 갑자기 분서작업에서 0점처리를 많이 당했다. 그래서 점수가 확 깎였던...ㅠ 어느 한 문제에서 막혔을 때 시간을 너무 끄는 것 같다면 일단은 그 문제를 넘기는 판단력도 중요한 것 같다. 나 같은 경우엔 계산작업에서 한 문제가 안풀려서 그냥 넘기고 프로시저 2번을 맞췄던 기억이 난다. 공부법이라면 유명한 인강을 듣지 않았고 오직 유튜브에 있는 인강들로만 계..
-
[React] 함수형 컴포넌트와 함수 컴포넌트React 2022. 11. 9. 18:09
지나가다 얼핏 '함수형 컴포넌트'가 아니라 '함수 컴포넌트'라고 불러야 한다라는 말을 들었다. 나도 여러 리액트를 다루는 글에서 '함수형 컴포넌트' '함수 컴포넌트' 용어 둘 다 쓰는 경우를 많이 봤었기 때문에 궁금하여 찾아보게 되었다. Rename "functional component" to "function component" by gaearon · Pull Request #863 · reactjs/reactjs.org Related to discussion in https://mobile.twitter.com/getify/status/993127777057550336 Yay or nay? github.com 결론은 초보자들에게 '함수형 컴포넌트'는 '함수형 프로그래밍'과 연결되어 혼란을 야기할 수..