참고 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 위와 같은 코드는 아래와 같이 동작하는데 이를 호이스팅이라고 한다. 호이스팅은 스코프 내부 어디서든 변수 선언은..
전체 글
프론트엔드 개발자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로 ..
front-end : HTML5, CSS3, Pug back-end : NodeJS, MongoDB, Express #6 MONGODB AND MONGOOSE 6.0 Array Database part One mixin video(video) div a(href="/videos/" + video.id)=video.title pug는 href, class, id 같은 attribute에는 #{}로 변수를 표시할 수 없다. 더하기 방식이나 백틱을 사용해서 표시해야한다. export const watch = (req, res) => { const { id } = req.params; const video = videos[id - 1]; res.render("watch", { pageTitle: `Watchin..
front-end : HTML5, CSS3, Pug back-end : NodeJS, MongoDB, Express #5 TEMPLATES 5.0 Returning HTML HTML을 직접 텍스트로 적어서 리턴할 수 있으나 반복되는 부분을 매번 복붙하는 것은 비효율적이기 때문에 좀 더 편리하게 리턴하기 위해서 PUG 사용 5.1 Configuring Pug Pug = 템플릿을 이용해 뷰를 만드는 걸 도와주는 템플릿 엔진 app.set("view engine", "pug"); pug를 설치한 후 express가 view engine으로 pug를 사용할 수 있게 설정해주어야 한다. express는 views라는 디렉토리에 있는 view를 알아서 보기 때문에 따로 import 해줄 필요는 없다. 디렉토리 안의..