공부하자

결론부터세팅 설정 이것저것 다 만졌는데  그래도 안되면 vscode 업데이트를 해보자! 문제상황 며칠 전 까지 오류란 오류는 다 잡아줬던 까탈스럽지만 사랑스러운 나의 린트,,,가 갑자기 작동을 안한다!!!!!왜지뭐지내가뭐잘못만졌나ㅜㅜㅜ 인터넷에 있는 린트 설정이란 설정은 다 돌아봤다. 하지만.. ㅠ 그래도 안 됨 보통 시도하는 것들1. 설정의 Default Formatter를 prettier / eslint로 둔다 2. setting.json에서 추가 규칙들을 설정한다. 하라는 거 다 했는데도 안된다면?!!!! 3. ESLint 출력 창 확인VSCode의 View > Output을 선택하고 출력 창의 드롭다운 메뉴에서 ESLint를 선택하여 ESLint 확장 프로그램의 출력을 확인한다.여기서 오류가 발생..

usestate 남발 코드를 react-hook-form로 리팩토링 하기로 하였다현재 코드는 비밀번호 재설정 기능을 구현하고 있는 상태 기존 코드import { EMAIL_DOMAIN } from '@/constants/email.constant';import { BoxButton, SuffixTextField } from '@yourssu/design-system-react';import { StyledEmailContainer, StyledSubTitleText, StyledTitleText } from './EmailInput.style';import { useState } from 'react';import { postAuthVerificationEmail } from '@/home/apis/au..

종강을 했다 3-1이 끝이 났다!!! 네프 플젝은 아직도 안 했다 핳 내일의 내가 하겠지 뭐...이제 블로그 보는 사람들이 많아져서 부끄럽지만 그냥 쓸거다 ㅎㅎ 2024 상반기 회고올 해도 절반이나 지났다 말이 안 돼 시간이 왜이렇게 빠르지일단 월 별로 정리하고 활동 별로 정리를 해보자면1월 : 봉00씨에게 반 협박받아서 나간 해커톤 -> 첫 리액트 공부 시작 / 코어자바스크립트 스터디2월 : 현근이한테 만들어준 ㅋ n년째 놀림받는 웹 페이지이자 내 첫 프로젝트3월 : 동아리 지원 / 솦프 react native로 개발 시작4월 : 과제 지옥 / 새 알바 적응5월 : 모든게 합쳐짐 -> 과제 / 알바 / 솦프 / 동아리 / 수업 ㄹㅈㄷ6월 : 근데 다 적응됨 그렇다면 이제 기말고사를 보자... 기말이 5..

const observer = useRef();...const lastMovieElementRef = useCallback( (node) => { if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && hasMore) { setPage((prevPage) => prevPage + 1); } }); if (node) observer.current.observe(node); }, [hasMore]);동작 과정useCallback 설정: lastMovi..

umc 6주차 과제중 Debounce와 Throttling이라는 개념을 배웠다! Debounce : 연속된 이벤트 호출을 제한하여 마지막 이벤트만 처리하도록 하는 기술→ 연속된 이벤트가 발생할 때마다 타이머를 리셋하고, 일정 시간이 지난 후에 이벤트를 처리Debounce는 주로 어디에 사용하나요?ex) 검색어 자동 완성 기능에서 사용자가 입력을 멈춘 후에만 서버에 요청을 보냄사용자 입력 필드에서 입력이 끝난 후 일정 시간 동안 입력이 없을 때만 서버에 요청을 보내는 경우적용 과정1. debounce hook 만들기2. 적용하기 1. useDebounce.js hook 구현import { useState, useEffect } from "react";export const useDebounce = (val..

유어슈 pr 리뷰 중에 좋은 걸 배워서 기록해봄 쭌 감사링 나중에 보여줘야징 ㅎㅎ 이전 상태에 기반하여 상태를 업데이트 해야할 때 update function 사용이 더 낫다는 의견이 있었다! 그의 리뷰,,지금은 코드가 문제없이 동작하지만 추후에 비동기 로직등이 handleCheckAgree() 함수에 추가되면 상태 업데이트가 예상치 못하게 이루어질 수 있을 것 같아요!handleCheckAgree()와 같이 이전 상태에 기반하여 상태를 업데이트 해야할 때는 update function을 쓰는게 좋은 습관인 것 같습니다.   기존 코드const [agreed, setAgreed] = useState(false);...const handleCheckAgree = () => { setAgreed(!ag..

react native로 열심히 개발을 하던 도중에 난관에 부딪혔ㄷ ㅏ 리액트에서는 페이지 라우터가 있어서 렌더링 할 때 조건부로 렌더링이 가능했는데 리액트 네이티브에서는 스택으로 쌓이는 형태라 스택을 다시 나오는 방법을 모르겠어서 (내가 못 찾은 걸 수도...) 조건부 렌더링이 쉽지 않았다! 내가 원하는 건 토스 처럼 매끄러운 화면 전환 + 하단 네비게이션 바가 고정된 채 컴포넌트들만 렌더링 되는 거! 하지만 스택으로는 새로운 페이지가 자꾸 옆에서 튀어나오고... 네비게이션 바를 가리고... 그런 상황이 발생했다 해결 방법 -> home네비게이션에서는 home.js만 두고 그 안에서 렌더링에 조건을 달아 조건부 렌더링을 하자! 조건부 렌더링 하는 방법 1. retuen 안에서 삼항 연산자 쓰기 retu..

https://www.acmicpc.net/problem/11403 11403번: 경로 찾기 가중치 없는 방향 그래프 G가 주어졌을 때, 모든 정점 (i, j)에 대해서, i에서 j로 가는 길이가 양수인 경로가 있는지 없는지 구하는 프로그램을 작성하시오. www.acmicpc.net 문제 정리 그래프 만들고 경로 찾으면 되는 문제 생각 dfs 써서 그래프 연결 유무 확인을 하자! 방문했으면 1, 안했으면 0 출력 코드 #include #include using namespace std; int N, M; int graph[100][100]; bool visited[100]; void dfs(int start){ for(int i=0 ; i> N; for(int i=0 ; i graph[i][j]; } }..

https://www.acmicpc.net/problem/1240 1240번: 노드사이의 거리 첫째 줄에 노드의 개수 $N$과 거리를 알고 싶은 노드 쌍의 개수 $M$이 입력되고 다음 $N-1$개의 줄에 트리 상에 연결된 두 점과 거리를 입력받는다. 그 다음 줄에는 거리를 알고 싶은 $M$개의 노드 쌍 www.acmicpc.net 문제 정리 주어진 정보로 트리를 만들고 노드 사이의 거리를 출력하는 문제 생각 트리 문제가 너무 오랜만인데... dfs나 bfs 쓰면 될 것 같다 1. 그래프를 만든다 2. dfs로 노드 사이의 최단거리를 구한다 3. 출력 2차원 배열에 두 노드와 노드 사이의 거리를 입력받고 노드를 연결하고 (양방향) 그 후 dfs를 실행하는데 배열이 0이 아니라면 탐색을 하고 0이면 df..

REST(Representational State Transfer) 소프트웨어 아키텍처 스타일의 하나로, 분산 시스템에서 리소스를 정의하고 관리하기 위한 웹 서비스 설계 원칙을 의미한다. REST는 클라이언트와 서버 간의 통신을 위한 표준화된 방법을 제공하여 서비스의 유연성, 확장성, 성능 등을 향상시킨다. Representational State Transfer의 약자로 자원을 표현하고 상태를 전송하는 웹 아키텍처 스타일이다. 이를 통해 클라이언트와 서버 간에 데이터를 주고받을 수 있으며 주로 HTTP 프로토콜을 통해 이루어진다. RESTful API란? REST API(Representational State Transfer Application Programming Interface)는 REST 원..