개발 기록

리액트에서 AJAX 사용하기 위해 설치를 해준다. 더보기 npm i axios { /* axios.Method('서버url') .then((변수)=>{}) -> 성공했을 때 .catch(()=>{}) -> 실패했을 때 */ axios.get('https://raw.githubusercontent.com/professorjiwon/data/main/data2.json') -> 서버의 주소 .then((result)=>{ console.log(result.data); let copy = [...clothes, ...result.data] setClothes(copy) }) .catch(()=>{console.log('실패');}) /* - 서버로 보낼때 axios.post('서버 url', 보낼 데이터) ...

부트스트랩 적용 리액트 부트스트랩 서버 끄고, index.html에 링크 복사해서 넣어주기 아니면 App.js에 CDN넣어주기 사용하기 전에 import해주어야 한다. → 사용하고자 하는 요소 모두에 ( . 있는 것 제외 ) import './App.css'; import { Button, Navbar, Container, Nav } from 'react-bootstrap'; function App() { return ( React-Bootstrap Home Link Success{''} ); } export default App; 그림이 있다면 import해주어야 한다.

동적 UI를 만드는 방법 (모달 창 만들기) - 유저가 조작 시 형태가 바뀌는 모달 창, 탭, 서브메뉴 1. HTML, CSS로 미리 디자인 컴포넌트로 모달 생성 function Modal() { return ( 제목 날짜 상세내용 ) } 2. UI의 현재 상태를 state로 저장 true이면 보이고, false이면 안보임 3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성 제목을 클릭하면 모달 창이 뜨도록 해준다. 처음에 false (안보임) 으로 설정된 modal창을 setModal로 true로 상태를 변경해주어 모달 창이 나오도록 한다. 한번 누르면 창이 보이고, 다시 누르면 창이 닫히도록 해야 한다. true → false → true → false 이렇게 바꿔주면 됨 ! -> 현재 ..

컴포넌트를 사용하면서 다른 값 넣기 import './App.css'; function App() { return ( 맛집 추천 Blog 이레구내식당 2월 28일 🐷 영남집 2월 28일 🐷 얌샘김밥 2월 28일 🐷 ); } function List() { return ( 이레구내식당 2월 28일 🐷 ) } export default App; function App() { let title = ['이레구내식당', '영남집', '얌샘깁밥']; return ( 맛집 추천 Blog {title[0]} 2월 28일 🐷 {title[1]} 2월 28일 🐷 {title[2]} 2월 28일 🐷 ); } ===> 이렇게 하면 각 인덱스 번호에 무슨 값이 들어가는지 알아야하는 문제가 발생한다. useState ⇒ stat..

Component : 다른 객체 ( 함수 ) 가져다 쓴다. => 객체로 만들어 놓고 필요 시 사용 import logo from './logo.svg'; import './App.css'; import { React } from 'react'; const user = { firstName : "Hong", lastName : "GilDong" }; function Student(user) { return user.firstName + " " + user.lastName; } function App() { const isStudent = true; return ( Start React 2024_AddInEdu component 실습 {isStudent? {Student(user)}님 환영합니다. : 학생이..

JSX(JavaScript XML) : 자바스크립트 + XML을 추가한 확장형 문법으로 브라우저에서 실행되기 전 바벨을 통해 자바스크립트 형태로 변환됨 JSX 문법 반드시 부모 요소 하나로 감싸야 한다. → div 두 개 안됨 2. return 되는 JSX는 하나의 요소로 감싸야 한다. 3. JSX 안에서 자바스크립트 표현식을 쓸 수 있다. 4. return문 안에서 IF문 대신 조건부 연산자 사용 - JSX 내부의 자바스크립트에서 if문을 사용할 수 없다. ( 즉, return문 안에서 대신 { } 안에 조건부 연산자를 사용 ( 삼항 연산자 ) ) 5. 속성 name class 대신 className으로 사용 6. 항상 닫는 태그가 있어야 한다. 7. 주석 {/* 주석 */}

1. NODE.JS 설치 2. extensions에서 다음 항목 설치 3. 터미널로 프로젝트 생성 이렇게 생성하면 오류가 난다... ? ==> 설치한 파일과 경로가 맞지 않아서 생기는 문제 ! 위치를 정확히 설정해주고 재설치 해본다. 설치완료 ! 이렇게 자동으로 뜬다. 이 화면이 확인이 된다면, 리액트를 사용할 준비가 되었다는 뜻이 더보기 이 코드는 React 애플리케이션의 기본적인 구조를 보여줍니다. 각 부분에 대한 설명은 다음과 같습니다: import logo from './logo.svg';: logo.svg 파일을 가져와서 logo라는 변수에 할당합니다. 이 이미지는 앱의 로고로 사용됩니다. import './App.css';: App.css 파일을 가져와서 현재 파일에서 사용합니다. 이 파일에는..

DOM : 하나의 웹 페이지 정보를 모두 담고 있는 자바스크립트 객체 화면 구조의 변경이 있을 경우 DOM으로부터 수정할 부분을 찾아 일일이 다 수정된 후 전체 구조 생성 → 보다 효율적인 방법 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 게 아니라 기존 뷰를 다 버리고 처음부터 새로 뷰를 생성하여 보여주는 방식 장점 어떻게 변화를 줄 지 신경 쓸 필요 없음 변화가 있으면 기존 것은 버리고 정해진 규칙에 따라 새로 뷰를 생성하여 보여줌 단점 CPU 점유율 증가 리액트 → facebook에서 개발한 유저인터페이스 라이브러리 JSX(JavaScript XML) 사용 데이터 바인딩 용이 SSR CSR 서버 측 랜더링 최초 화면 로딩이 빠름 화면 갱신이 느림 부분 갱신을 위한 전체 페이지 reload 클라이..

Aggregations : 집계 Metrics Aggregations : 산술 min, max, sum, Avg POST ball_index/_bulk { "index" : {"_id" : "1" } } {"team" : "Golden States Warriors","name" : "Stephen Curry", "points" : 30,"rebounds" : 3,"assists" : 4, "blocks" : 5, "submit_date" : "2024-10-11"} { "index" : {"_id" : "2" } } {"team" : "Golden States Warriors","name" : "Stephen Curry","points" : 20,"rebounds" : 5,"assists" : 8, "b..

Object movie로 조회하면 안 나옴. movie.name해야만 값이 조회가 됨 → name은 Loki이고, side는 villain인 문서를 검색 GET movies/_search { "query":{ "bool":{ "must":[ { "match":{ "movie.name":"Loki" } }, { "match":{ "movie.side":"villain" } } ] } } } name이 Loki인 것을 가지고 오고, 그 이후에 side가 villain인 것 가지고 온다. 결과 -> 2개의 문서를 가지고 온다. { "took": 15, "timed_out": false, "_shards": { "total": 1, "successful": 1, "skipped": 0, "failed": 0 }..

한글 형태소 설치 엘라스틱서치 -> bin위치에서 cmd창 열어서 설치하기 합성어(복합어) 처리 3가지 옵션 none : 복합어를 분리하지 않음 discard : 복합어 분리 mixed : none과 discard 모두 저장 PUT my_nori2 { "settings":{ "analysis":{ "tokenizer":{ "nori-none":{ "type":"nori_tokenizer", "discompound_mode":"none" }, "nori-discard":{ "type":"nori_tokenizer", "discompound_mode":"discard" }, "nori-mixed":{ "type":"nori_tokenizer", "discompound_mode":"mixed" } } } } ..

데이터 색인 : 역인덱스 ( 단어 → 매핑문서 ) → tokenizer filter GET _analyze { "text":"Today is a day where I feel lucky and happy", "tokenizer":"whitespace", "filter":[ "lowercase", // 소문자로 변환 "stop", // 불용어 제외 "snowball" // 단어의 원형 ] } "snowball" // 단어의 원형 → 을 넣으면, y는 i 로 바뀌어서 저장됨 빼면 lucky, happy 그대로 나옴 "stop", // 불용어 제외 → is, a, and 이런거 빠짐, 빼고 넣으면 다 나옴 결과값 { "tokens": [ { "token": "today", "start_offset": 0, "..

Bool query : 여러 쿼리를 조합하여 사용 가능 must : 쿼리가 참인 문서들을 검색 must_not : 쿼리가 거짓인 문서들을 검색 should : 검색 결과 중 이 쿼리에 해당하는 문서들의 score를 높여줌 filter : 쿼리가 참인 문서를 검색하지만, score를 계산하지 않음 must보다 검색 속도가 빠르다 [사용법] GET 인덱스명/_search { "query":{ "bool":{ "must":[ { 쿼리 }, ... ], "must_not":[ { 쿼리 }, ... ], "should":[ { 쿼리 }, ... ], "filter":[ { 쿼리 }, ... ] } } } EX01 ) 조건 - 팀이 jazz 이고, golden states 가 참인 것 ( 둘 다 참인 것 ) gol..

원하는 조건에 따라 검색이 가능하다. 먼저 이름이 park인 데이터를 조회하고, 이름이 park이면서 나이가 22인 데이터를 조회해본다. - term : 정확히 일치한 것 검색 ( 숫자 ) ⇒ 문자는 검색이 안될 수도 있다. ( 파싱한 값에 따라 달라지므로 잘 사용하지 않음 ) GET basketball/_search { "query" : { "term" : { "points":32 } } } - match : 단어가 포함되어 있으면 검색 ( 대/소문자 상관없음 ) GET basketball/_search { "query" : { "match" : { "team":"States" } } } + match에서 공백은 or를 의미한다. GET basketball/_search { "query" : { "ma..

classes라는 인덱스를 GET으로 조회해보면, 아직 만들어진 인덱스가 없어서 오류가 뜬다. 1. 인덱스 만들기 - PUT 2. 생성한 인덱스 조회 - GET 3. 인덱스 삭제 - DELETE 삭제한 후에 다시 조회해보면, 삭제했기때문에 오류가 나온다. 5. PUT 으로 다시 인덱스 생성한 후 문서 생성하기 -> ( [표현법] POST/인덱스명/_doc/id )하고, 안에 내용 넣기 생성한 문서 확인해보기 -> 인덱스 번호 1번인 것 조회 만약 ID를 넣지 않고 문자를 생성하면, 문자 + 숫자 조합으로 ID가 자동으로 생성되는데 이는 권장하지 않는다. ID로 검색해오기때문 이는 키바나 뿐 만아니라, 포스트맨에서도 조회가 가능하다. 6. 내용 수정 - 기존에 있는 내용을 수정해본다. "hello"라고 넣..