프로젝트를 여러 명이서 진행하거나 가독성 좋은 코드를 위해 코딩 컨벤션을 지켜야한다.해당 포스팅에서는 vite로 react 프로젝트를 만들어서 다음과 같은 초기 세팅을 진행할 예정이다.eslintprettier절대 경로huskyvite 프로젝트를 생성한다.

ES2021에서 replaceAll() 메서드가 추가되었다. 하지만 코테를 준비할 때 채점 환경에 따라 ES2021이 도입되지 않은 곳이 있는데 해당 환경에서는 replaceAll()을 사용할 수 없다. 따라서 replaceAll()을 구현해보겠다.replace()의

반복을 수행할 때 우리는 주로 3가지를 사용한다. 1) for 2) for ... in 3) for ... of for같은 경우 모두가 익숙하므로 해당 포스팅에서는 다루지 않고 for in과 for of에 대해서만 다루겠다. for ... in for ... in은

지금까지 C++ 혹은 파이썬으로 백준 알고리즘 문제를 풀다가 프론트엔드로 진로를 정했기 때문에 자바스크립트(node.js)로 코테를 준비하려고 한다. 타 언어로 백준 문제를 풀 때는 몰랐는데 자바스크립트로 백준 문제를 풀면서 겪은 문제들을 하나씩 포스팅할 예정이다.

2부와 이어집니다. REACT + NODE(express) 프로젝트를 EC2에 무중단 배포하기 #2 기본 설정 1) 사용가능한 패키지와 버전 정보를 업데이트한다. sudo apt-get update 명령을 입력한다. 2) nodejs를 설치한다. 이 때, node

1부와 이어집니다. >REACT + NODE(express)로 구성된 프로젝트를 EC2에 무중단 배포하기 #1 2부에서는 키페어 변환 및 putty 접속을 해보겠다. putty 설치 1. putty 설치 앞서 생성한 인스턴스에 접속하기 위해 putty를 사용하여

여름 방학에 1인 프로젝트를 진행하였다. 프로젝트 내용은 게임(이터널 리턴) 전적 검색 사이트이다. 계획 한 모든 기능을 구현하진 못했지만 친구들에게 보여주고 싶어 배포를 하려고 마음을 먹었는데 할 줄 몰라 여기저기 참고하였지만 자세하게 나와있는 곳이 없어 매우 오래

redux의 단점 redux의 store는 매우 복잡하다. redux를 유용하게 사용하기 위해 매우 많은 패키지 설치가 필요하다. 리덕스는 매우 많은 보일러 플레이트 코드를 필요로 한다. > redux-toolkit(RTK)는 이러한 문제점을 개선시켰다. redu

리액트로 개발할 때 하나의 파일에 하나의 컴포넌트만 있다면 다음과 같이 해당 컴포넌트 명으로 export한다.Test.js그러나 가끔씩 타인의 코드를 보거나 여러개를 내보내야할 때 export default가 아닌 named default로 내보낼 때가 있는데 두 개의

선택자 { 속성(Property) : 값(value); } > 선택자 : CSS를 적용할 대상 ex : div { color : red; } -> div태그를 찾아서 div의 color를 red로 설정한다는 의미

Kruskal 알고리즘 > 탐욕(Greedy) 알고리즘의 한 종류로 그래프의 있는 모든 정점을 최소 비용으로 연결할 때 사용한다. 그래프 : 정점(node 혹은 vertex)과 간선(edge)으로 이루어져있으며 각 간선에는 가중치(weight)가 부여된다. > 결론

프론트엔드가 백엔드와 실시간으로 통신할 때 소켓 통신을 사용한다. > 백엔드 : Node.js -> 주로 socket.io를 사용 백엔드 프레임워크 : 스프링 -> 주로 sockjs + stomp 사용 이번 포스팅에서 프론트엔드는 리액트, 백엔드는 node를 사용

useReducer란? React의 상태관리를 위한 Hook중 하나이다. useState와 비슷하지만 컴포넌트와 컴포넌트 업데이트 로직을 분리할 수 있다는 장점이 있다. Context API로 전역 값을 관리할 때 사용되는 Hook이다. > useReducer 사용법

다음과 같이 사용자를 등록하고 전체 사용자 정보와 전체 사용자 수를 나타내는 코드가 있다. App.js 해당 화면에서 이름과 기분을 입력하면 inputs의 State가 변경되면서 App 컴포넌트가 Re-Rendering된다. const numberOfUser =

아래에 App.js의 코드가 있다.아래 코드는 화면에 State의 값과 Ref값을 표시하고 각 값을 업데이트하는 버튼이 있다.App.js현재 상태현재의 state 값과 ref 값이 화면에 표시된다. State 올리기 버튼을 클릭State 올리기 버튼을 클릭하면 sta

리액트에서 Input이 여러 개 일때 상태관리하는 방법 이름, 아이디, 별명을 입력하는 회원가입 창이 있다. App.js ![] (https://velog.velcdn.com/images/navyjeongs/post/02dc909a-629c-46de-990b-2dd