일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- useParams
- 러닝타입스크립트
- 정렬
- axios
- route
- 딥러닝
- ContextAPI
- useEffect
- Router
- react
- nvidia
- 자율주행
- JavaScript
- State
- image
- 공부
- props
- Component
- Ajax
- opencv
- CSS
- Redux
- localStorage
- react-query
- HTML
- DOM
- IOT
- swipe
- TypeScript
- raspberrypi
- Today
- Total
목록분류 전체보기 (22)
개발일지
[ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 위와같이 상품 데이터가 array 자료형 안에 object 자료형 세개가 존재하는 형태로 존재한다고 하자. [{},{},{}] 위의 데이터를 state 로 만들고 싶은데 좀 길다. 이럴 땐 다른 파일에 보관했다가 import 해서 사용할 수 있다. (data.js 파일) le..
HTML 안에 이미지 넣고 싶으면 이미지를 import 하고 사용해야한다. import bg from './bg.png' function App(){ return ( ) } 1. import 이름 from './이미지경로' 하고 2. 이미지 경로가 필요한 곳에서 import 한 것 사용한다. 태그 사용하고 싶으면 사용한다. css 파일 사용해도 된다. Public 폴더 용도 여러 소스코드는 src 폴더에 보관하는데, 이미지같은 static 파일의 경우 public 폴더에 보관해도된다. 리액트로 개발을 끝내면 build 해주게 되는데, 지금까지 짰던 코드들을 한 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일들은 다 압축 되는데, public 폴더에 있는 것들은 그대로 보존한다. 따라서 형태를..
예전 리액트에서는 class 문법을 사용하였다. 개발하다보면 옛날 코드를 볼 경우도 있으니 참고해두면 좋다. class Modal2 extends React.Component { constructor(){ super() } render(){ return ( Hi ) } } 1. class 컴포넌트 이름을 작명한다. 2. constructor, super, render 함수 3개 채워넣는다 (생성자) 3. 컴포넌트는 길고 복잡한 HTML을 축약할 때 사용. return 안에 축약할 HTML을 적는다. class 컴포넌트 안에서 state 사용 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'kim', ..
자바스크립트에서는 다른 함수에 있는 변수를 마음대로 사용할 수 없다. 컴포넌트 2개가 부모 / 자식 관계인 경우는 사용 가능 부모 컴포넌트의 state 를 자식 컴포넌트로 전송해줄 수 있다. 전송 시, props 라는 문법을 사용한다. props 로 부모 -> 자식 state 전송하는 법 1. 자식 컴포넌트 사용하는 곳에서 2. 자식컴포넌트 만드는 function 으로 가서 props 라는 파라미터 등록 후 props.이름 사용한다. title 이라는 부모 컴포넌트의 state 를 자식 컴포넌트 에 전송하기 function App() { let [title, setTitle] = useState([ "title1", "title2", "title3", ]); return ( ) } function Mod..
map 함수 사용 array 자료형에는 map() 함수를 사용할 수 있다. var array = [2, 3, 4]; array.map(function(){ console.log(1); }) 1. array에 들어있는 자료의 갯수만큼 그 안에 있는 코드를 반복 실행해준다. console.log(1); 세 번 실행 var array = [2, 3, 4]; array.map(function(a){ console.log(a); }) 2. 콜백함수에 파라미터는 배열을 순회하며 모든 자료를 하나씩 출력해준다. 콘솔창에 2, 3, 4 출력 var array = [2, 3, 4]; var newArray = array.map(function(a){ return a * 10; }) console.log(newArray)..
React 사용 이유 1. Single Page Application (SPA) 만들 때 사용 새로고침 없이 앱처럼 부드럽게 동작하는 웹페이지 html 파일을 한개만 사용하여 다른 페이지 보여주고 싶을 때 html 부분 다 갈아 치워서 보여줌 2. html 재사용 편리 변수에 html 담아서 사용할 수 있기 때문에 3. 같은 문법으로 앱 개발 가능 (React Native) 리액트 프로젝트 생성 1. 작업용 폴더 하나 생성 2. 터미널에서 해당 폴더 접근 후 npx create-react-app '프로젝트명' 입력 3. 해당 프로젝트 폴더 vscode 에서 열기 4. App.js 가 메인 페이지이므로 App.js 에서 코드 짜줌 5. 브라우저로 미리보기 띄우고 싶으면 터미널에 npm start 입력 Ap..
브라우저 안의 여러 저장공간 크롬 개발자도구의 Application 탭에 보면 여러가지 저장공간이 존재한다 Local Storage / Session Storage ( key : value 형태로 문자 숫자 데이터 저장 가능 ) indexed DB ( 크고 많은 구조화된 데이터를 DB처럼 저장 가능, 문법 더러움 ) Cookies ( 유저 로그인 정보 저장 공간 ) Cache Storage ( html css js img 파일 저장해두는 공간 ) 개발자가 선택해서 사용하면 되는데 범용적으로 사용 가능한 Local Storage 사용해보자 Local Storage 는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB 까지만 저장 가능하다. Local Storage는 브라우저 재접속 해도 영..
서버란? 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램일 뿐이다. 네이버 웹툰 서버 : 유저가 웹툰 요청하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 요청하면 영상 보내주는 프로그램 서버에 데이터를 요청할 때 어떤 데이터인지 url 로 잘 기재해야하고 어떤 방법으로 요청할 것인지 결정해야함 (GET / POST 등..) GET / POST 요청하는 법 GET 요청은 서버에 있던 데이터를 가져오고 싶을 때 주로 사용하고, POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. ( PUT, DELETE 요청도 있음 ) GET 요청 보낼 때 가장 쉬운 방법은 브라우저 주소창이다. 브라우저 주소창에 url 적으면 그 주소로 GET 요청을 보내준다. POST 요청 하고싶으면 태그 ..
Array / Object 자료형 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형들 배열 Array var car = ['소나타', 50000, 'white']; 다음과 같이 배열에 저장 가능 Object var car2 = { name : '소나타', price : 50000 }; 딕셔너리 처럼 사용 자료를 꺼내쓸 때는 car2[’name’] 또는 car2.name와 같이 사용할 수 있다. 실제 웹서비스 개발 2가지 방식 사용자가 사이트로 접속하면 HTML 을 잘 만들어서 보내주는 것을 웹서비스 라고 한다. HTML을 누가 완성하는지에 따라 개방방식의 차이가 존재 1. 서버에서 HTML을 미리 완성해서 고객에게 보내줌 이러한 방식을 server-side rendering 이라고 한다. 2. ..
함수의 return function 함수() { return 123; } 함수의 값 반환 return 아래 있는 코드들은 읽지 않는다 소수점 있는 숫자 연산시 주의점 조금의 오차가 발생할 수 밖에 없다. 2진법으로 바꿔서 계산을 하기 때문에 소수를 2진법으로 바꾸면 무한소수가 됨 해결책 소수점을 전부 10곱해서 연산하고 10으로 나눔 라이브러리를 사용 연산결과 반올림 소수점 반올림 하는 함수 : [숫자.to]()Fixed(몇자리); 다음과 같이 사용 toFixed() 사용 시 문자로 변환이 된다. 자바스크립트 ‘+’ 연산자 특징 ‘문자’ + 123 ⇒ ‘문자123’ ‘문자 + ‘문자’ ⇒ ‘문자문자’ 위와같이 연산이 되기 때문에 타입에 대한 주의가 필요하다 따라서 parseFloat() 이나 parseI..