프로그래밍 언어란 ? 컴퓨터가 이해할 수 있는 기계어는 우리가 일상생활에서 사용하는 언어와는 너무 다른 0과 1로 이루어진 2진 코드를 사용한다. 그렇기 때문에 우리는 사람과 언어 사이의 다리 역할을 하는 프로그래밍 언어가 필요하다. 프로그래밍 언어는 고급언어와 저급 언어로 나뉜다. 고급 언어란 컴퓨터와 대화할 수 있도록 만든 사람이 쉽게 이해할 수 있는 언어이다. 따라서 고급언어로 만든 언어는 컴퓨터가 바로 이해할 수 있어, 컴파일 과정을 거쳐 기계어로 변환해야한다. 프로그램 언어 작성 -> 소스파일을 컴파일 -> 기계어 파일 -> 컴퓨터가 이해함 프로그래밍 언어에는 다양한 언어가 존재하는데, 각 언어마다 실행하는 방법이 다르다. c, c++, c#은 소스파일을 컴파일을 통해 기계어로 만들어 실행하지만..

개발을 하던 도중에 CORB라는 에러를 발견했다. CORS에러는 많이 들어봤지만 CORB에러는 처음 들어봐서 이참에 공부 해보기로 한다. CORB란 ? Cross-Origin Read Blocking(CORB)의 약자로, 악의적은 의도의 웹 사이트로부터 막기위해 도움이 되는 새로운 웹 플랫폼 보안 기능이다. 민감한 정보가 포함되어 있을 수 있고, 기존 웹 기능에 필요하지 않은 경우 브라우저가 웹 페이지에 특정 교차 출처 네트워크 응답을 제공하지 못하도록 설계되었다. 예를 들어 또는 태그에서 요청한 원본 간 text/html 응답을 차단하고 대신 빈 응답으로 바꾼다. 이는 사이트 격리에 포함된 보호 기능의 중요한 부분이다. CORB가 발생 했을 때 대처 대부분의 경우 차단된 응답은 웹 페이지의 동작에 영향..

웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 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); })

swr로 전역적인 상태 관리하기 프론트에서 데이터를 전역으로 저장하고 싶으면 리덕스가 필요하다. 하지만 리덕스에도 단점이 있다. 리덕스는 코드양이 많고, 한번 가져왔던 정보여도 컴포넌트가 마운트 될 때마다 새로 가져와야하며, 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위한 동기화 작업이 필요하다. 따라서 리덕스를 사용하지 않고 그 대안으로 swr을 사용해 보고자 한다. SWR은 데이터 가져오기를 위한 React Hooks 라이브러리로 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 되며 그리고 UI는 항상 빠르고 반응적이다. im..

발생 에러 : 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를 안전하게 사용하는 방..

useContext는 context로 공유한 데이터를 쉽게 받아올 수 있게 도와준다. 하지만 컴포넌트 사용성의 재사용이 어려워질 수 있기 때문에 필요할 때만 사용하는것이 좋다. prop drilling을 피하기 위한 목적이라면 component composition컴퍼넌트 합성을 먼저 고려해보자. 그렇다면 리덕스랑 Context? 리덕스는 Context와 비교해서 훨신 더 풍부하고 많은 기능을 제공하기때문에 재사용성 측면 보다는 사용하고자 하는 목적에 대해 더 생각하고 무엇을 사용할지 결정하는게 더 맞는 표현 같아요 Context는 리덕스보다 가볍기 때문에 대부분에 경우 작은 프로젝트들에게 더 잘 어울린다고도 할 수 있겠지만 목적에따라 늘 그렇지 않을수도 있답니다! null이 아닐 때, context/ ..

부트스트랩의 기본 개념 : 홈페이지 전체가 12개의 컬럼으로 구성되어있다. One of three columns One of three columns One of three columns container로 한번 감싸고, row 와 col이 들어간다. 위 코드는 col 이 4개씩 할당 받게 된다. 총 도합이 12개가 된다. 뒤에 숫자를 붙여서 작성할 수 있다. col-sm-8 col-sm-4 col-sm col-sm col-sm sm은 스몰이고 , md, lg, 를 가장 많이 쓴다. 컨테이너 안에는 여러개의 줄이 포함될 수 있다. md를 사용하는 것이 좋다. 사이트 크기를 점점 줄이다가 768px이하가 되면 변화가 일어난다. 네개의 컬럼을 차지한 블럭이 일렬로 밑으로 나오게 된다. 즉 모바일 화면에서 보..