React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. React에서 리스트 사용하기 1 - 리스트 렌더링 (조회) 바로 전에 만든 다이어리는 저장 버튼은 있지만 실제로 DB에 저장하거나 하진 않았다. 이번에는 배열을 이용하여 React에서 LIST를 렌더링하고 개별적인 컴포넌트로 만들어보자. (일반적으로 리액트를 사용하면 배열로 피드, 게시글, 리스트를 표시하는데 자주 사용한다.) 저장된 리스트를 보여줄 DiaryList.js를 생성한다. const DiaryList = () => { return ( 일기 리스트 ) }; export default DiaryList; App.js import './App.css'..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. React에서 DOM 조작하기 DOM을 조작해서 일기 저장 버튼을 클릭했을 때, 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus를 주는 기능을 만들어보자. 일단 작성자 input과 일기 본문 textarea에 한 글자도 입력되지 않거나 5글자 미만으로 입력된 경우 저장 버튼을 눌러도 저장이 되지 않는 코드를 작성하자. const handleSubmit =(e) => { if(state.author.length < 1) { alert("작성자는 최소 1글자 이상 입력해주세요."); return ; } isFinite(state.content...
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. React에서 사용자 입력 처리하기 새로운 프로젝트를 만들자. npx create-reace-app simplediary 불필요한 파일은 삭제한다. 삭제한 파일과 관련된 코드들을 지운다. App.js import './App.css'; function App() { return ( 일기장 ); } export default App; index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Props Props는 State와 더불어 React의 대표적인 기능 중 하나이다. Props는 컴포넌트에게 데이터를 전달하는 기본적이고 효율적인 기능이다. Props는 Properties의 줄임말이다. //import './App.css'; import MyHeader from './MyHeader'; import React from 'react'; import Counter from './Counter'; function App() { const number = 5; return ( ); } export default App; 위의 코드를 보면 Counte..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. State(상태) State는 계속해서 변화하는 특정 상태이다. 상태에 따라 각각 다른 동작을 한다. 쉽게 예를 들면 웹에서 자주 사용하는 다크 모드(Dark Mode) 테마를 껐다가, 켰다가 하는 게 상태의 하나이다. 즉 react에서 State(상태)란 계속적으로 값이 변화하는, 동적인 데이터를 갖는 컴포넌트이다. 실습을 위해 Counter.js를 만들어보자. Counter.js는 숫자가 있고 + 버튼을 누르면 숫자를 1씩 증가시키고, - 버튼을 누르면 숫자를 1씩 감소시키는 페이지이다. const Counter = () =>{ return ( 0 + - ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. JSX JSX는 자바스크립트의 확장 문법이며 자바스크립트와 html을 혼합하여 사용할 수 있는 리액트에서 주로 사용하는 표현식이다. JSX를 사용해보자. 전에 만들었던 reactexam1 프로젝트를 실행시키고 src 경로에 MyHeader.js를 새로 생성한다. const MyHeader = () => { return 헤더; // 컴포넌트는 return이 없으면 에러가 난다. }; export default MyHeader; 그리고 우리가 만든 MyHeader 컴포넌트를 사용하기 위해 App.js로 이동해 import 시킨다. import './App.css'..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Create React App React App을 만드는 방법 React App을 만들기 위해 추가적인 라이브러리(패키지)들이 필요하다. Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 이 외에도 수많은 라이브러리들이 있으나 하나하나 다 설치하기 귀찮을 수 있다. 귀찮은 사람들을 위해 나온 패키지가 바로 'Boiler Plate'이다. Boiler Plate 보일러를 찍어내는 틀이며, 보일러를 찍어내는 듯, 서비스를 개발할 ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Why React.js 첫 번째 이유 페이지마다 중복되는 코드가 있을 경우에 중복되는 부분의 어떠한 부분을 변경해야 한다면 중복 코드가 존재하는 파일 모두를 다 수정해줘야 한다. 이 현상을 산탄총 수술(Shotgun Surgery)이라 한다. 중복된 코드가 별로 없다면 다행이지만 만약에 많다면 시간도 들고, 또 실수를 해서 다른 부분에 복붙을 했다면..? 이러한 이유로 중복된 코드가 많으면 유지보수가 힘들다는 단점이 있다. 그럼 중복된 코드를 없게 작성하면 되지 않을까?라고 생각할 수 있겠지만 현실적으로 그건 힘들다. 우리가 자주 사용하는 웹 사이트만 봐도 중..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Hello World & Common JS Node.js는 프로그래밍 언어가 아니고 그냥 자바스크립트의 실행환경, Runtime이기 때문에 여태까지 자바스크립트를 사용하던 그대로 사용하면된다. VSCode를 열고 index.js 파일에 console.log를 찍어보자. 이제 작성한 js 파일을 실행해야한다. js 파일을 Node.js로 실행하려면 터미널이 필요하다. 터미널을 열어보자 터미널은 상단 메뉴 View - Appearance > Show Panel을 클릭하거나 Ctrl+J 단축키를 눌러 열 수 있다. 터미널? 우리가 일반적으로 컴퓨터를 이용할 때 명령..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Node.js 설치하기 Google에 Node.js 검색 최상단 Node.js 선택 두 가지 버전을 다운받을 수 있는데 LTS가 붙은 버전은 기업에서 사용해도 될만큼 안정화되었고 신뢰도가 높은 버전이고 오른쪽의 현재 버전은 현재 버전으로 최신 기능들을 이용할 수 있으나 안정성과 신뢰성이 좀 떨어진다. 그러니 LTS 버전으로 다운 하단의 다운로드가 완료되면 클릭한다. 다운은 크게 어려운 게 없다. 체크 박스가 나오면 다 체크하면 된다. 경로도 기본으로 놔두면 된다. Next....!! 완료 설치가 잘 됐는지 확인해보자. cmd 실행 node -v npm -v 이..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Node.js 어? 우리가 배우려는 건 React.js인데 왜 Node.js가 나오나요? 바로 React.js가 Javascript의 라이브러리이기 때문이다. 오 그건 알겠어요. 근데 Javascript랑 Node.js랑 무슨 연관이 있는데요? 자, 전에 자바스크립트로 작성된 코드는 브라우저에 있는 자바스크립트 엔진을 이용하여 실행한다고 했었다. 우리가 아는 브라우저만 해도 크롬, Edge, Safari 등이 있는데 이 각 브라우저마다 자바스크립트 엔진이 상이하다. Safari - Nitro Firefox - Spider Monkey Chrome - V8 Ed..
C 언어의 정의 C 언어는 프로그래밍 언어이다. 프로그래밍 언어 : 인간과 컴퓨터의 대화에서 사용되는 의사소통 수단 컴퓨터는 0과 1로 구성된 기계어만 이해할 수 있고, 인간은 인간의 언어를 사용한다. 이 두 개체 간의 원활한 의사소통을 돕는 수단이 바로 프로그래밍 언어이다. 인간이 컴파일러에게 프로그래밍 언어를 사용하여 프로그램을 작성한 파일을 보내면, 컴파일러는 컴퓨터가 이해할 수 있도록 프로그래밍 언어를 기계어로 변환하는 역할을 수행한다. 어셈블러는 컴파일러와 컴퓨터 사이에 존재하는데, 컴파일러가 번역한 기계어에 가까운 어셈블리 코드를 기계어(0, 1의 바이너리 코드)로 변환하는 작업을 한다. 즉 2차 번역인 셈이다. C 언어와 같이 인간이 이해하기 쉬운 언어(나는 왜 어렵지?)에 가까울수록 고급 ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. API API에 대한 정의는 구글에 검색하면 위키백과에 잘 나와있다. 여기로 굳이 내용을 가져오지 않는 이유는 그걸 봐도 와닿지가 않아 이해가 불가능하기 때문이다. API를 좀 더 쉽고, 와닿게 설명하기 위해 레스토랑을 차렸다. 손님이 레스토랑에 방문해 음식을 먹으려면 총 4단계가 필요하다. 주문 주방장이 재료를 찾는다. 찾은 재료로 요리한다. 서빙한다. 이 네가지 과정이 웹사이트에서 어떠한 정보를 가져오는 방식과 유사한 방식이다. 위의 것과 웹사이트 동작 방식을 약간 섞어서 얘기해보자면, 클라이언트(손님)이 서버(주방장)에게 Request(주문)한다. - 데..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. async async는 function 키워드 앞에 선언한다. async function helloAsync() { return 'hello Async'; } function 앞에 async를 붙이면 해당 함수의 return 값은 항상 Promise 객체를 반환하게 된다. 위의 함수의 경우는 return값이 Promise가 아니지만 놀랍게도 async를 붙여주면 이행 상태의 Promise(resolved promise)로 값을 감싸 반환된다. async function helloAsync() { return 'hello Async'; } console.log(..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Promise 동기와 비동기에 대해 포스팅했을 때 마지막에 콜백 지옥(callback hell)을 잠깐 얘기했었다. Promise에 대해 알아보기 전에 먼저 비동기 작업이 가질 수 있는 3가지 상태에 대해 알아보자. 비동기 작업이 가질 수 있는 3가지 상태 Pending 현재 비동기 작업이 진행중이거나, 현재 이 작업이 시작할 수 없는 문제가 발생했음을 의미한다. Fulfilled 이행 또는 성공 상태로 이 비동기 작업이 우리가 의도한대로 정상적으로 완료된 상태를 의미한다. Rejected 거부 또는 실패 상태로 비동기 작업이 모종의 이유(서버 비응답, 시간 ..
