Je개발 일지

[ 리렌더링이란? ] 바닐라 자바스크립트의 경우 변경되면 Element 를 처음부터 끝까지 다시 그린다. 만약에 내가 하지만, React 의 경우에는 변경된 부분만을 다시 그린다. 이런 점을 SPA (Single Page Application) 의 특징이라고 부른다. 만약, 티스토리 블로그에서 게시글 리스트를 보다 1페이지에서 2페이지로 넘어갔다고 생각해보자. 그러면 렌더링 되는(화면에 보여지는) 게시글 리스트들은 달라지지만 화면에 보이는 전체적인 레이아웃(한 번에 게시글 몇 개만 보여주는 등)이나, 블로그 이름과 같이 달라지지 않는 내용들도 존재할 것이다. 이전에 바닐라 자바스크립트로만 개발을 한 경우라면 이 변하지 않는 골격이나 달라지지 않는 내용들도 모두 다시 한 번 렌더링 해야 했다. 하지만, S..

1. React 로 DOM 렌더링하기 2. JSX 활용하기 JSX 란? 문자도, HTML 도 아닌 자바스크립트의 확장 문법이다. 밑의 예제에서는 element 변수가 JSX 를 활용한 것이다. 그러나 일반 자바스크립트에서 JSX 문법을 사용할 수 없다. JSX 를 자바스크립트로 해석하기 위해서 자바스크립트 컴파일러로 Babel을 사용한다. 위의 내용은 아래와 같이 표현할 수 있다. Babel 은 script 태그에 CDN 을 이용해서 가져왔다. 이번에는 여러 태그들을 만들어서 넣어보도록 하자. 태그를 넣을 때 좋은 방법 중 하나는 React 가 반환하는 객체에서 children 을 이용하는 것이다. children 이 하위 태그들을 의미하기 때문. React JSX 문법에는 여러 Element 들을 사용..

1. Promise 를 사용하는 이유 예전에 비동기 작업을 할 때 콜백 함수를 사용했다. 하지만 양이 많아지기 시작하면 코드가 난잡해진다는 단점이 발생한다. 바로 위의 사진처럼 콜백 지옥이라는 걸 볼 수 있다. 그걸 막기 위해 도입된 문법이 Promise 다. 직접 코드를 작성하며 얼마나 깨끗해지는지 확인해보자. 우리는 코드를 통해 초를 세는 함수를 작성해보고자 한다. 1) 콜백 지옥 먼저, 콜백 함수로 비동기를 구현했을 때의 상황이다. function second (sec, callback) { setTimeout(() => { const now = sec + 1 console.log(`${now}초`) if (callback) { callback(now) } }, 1000) } second(0, n ..

1. 비동기적 처리란? 대부분의 함수는 동기적으로 처리된다. 동기적이란 어떤 기능을 실행하고, 그다음의 기능을 실행한다는 의미다. 이건 마치 같은 라인에 선 계주와 같다. 한 선수가 목표한 거리를 다 지나야지만 바통을 넘겨받은 선수가 달릴 수 있다. 대부분의 기능은 이렇게 실현된다. 그런데, 만약에 너무 오래 걸리는 작업이 있다면? 예를 들어 우리가 유튜브를 본다고 하자. 유튜브에서 동영상을 불러들이는 시간은 다른 메뉴바를 불러들이는 시간보다 오래 걸린다. 그런데, 만약 동영상을 불러들이고 나서 다른 기능이 구현된다고 하면 사용자는 아무것도 없는 브라우저의 로딩이 끝나기만을 기다려야 할 것이다. 그러면 사용자들에게 불편을 주고 웹 애플리케이션에 안 좋은 인상만 남길 것이다. 그렇다면, 반대로 동영상을 모..

1. Truthy, Falsy 자바 스크립트에서 논리 연산자에 true와 false 만 들어가야 하는 것은 아니다. true와 false는 아니지만 true처럼 취급 받는 truthy와 false처럼 취급 받는 falsy라는 값이 존재한다. truthy 는 굉장히 많기 때문에 falsy한 값만 알면 falsy 이외에는 모두 truthy라고 생각하면 된다. 대표적인 falsy는 다음과 같다 1. false (false도 넓은 범위에서 falsy) 2. 0 3. '' (빈 문자열) 4. undefined 5. null 6. NaN 한 가지 주의점이 있는데, 빈 객체 { } 나 빈 배열 [ ] 은 falsy 값이 아니다. 간혹, falsy 값을 좀더 정밀하게 false 처럼 사용하고 싶은 분들은 falsy한 ..

저번 시간에 이어서 남은 과제를 수행하겠다. 1), 4), 6)은 했고 이제 input창 관리인 2), 3), 5) 남았다 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder ..

오늘 할 것을 설명하자면 옆의 사진들과 같다. CSS 는 편의상 margin 값만 추가했다. 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder 처리를 해줄 것이다. 6) 마지..

3-2) input 상태 관리하기 이번에 만들어 볼 건 input 창에서 사용자로부터 값을 입력받으면 바로 화면에 입력받은 값이 나오도록 설정하고 초기화 버튼까지 만들겠다. input 도 사용자로부터 입력을 받고 그에 따라 화면에 값이 나오는 동적인 상황이 발생하므로 useState를 사용해줘야 한다. 수도 코드를 작성하면 다음과 같다 1. useState를 통해 input의 기본값과 동적 상태 값을 구조분해 할당으로 가져온다. 2. 동적으로 변화될 값은 input으로 입력받는 내용이어야 한다. 3. 초기화용 버튼을 생성한다. 4. 초기화 버튼을 누르면 변화될 값이 빈 문자열로 바뀐다. 그렇다면 하나씩 작성해보도록 하자. 먼저 1번부터 하면 const [text, setText] = useState(''..

2-2) Children props 안에는 children이 들어갈 수 있다. children은 그 이름에서 유추할 수 있듯이 자식, 후손 요소들을 의미한다. 어떻게 사용되는지 다음 내용을 살펴보자. 먼저 App.js 를 다음과 같이 작성하면 나타나는 화면은 오른쪽 아래와 같다. 이번에 내가 해주고 싶은 일은 지금 나와있는 모든 요소들이 밋밋해서 전체적으로 통일성 있게 효과를 주고 싶다면 어떻게 해야할까? 하나하나 다 뜯어가며 고치기 보다는 이 모든 것을 한 번에 묶어서 효과를 주면 좋을 것 같다. Wrapper라는 새로운 js 파일을 만든 후 props 로 { children } 을 가져온다. 그러면 그 안의 모든 요소들을 가져오는 것과 같은 효과를 지니며 안의 내용들을 재사용한다. 물론 위의 결과물은..

1. 기본적인 법칙 1-1) 태그는 항상 닫혀 있어야 한다. 로 닫는 태그가 존재하거나 혹은 과 같이 Self closing이 돼야 한다. 1-2) 두개 이상의 태그는 반드시 하나의 태그로 감싸져 있어야 한다. 감싸고 있는 것은 굳이 이름있는 태그가 아니어도 된다. 과 같은 fragment로 감싸줘도 된다. 1-3) React 안에서 자바 스크립트 사용 방법 먼저, Java Script의 내용을 변수로 할당해준다. const Variable = "Value"; 이렇게 그냥 변수로 사요하면 된다. 그리고 저 변수 그리고 만약 div 내에서 저 자바 스크립트의 내용을 보여준다고 한다면 다음과 같이 변수를 { } 안에 감싸줘서 표현한다. {Variable} 1-4) 클래스 이름 짓기 만약 클래스 이름을 짓고 ..