Closed byyoungjin closed 3 years ago
css - How to use absolute path to import custom scss, when using react + webpack? - Stack Overflow
Basic Features: Built-in CSS Support | Next.js
나는 src/styles 구조이므로
const sassOptions = {
includePaths: [path.join(__dirname, '/src/styles')],
};
https://blog.logrocket.com/how-to-write-reusable-css-with-sass/
SSR draft.js 에러 https://github.com/facebook/draft-js/issues/2332
원인 : switch 문에서 default 에 그냥 return 해서 {} 가 반환되지 않아서 생긴 오류
switch (phase) {
case PHASE_DEVELOPMENT_SERVER:
env = {};
break;
default:
return // 삭제함
}
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
getBoundingClientRect 는 Viewport 에 대한 top, left 값을 준다. 그래서 scroll 이 변해도 viewport 에 대한 상대값을 주기때문에, 내가 사용하는 조건을 적용하려면 스크롤 값을 더 더해줘야한다. 기존에 (top + window.scrollY) 를 적용하여 해결!
if (blockNode) {
const blockNodeRect = blockNode.getBoundingClientRect();
const { x, top } = blockNodeRect;
setTop(top + window.scrollY);
setLeft(x);
setScale(1);
}
Unsplash image block 에 초기 useEffect 로 readonly 설정하는 로직이 있었다. input 에만 적용되어야 하는데, image 블록이 넣어진 뒤에도 적용되고 있어서 생기는 문제, image 블록이 들어간뒤에는 readOnly 로 설정하지 않도록 바꿔서 해결!
useEffect(() => {
if (!unsplashImageInfo) {
setIsEditorReadOnly(true);
if (searchInputRef && searchInputRef.current) {
searchInputRef.current.focus();
}
}
}, []);
typescript 좋은 소스 https://typescript-kr.github.io/
원인은 EditorState.createEmpty() 할때 decorator 를 전달해주지 않아서. createEmpty(decorator) 를 하니까 제대로 적용됨.
결론. 위 createEmpty(decorator) 의 decorator 만 적용이 되고 내가 만든 customPlugin 안에 decorator, 분명 decorator 를 쓸수있다고하는데 decoartor 를쓰는 plugin 들의 decorator 는 적용이 되지 않았다. linkyfy 를 써봤는데, 적용이 되지 않음 이유는??
조금더 알아봐야겠지만 Draft.js 의 Editor 에서도 decorator prop 은 없다. Editor.createEmpty(decorator) 형식으로 decorator 를 적용한다.
따라서 위 방식으로만 적용하도록 하고, decorator prop이나, custom plugin 상에서 decorator 는 사용하지 말자.
decorator 를 사용하는 plugin 들이 어떻게 적용되는지 알아보자
관련이슈 https://stackoverflow.com/questions/56169228/react-spring-transition-leave-animation-not-working
위와 비슷하게 자식컴포넌트 관계를 없애고, useTransition 을 부모 로 옮겨오니 제대로 작동. 아마도 rendering 되는 과정에서 useTransition 자체가 drop 되어버려서 leave 애니메이션이 작동하지 않은것 같다.
export const useModal = () => {
const [showModal, setShowModal] = useState(false);
const [isBrowser, setIsBrowser] = useState(false);
const transitions = useTransition(showModal, {
from: { transform: 'translateY(100%)' },
enter: { transform: 'translateY(0%)' },
leave: { transform: 'translate(100%)' },
});
useEffect(() => {
setIsBrowser(true);
}, []);
const Modal = ({ children }: { children: React.ReactNode }) => {
if (isBrowser) {
return ReactDOM.createPortal(
transitions((transitionStyles, item) =>
item ? (
<animated.div
className={styles.modalOverlay}
style={transitionStyles}
>
{children}
</animated.div>
) : (
''
)
),
document.getElementById('modal-root')!
);
} else {
return null;
}
};
return { Modal, setShowModal };
};
기존에 나는 redux, redux-saga 를 활발하게 썼는데
그럼에도 불구하고 모든 state 를 하나의 store 에 넣고, dispatch 하는과정에서 불필요한 state 까지 store 에 넣는 경우도 생겼고, 너무 redux store 에만 의존하는것같아서 다른방식으로 한번 구현해보려고한다. redux store 와 saga 가 다소 무겁지 않나 해서 빼고 구현해보고 차이점을 보려고 한다.
하고자하는것은.
이부분이 제일 어려운것 같은데, prop drilling 을 막으면서도,
예를들면 EditorState 는 editor 에, userState 는 앱 전반을 감싼다.
page 나 component 단에 들어가게되면 너무 불규칙하게 state 가 관리될것같아서 layout 에 들어가는게 가장 합리적이라고 생각한다. layout 자체가 어떤 비즈니스 로직에 맞춘 wrapper 를 넣는 것이고, layout 과 함께 state 를 넣어주는게 꽤 합리적인것같다. 그리고 "기본적으로 state 는 layout 에서 관리한다" 라는 규칙도 생긴다.
다만 layout 역시 각 page 를 감싸기때문에, 서로 다른 page 간의 routing 시, state 가 유지되진 않는다. 그래서 "page 간의 routing 에도 유지되야하는 state 는 _app.tsx 에서 관리한다." 라는 두번째 규칙을 만들 었다.
그래서 기준을 정리하자면
https://medium.com/strands-tech-corner/react-state-management-without-redux-d39c7087039d
Context Api 는 기본적으로 Rerender 한다. , prop drilling 은 prop 이 같으면 rerender 하지 않는다. Redux 도 마찬가지 기능을 제공한다.
과연 redux 대신 contextApi 를 쓰는게 올바른가? 오히려 rerender 때문에 안좋은점도 있다. 둘중에 하나만 쓴다는게 정답은 아니다. 둘을 같이 쓰는것도 방법이 될 수 있다.
모듈화 되길 원하는 component 가 있다면, redux 를 안넣는게 답일수 있다. 넣더라도 모듈화된 component 최상단에만 redux 의 state 를 전달하고, 이후에는 prop drilling 이나, context API 를 이용할 수있다.
You mgiht not need Redux _dan ambramov 에 따르면 redux 를 씀으로써 얻을 수있는 이점들이 있고, 이게 필요하다면 쓰면되고, 아니라면 local state 로 처리하면 된다고 함. server side rendering 에서 persist state 처럼.. 전반적으로 redux 를 option 으로 끼고 가는 건 나쁘지 않은 선택인듯하다.
redux 에서 제공하는 기능이 많고, saga 를 사용할 수있는점, 전반적으로 optimization 되어있다는점에서 redux 를 사용안할 이유는 없는것 같다. 다만 global 로 관리가 필요한 state 에 대해서만 적용해야 한다. redux-toolkit 이 괜찮아보인다 사용해보자
모듈화가 필요한 부분은 prop 을 drilling 하거나, context API , hooks 를 이용해서 구현해보자.
next.js 는 기본적으로 serverside 에서 fetching 해서 넘겨준다. redux 를 적용하려면 next-redux-wrapper 라이브러리 이용해서 server side 에서 initial prop 을 넘겨주는 방법을 사용해야한다.
이쯤에서 드는생각은 global state 가 진짜 필요한 경우가 있는가
일단 page 단위에서 hydrate 된 page 를 받은뒤 Rendering 관련된 state는 contextApi& hook 을 이용해도 될것 같다. 그냥 Prop 으로 넘겨도 될것같고.
페이지간 연결되는 global State 가 필요한 경우에도 Using react Context Api in nextjs 를 이용해서 구현하면 될것 같다.
auth 의 경우엔, next-auth 라이브러리를 사용하면 global state 로 가져가야할 경우는 없다.
saga 의 기능도 hook으로 충분히 구현이 가능하다.
state 란 페이지에서 나타내는 정보 라고 볼수 있을것 같다. 그럼 페이지가 로드될때 fetch 해오면 되는데, next.js 에서는 server side 에서, spa 앱은 client 에서 fetch 한다. 그정보를 global 에 저장할 필요는 없을것 같고, scoped 해서 각 페이지별로 컨트롤 하도록 구현하면 될것 같다. reload 하더라도 state 가 저장되게 하려면, local storge 를 활용하면 될 것같다.
초기로딩시 backend server 쪽 코드에서 user 가 authenticated 되어있지 않음. front 코드에서는 user 가 authenticated 되어있음
일단 Local 상황이고, delpoy 했을때 어떻게 바뀌는지 확인해볼 예정
profile, about 페이지들은 정상작동하고
post 관련페이지만 오류, ->리로딩시 auth context 를 가지고 오지 못하는 문제인듯하다. -> 일단 serverside prop 으로 auth 정보를 보내줘야할듯 하다. -> context 는 페이지 단위에서만 사용하고 페이지간에 공통 state 관리는 serverside 단에서 먼저 이뤄져야 할 듯하다.
api index 를 지우고 생성하는것들이 있어서 바로는 안됨
-> auth 부분에서 오류 -> aws console 상에서 환경마다 통일하고 시도해보자.
마크업으로만 구성