참고 https://www.youtube.com/watch?v=4_WLS9Lj6n4 들었던 js 강의 중에 가장 핵심만 설명해주면서도 이해하기 쉬운 강의였다.!! 변수 , 호이스팅 const 1. 선언, 초기화, 할당 단계 let 1. 선언단계 2. 초기화 단계 3. 할당단계 var 1. 선언 및 초기화 단계 2. 할당단계 - 한번 선언된 변수를 다시 선언할 수 있음 - 선언하기 전에 사용할 수 있음 호이스팅(hoisting) var를 사용하면 변수를 먼저 호출하고 나중에 선언해도 에러가 발생하지 않는다. console.log(name); var name = 'Mike'; //undefined 위와 같은 코드는 아래와 같이 동작하는데 이를 호이스팅이라고 한다. 호이스팅은 스코프 내부 어디서든 변수 선언은..
Tech
alert() 알려줌 prompt() 입력받음 confirm() 확인받음 형변환 String() = 문자형으로 변환 Number() = 숫자형으로 변환 Number(null) // 0 Number(undefined) // NaN Number(0) // false Number('0') // true Boolean() = 불린형으로 변환 - 숫자 0 - 빈 문자열 "" - null - undefined - NaN 함수 선언문과 함수 표현식 // 함수 선언문 function sayHello(){ console.log('Hello'); } sayHello(); //함수 표현식 let sayHello = function(){ console.log('Hello'); } sayHello(); 함수 선언문 - 어디서든..
페이지가 들어왔을 때 로딩 메세지가 보이고 코인들이 나열되면 로딩메세지를 숨김 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) // response를 받아서 response.json 리턴 .then((json) => { //리턴한 json을 사용하여 setCoins(json); //coins에 json데이터 삽..
todo 입력받기 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); //기본동작 제어 if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); // state를 직접 수정할 수는 없음 setToDo(""); }; return..
* 리액트 앱을 사용한 실습 * create-react-app으로 간단하게 리액트 앱을 설치한다. 리액트 앱 내에서 prop-types를 사용하고 싶다면 따로 설치하여 import 시켜줘야 한다. 그리고 css 적용 시 컴포넌트별로 css파일을 만들어 모듈화시켜줄 수 있다. .module.css 파일을 생성하고 import 하여 사용하면 된다. 최초 렌더링에만 코드가 실행되게 하는 방법 : useEffect() state값이 변화되어 리렌더링 되면 모든 코드가 재실행된다. 이때 API를 사용했을 때처럼 한번만 받아도 될 정보의 경우에도 리렌더링 할 때마다 계속 호출된다. useEffect()를 사용하면 특정 코드가 최초로 render할 때만 실행되게 할 수 있다. useEffect() 사용 예시는 아래와..
Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 보내는 방식이다. 예를 들어 동일한 스타일의 버튼 여러개를 생성할 때 하나의 버튼 컴포넌트를 생성하고 데이터를 props로 받으면 쉽게 재사용 할 수 있다. 컴포넌트 props는 컴포넌트의 첫번째이자 유일한 인자이다. props에 여러개의 데이터를 모두 포함시키면 데이터는 오브젝트 형식으로 담아지게 된다. 컴포넌트 내에서 데이터를 불러올 때는 props.특정값 으로 사용할 수 있지만 처음부터 props 중에서 특정 값만 가져오고 싶다면 Btn(props) 대신 Btn ({ 특정값 })라고 하면 된다. props로 받는 함수 props에는 다양한 string, boolean값은 물론 function까지 담을 수 있다. props로 전달된 함수는 이벤트..
버튼을 누를 때마다 올라가는 counter 수와 같은 바뀔 데이터를 어떻게 담아야 할까? 컴포넌트는 한번만 렌더링이 되기 때문에 counter 변수의 값은 바뀌어도 UI의 counter은 바뀌지 않는다. 그렇다면 어떻게 할 수 있을까? 직접 리렌더링 시켜주는 방법 ( 실제로 쓰진 않고 단지 원리를 이해하기 위함 ) 이 방법은 실제로 사용하지는 않고 단지 원리를 이해하기 위함이다. 이 방법에서는 UI를 변경해주기 위해서 우리가 만든 container 컴포넌트를 counter 수가 바뀔 때마다 리렌더링 시켜준다. 이때 다시 렌더링 하더라도 리액트가 알아서 바뀐부분만 리렌더링 시켜준다. 리액트JS는 바뀐 부분만 리렌더링 해주기 때문에 효율적이다. 리액트 JS의 렌더트리는 단계가 최적화 되어있다. 바닐라js는 ..
버튼을 만들고 클릭하면 클릭 횟수를 세어주는 간단한 기능을 두 가지 방법을 사용해서 만들어보자 기존 VanillaJS 사용 Total clicks: 0 Click me ReactJS로 element를 생성하여 사용 리액트JS를 좀 더 본질적으로 이해하기 위해서 현업에서는 사용하지 않는 어려운 방식을 우선 사용해보자. 리액트JS를 사용하기 위해서는 react와 react-dom을 import한 뒤 실행시켜야 한다. react는 js의 라이브러리이고 react-dom은 모든 react element를 HTML body에 둘 수 있도록 해주는 패키지다. 우리는 react로 element를 생성하고 생성한 element를 react-dom을 통해 렌더링시킬 수 있다. 바닐라js는 HTML을 먼저 만들고 JS로 ..
Django와 연동할 데이터베이스로 MongoDB를 선택했다. MongoDB를 사용하는 이유는 자연어처리를 거친 데이터들의 정확한 데이터 구조를 알기 어려워 명확한 스키마가 있는 SQL형태의 데이터베이스보다는 NOSQL인 MongoDB가 더 적합할 것 같다고 생각했기 때문이다. Django와 MongoDB를 연동하는 방법에는 여러가지가 있었지만 Djongo를 사용해 가장 간단하게 연동해보았다. 개발환경 : python 3.10.3 1. Djongo를 설치한다. pip install djongo 에러 발생 : Not Implemented Error: Database objects do not implement truth value testing or bool(). 발생 이유 = 최신 버전의 pymongo가..
이 프로젝트가 자연어처리 등 파이썬을 사용하여 데이터를 다루는 일이 많기 때문에 웹 프레임워크도 파이썬기반의 장고를 선택했다. 장고에 대해 아는 것이 없었기 때문에 무작정 장고의 공식 문서 튜토리얼을 따라해보았고 기본적인 구조와 개념을 익혔다. (1) Django 설치, 가상환경 셋팅 파이썬 프로젝트 실행을 위해 가상환경 내에 개발환경을 구성 virtualenv로 가상환경 셋팅 후 가상환경 안에서 Django설치 (2)Django app * 프로젝트 생성 django-admin startproject mysite mysite라는 프로젝트 디렉토리를 생성한다. * 앱 생성 앱은 특정한 기능( 블로그나 공공 기록물을 위한 데이터베이스나 간단한 설문조사 앱)을 수행하는 웹 어플리케이션이다. 프로젝트는 다수의 ..
그래프 데이터베이스는 JSON과 같은 형태기 때문에 데이터 베이스 시스템을 갖고 있지 않는 자바 스크립트에서 쉽게 사용할 수 있다. 그래프 DB구조 만들기 - 검색에 대한 속도 최적화를 위해 해시맵 구조를 도입한다 - 해시맵은 데이터의 순서를 따지지 않기 때문에 그래프에 저장되는 데이터 순서를 따로 배열로 저장한다. //SET_COLLECTION 액션 임포트 import { SET_COLLECTION } from '../actions/collectionActions01'; //빈 그래프 DB 구성 const initState = { ids: [], entities: {}, }; export default (state = initState, action) => { const { type, payload }..
액션 { type: .... , payload: ... } 구조의 객체이다. type - 액션이 어떤 작업인지 쉽게 이해할 수 있는 고유한 값을 구분한 문자열 payload - 스토어에 사용할 값으로 스토어의 데이터를 초기화하는 경우에는 생략 가능 { type: 'SET_LOADING', payload: true, } 리듀서 //기본 함수 구조 function reducer(state, action) { return state;} //사용 예시 , 이전 데이터(state)를 받아 새로운 데이터(sate.payload)로 변경 const reducer = (state, action) => state + action.payload; 스토어의 이전 데이터, 액션을 받아 새로운 스토어의 데이터를 반환한다. 반환..
리덕스란? 리덕스는 데이터를 관리하는 기술이다. 리덕스는 데이터를 스토어(store)라는 곳에서 관리한다. 스토어를 통해 데이터가 전파되고 컴포넌트는 스토어에 데이터 변경을 요청한다. 리덕스와 컨텍스트 차이 리덕스는 컨텍스트와 비슷하다. 단, 여러 개의 공급자를 관리하던 컨텍스트와 달리 리덕스는 스토어에서 모든 데이터를 관리한다. 컨텍스트 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 리덕스 서버에서 받은 데이터를 앱 전체에 전달하거나 관리 '서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우 -> 리덕스 '컴포넌트의 통합 데이터를 관리하는 경우' -> 컨텍스트 리덕스 동작 리덕스의 동작을 이해하기 위해서는 스토어의 데이터의 변화과정의 이해가 필요하다. 아래의 그림은 스토어의..
컨텍스트 API를 활용하면 기존 공급자와 소비자를 컴포넌트로 구현하여 컨텍스트를 구성하는 과정을 대체할 수 있다. createContext() 함수 : 공급자와 소비자를 반환하는 컨텍스트를 생성하는 함수 const MyContext = React.createContext(defaultValue); 공급자는 MyContext.Provider , 소비자는 MyContext.Consumer로 접근해서 사용하거나 const{ Provider, Consumer } = React.createContext(defaultValue);와 같이 분할 할당하여 사용한다. 컨텍스트 API 사용해보기 (로딩상태를 표시하는 공급자 컴포넌트 예시) 1. createContext()함수로 공급자 만들기 import React fro..
중복 공급자란? 하나의 소비자가 두 개 이상의 공급자 데이터를 구독하는 것이다. 이때 , 전달하는 데이터의 이름이 같다면 소비 자는 더 가까운 공급자의 데이터를 수신한다. 예) 두개의 상태(state1, state2)를 필요로 하는 소비자는 다음과 같이 배치된다. //state1을 위한 공급자 //state2를 위한 공급자 이와 같은 경우 state라는 키 이름이 중복되기 때문에 소비자는 가까운 state2에만 접근하게 된다. 중복 공급자 문제 해결법 : 커링함수 사용 키 이름을 인자로 받아 원하는 하나의 소비자가 동시에 두 개의 컨텍스트 데이터에 접근할 때
