잡다한 이야기

일단 나는 react나 vue.js와 같은 프론트엔드 프레임워크에 대해서 잘 알고 있지는 않다. 그래서, 개인프로젝트하거나 서버API를 화면을 통해 테스트를 할때에 주로 타임리프와 같은 템플릿엔진을 사용해 화면을 만든다. 최근에는 기존에 만들어둔 템플릿엔진을 통한 화면들을 react로 리팩토링 해보고자 끙끙댔었는데, chat GPT의 도움을 받아 변환시켜보니 매우 수월하게 작업을 완성시킬 수 있었다.(변환된 코드를 보고싶으면 여기 github코드를 참고하시길바랍니다.) 그러나, react에 대한 지식이 부족하다보니 코드는 변환시켰지만 큰 틀에서 프로젝트 구조는 다소 유치한 수준이라는 감안하길 바란다. 더불어, react에서 react_native 코드도 변환시켜보니 같은 React이다 보니 보다 더 ..

비동기, 콜백, promise, async/await등 javascript 관련한 글들을 읽다보면, 동기식 코딩에 익숙한 java 등의 개발자들은 다소 어리둥절 할 것 같다. 일단, 콜백상황자체가 일어나는 이유를 이해하기가 힘들기 때문이다. 오늘은 왜 자꾸 자바스크립트에서 비동기이슈가 튀어나오고, 그에 따른 콜백은 왜 나오는 것인지에 대해 글을 써볼까 한다. 콜백지옥 및 콜백지옥을 해결하기 위한 promise, async/await 등은 이 글을 읽고 난 뒤에 다시 검색해 보면 더 잘 이해가 될 것이다. 먼저, 콜백이라는 것은 "A함수 실행 -> B함수 실행 -> C함수 실행" 등 일련의 실행 순서를 보장하기 위해서 A함수 안에 또다른 B함수를 매개변수로 집어 넣고, B함수안에 C함수를 매개변수로 넣는것..

spring boot를 통해 rest api 서버를 구축하고, react를 통해 데이터를 가져와 화면에 뿌려주는 간단한 구현을 해보고자 한다. 매우매우 단순한 화면을 통해 프론트엔드 / 백엔드 연동 샘플을 만들고자 한다. *참고 git) https://github.com/kimseonguk197/react_spring_connect REACT 프로젝트 생성 커맨드창에 아래 명령어를 통해 react프로젝트를 생성한다.(mac기준, npm이 설치 됐다 가정하겠다.) npm create react-app myreact 에러가 나지 않았다면 해당 폴더로 이동후에 react를 실행한다 cd react-app npm start 3000번 port에 아래와 같은 이미지에 나왔다면, 정상 구체적인 코딩은 일단 스프링 ..

preflight -> xhr 로컬 브라우저에서 api서버로 리소스를 요청할때 아래와 같이 XHR (XML Http Request) 요청을 보내기 전에, preflight를 통해, 서버의 허용여부를 체크하게 된다. preflight시 get요청은 CORS에러 발생 서버와 도메인이 다르다면, CORS에러가 날 것이고 서버에서 CORS를 허용해준다면 요청이 정상적으로 처리 되어야 한다. 그런데, 서버에서 CORS에 대한 전체 허용을 해줘도 GET요청은 아래와 같이 에러가 발생한다. POST는 정상이다. orgin null이 문제 이유가 무엇일까? 일단 서버 프로그램을 하나씩 뜯어봐야 하지만, 결론을 말하자면 request헤더에 담겨 있는 origin이 null이라는 것이 문제이다. Spring 서버 프로그램..