일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
31 |
- Component
- 자바스크립트
- API
- react
- frontend
- DART
- MongoDB
- NextJs
- HTML
- javscript
- GRID
- Mongoose
- TypeScript
- CSS
- 리액트
- ECMAScript
- ES6
- graphQL
- JavaScript
- pug
- CLONE
- Session
- heroku
- express
- node.js
- nodejs
- clonecoding
- form
- backend
- Flutter
- Today
- Total
목록JavaScript (192)
Enjoy Programming

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 ajax를 리마인드 해본다. 우선 fetch를 이용해 내가 원하는 url을 가져오고 백엔드에서는 url의 video id를 보내주기위해 잠시 포스팅했던 data-attribute를 사용한다. data-attr를 이용해서 html에 데이터를 저장하고 프론트에서 그 정보를 가져오게 한다. 니코 왈 data-attr는 백엔드와 프론트간에 정보교환을 하는데 있어 가장 쉬운 방법이라고 한다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 사용하기 - Web 개발 학습하기 | MDN HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 ..
PropTypes 종류 - array: 배열 - arrayOf: 특정 propType으로 이루어진 배열 - bool: true or false 값 - func: 함수 - number: 숫자 - object: 객체 - string: 문자열 - symbol: ES6의 Symbol - node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드) - instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass)) - oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나 - oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나 - objectOf(React.PropTypes.number):..

기존 자바스크립트에서 삼항연산자의 경우 condition ? ture - return : false- return 이런식으로 condition이 true이면 true일때의 리턴갑슬 false이면 false일때의 리턴값을 보내주는 방식이다. 뭐 중첩도 되고 여러 방향에서 쓰일 수 있다. 그런데~ react를 공부하며 삼항연산자에 && operator를 알게되었는데 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다. 쉽게 말해 true일때만 expression이 실행된다. false라면 그냥 react는 무시한다. 살짝 맛만 보자면 위 코드에서 기본적으로 nowPlaying이 false이면 오른쪽은 아에 실행되지 않는다,..

기존 클론코딩을 하며 mongoose의 populate메서드를 가져다 쓴적이 있는데.. 음 object id를 가져온다는건가? 뭔지 이해가 잘 안갔는데 차근차근 다시 포스팅해본다. mongoose 공식 doc을 보면 mongo-db의 lookup과 같은 연산자를 갖고 있다. 그리고 mongoose는 더 강력한 대체항목으로 populate()메서드를 가지고 있다고 한다. 그럼 간단히 말해 populate()가 하는 역할이 무엇인가~ 다른 스키마의 정보를 참조해서 쓰는것이다. 우선 두개의 스키마 user와 video 가 있다고 하자 그리고 video 스키마에는 owner라는 key가 있다. 그리고 이 owner는 ObjectId 타입이고 User model을 참조하고 있다 이때 owner를 통해 User ..
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org 금일 챌린지 중에서 배열의 원소들을 모두 합하는걸 써야 했는데 음 이전 파이썬 c언어 할때는 주로 for문 돌려서 연산을 했다~ 음 찾아보니 자바스크립트에는 reduce라는 좋은 메소드가 있었다. 배열의 각 요소에 대해 주어진 reducer함수를 실행하고 하나의 결과값을 반환한다. 리듀서는 네개의 인자를 ..

리액트 챌린지 1일차.. 아 순간 벙쪘다... 에러투성이.. 1일부터 이렇다니;;; 내가 클래스에 대해 너무 몰랐던거 같다.. 일단 오늘 클래스에 대해 한가지 알게 된점을 서술하고 몇가지 함수만 기록한다. 우선 챌린지 진행을 하는데 주요 골자는 클래스 하나가 선언되어있고 외부에 오브젝트 두개가 있다. 그리고 인스턴스를 만들지 않고 함수를 실행해서 새로운 객체를 만들어주는 것인데.. 이제껏 인스턴스를 만들어서 함수를 실행하는 것만 해보다 보니 벙쪘다. 한 두시간 헤맨거 같다.. 근데 slack의 친절한 도움으로 해결할 수 있었다.. mdn을 잘 살펴보자 ㅠㅠ mdn이 최고다.. 독해력이 좀 부족할뿐.. 바로 이부분이다... 기존 작성된 코드를 건들지 않고 해야 하다보니 필수로 이용했어야 할 정적메서드 이다..