본문 바로가기

분류 전체보기277

[Restful API] 네이버 Papago API 사용해보기 먼저 네이버 developer 사이트에 어플리케이션을 등록한다. -> https://developers.naver.com/apps/#/register -> 사용할 API을 선택한다. (검색, papgo 번역), 그 후 등록을 완료한다. 등록 완료 후, API 레퍼런스탭의 설명을 보며 진행한다. -> https://developers.naver.com/docs/papago/papago-nmt-api-reference.md#%EC%9A%94%EC%B2%AD-url -> 요청할 URL -> http method는 post로, -> Body엔 json으로 위 설명서를 보고 참고해서 작성한다.(Postman) -> http 헤더엔 애플리케이션 등록 시 발급 받은 클라이언트 아이디와 클라이언트 시크릿이 필요하다고 .. 2023. 12. 18.
[React] import export 문법 import 문법 // 예를 들어, MyComponent.js 파일에서 MyComponent를 내보내는 경우 // 현재 파일에서 MyComponent를 가져오려면 다음과 같이 작성할 수 있습니다. import MyComponent from './MyComponent'; -> import 문은 다른 파일에서 내보내는 모듈을 현재 파일에서 사용할 수 있게 해준다. export 문법 // 단일 개체 또는 함수를 내보내는 경우 export default 모듈명; // 여러 개의 개체 또는 함수를 내보내는 경우 export { 모듈1, 모듈2, ... }; -> export 문은 현재 파일에서 외부 파일에서 사용할 수 있도록 지정된 모듈을 내보내는 데 사용된다. 2023. 12. 16.
[React] public 폴더의 용도 여러가지 소스코드는 src 폴더에 보관하면 되는데 이미지같은 static 파일의 경우 public 폴더에 보관해도 된다. 리액트로 개발을 끝내면 build 작업이라는걸 하는데 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관 없습니다. 2023. 12. 16.
[React] HTML, CSS로 이미지 첨부, public 폴더 이용하는 법 HTML import img from "./img/bg.png"; 현재 폴더인 src에 img라는 폴더를 만들고 그 안에 이미지 파일을 첨부한 후 import 한다. 쓸 위치에 가서 style={{backgroundImage : "url(" + 이름 + ")" }} 해주면 된다. CSS .main-bg { height: 300px; background-image: url("./img/bg.png"); background-size: cover; background-position: center; } -> 쓸 태그에 className='작명' 후 css 파일로 간 후 .작명 { } 안에 url(이미지경로)를 넣어주면 된다. public 폴더 이용하는 법 -> import 필요 X , 위 코드 + /파일명 해.. 2023. 12. 16.
[React] React-Bootstrap 사용하기 세팅하기 npm install react-bootstrap bootstrap -> 터미널에 설치한다. -> public 폴더의 index.html의 태그 안에 위 코드 넣어논다. 사용하기 -> 구글에 react bootstrap 검색 후 처음 나오는 사이트로 이동한다. -> 검색 창에 필요한 요소들(컴포넌트) 검색 후 이용하면 된다. 2023. 12. 16.
[Javascript] 배열의 요소가 어떤 값을 포함하고 있는지 구하는 방법 includes() const array1 = [1, 2, 3]; console.log(array1.includes(2)); // expected output: true const pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // expected output: true console.log(pets.includes('at')); // expected output: false -> 배열.includes(값) : 배열의 요소 중에 ()안 값이 포함되어 있다면 true 반환, 아니라면 false 반환해준다. 2023. 12. 16.
[Javascript] 현재 날짜, 시간 구하기 현재 날짜, 시간 구하기 var today = new Date(); console.log(today); // 결과 : Sun May 30 2021 15:47:29 GMT+0900 (대한민국 표준시) 날짜 포맷 변경하기(YYYY-MM-DD) var today = new Date(); var year = today.getFullYear(); var month = ('0' + (today.getMonth() + 1)).slice(-2); var day = ('0' + today.getDate()).slice(-2); var dateString = year + '-' + month + '-' + day; console.log(dateString); // 결과 : 2021-05-30 시간 포맷 변경하기(HH:MM.. 2023. 12. 16.
[React] 이벤트 버블링(Event Bubbling)이란? 이벤트 버블링(Event Bubbling)이란? HTML 요소에서 발생한 이벤트가 해당 요소의 부모 요소로 전파되는 현상을 말합니다. 즉, 하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 과정을 의미합니다. 이벤트 버블링은 이벤트가 발생한 요소에서 시작해서 가장 최상위의 조상 요소까지 이벤트가 전파됩니다. 이때, 각 요소의 이벤트 핸들러가 호출되며 이벤트 처리가 이뤄집니다. 이는 DOM(Document Object Model)의 트리 구조를 기반으로 하고 있습니다. 예시 {console.log(상위 클릭)}}> console.log("하위 클릭")}>Click me! span 태그인 Click me!를 클릭하면, span 태그를 감싸고 있는 div 태그의 onClick 이벤트도 같이 실행된다. -> .. 2023. 12. 15.
[React] filter() 함수 설명과 예시 filter() 함수란? filter() 함수는 react 내장 함수가 아닌 자바스크립트 함수이다. Array 자료형에서만 사용 가능하고 결과값이 true인 값만 새로운 배열에 넣어서 반환해준다. 예시 var items = [1,2,3,4,5]; var filter_ex = items.filter(item => item 2023. 12. 15.
[React] props 문법 설명과 예제 React에서는 컴포넌트에서 컴포넌트로 데이터를 보낼 때 props 문법을 사용한다. 예시 function App (){ let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(props){ return ( { props.title[0] } 날짜 상세내용 ) } 자식컴포넌트 사용하는 곳에 가서 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 작성 후 사용 시 props.작명 사용하면 된다. state뿐 아니라 변수, 함수 다 전송 가능하다. -> 자식 컴포넌트에서 부모 컴포넌트로는 불가능하다. -> 같은 곳에 존재하는 컴포넌트에게도 불가능하다. 2023. 12. 14.

티스토리툴바