코딩일기 2주차

2.20.

 

오늘은 아침부터 운동하고 공부하러 왔다! 요즘에 운동을 그래도 꾸준히 하니까 체력이 생기고 있는거같다 뿌듯💪💪 앞으로도 계속해서 건강도 잘챙겨야지!!

오늘은 이론스터디하는 날이라서 생성자함수와 this, 콜백함수에 대해서 공부했다. 자바스크립트는 프로토타입기반의 언어라서 생성자함수를 이용하여 객체를 생성했는데, 대부분의 언어들이 클래스기반의 객체지향이라서 모던한 프로그래밍을 위해서 현재는 대부분이 생성자함수보다는 클래스를 사용한다는것을 공부하였다.

this를 공부하면서 알게 되었는데 화살표함수는 단순하게 코드축약만 해주는 것이 아니라, 렉시컬환경을 기억한다. 그래서 화살표함수에서 this는 바로 상위스코프를 가리킨다.

리액트로 투두만들기를 하고 있는데 코드를 완벽하게 이해하고 싶어서 같은 코드를 계속 다시보고 다시보고 하고 있다. crud가 가장 기본인거같아서 이걸 이해하고 나면 다른것들도 훨씬 쉽게 이해할수있을거라고 생각한다. 이렇게 공부하느라 가끔씩은 진도가 더 빨리나갔으면 하는 욕심이 들때도 있지만 기본이 가장 중요하다고 생각하고 조급한 마음대신 천천히 하나씩 꾸준히 하자는 생각으로 계속 해나가야겠다.

 

 

2.21.

 

고흐명언중에서 내가 좋아하는말.

코딩공부가 나에게 딱 이렇다.

코딩을 하다보면 어떤날은 이해가 너무 잘되고 희망에 부풀었다가 어떤날은 또 너무 모르겠고 절망적이다.

하루하루 일희일비를 반복하고 있지만 꾸준히만 한다면 언젠가는 깨닫는 순간이 올거라고 기대한다.

 

투두를 만들다가 정확하게 이해되지 않는 부분이 있어서 기본부터 다시 살펴보고 있다. 이해를 깊이하는걸 좋아하는 성향이 있어서 진도가 엄청 빠르게 나가지 못하는게 조금은 답답하기도 하지만 그래도 이렇게 공부해야 나중에 응용하고 더 좋은 코드를 짤수 있지 않을까 생각한다. 한번 이해되기까지가 시간이 걸려서그렇지 그 이후에는 점점 더 속도가 빨라지지 않을까?!

오늘은 리액트의 기본문법은 JSX와 그것을 통해서 state를 관리하고 렌더링하는 것과 input의 상태를 관리하는것을 공부했는데 그래도 전에 공부했던 내용이 있어서 그런지 전과는 다른 관점으로 보게 됐던것 같다.

리액트의 input에 값을 입력하면 왜 굳이 e.target.value를 사용해서 값을 변경시켜주는지, 리액트에서는 왜 객체를 업데이트할때 스프레드문자를 사용해서 복사를 한뒤에 하는지등.. 전에는 읽어도 보이지 않던 내용들이 더 보이기 시작했다.

계속 반복하면 더 더 많은 내용들이 보이게 되지 않을까 🤓

 

2.22.

 

오늘은 JSX문법을 복습하고 리액트의 가장중요한 개념인 컴포넌트와 props, state를 연습하기 위해서 간단한 코드들을 만들면서 공부하였다.

벨로퍼트와 함께하는 모던리액트를 2회독하면서 직접 코드로 구현하고 화면을 통해 렌더링되는것도 확인하였다.

그 과정에서 배운것들을 적어보았는데 더 자세한 내용은 3회독때 또 적을 계획이다.

앞으로 더 복잡하고 많은것을 만들어 볼 예정이지만 이것들이 가장 기본이 된다고 생각해서 시간이 날때마다 회독을 계속해보고 싶다.

 

props

우선, 리액트 컴포넌트를 이해하기 위해서 간단한 페이지로 연습을 했다.

props를 통해 값을 전달받아서 이름을 띄우는 작업, defaultProps로 기본값을 이름없음으로 설정하는 것을 해보았다.

컴포넌트 사이에 넣은 값은 화면상에는 나타나지 않는데 이때는 props.children을 사용하면 화면에 나오게 된다.

조건부 렌더링이란 특정조건에 따라 다른 결과물이 렌더링되는 것을 의미한다. true, false의 boolean값을 이용해서 조건부렌더링이 되게 만든다.

조건부 렌더링을 연습하기 위해 *표가 나오는 작업을 했다.

윗줄의 맨앞에 있는 *표는 조건부렌더링을 통해서 나온 결과물이다.

 

onClick 이벤트를 통해서 counter 만들기

onClick 이벤트가 발생했을때 특정함수를 호출하도록 하는 코드를 짜보았다.

버튼을 누르면 함수이벤트가 호출되고 콘솔창의 숫자를 변경할 수 있게 만들었다.

리액트에서 엘리먼트에 이벤트를 설정할때는 on이벤트이름 = {실행하고 싶은 함수} 형태로 만들어야하고, 함수를 바로 실행하는 코드를 짜서는 안된다.

그러면 무한 렌더링에 빠질수있기 때문이다. onClick={onIncrease()}❌

이를 해결하기 위한 방법으로는 두가지가 있는데 하나는 const를 사용해서 변수명을 짓고 함수를 선언하여, 이벤트를 눌렀을때 그 함수가 실행되도록 만드는것이고, 또 다른 방법은 바로 {}안에 화살표함수로 코드를 짜서 넣어주는 방법이 있다.

 

//Counter.js

import React from "react";

const Counter = () => {
  const onIncrease = () => {
    console.log("+1");
  };
  const onDecrease = () => {
    console.log("-1");
  };

  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
};

export default Counter;

 

컴포넌트에서는 동적인 값을 state(상태)라고 부른다.

useState라는 훅을 통해서 컴포넌트의 상태를 관리한다.

const [ number, setNumber ] = useState(0);
             현재상태     setter함수

useState를 통해서 setter함수를 통해서 {number}에 전달되는 최신값이 계속해서 바뀌고 된다. +1버튼 -1버튼을 눌러보면 state들이 잘변경되고 있음을 확인할수 있다.

//Counter.js

import React, { useState } from "react";

const Counter = () => {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  };

  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
};

export default Counter;

 

 

2.23.

오늘은 컨디션이 안좋아서 공부를 많이 못했다 ㅠ

그래도 스터디에는 참여해야겠다고 생각해서 좀쉬고 스터디공부를 하고 블로그에도 json, Ajax에 대해서도 정리했다.

json은 자바스크립트 객체문법을 사용하는 데이터 포맷형식을 말한다. 프로젝트를 할때 json형식으로 데이터를 주고 받았었는데 이때 왜 굳이 json형식을 사용했는지는 몰랐는데 특징에 대해서 공부하다가 그 이유도 알게 되었다.

XML에 비해 속도가 빠르고 길이가 짧은 경량 언어이고, 또 인간이 읽을 수 있는 문서로 이루어져있기 때문에 많이 사용되고 있다.

Ajax는 브라우저가 서버에게 비동기방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍방식을 의미한다. Ajax로 HTTP요청을 하기 위한 방법중 fetch와 axios가 있는데 두가지모두 프로젝트때 사용을 해보았다. 쓸때는 이걸 이용해서 서버와 통신을 한다는 것은 알았지만 정확하게 ajax가 무엇인지, 굳이 왜 이런 방식을 사용하는지 몰랐는데 이렇게 공부를 하면서 빈칸을 하나씩 채워가고 있는것같아서 좋다. ajax이전에는 html을 서버로부터 전송받아 웹페이지전체를 처음부터 다시 렌더링하는 방식으로 했다면, ajax를 통해서 변경할 필요가 있는 부분만 부분적으로 비동기방식으로 전송을 받는것이 가능해진것을 이해했다.

자바스크립트 promise, async/await에 대해서도 공부했다.

이러한 방식들을 통해서 싱글스레드라서 동기적 처리가 기본인 자바스크립트에서 비동기적인 동작들을 실행할 수 있고, 에러처리도 가능하다.

또한 콜백함수보다 더 깔끔한 코드의 구현도 가능한 장점이 있다.

매일 공부를 하면서 느낀점은 눈에는 보이지 않아도 나도 모르게 전보다는 더 많은 내용들을 이해하기 시작했다는 것이다. 아직도 많이 부족하지만 그래도 같은 내용을 봐도 조금이라도 더 입체적으로 이해할 수 있다는 점에서 희망을 느낀다. 아직도 모르는게 너무 많고 부족하지만 그래도 매일 조금씩 발전을 하고있는것에 위안을 얻는다. 나자신 화이팅!! 🙌🙌🙌

 

 

2.24.-2.26.

리액트로 투두리스트를 만들다가 완전히 이해가 되지 않아서, 코드를 계속 또보고 또봤던 날인 것같다.

공부를 하다보니, 내가 부족했던 부분이 자바스크립트의 객체와 구조분해할당에 대한 것이라는 것을 알게 되어 그 부분을 집중적으로 공부했다.

객체의 키값으로는 그냥 일반적으로 적어주는 방법외에도 스페이스바와 같은 변수명에 담을 수 없는 값을 담고 싶으면 “”(쌍따옴표)를, 변수에 담에서 변수명을 키값으로 사용하고 싶으면 를, value에 함수를 넣어싶으면 함수명으로 키값을 넣어준다는 것을 알게되었다.

다른 부분은 그래도 어느정도 알고 있었는데 변수에 담아서 사용하는 중괄호에 대한 이해가 부족해서 투두리스트만들기를 할때 코드가 이해가 안됐던것같다.

주말에는 오랜만에 학원 동기들도 만났는데, 완전 오랜만에 보는 사람들도 있어서 엄청 반가웠다 ㅋㅋ 회사얘기, 코딩얘기도 하고 일상 이런저런 얘기도 하다보니 시간이 엄청 빨리갔다. 같은 공부를 하고, 같은 꿈을 지닌 동료들이 있다는 것은 존재만으로도 정말 의지가 되고 든든하다. 친구들에게 많이 배우고 나또한 많은 도움을 줄 수 있는날이 왔으면 좋겠다.

일요일에는 관악산 등산도 했다. 오르면서 힘든 순간도 있었지만 다 오르고 나니 개운하고 뿌듯한 마음이 들었다.

산에 오르면서 초반에는 덜 힘들었는데 마지막 몇걸음 남기지 않은 순간이 다리에 피로가 쌓여서 그런지, 고지가 눈에 보이는데도 발에 힘이 잘 안들어갔다.

어떤일이든 첫 시작은 쉽다. 하지만 거의 다 고지가 보이는 순간이 오히려 오르기 제일 힘들고 어려운 순간이 아닐까한다. 이것은 비단 등산에만 해당되는 것이 아닐것이다. 고지가 보이는 순간, 포기하고 돌아가는 사람이 될지 아니면 힘들더라도 한걸음씩 발걸음을 옮기는 사람이 될지는 그 순간의 나의 선택에 달려있다.

코딩공부를 하면서도 항상 이런 마음을 잊지 않도록 해야겠다.