요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 이슈 실제 구현 /* style.css */ @font-face { font-family: spoqaSansNeo; font-weight: 700; src:url('/font/SpoqaHanSansNeo-Bold.ttf'); src: url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"), url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype"); } /* next.config..

React array state가 갱신되어도 view가 바뀌지 않을 때 const [members, setMembers] = useState([]); const deleteMember = (index: number) => { // member 삭제 const tmp = members; tmp.splice(index, 1); setMembers(tmp); } return( { members.map((member: string, index: number) => {member} } ); members라는 Array state의 값 하나를 삭제하는 함수이다. 해당 함수를 실행해도 표시되는 학생이 변하지 않는 이슈가 발생했다. 하지만 개발자도구를 통해서 보면 분명 해당 컴포넌트의 members State는 변경되..

쿠키가 발급되지 않을 때 KOS 프로젝트는 프론트엔드에 React.js를 사용하고 서버는 go lang 라이브러리 gin을 이용하여 진행중이다. 처음에 api를 만들고 나서는 postman이라는 툴로 제대로 동작하는지 검사한다. 처음에는 api연결이 순조롭게 되다가 로그인을 위해서 쿠키를 발급하는 api를 작성한 이후에 문제가 발생했다. 쿠키가 발급되지 않는다. 프론트엔드에서 받은 Network도 200으로 정상이고 set-cookie되는 것까지 보이며 response를 출력해보아도 정상이다. 그렇다면 왜 쿠키가 발급되지 않을까? 백엔드에서 프론트엔드에 쿠키를 저장시키기 위해서는 양쪽의 credential 속성을 모두 ON 해주어야하기 때문이다. 먼저 백엔드(go lang)의 코드는 다음과 같다. // ..

프론트에서 2가지 호출 api를 같은 함수에 두고 동시에 호출하였더니, 서버에서 뒷 순서로 호출된 api 실행 시 No database selecte error 가 난다. 해결 방법 : gorm.DB에 있는 sql.DB의 SetMaxOpenConns 함수를 이용하여, 동시에 허용 가능한 최대 커넥션 개수를 제한해주어야한다. Config.DB, err = gorm.Open(mysql.Open(Config.DBURL(Config.BuildDBConfig())), &gorm.Config{}) if err != nil { fmt.Println("Status: ", err) return } // 아래의 코드를 추가해준다. db, err := Config.DB.DB() if err != nil { fmt.Print..

사용한 코드는 다음과 같다. { colorArr.map(...) } 해당 코드는 정상동작하지만, 표시된 getContentAnchorEl을 속성으로 설정하지 않으면 다음과 같은 오류가 뜬다. Material-UI: You can not change the default `anchorOrigin.vertical` value when also providing the `getContentAnchorEl` prop to the popover component. Only use one of the two props. Set `getContentAnchorEl` to `null | undefined` or leave `anchorOrigin.vertical` unchanged. material-ui의 popove..

React와 Material UI라는 React UI 라이브러리로 프로젝트를 하던 중, 제목과 같은 오류가 발생했다. findDOMNode is deprecated in StrictMode. KOS 프로젝트에서도 발견했던 오륜데 대수롭지 않게 넘겼더니 여기서 걸리적거리는군 ㅠㅠ 어쨌든 해결해보자. 이유 저런 오류가 뜨는 이유는 무엇일까? 먼저, create-react-app을 통해 React 프로젝트를 생성하면, index.js가 다음과 같이 생겼다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM..

React JSX에서 array나 dictionary를 다루기 위해 forEach 문을 썼다면, map으로 변경해야한다. map 함수는 연산 후에 생성된 결과 array / dictionary를 반환해주기 때문에 JSX에서 나타나게 되지만, forEach문은 변수에만 연산 결과가 적용되고 반환해주지 않는다. 따라서, forEach 문을 사용하게 되면 연산만 되고 결과는 JSX로 출력되지 않는다.

TS2691: import .ts file 참고 : https://github.com/microsoft/TypeScript/issues/37582 https://github.com/microsoft/TypeScript/issues/27481 https://github.com/microsoft/TypeScript/issues/39965 이 오류는 typescript 파일을 찾을 수 없어서 나는 오류이다. import A from 'A.tsx'; 위와 같이 파일을 불러오면, import 전에 ts / tsx 파일이 js / jsx 로 변환되기 때문에 해당 파일을 찾을 수 없다는 에러가 뜬다. 따라서, 단순히 확장자를 붙이지 않고 import 해오는 것이 가장 간단한 방법인데 그렇게 하면 esl..