분류 전체보기

    [React] Deep Dive 모던 리액트(27) 리액트 18 변경점
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(27) 리액트 18 변경점

    지난 글에 이어서 리액트 18의 변경점을 알아보자. 리액트 18에서 클라이언트에서 리액트 트리를 만들때 사용되는 API가 변경되었다. createRoot 기존 react-dom의 render를 대체할 메서드이다. 리액트 18 기능 사용을 위해서는 createRoot와 render를 함께 사용해야 한다. //before import ReactDOM fro 'react-dom' import App from 'App' const container = document.getElementById('root') ReactDOM.render(,container) //after import ReactDOM fro 'react-dom' import App from 'App' const container = documen..

    FrontEnd/프로그래머스

    [JS] 스티커모으기(2)

    dp를 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/12971 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음에 dp를 활용하여 해결하려 했다. 2차원 배열의 dp를 활용하여 dp[i] = [a,b] 라는 꼴을 두었을때 i번째 스티커까지의 최고합 = [ i번째 스티커를 찢은경우 , i번째 스티커를 찢지 않은경우 ] 이런식으로 스티커를 찢은 경우와 안찢은 경우를 기록해나가며 문제를 해결하였다. 이때 dp[i][0] = dp[i-1][1] + sticker[i] 라는 점화식이..

    FrontEnd/프로그래머스

    [JS] 기지국 설치

    그리디를 활용하여 해결하였다! https://school.programmers.co.kr/learn/courses/30/lessons/12979# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 먼저 stations 배열을 정렬을 해준다. 이후 기지국을 넣어줘야하는 구간을 구해준 후 해당 구간에 설치해야 하는 기지국 수를 더해주면서 구해줬다. 여기까진 크게 어렵지 않은데 신경써야할 부분이 2가지 정도가 있다. 1. 구간이 음수로 나오는 경우 기지국 설치가 필요없는 경우이므로 패스해준다. 2. 마지막 기지국부터 마지막 아파트까지의 부분을 생각해줘야 한다. f..

    [Axios] response.header.authorization 접근 안되는 오류
    오류들

    [Axios] response.header.authorization 접근 안되는 오류

    OAuth로그인을 구현하던 중 서버에 Api를 보내서 userId를 받아오는 과정이 필요했다. 백엔드 친구가 이를 헤더에 authorization에 넣어줬는데 아무리 해도 console창에 undefined가 나왔다. const res = await requestLoginApi({ state, returnState, code, scope, prompt, nonce, }); console.log("res", res); console.log("headers", res.headers.authorization); 문제의 해결은 아래 스택 오버플로우를 보고 해결할 수 있었다. (역시 gpt보다 아직은..) https://stackoverflow.com/questions/61604379/req-headersauth..

    [React] Deep Dive 모던 리액트(26) 리액트 18 추가된 훅
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(26) 리액트 18 추가된 훅

    이전 글에서는 리액트 17의 변경점에 대해서 다뤘었다. 17이 점진적인 업그레이드를 위한 준비를 했다면 리액트 18에서는 다양한 기능들이 추가되었다. 변경점들을 하나씩 알아보자! useId useId는 컴포넌트 별로 유니크한 값을 생성해주는 새로운 훅이다. 컴포넌트 내부에서 사용할 수 있는 유니크한 값을 생성하는 것은 생각보다 쉽지 않다. 하나의 컴포넌트가 여러 곳에서 재사용되는 경우나 컴포넌트 트리에서 컴포넌트가 가지는 모든 값이 달라야 한다는 제약을 고려해야하기 때문이다. 만약 아래와 같은 코드가 서버사이드 렌더링이 된다고 생각해보자. export default function UniqueComponent(){ return {Math.random()} } 해당코드는 오류를 내보내게 된다. 하이드레이션..

    [React] Deep Dive 모던 리액트(25) 리액트 17 변경점
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(25) 리액트 17 변경점

    리액트 17버전은 추가된 기능은 없으며 호환성이 깨지는 변경사항 즉 기존 사용하던 코드의 수정을 필요로 하는 변경사항을 최소화 한 점을 가장 큰 변화로 삼는다. 리액트 팀 피셜로 10만개 이상 컴포넌트 중 호환성이 깨지는 변경사항에 영향을 받은건 20개 미만으로 대부분 어플리케이션이 문제 없이 17 버전으로 업그레이드 할 수 있을 것이라고 한다. 리액트가 버전을 업그레이드 하는 경우는 이전 버전에서 호환되지 않는 API가 있거나 새 버전을 사용하는데 있어 작동방식이 달라지는 경우다. 즉 리액트팀은 새로운 버전이 릴리스되면 이전 버전의 API 제공을 완전히 중단해버렸다. 이런 전략은 리액트 개발팀에게는 유용하겠지만 오래된 코드를 가지고 돌아가는 실제 웹 애플리케이션에는 그렇게 좋지 못한 일이다. 따라서 레..

티스토리툴바