분류 전체보기 (33) 리스트형 프로젝트 초기 셋팅하기 (CRA와 Backend 분리하기) /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ 아래 사진처럼, goodfaithbox(만들고자하는 프로젝트명)라는 폴더안에 frontend 폴더와 backend폴더를 만들어서 각각 진행하고자 한다. 이 때, frontend는 CRA를 이용하여 만들 예정이다. 지금부터 초기 셋팅을 시작해보자! 1. 우선 github에서 repository를 만들어준다. 2. 로컬에서 goodfaithbox 폴더를 만들고, 해당 폴더로 이동한 후 git init을 해준다. 3. .gitignore, readme.md, .gitmessage.txt를 작성한다. .gitignore # See https://help.github.com/a.. CRA 폴더 밖에서 .gitignore 을 작성했음에도 반영이 안되는 경우 현재 내 프로젝트는 아래와 같은 구조를 가지고 있다. 따라서, gitignore을 다음과 같이 작성해주었는데, 계속해서 node_modules에 있는 애들을 tracking을 하고 있었다. # dependencies node_modules /.pnp .pnp.js CRA로 만들어둔 frontend 폴더에 자동적으로 .git 이 들어가있었기 때문에 해당 문제가 발생했었다. 무지성 git add . 하는 경우에는 아래와 같이 깃에서 친절하게 알려준다. warning: adding embedded git repository: frontend hint: You've added another git repository inside your current repository. hint: Clones of the o.. AJAX, JSON, XML이 뭘까? AJAX 정의 Asynchronous Javascript And XML의 약자로, 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능을 의미한다. AJAX가 가진 장점은 페이지 전체를 새로고침 하지 않아도 된다는 "비동기성"에 있다. 기존에는 화면이 전환될 때 마다, 서버로부터 매번 새로운 HTML을 받아오고 렌더링했었는데, AJAX를 통해 웹 페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터를 전송받아 변경해야하는 부분만 한정적으로 렌더링하는 방식으로 발전했다. 사용법 1. XMLHttpRequest XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open() , send() 등의 메소드를 이용한다. 2. fetch IE를 지.. [백준 1439] 뒤집기 백준 1439번 : 뒤집기 www.acmicpc.net/problem/1439 1450번: 냅색문제 첫째 줄에 N과 C가 주어진다. N은 30보다 작거나 같은 자연수, C는 109보다 작거나 같은 음이 아닌 정수이다. 둘째 줄에 물건의 무게가 주어진다. 무게도 109보다 작거나 같은 자연수이다. www.acmicpc.net /* 문제 설명 */ 0과 1로 이루어진 문자열이 있을 때, 0 → 1, 1 → 0으로 뒤집을 수 있다. 이 때, 문자열의 모든 숫자가 같도록 만드려면 최소 몇 번을 뒤집어야할까? S = 0001100 0000000 : 1을 뒤집는 경우 1번만에 같은 숫자로 만들 수 있다. 1111111 : 0을 뒤집는 경우 2번만에 같은 숫자로 만들 수 있다. 따라서 최소로 뒤집는 경우는 1이다. .. [백준 15489] 파스칼 삼각형 백준 15489번 : 파스칼 삼각형 https://www.acmicpc.net/problem/15489 15489번: 파스칼 삼각형 첫째 줄에 양의 정수 R, C, W가 공백을 한 칸씩 두고 차례로 주어진다. (단, 2 ≤ R+W ≤ 30, 2 ≤ C+W ≤ 30, 1 ≤ W ≤ 29, C ≤ R) www.acmicpc.net /* 문제 설명 */ 파스칼 삼각형은 양 끝을 제외한 각 수는 자신의 바로 왼쪽 위의 수와 바로 오른쪽 위의 수의 합으로 되어있다. 이때 R번째 줄, C번째 수를 위 꼭짓점으로 하는 한 변이 포함하는 수의 개수가 W인 정삼각형과 그 내부를 생각하자. 정삼각형의 변과 그 내부에 있는 수들의 합을 구하여라. /* 해결 방안 */ 현재 5번째 줄 3번째 칸에 있다면, 이는 4번째 줄 2.. [React] 부모-자식 컴포넌트 간의 데이터 전달 방법 1. 부모에서 자식으로 데이터 전달하는 방법 → props를 이용한다. *props란, properties를 줄인 표현으로 컴포넌트 속성을 설정할 대 사용하는 요소이다. 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. (자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻이다.) Parent.js import React, { useState } from 'react' import Child from './Child'; const Parent = () => { const [number, setNumber] = useState(0); const onClick = () => { setNumber(number + 1); } /*number가 props다.*/ return .. [React] useCallback() /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 첫 번째 파라미터 : 생성하고 싶은 함수 두 번째 파라미터 : deps 배열 (해당 배열의 어떤 값이 바뀌었을 때 함수를 생성해야하는지를 명시함.) 비어있는 배열을 넣을 경우, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용한다. 즉, 컴포넌트가 처음 렌더링될 때만 함수를 생성한다. 하지만 내용이 있는 배열을 넣을 경우, 해당 배열이 바뀌었을 때만 함수를 생성한다. 따라서 함수 내부에서 상태 값에 의존.. [React] useMemo() /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 첫 번째 파라미터 : 어떻게 연산할지 정의하는 함수 두 번째 파라미터 : deps 배열을 넣어준다. 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해준다. 반면에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용한다. useMemo를 통해, 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 도대체 이게 뭘까 궁금했는데, 공식 문서를 보니 다음과 같았다. 메모이제이션 된 값을 반환합니다... [React] useReducer()* /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); useState의 대체함수로, 여러개의 하윗값들을 포함하는 state를 다룰 때 유용하게 사용된다. 즉, 간단한 state라면 useState를 써도 되지만, 복잡한 state인 경우에는 useReducer를 쓰면 편하다. setter 함수를 여러개 쓰지 않아도 된다는 소리다. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState 보다 useReducer 를.. [React] useEffect() * /* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다. 따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */ useEffect()란? useEffect(effect, deps); effect : useEffect가 동작할 함수 deps : deps 리스트에 있는 값일 때만 값이 변하도록 함. 리액트 컴포넌트가 렌더링될 때 마다 특정 작업을 수행하도록 설정한다. componentDidMount + componentDidUpdate + componentWillUnmount와 비슷하다. import React, { useState, useEffect } from "react"; const MyComponent = () => { const [number, setNumber] = us.. 이전 1 2 3 4 다음