flowerfor

form 태그는 사용자와의 커뮤니케이션을 위한 태그이다. 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 http request method라고 한다. GET 전송 url에 입력 데이터를 쿼리스트링으로 보낸다 url에 전송 데이터가 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터에 한계가 있다. REST API에서 GET메소드는 특정 리소스의 조회를 요청한다. POST POST방식은 request body에 담아 보내는 방식 ..

리덕스란, 자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구이다. state를 관리하기 위한 오픈소스 JavaScript 라이브러리. 리액트를 사용하면서, 상태 관리를 하는 것은 매우 중요한 요소다. 리액트로 만들 수 있는 SPA는 변화가 복잡, 다양해지는 경우가 많아진다. 이들의 데이터 교류 또한 복잡해지기 때문에 이를 효율적으로 관리할 방법이 필요하다. 리덕스는 이러한 복잡한 상태 관리를 효율적으로 할 수 있게 도와주는 도구이다. 리덕스를 사용하면, 상태값을 컴포넌트에 종속시키지 않고, 상태관리를 바깥에서 할 수 있게 도와준다. 리덕스는 복잡한 State 관리를 단방향 데이터 흐름체계로 만들어준다. 하지만 구조가 간단한 경우는 React만으로도 충분히 가능하다. 리덕스 용어..

기존 웹사이트를 개발할 때는 HTML, CSS, JavaScript는 각자 별도의 파일에 두는 것이 원칙이었는데, React나 Vue, Angular과 같은 라이브러리가 인기를 끌면서 여러 블록으로 분리하여 개발하는 방법이 주류가 되고있다. 웹페이지를 HTML, CSS, JavaScript로 분리하는게 아니라, 여러 개로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 적용하는것이 널리 사용됩니다. CSS-in-JS - (Styled Components)라이브러리를 사용하면 가능합니다. $npm i styled-components 위의 코드로 간단히 설치할 수 있다. 설치 후에는 package.json에 styled-components가 추가된다. 1. props 인자와 || 을 통한 ..

react는 npm으로 부트스트랩을 설치해야한다. 난 버튼을 설치해볼 것이다. npm install react-bootstrap bootstrap 설치 후에 react안에 있는 index.js에서 버튼을 import 해주고 import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' ; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 난 button을 import 할 것이기 때문에 react-bootstrap에서 버튼을 ..

이유는 : 터미널 위에있는 powershell 때문 ctrl+shift+P 누르고 Terminal: Select Default Shell 을 입력해준 다음 Command Prompt를 선택하고 터미널 종료 후 새 터미널 생성하면 된다.

예전에 absolute, relative를 공부한데 이어서 두번째 공부를 해보려고 한다. 위와 같은 코드를 그림으로 보면 내가 궁금했던 건, 자식 요소에서는 어떻게 적용될까의 문제여서, div의 자식요소를 정해보았다. 여기서 내가 궁금한 점은 두 가지였다. 1. 부모 요소가 자식요소보다 z-index 값이 높으면 어떻게 될까 2. 부모가 아닌 부모와 동등한 요소가 자식 요소보다 앞으로 나올 수 있을까 를 직접 그려봤다. 1번의 경우는 div.c {background-color: #a1230d; top: 100px; left: 320px; z-index: 10;} div.d {background-color: #36f4a5; top: 30px; left: 50px; z-index: 1; } 결론 : 자식요소..

처음에 내가 직면한 오류코드 netlify build command failed react 이것때문에 netlify deploy settings - build settings - edit settings에서 base directory랑 publish directory를 각각 build, 디렉토리폴더/build Publish directory를 CI=npm run build로 바꾸고 난리도 아니였다. 과도한 구글링의 부작용! package.json에서 build를 삭제까지 해봤었다. 사실은 다 필요없고 내가 코드오류를 발견하지 못해서 해멘거였다. 저렇게 할 필요도 없었던 것인데ㅠㅠ (base , publish directory 건드리지 않아도 됐었다) 어찌저찌 배포에는 완료했는데 page not found..

react로 카카오톡 공유하기 기능을 만들다가 error 4019가 떴다. 4002 error는 많아보였는데 4019는 검색 결과가 없어서 당황했ㄷr.. 나는 처음에 개발환경을 위한 도메인과 netlify로 배포한 홈페이지만 입력했었다. 하지만 개발환경에서 카카오톡 공유기능이 되는것과 별개로 배포한 홈페이지에서는 공유가 되지 않아 따로 찾아봤다. 카카오톡 개발자 - 로그인 - 내 에플리케이션 - 플랫폼 - web에서 사이트 도메인 입력을 해주면 되는데, 밑의 사진처럼 원래 배포한 홈페이지에 www를 붙이면 정상적으로 동작한다.

코드에서 아무리 찾아봐도 오류가 없어보여서 재부팅 한 후 npm i react-router-dom 치니까 잘 된다.

XMLHttpRequest는 서버와 상호작용하기 위해 사용하는 자바스크립트 내장 생성자이다. 이를 이용하면 서버(url)로부터 데이터를 받아와 전체 페이지의 새로고침 없어도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있다. > 이 프로그래밍 기법을 Ajax라고 한다. Ajax는 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법이다. Ajax 기법에 기초한 XMLHttpRequest 비동기 통신은 세 단계를 거친다. XMLHttpRequest 객체 생성 (new객체) 서버와 통신할 때 필요한 정보 및 처리 방법 기입 요청을 전송해 통신시작 서버에 요청을 보낼 떄는 XMLHttpRequest 객체의 open메소드로 요청을 초기화 하고, 이후..