스파르톤 - 생존일지

아론·2021년 7월 10일
밤샘코딩스파르타코딩클럽스파르톤
0

21시 생존기록

21:30 현재 체력상태

한줄평 : 아직은 정신 멀쩡하지만 미래의 나... 부탁한다

21시 공부기록

  1. 웹의 동작 개념

  2. DOM

  3. Javascript ES6 문법

    • class
      클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로써,
      객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수) 로 구성된다. 클래스는 객체 단위로 코드를 그룹화하고 쉽게 재사용이 가능하게 해 준다.
    class Cat {
  // 생성자 함수 : 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화 하는 역할
  constructor(name){
    this.name = name;
  }
  // 함수
  showName(){
    return this.name;
  }
}
// extends : 부모 클래스를 상속받아 옴
class MyCat extends Cat{
  constructor(name, age){
 	// 부모 클래스에 접근 가능하게 해줌
    super(name);
    this.age = age;
  }
  showName(){
    return '내 고양이 이름은 '+super.showName()+'입니다.';
  }
  
  showAge(){
    console.log('내 고양이는 '+this.age+'살 입니다!');
  }
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

    • 변수
      -> https://www.notion.so/I-82c991cda9564deb940676fb727626b8

    • 스코프
      스코프는 참조 대상 식별자가 유효한 범위를 말한다. 모든 식별자는(변수, 함수, 클래스 등) 자신이 선언된 위치에 의해 자신이 유효한 범위(다른 코드가 변수 자신을 참조할 수 있는 범위)가 결정된다. 아래의 코드에서 변수 x는 두 번 선언이 되었는데 자바스크립트 엔진은 이 중 어떤 변수를 참조해야 할 것인지를 결정하는 과정을 거치게 되는데 이를 식별자 결정 이라고 한다. 아래의 코드에서 foo 함수 외부에 선언된 변수 x는 어디서든 참조가 가능하지만 foo 함수 내부에서 선언된 변수 x는 foo 함수 내부에서만 참조가 가능하다. 즉 스코프는 코드가 어디서 실행되며 주변에 어떤 코드가 있는지에 따라 결정되는 실행, 평가의 범위라고 할 수 있다.

	let x = "global"
    
        function foo(){
          let x = "local"
          console.log(x); // "local"
        }

	foo();
	console.log(x) // "global"

23시 생존기록

23:00 현재 체력상태

한줄평 : 이정도는 껌이지 ^~^

공개처형당했다. 이렇게 된 이상 전력을 다한다....

23시 공부기록

  1. JSX
    리액트에서 사용되는 XML/HTML 꼴의 확장된 자바스크립트 구문 으로써 구문 내부에 작성된 HTML꼴의 텍스트는 전처리기를 통하여 정규 자바스크립트 객체로써 반환되어 자바스크립트 엔진이 파싱이 가능하게끔 한다. 작성 할 때 여러개의 HTML 라인을 작성한다면 반드시 부모-자식 관계에 맞게 작성 해야하고 내부에 여러 요소가 있다면 virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교를 할 수 있게끔 하기 위해서 반드시 하나의 부모 element로 감싸야한다.

00시 생존기록

00:00 현재 체력 상태

(치킨 뺏겨서 기분이가 좋지 않음)

막판에 치킨을 뺏겨서 몹시 기분이가 좋지 않았지만 퀴즈 댕꿀잼이었다. 그렇다고하더라도 잃어버린 치킨은 돌아오지 않는다....

00시 공부기록

  1. Component
    컴포넌트는 독립적이고 재사용가능한 코드 묶음 이라고 할 수 있다. 컴포넌트는 props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react 엘리먼트를 반환한다. 컴포넌트에는 두가지 종류가 있는데 함수형 컴포넌트와 클래스 컴포넌트가 존재한다. 함수형 컴포넌트는 간단하게 작성이 가능하다는 장점을 갖고 있고 Hook이 등장하고 난 후(v16.8) state와 라이프사이클 기능이 구현 가능해지면서 리액트 공식문서에서도 함수형 컴포넌트와 훅을 사용할 것을 권장하고 있다. 이 hook이 등장하고 난 후부터 함수형 컴포넌트의 사용이 급격히 늘었는데 그 이유는 클래스형 컴포넌트는 this를 사용하는 특성상 immutability가 보장되지 않기 때문이다.

더 읽어보기 : https://overreacted.io/ko/how-are-function-components-different-from-classes/

01시 생존기록

01:00 체력상태

배가 고파지고있다... 편의점을 털어야겠다... 츼킨... 또륵...

01시 공부기록

간단한 텍스트 입력 화면 만들어보기


import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const styles = {
    border: '1px solid #eee', 
    padding: '20px',
    display: 'flex', 
    width: '100vw', 
    maxWidth: '400px', 
    margin: '30px auto', 
    flexDirection: 'column'
  };

  return (
    <div className="App">
      <div style={styles}>
        <h1 style={{ color: 'green' }}>안녕하세요!</h1>
        <hr style={{width: '100%'}}/>
        <p style={{ textAlign: 'left' }}>이름을 입력해주세요.</p>
        <input type="text"/>
      </div>
    </div>
  );
}

export default App;

02시 생존기록

02:00 체력상태

아무도 날 막을수 없으셈 ^^

그래도 할건 다 하면서 열심히 하고 있습니다. (근엄 진지)

02시 공부기록

  • css in React

리액트도 HTML이나 자바스크립트처럼 css를 in-line으로 적용할 수도 있고 따로 파일을 만들어 불러와 적용시키는 방법이 있다. in-line으로 css를 적용하려면 HTML tag 안에 직접 style = {자바스크립트 객체} 꼴로 적용시키면 된다. 이때 중요한 것은 style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당되어야 한다는 것이고 css 속성명은 카멜케이스로 작성되어야 한다는 것이다.

	<h1 style={{ color: 'green' }}></h1>

다른 방법으로는 외부에 stylesheet를 통해 스타일을 정의해놓고 react 컴포넌트 파일에서 해당 css 파일을 import 해 오는 방법이 있다. import 후 엘리먼트의 className 속성을 이용하여 외부 파일에서 정의된 스타일을 맵핑해 주는 것이다. 

/* button.css */
.btn {
  color: white;
  background: teal;
  padding: 0.375rem 0.75rem;
  border: 1px solid teal;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}
// app.js
import React from "react";
import "./Button.css";

function Button() {
  return <button className="btn">External</button>;
}

03시 생존기록

03:00 체력상태

100인 달리기 개꿀잼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

03시 공부기록

  • CSS preprocessor

css는 프로젝트가 커질수록 선택자(selector)를 지나치게 많이 쓰게 된다던가 구문의 부재등으로 알아보기 힘들게 되고 이는 곧 유지보수의 어려움으로 연결된다. 이를 해결하기 CSS와 비슷한 문법을 갖고 있지만 더 많은 기능(선택자 중첩(nesting), 조건문, 반복문 등)을 갖고있는 전처리기를 이용하는 방법이 등장했다. 하지만 전처리기는 웹에서 직접 동작하지 않기 때문에 CSS로 컴파일하는 과정이 필요하다.

SASS는 가장 유명한 3개의 전처리기 중 하나로써 2006년부터 시작한 오래된 CSS 전처리기이고 그만큼 높은 성숙도와 많은 커뮤니티를 갖고 있다.

SCSS는 SASS의 3버전에서 새롭게 등장한 것으로 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 상위집합(superset)이다.
다만 몇가지 차이가 있는데 그 중 한가지는 SASS는 유효범위를 들여쓰기로 하지만 SCSS는 중괄호로 구분한다는 점 등이 있다.

04시 생존기록

04:00 체력상태

이제 짤방 구하기도 귀찮아... 너무 쌩쌩함 ㅋㅋㅋ

04시 공부기록

  • DOM
    DOM이란 Document Object Model로써 웹페이지를 객체로 표현하는 모델을 의미한다. 브라우저마다 DOM을 표현하는 방식이 다 다르기 때문에 구체적으로 DOM이 정형화된 언어나 모델이 있는 것은 아니다. 그렇기 때문에 특정 웹 브라우저에서 작동하는 코드가 다른 특정 웹 브라우저에서는 실행이 안되거나 성능이 저하되는 이슈가 발생할 수 있다.

DOM은 아래와 같은 방식으로 렌더링 된다. 우선 브라우저는 html 태그를 파싱하여 DOM tree를 구성하고 동시에 stylesheet에서 css를 파싱하여 스타일 규칙을 만들어낸다. 그 후 DOM 트리와 스타일 규칙을 결합하여 렌더 트리를 만들어낸다.

-Virtual DOM
문제는 위의 DOM의 렌더링 과정은 DOM 트리가 수정되 때 마다 전체 렌더 트리를 실시간으로 갱신하다보니 수정사항이 많이 발생한다면 불필요하게 많은 렌더링이 진행되어 성능이 저하될 수 있다는 것이다. React에서는 이를 해결하기 위해 가상 DOM (virtual DOM)을 이용하는데 이 가상 DOM을 이용하는 방식은 실시간으로 전체 DOM 트리를 수정하는 것이 아니라 변경사항이 모두 반영된 가상의 DOM을 만들어낸 후 이 가상 DOM에서 모든 변경사항을 담은 후에 단 한번의 DOM 수정으로 불필요한 렌더링 수를 줄일 수 있다는 장점이 있다.

05시 생존기록

05:00 체력상태

나는 살아있다.

05시 공부기록

  • Life Cycle
    생명주기 매서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드이다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용 가능한데 함수형 컴포넌트는 hook을 통해 대체가 가능하다.

  • mount 될 때 발생하는 생명주기 메서드

  1. constructor
  2. getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용
  3. render : 컴포넌트를 렌더링 하는 메서드
  4. componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드로서, 호출되는 시점에는 만들어진 컴포넌트가 화면에 나타난 상태이다. 이 때 DOM을 사용해야하는 외부 라이브러리를 연동하거나 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통해 ajax 요청을 하거나, DOM의 속성을 일거나 직접 변경하는 작업을 진행해야 한다.
  • update 될 때 발생하는 생명주기 메서드
  1. getDerivedStateFromProps
  2. shouldComponentUpdate : 컴포넌트가 리렌더링 될지 말지를 결정하는 메서드(최적화 시 사용)
  3. render
  4. getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전 DOM 상태를 가져와서 특정값을 반환하면 다음에 발생하는 componentDidUpdate 함수에서 반아와서 사용할 수 있다.
  5. componentDidUpdate
  • unmount 될 때 발생하는 생명주기 메서드
  1. componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출되는데 DOM에 직접 등록했던 이벤트를 제거한다. 외부 라이브러리를 사용한 것이 있고 해당 라이브러리에 dispose 기능이 있다면 이 부분에서 호출한다.
import React from "react";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {

// 생성자 함수 : 컴포넌트의 생성자 메서드로서 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
  constructor(props) {
    super(props);
    
    this.state = {
      cat_name: '나비',
    };

    console.log('in constructor!');
  }

  changeCatName = () => {
    // 다음 강의에서 배울, state 업데이트 하는 방법입니다!
    // 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
      this.setState({cat_name: '바둑이'});

      console.log('고양이 이름을 바꾼다!');
  }

  componentDidMount(){
    console.log('in componentDidMount!');
  }

  componentDidUpdate(prevProps, prevState){
      console.log(prevProps, prevState);
      console.log('in componentDidUpdate!');
  }

  componentWillUnmount(){
      console.log('in componentWillUnmount!');
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {

    console.log('in render!');

    return (
      <div>
          {/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifecycleEx;

06시 생존기록

06:00 체력상태

살아남았다

후 기

원래의 오늘 목표는 완강이었는데 강의를 보다보니 의외로 빵꾸 뚫려있던 부분들이 많이 거슬렸고 그 구멍들을 메우려고 하다보니 의외로 시간이 많이 걸렸다. 공부할 때 깊이있게 하려다보니 찾아봐야 할 자료도 많고 읽어볼것도 많다보니 진도가 잘 나가질 않았다. 그래서 중간에 강의를 빨리 보고 복습은 다시 하는것으로 방향을 틀었는데... 민영갓... 그녀는 도덕책... 압도적인 강의시간 덕분에 진도 빼는게 그렇게 녹록치 않았고 어쩌다보니 6시가 다 되었다.(까비)

그래도 좋은 점이 있었다면 은근히 내가 잘못 알고 있었다거나 완벽하게 이해하지 못했다던가 하는 부분을 캐치해 낼 수 있었다.

끝으로 같이 고생하신 우리 1조 404팀 팀원들 덕분에 정말 재미있었고 덕분에 밤샘 코딩이 지루하지 않았던 것 같다. 그리고 같이 밤샘해주신 스파르타 매니저 분들께도 깊은 감사의 말씀을 전하고싶다

profile
아론
법대생의 좌충우돌 IT 생존일대기
이전 포스트

[TIL] 스코프 & 클로저

0개의 댓글

관련 채용 정보