neda의 블로그

230728 프로그래머스 1차 비밀지도 자바스크립트 비트연산자만 사용 한 풀이 문제 설명 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 for문을 통해 두 배열에서 값을 가져온다 Bit OR 연산자 (|) 을 통해 가져온 두 값을 겹친다 (rowNum). Bit AND 연산자 (&) 를 통해 겹친 값의..

230727 타입스크립트 never 타입 타입스크립트에는 숫자에서의 0이나 값에서의 null처럼 없는 타입을 정의하는 키워드 never가 있다 음 봤을 때는 뭔가 직관으로 이해가 가지 않았다. 예외를 처리? 아무것도 없는 타입? 절대 반환하지 않는 함수는 뭐지? 그러다 타입을 그냥 집합이라 생각하는 순간 공집합이라는 말이 쉽게 이해가 됐다 never 타입 never 타입에는 any타입을 포함하여 다른 모든 타입을 할당할 수 없다. 또한 never 타입은 모든 타입의 서브 타입이다 이는 공집합에 집합이 있을 수 없고, 모든 집합이 공집합을 포함하는 일반적인 개념과 같다. never 가 사용되는 대표적인 경우는 2가지는 아래와 같다 항상 예외를 발생시킬 때 절대 반환하지 않는 함수의 반환 유형일 때 neve..

230726 리액트 이벤트 핸들러에 커링 사용하기 리액트에서 이벤트 핸들러를 등록하다보면 이벤트 객체 e뿐만 아니라 다른 값을 함께 넘겨야 하는 경우가 있다. 예를 들면 아래와 같이 alert창을 띄우기 위해 문자열을 넘기고, 이벤트 전파를 중단시키기 위해 e 객체가 필요한 경우이다 이벤트 핸들러 함수 useState의 대표적인 사용법으로 input의 value와 onChange를 사용하여 입력값을 관리하는 것이다 onChange에 handleChange함수를 그대로 넣을 수 있는 것은 onChange에서 e객체를 기본으로 인자로 넣어주기 때문이다 다시 말해 이벤트 핸들러로 등록할때는 e를 받는 함수를 작성하면 되는 것이다 ... const [value,setValue] = useState('') con..

230725 프로그래머스 삼총사 문제 풀이 문제 숫자로 배열이 주어질 때, 배열에서 3개의 원소를 조합으로 뽑아서 모두 더 했을 때 0이 되는 경우의 수 구하기 조합: array.length C 3 https://school.programmers.co.kr/learn/courses/30/lessons/131705 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 조합 경우의 수 구하기 앞의 숫자보다 높은 경우만 생각-> 왜? 정렬 했을 때 모두 같기 때문 [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] 6가지는 ..

230724 리액트 팀 프로젝트 마무리 회고 프로젝트 설명 프로젝트 명 : Stylegacy 필수 작업 : 회원가입/로그인, 카카오 맵 API, 게시글 작성 CRUD 추가 작업 : 검색 필터(외부 API: algolia), 댓글, 좋아요 느낀점 react query에서 일일이 key를 지정하고 mutation을 만드는 것이 손이 많이갔다. react query는 query를 할 때 기존의 캐싱된 데이터가 있다면 가져오고 새로운 데이터를 가져와서 교체하게 되는데, 이때 캐싱된 데이터가 에러이면 잠시 에러가 난 상태로 판단하게 되어 기존 캐시를 지우도록 헀다 Keep - 이번 프로젝트에서 진행한 과정 중 다음 프로젝트에서도 유지했으면 하는 부분. 공통 버튼 컴포넌트 먼저 만들고 시작한 것 프로젝트 기획 단계..

230723 내일배움캠프 10주차 WIL Facts 리액트 심화 주차 팀과제로 지도 api를 이용한 웹사이트 제작 대부분의 데이터 가져오기에 react-query를 사용 algolia 서비스를 이용하여 전체 텍스트 검색 수행 Feelings 파이어베이스에서는 자체적으로 텍스트 검색을 해주지 않아서 아쉬웠는데, 외부 서비스를 통하여 대신 할 수 있었다. 검색 서비스 때문에 리액트 쿼리를 두 번 사용하여 무한 스크롤을 구현하려고 했는데, 실패했다. 2개의 쿼리를 한 번에 사용하려다 보니 꼬인 것 같다. Findings 리액트 쿼리에 대한 이해도가 더 높아진 것 같다. 리액트 쿼리에서 제공하는 api의 사용법이나 캐싱 등에 대해 더 알 수 있었다. 검색 api를 이용하면 데이터베이스와 검색 api간의 동기화 ..

230721 파이어베이스에서 doument id 값을 이용해 쿼리하는 방법 doucumentId()와 where in... 을 사용하면 반복문을 통해 getDoc()를 하지 않아도 한 번에 doumentId값을 사용해 여러 문서를 가져올 수 있다. https://firebase.google.com/docs/reference/js/firestore_?hl=ko#documentid @firebase/firestore | Firebase JavaScript API reference firebase.google.com import { collection, documentId, getDocs, query, where } from 'firebase/firestore'; const getPosts = async (i..

230720 css 글자가 넘칠 때 단어 나누기 css로 글자가 넘침 방지하기 글자 넘침 정해진 content의 width 밖으로 글자나 나가는 현상 width가 고정됐을 때 발생할 수 있다 overflow: hidden 넘치는 모든 컨텐츠를 숨김. border 부분에 글자가 걸치면 짤려지기 때문에 이상하게 보일 수 있음 overflow-wrap: break:-word 단어가 넘칠 때 단어를 기준으로 줄 바꿈을 실행 단어가 길 경우 끊기지 않도록 다음 줄에서 시작하고, 이로 인해 이전 줄에 공백이 생길 수 있다 word-break: break-all 단어가 넘칠 때 항상 줄 바꿈을 실행. 항상 줄바꿈 하기 때문에 공백은 덜 생기지만, 단어가 끊겨 읽기 어려울 수 있음

230719 리액트쿼리 파이어베이스에서 사용하기 리액트 쿼리는 서버에서 데이터를 가져오거나 캐싱, 업데이트 등을 수행하는 라이브러리이다. 리액트쿼리는 rest api 뿐만 아니라 파이어베이스 웹 sdk에도 사용할 수 있다. 리액트 쿼리를 사용해 파이어베이스의 데이터를 쿼리하고 뮤테이션하는 방법을 알아본다 파이어베이스 함수 문서 가져오기 -> getDocs 문서 생성 -> addDoc 문서 삭제 -> deleteDoc import { getDocs } from 'firebase/firestore' export const getTodos = async () => { const querySnapshot = await getDocs(collection(db, 'todos')); return querySnapsh..

230718 react query에서 mutate는 하나의 인자만 받는다. 문제 상황 react query를 생각안하고 2개의 인자를 가지는 함수를 만들었던 것이 문제였다 const addComment = async (storeId, content) => { console.log(storeId,content) // storeId는 정상적으로 가져오지만, content 값은 undefined .... }; const mutationAddComment = useMutation(addComment) mutationAddComment.mutate(id,inputComment) 원인 mutate 시에는 싱글 변수 또는 객체를 인자로 받는다 mutate에서 객체로 넘기고 addComment에서 구조분해할당으로 변수..