GraphQL이 필요한 경우 1. 프론트엔드와 백엔드가 주고받을 데이터를 엄격하게 정의하고 싶을 경우 2. 데이터마다 서로다른 URL을 만들 경우에 지쳤을 경우 3. 필요한 데이터만 알뜰하게 주고 받고 싶을 경우 실습환경 https://bit.ly/graphql-example Fork를 누르면 코드를 수정할 수 있다. 상단에 open int New tab 눌르고 개발자 도구에 network를 보면 graphql이라는 주소로 서버와 통신한 내역을 볼 수 있다. 서버쪽으로 던져준 query를 볼 수 있는데 저것이 graphql의 문법이다. 서버는 던져준 코드를 인식해서 응답을 해주는데 응답한 데이터는 다음과 같다. 즉, 이러한 결과값으로 받은 데이터를 가지고 UI를 만들어 주고 있는 애플리케이션이다. 스키마..

웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있해 통신 하므로 웹 개발자라면 HTTP를 잘 알아야한다. 또한 CORS, CORB 에러를 해결하는데도 필요하다. HTTP에 대해서 알아보자 HTTP란 무엇인가? 🤔 - HTTP는 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. HTTP에서 P는 프로토콜, HTT는 Hypertext Transfer이다. *프로토콜? 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의. 통신 프로토콜을 쉽게 풀어보면 “나는 이렇게 줄 테니 넌 이렇게 받고 난 너가 준거 그렇게 받을께” 여기서 Hypertext는 뭐지 ? 브라우저에 어떤 것을 클릭하면 링크가 열려 다른 화면으로 이동하는 이런..

프론트 서버와 백엔드 서버의 도메인이 다를 경우 백엔드에서 프론트엔드로 쿠키를 생성시켜 줄 수 없고, 프론트에서 백엔드로 쿠키를 보낼 수 도 없다. 이 문제를 해결 하기 위해 withCredentials : true 로 설정한다. axios.post(`${EndPoint.APIServer}/login/`, { profile: { username: username, password: password } }, { withCredentials: true // 쿠키 cors 통신 설정 }) .then(response => { console.log(response); console.log(response.data); })

발생 에러 : Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here 경고: findDOMNode는 StrictMode에서 더 이상 사용되지 않습니다. findDOMNode는 StrictMode 내부에 있는 DraggableCore의 인스턴스를 전달했습니다. 대신 참조하려는 요소에 직접 참조를 추가하세요. 여기에서 ref를 안전하게 사용하는 방..

상황 CORS 이슈 발생! 원인 서버는 포트가 5000번이고 클라이언트는 서버가 3000번이다. 이렇게 두개의 다르 포트를 가지고 있는 서버는 아무 설정없이 request를 보낼 수 없다. Cors (Cross-Origin Resource Sharing) 정책은 번역 그대로 리소스를 공유할 때 적용되는 정책으로 다른 웹사이트에서 서버에 뭘 보내면 보안적인 이슈문제가 생긴다. 이때, 3000번, 5000번 각각을 Origin 이라고 하고 그 사이를 왔다 갔다 하는 것이다. 해결방법 프론트엔드 부분만 고쳐야 한다면 JSONP(JSON with Padding 또는 JSON-P) 로 모든 request를 get request로 바꿔서 보내면서 해결 할 수 있지만 제한적이게 된다. 백엔드 부분과 프론트엔드 부분을..

행위 주도 개발 (BDD) = 인수 테스트 주도 개발 (ATDD) 인수 테스트 주도 개발 ? 사용자가 개발자가 만든것을 받아서 사용자 요구사항에 맞는지 확인하는 테스트 이전에 배웠던 요구사항 분석, 유스케이스 다이어그램, 블랙박스(테스트 케이스), 화이트박스(코드 커버리지) , 테스트 주도 개발 은 개발자 관점이다! → 단위 테스트 필요 BDD란? 행위 주도 개발로 사용자 기능 위주이다. 고객과 기획자, 설계자, 구현자, 테스터들이 대화를 하면서 기능을 기술 (기능적인 측면) 목적은 고객의 요구사항을 맞추기 위해서 올바른 소프트웨어 개발 방법 ? 고객의 요구사항을 구체적인 사례(값)를 사용 고객과 개발자간의 지속적인 소통, 요구사항 개선 조정 및 이해 공유 🚨소프트 웨어 철학! 🚨 개방, 공유, 참여 이..

애자일 개발 방법론의 사용으로 테스트 주도 개발이 중요해졌다. 테스트 주도 개발이란?🤔 단위 테스트이다. 단위 테스트 코드를 개발한 다음에 제품 코드를 개발하는 방식 (클래스 단위로 테스트 코드가 가능) 실패할 만큼 테스트 코드 작성하고, 테스트를 통과할 만큼만! 기능별 업무 분담보다는 태스크 별로 업무를 공유하면서 진행하는 것이 좋다. 장점 : 문제 발생 시 즉각적인 원인 파악 해결 가능, 지속적인 통합 가능, 모든 부분에서 부분 테스트, 자동화된 리그레션 테스트(회귀 테스트) *리팩터링 : 동일 기능 + 성능 향상, 가독성 향상 JUnit을 활용한 TDD 실습 - 초간단 계산기 개발 블랙박스 테스트 케이스를 만들었다는 가정하에 요구사항 초기 값 설정하지 않았으면 0으로 설정 초기 값을 생성자를 통해 ..

첫 업로드 시 다른 브랜치를 만들지 않고 default 브랜치를 선택할 필요가 있다. master, main의 디폴트 값이 있는데, 이전에는 Github 레포지토리를 생성하면 기본 branch가 master로 할당되었으나 Black Lives Matter 운동과 관련하여 주종을 뜻하는 단어를 지양하게 되며 main이 새로운 default branch 명으로 사용되고 있습니다. $git branch -M main 메인 브랜치를 지정해줍니다👍