본문 바로가기

전체 글211

next-redux-wrapper 이해하기 nextjs 에서 redux 를 사용하기 위해서는 next-redux-wrapper 가 필수적으로 필요한 이유가 궁금했다. 본문 일부 내용 번역 정적 앱용 Redux 를 설정하는 것은 다소 간단하다 모든 페이지에 제공되는 단일 Redux 저장소를 만들어지기 때문에. Next.js static site generator or server side rendering 이 관련되면 Redux 연결 구성 요소를 렌더링하기 위해 서버에 다른 저장소 인스턴스가 필요하기 때문에 작업이 복잡해지기 시작합니다. 또한 초기 값 관련해서 redux 의 store 에 접근해야 할 수 도 있다. next-redux-wrapper 는 자동으로 스토어 인스턴스를 생성하고 모두 동일한 상태를 갖도록 합니다. 이해 과정 실제로 처음 n.. 2023. 2. 2.
react 에서 inline style 의 단점 직접 carousel 만들던 중 콘텐츠를 움직이기 위해 태그의 inline style left 속성을 변경하는 방법을 사용했었는데 리팩토링 하고자 자세히보니 불필요한 리랜더링이 있었고 찾아보니 react 에서 inline style 을 사용시 같은 값이더라도 리랜더링이 일어나 사용하지 않는 것이 좋고 styled-component 등을 활용하는게 좋다고 한다 3 줄 정리 간단하게 react 는 새로운 document와 기존 document 구조를 대조해서 리랜더링 여부를 판단 후 변경한다. js 세상은 {} !== {} 이 성립하며 inline style 은 객체형식이다 inline style 을 적용시키는 코드가 있다면 어떤식이든 리랜더링이 될 것이고 무의미하거나 불필요한 리랜더링일 가능성이 높으니 고.. 2022. 10. 12.
ESLint 와 prettier ESLint ES + Lint es : Ecma라는 기구에서 만든 Script = 표준 Javascript Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미 ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구입니다. 일종의 가이드라인 코드상 문제가 되는 부분만을 지정할 수도 있고 , 아니면 에러 기준을 직접 지정할 수도 있다 또한 간단하고 전반적인 코딩스타일(ex. tab은 몇 칸을 기준으로 할 것인가? / ; 여부 등)까지 지정할 수도 있다. 예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사.. 2022. 9. 2.
[GitHub] git private clone 인증 관련 오류 : Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. private repository clone 하려던 중 아이디, 패스워드 치는데 오류가 났다. 패스워드 틀린줄 알고 한참 삽질하다 뒤늦게 발견하고 찾아보니 말 그래도 인증방식이 바뀌었단다. 오류를 소중히하자 비밀번호가 토큰(P.. 2022. 8. 30.
스로틀(Throttle)과 디바운스(Debounce) 단도직입적으로 말하자면 스로틀(Throttle)과 디바운스(Debounce)는 이벤트를 기반으로 실행하는 자바스크립트 특성상 이벤트(event)를 효과적으로 제어(제한)하는 방식(기술)이다. 짧은 시간 내에 반복되는 이벤트로 인한 발생하는 연산들을 제어하여 성능저하를 막고 의도한 만큼만 실행 하기 원할 때 사용한다. 디바운스(Debounce) 순차적으로 반복되는 이벤트를 그룹화하여 끝나는 시점에 실행시켜 제어하는 방식 ※ 예시 : 창 크기 resize 스로틀(Throttle) 일정시간 동안 이벤트가 한번만 실행되도록 제어하는 방식 ※ 예시 : 무한 스크롤링 둘의 차이점 스로틀(Throttle)과 디바운스(Debounce) 의 가장 큰 차이점은 스로틀(Throttle) 은 적어도 X 밀리 초마다 정기적으로.. 2022. 8. 28.
MPA 와 SPA , SSR 와 CSR MPA (multi page application) 여러 페이지로 구성된 웹 어플리케이션으로 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SSR 방식을 사용함 SPA (Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션으로 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 SSR 과 CSR 그리고 SEO 간의 관계 SEO (search engine optimization) SEO 통칭(검색 엔진 최적화)는 검색엔진으로 부터 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말한다. .. 2022. 8. 28.
[CSS] 이미지 테두리에 그림자 원 형태의 소셜 로그인 이미지 버튼에 그림자를 주려했으나 box-shadow 을 주니 네모난 모양의 그림자가 생겨 방법을 찾으니 기존에 박스형태의 태그에 그림자 주는 방식은 box-shadow 속성을 주었지만 이미지에 그림자를 주려면 CSS filter 속성 중 drop-shadow을 주면된다. ※ CSS filter : 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하며 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 사용됨 + 최신브라우저만 지원하므로 확인하고 사용해야한다 drop-shadow(x y blur color) styled-component 로 적용한 모습 const ImgBox = styled.div` width: 200px img { width: 100%; filter: .. 2022. 8. 28.
사수라는 신기루 그저 유희를 위한 픽션 2022. 8. 26.
유사 배열 객체와 반복 작업 가끔 반본적인 객체형태의 데이터를 반복 작업해야 한다면 골머리가 아프다 배열형태라면 쉽게 처리하기 쉽지만 객체형태라면 쉽게 처리가 힘들기에 되도록 배열형태로 값을 주고받곤 했다. 그러던 와중 유사 배열 객체와 이 객체를 반복작업을 할 수 있는 메서드를 알게되었고 유사 배열 객체 (array-like object) 라는 한정적인 객체의 형태(?) 만 가능한 작업으로 보이나 알아두면 좋을 듯 하여 정리하게 됨 쓰게될지는 모르겠음 가장 큰 특징으로 lengh 속성이 따로 가지고 있다는 것과 키값이 순서가 눈에 띈다 그것을 제외하면 객체와 다름 없어 보인다. 실제로 [[Prototype]]: Object 특별하게 다른놈은 아닌듯 하다. // 유사 배열 객체 모양 const arr_like = {0: 'I.. 2022. 8. 26.
리덕스 관련 알아두면 좋은 내용 redux-action 액션 생성함수와 리듀서를 작성할때 간단하게 활용하는 라이브러리 시작하자마자 모르는 문법이 보여서 체크하고 감 객체 리터럴 표현을 반환하기 위해서는 함수 본문을 괄호 속에 넣음 params => ({foo: bar}) createAction() : 액션 생성 함수를 만들어주는 함수이다. handleActions() : 기존 switch 를 활용한 방법보다 효율적이고 가독성있게 리듀서를 작성할 수 있다. createAction() 을 활용하여 만든 액션 생성 함수는 액션 객체를 던져주는게 아니기 때문에 바로 dispatch 해서 사용이 불가능하고 redux-thunk 같은 액션 생성 함수를 dispatch 할 수 있게 만들어 주어야 편하게 바로 사용이 가능하다. 기존 쓰던방식 cons.. 2022. 5. 31.
개발 중 이슈 보고서 [4월 01일 ~ 5월 13일] 원래는 주마다 이슈를 정리하여 올리려 했으나 프로젝트 개발에 힘쓰느라 몰아 올리게됨 노력할예정 삽질 리스트 1. 웹팩 오류 상황 설명 : 어쩌다 그랬는지 심신미약 상태로 개발하던 중이라 정확히 기억나지는 않지만 이런 오류를 만났다. ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30 Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;D:\react_file\Project\temp_porject\node_modules\jws\lib&#39; > BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules .. 2022. 5. 13.
웹팩과 번들러 웹팩의 이해 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 모듈(module)을 위한 번들러(bundler) 라고 소개한다. 모듈(module) : 재사용 가능한 코드조각 번들러(bundler): JS, CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고, 작업의 결과물은 번들(Bundle)이라고 한다. 마찬가지로 묶어주는 역할을 하는 웹팩(webpack) 같은 친구들을 번들러(bundler) 라고 한다, 웹팩을 사용하는 이유 웹팩을 사용하는이유 근본적으로 번들러(bundler)사용하게 된 이유는 번들러(bundler) 존재하기 전에 웹에서 는 두 가지 방법으로 브라우저에서 JavaScript를 실행했다. 각 기능에 대한 스크립트를 포함해서 사용 모든 프로젝.. 2022. 4. 12.

티스토리툴바