JavaScript (12) 썸네일형 리스트형 좀더 코드를 있어보이게 짜자 (JavaScript) map 과 reduce를 써보자 웹서비스에 채팅 기능 추가. 웹서비스에 채팅을 넣어보자. How? socket.io? 외부 프로그램? socket.io 노드를 공부해봤다면 socket.io를 들어봣을 것이다. 'socket.io'는 주로 채팅, 피드 관련 기능에 쓰인다. 즉각적으로 반응해주는 기능이 필요한데에 쓰인다고 보면 된다. 그래서 socket.io를 이용해서 채팅 기능을 만들것인가? 시간적 여유가 있다면 만들겠으나. 시간적 여유가 없으니 이미 만들어져있는 채팅 플러그인을 쓰기로 정했다. channel.io zendesk etc.. 여러 종류가 있다. 한국에서는 channel.io의 'chennel talk'를 많이 쓰는 듯하다. 탈잉, 인프런 등등 엄청 많은 곳에서 사용하고 있다. 좋은 점이 한가지 더 있다. 채팅 상담은 주로 .. Process of showing datas to client [React] Questions How to get datas from the backend. How to pass the data between components How to show data. Process of showing datas to client. How to get datas form the backend Use "Axios"(is a lightweight HTTP client based on the XMLHttpRequest service). you can request and can get datas by using "Axios" and API. const [Product, setProduct] = useState([]) useEffect(() => { Axios.get(`/api/product/p.. Context API [React] Context API If we use 'context', we don't need pass props to each layer. we can pass values using context just at once. For example, Usually it is used for current authenticated user, preferred language. React.createContext const MyContext = React.createContext(defaultValue);When React renders a component that subscribes to this Context object it will read the current context value f.. Hooks code example [React] Hooks code examples Hooks helps functional components. like managing state or doing work after rendering. useState It is the nomalist hook. This let the functional component can have variables which can change. import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( current value is {value}. setValue(value + 1)}>+1 setValue(value -.. Component keywords [React] All of the React Component keywords Components let you split the UI into independent, resuable pieces, and think about each piece in isolation. When you use Class Component, you must define 'render()' constructor() The contructor for a React component is called before it is mounted. Typically, in React constructors are only used for two purposes: Initializing local state by assigning an .. node / express 공부기. "뭘 해야할까?" "보편적인 express 구조부터 파악해야겠다." 검색 키워드: "best express portfolio" / "best node api portfolio" => https://www.tutorialspoint.com/expressjs/expressjs_best_practices.htm 들어가니 대중적인 구조가 떡하니 있었다. 흠. 잘모르겠다. "실제 예제 코드를 보면서 코드부터 익숙해져야겠다." https://thinkster.io/tutorials/fullstack Mastering Fullstack Development: Learn How to Build Modern Web Apps - Thinkster Learn how to build a real world fullstack .. JS 배열 정리하고 가기. 배열 만들기 let fruits = ['사과' , '바나나'] consloe.log(fruits.length) // 2 // 인덱스 이용 접근 let first = fruits[0]; //사과 let last = fruits[fruits.length -1] // 바나나 // push() let newLength = fruits.push('오렌지') // ["사과", "바나나", "오렌지"] // pop() 마지막요소 제거 let last = fruits.pop() // 마지막 요소 제거 ["사과", "바나나"] // shift() 맨앞 요소 제거 let first = fruits.shift() // ["바나나"] // unshift 맨앞에 추가 let newLength = fruits.unshift('딸.. 이전 1 2 다음
