성연커밋 : )

Context API를 공부하기 위해 새로 리액트 앱을 만들었으나, 아래와 같은 에러가 떳다. 나는 프로젝트 이름을 context_API 라고 했을 때 에러가 떳다. 이 에러는 npm, yarn 사용하는 명령어의 일부가 담겨있거나, 프로젝트명에 대소문자 또는 특수기호를 입력하지 말라는 말이라고 한다. API가 대문자여서 그런가보다.. context_api 로 하니까 잘 만들어졌는데.. .. 내 프로젝트 중에선 REACT_APP 이라는 프로젝트가 있는데.. 이것은 의문이다..

axios를 이용하여 news api를 가져와 뉴스를 보였고, styled-component를 이용하여 보기 좋게 뉴스 뷰어를 만들었다. 위에 카테고리별로 분류를 해주면 더 좋을 것 같다. 최종 결과물은 다음과 같다. 나도 css잘하고싶다.......... css공부나 더 해야겠따. pages/NewsPage.js import React from "react"; import Categories from "../components/Categories"; import NewsList from "../components/NewsList"; const NewsPage=({match}) =>{ const category=match.params.category || 'all'; return( ) } export d..

axios를 이용하여 newsapi를 가져왔다. 불러오기 버튼을 클릭하면, api내용들이 나온다. 보면, 저자, 제목, 내용, url바로가기, 사진, 날짜 등이 나온다. 이 api를 가지고 스타일을 입혀, 뉴스뷰어를 만들어 볼 것이다. 즉, 바로 이렇게 완성이 될 것이다. App.js import React from 'react'; import NewsList from './components/NewsList'; const App =()=>{ return }; export default App; App.js 코드는 NewsList를 호출한다. Newslist.js import React, {useState, useEffect} from 'react'; import styled from 'styled-co..

axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트 HTTP 요청을 Promise 기반으로 처리한다는 점이 특징이다. yarn add axios 로 설치 axios로 api를 받아온다. ex) axios.get('주소').then(response=>{ setData(response.data); });

async/await 문법은 Promise를 더욱 쉽게 사용할 수 있게 해준다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); 함수를 사용할 때 앞부분에 async키워드를 붙여줌주고, promise앞부분에 await를 붙여준다. async를 사용하면, 해당 함수는 결과값으로 Promise를 반환하게 된다. function sleep(ms) { return new Promise(resolve => setTimeou..

Promise는 비동기작업을 조금 더 편하게 처리할 수 있도록 하는 ES6에 도입된 기능 이전에는 비동기 작업을 콜백함수로 처리하여 코드가 난잡해졌음 콜백함수 예시 function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { console.log..

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어로 한 개의 페이지로 이루어진 애플리케이션이다. 뷰 렌더링을 사용자의 브라우저가 담당하도록 하여, 애플리케이션을 브라우저에서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 새로운 데이터가 필요하다면? 서버 API를 호출하여 필요한 데이터만 새로 불러와 그 부분만 수정! SPA의 단점은 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것! 페이지 로딩 시 실제로 방문하지 않을 스크립트도 불러오기 때문 => 코드 스플리팅을 사용하여 라우트별로 파일들을 나누어 해결! SPA라고 단 한페이지만 있는 것이 아님! =>라우터를 이용하여 페이지 이동

Git에 리액트를 계속 올리고 커밋을 하면서 생각했다. 장고는 시크릿키때문에 ignore파일로 안올려줘도될 것을 지정해주었는데 혹시 리액트도?! 하고 검색해보았다. ignore사이트로 가서 react를 쳤더니 omg... 리액트가 있다..😂😂 내 커밋기록이 날라가는건가 싶었지만, 리액트는 ignore로 막아줄 것은 많은 모듈들로 시간이 오래걸리기 때문에 막아주었다! 하지만 난 이미 시간이 걸려서 올렸기에.... 상관없다...! 다음부턴 어떤거든 꼭 .gitignore 확인하기 ㅠㅠㅠㅠ !! 명심하자..

이미 '캠블' 아이디어가 있었기 때문에 순조롭게 잘 진행이 되었다. 자료조사를 해보면서, 거북목과 허리디스크에 대해서도 잘 알 수 있었다. 현재 개발자를 꿈꾸고 있는 나로써, 정말 중요한 문제라고 생각이 들었다. teachable API를 이용하여 기계학습을 이용하여 웹사이트를 만들고싶다. 이 API는 기계학습을 기반으로 만든 API일 것이다. 우선, 내가 아이디어 낸 주제를 하기 위해서 필요한 학습은 지도학습, 비지도학습이 필요할 것이라고 생각되었고, 추가적으로 cnn인 합성곱신경망이 필요할 것이다. 움직이는 영상 및 시각적인 사진들에 유용한 인공지능이라고 나왔다. 내가 기계학습쪽에 대해선 잘 모르지만, 저 API를 가지고 프로젝트를 진행해보면 좋을 것 같다. 현재 프로젝트를 생각하고 있는 것은 나는 ..

컴포넌트의 성능을 최적화할 수 있는 React.memo함수가 있다. 이 함수는 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 되지 않도록 설정하여주는 함수형 컴포넌트의 리렌더링 성능을 최적화해줄 수 있다. 함수형 컴포넌트에서는 shouldComponentUpdate라이프사이클 메소드를 사용하지 못하기 때문에 React.memo함수를 이용하여 성능을 최적화한다. 사용방법 함수형 컴포넌트의 마지막에 export default React.memo(컴포넌트명) 을 입력해주면 된다. 이러면 해당 컴포넌트는 파라미터 값이 바뀌지 않는다면, 리렌더링이 되지 않는다!