JS 동작원리 js는 싱글 쓰레드 기반 언어이므로 호출 스택이 하나고 한 번에 한 작업만 처리할 수 있다. 이에 따른 문제는 하나의 로직을 수행하는데에 시간이 오래 걸리면 다른 로직이 멈춰버린다는 것이다. 이를 해결하려면 비동기 콜백을 사용할 수 있다. 런타임 js 런타임은 JS엔진, web api, task queue, event loop, render queue로 되어있다. 엔진 js 엔진의 대표적인 예는 Google의 V8 엔진이다. Chrome과 Node.js에서 이를 사용한다. memory heap : 메모리 할당 call stack : 호출 스택 위의 두가지로 엔진은 구성되어있다. Web API DOM, Ajax, TimeOut 등의 Web API가 잇다. Callstack에서 비동기 함수가 ..

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는 변경되..

React 환경변수 등록 기존 개발 시 개발 환경에서 React를 프론트로 사용할 때, 코드 사아에서 환경변수를 이용하려면 어떻게 해야할까? 최상위 폴더에 .env 파일을 만든다. .env 파일에 REACT_APP으로 시작하는 환경변수를 정의한다. REACT_APP_ADMIN_KEY=hi 코드 상에서 process.env.REACT_APP_ADMIN_KEY와 같은 형태로 사용한다. 이렇게 간편하게 이용할 수 있다! 배포 시 하지만 서비스를 위한 build 후에는 환경변수를 읽어들일 수 없기 때문에 build와 동시에 build에 대한 매개변수(argument)로 환경변수를 세팅해주어야한다. NERA는 github action에서 docker/build-push-action@v1.1.0 이라는 action..

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

SOP, COP Same Origin Policy document 객체는 출신인 origin을 가지고 있고, 이는 js에서 `document.location.origin`으로 확인할 수 있다. document 내에서 리소스들과 상호작용할 때, origin이 다르다면 리소스를 사용하는 데에 있어서 제한을 두겠다는 것이 SOP(Same Origin Policy)이다. Origin 판단 Origin이 같은 지는 Protocol, Host, Port로 판단하는데 url 구조를 보면 다음과 같다. http://localhost:3000 Protocol://Host:Port 세 가지가 모두 같으면 같은 Origin이라고 판단되는 것이다. IE는 양쪽 도메인 모두 높음 단계의 보안 수준일 경우 Same Origin ..

Ajax는 js를 이용한 비동기 통신으로, 클라이언트 서버 간의 xml(Extensible Markup Language)데이터를 주고받는 기술이다. 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. Ajax 방식을 이용한 웹 API는 XMLHttpRequest 부터 시작하여 fetch를 거쳐 axios까지 다양하다. XMLHttpRequest는 복잡하고 가독성이 떨어지기 때문에 fetch api가 ES6에서부터 표준이 되었는데, 따라서 현재 fetch api는 기본 라이브러리로 따로 설치하지 않고 사용해도 된다. axios는 Node.js에서 XMLHttpRequests를 사용하기 좋게 만들어둔 api이며 따로 설치해주어야 동작한다. TOP Ajax API를 참고하면 더 많은..

ECMAScript 공부 ES5 이전 ES3 (1999) : 정규표현식, try/catch문 string string.length : 길이 속성 string.indexOf(string, [start]) : 해당 글자의 시작 index 위치 반환 string.lastIndexOf(string, [start]) : 해당 글자의 마지막 시작 index 위치 반환 string.search(string) : indexOf와 비슷하지만 정규표현식 사용 x string.slice(index, index2) : index부터 index2-1까지 자르기 음수 index는 뒤에서부터 셈 string.substring(index, index2) : slice와 비슷하지만, 음수 불가 string.substr(index, l..

프론트에서 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..