개발자_승딱 개발자_승딱

어? 작업하다가 보니까 브랜치를 안따고 작업하고 있었네?? 그때 임시 저장 할수 있다. git stash > 브랜치 생성,이동 > git stash push 작업한 결과물 이동됨

넥스트를 이용해서 초기 화면을 ssr 로 보여주는 경우에 초기페이지는 html과 css 만 가지고 렌더트리를 형성한 후에 보여준다. 근데 내가 만약 데이터를 로드한 이후에 그데이터가 반영된 페이지를 보여주고 싶을때 사용 하는 메서드가 getinitialproperty() 로 렌더트리형성하기 이전에 실행할 코드를 넣어주면 해당코드가 반영된이후에 렌더 하게된다 styled component 의 경우 css-in-js 방식이기 때문에 이전글에서 getinitialproperty() 메서드 안에서 필요한 작용을 해줬었다.

babel-plugin-styled-component 설치 >> .babelrc 파일에 presets : ["next/babel"], plugins: [[ "styled-components",{ ssr : true }]] 설정 _documents 파일에 styledsheet 다 불러와서 렌더트리 생성 이전에 스타일 코드 주입 하는 코드 추가(ex.https://github.com/vercel/next.js/tree/canary/examples/with-styled-components) 이렇게 해주면 이전에 초기페이지 html + css(없음) dptj js 로 만든 css 를 초기페이지에 적용하고 렌더링 한다~

nextjs 를 사용할경우 초기페이지를 ssr 을 통해서 보여주게 된다. ssr을 통해서 보여주게 될경우 서버에서 html css 가 파싱된채로 렌더트리를 받고 브라우저는 그리기만 하면 된다. 그리고 이후에 자바스크립트 코드를 받아오게 되는데 csr의 경우 Html (비어있음) 과 js 를 받아온뒤 js 를 실행하고 렌더링을 해준다. 따라서 css in js 의 형식으로 코드가 작성이 된경우 csr 에서는 css 가 반영된채로 초기 화면이 보여지지만 ssr 의 경우 초기페이지 보여준후 js 파일을 받아오는 사이에는 css 정보가 반영되지 않는다.(css in js. 형식인경우) 사용하다보면 화면이 처음에 하얀창에 글씨만 잇는경우 본적이 있을거다 개발자 도구 >> setting >> debugger >> ..

이전에는 multipageform > 스마트폰 출현 > singlepageapplication 필요해짐 (ServerSideRendering) (ClientSideRendering) 각각 url 변경의 의미가 다르다 ssr 에서는 새로운 요청을 의미하지만 csr 에서는 단지 페이지의 전환만을 이야기 한다. 변화된 페이지에 해당하는 데이터를 이용해 렌더링 한다. ssr 은 아예 그려진 페이지 를 받아오는 개념 이고 csr 은 빈페이지에 클라이언트측에서 페이지를 그린다. 기존의 ssr은 필요한 리소스가 있을때 url 변경하면서 요청 하면서 리소스가 반영된 페이지를 받아오지만 csr 같은 경우 모든리소스를 처음에 다 받아오고 url 변경시 가지고 있는 리소스를 이용해 클라이언트측에서 화면을 변경한다. csr ..

로그아웃시에 localStorage 에서 토큰을 지우는 작업이 되어야하는 부분 테스트 코드를 작성하는데 const localStorageSpy = jest.spyOn(window.localStorage,'removeItem'); userEvent.click(screen.getByText('logout')); expect(localStorageSpy).toBeCalledWith('_token') // localStorage.removeItem('_token') 이 작동되나 확인하는코드 근데 이게 테스트가 안됬다 왜냐면 window.localStorage 는 removeItem 이라는 method를 가지고 있지 않기때문이다 ㅎㅎ spyOn 으로 mocking 할때는 jest.spyOn( 객체 , '메서드네임..

window.location.href : history 관리하면서 페이지 변경 Http 요청 새로함(reload) window.location.replace: history 관리안함 페이지 변경 , reload window.location.reload(false) : default 위와 같고 지금페이지 새로고침 데이터를 웹캐시에서 가져옴 window.location.reload(true) : true 로 하면 다른건위와 같고 데이털ㄹ 다시 서버에서 가져옴 router.push : reload없이 history 관리하면서 페이지이동 router.replace : reload 없이 history 없애고 페이지 이동

prototype 에 접근해서 메서드 빌려쓰고 this 는 call 이나 apply 로 적용해서 사용하기