20210526_TIL

1.코딩테스트

2.날씨기반 음식추천 프로젝트 :

3.리액트 공부 :

 

 

1.코딩테스트:

오늘 풀었던 문제는 '다트 게임'이었다. 다트게임

 

 

2.날씨기반 음식추천 프로젝트 :

오늘은 html과 css를 통해서 기본적인 웹의 화면을 만들었다. 아래는 내가 오늘 만들었던 화면이다. 

아직 완성되지는 않았다. 무언가를 스스로 만들어보는 것은 오늘로써 두번째인데, 아무래도 처음보다는 훨씬 더 많이 익숙해진 것 같다. 

이 화면에서 더 추가하고 싶다고 생각한 것은, 시간대별로 화면이 바뀌고, 날씨별로 화면이 바뀔 수 있도록 하면 재미있지 않을까 싶은 생각이 들었다. 그런데, 이렇게 하려면 아무래도 엄청난 노동이 들어가지 않을까 싶은 생각이 든다...

우선은 이렇게까지 화면을 만들어 둔 후에, 리액트를 공부하기로 했다. 

 

 

 

3.리액트 공부 :

미니 프로젝트 가운데 내가 맡게 된 역할은 프론트엔드 부분이었다. 이왕 프론트엔드의 기능을 구현하게 된거, 프로젝트를 진행하면서 리액트도 같이 공부하고 적용해보면 어떨까 싶은 생각이 들었다. 그래서 최대한 속성으로 들을 수 있는 강의를 찾아 들은 다음에, 후딱 듣고 프로젝트에 적용해보기로 했다. 

 

1)웹 어플리케이션 / 복잡성, 생산성을 높이기 위해서 존재하는 것이 라이브러리. / 라이브러리 3대장 

 

2)virtual Dom이란? 가상의 dom. 그때 그때 변화되는 dom요소들을 효율적으로 처리할 수 있음. 

 

3)webpack과 babel :

웹펙이란 코드들을 의존하는 순서대로 잘 합쳐서 결과물을 만들어 내는 것이다.

한마디로 전체적으로 파일들을 관리해주는 도구이다. 

바벨 : 자바스크립트 변환 도구. 계속해서 업데이트 되고 있다. 그런데, 그런 문법들을 브라우저가 다 지원하지는 않는다. 그래서 이 바벨이 자동으로 최신 문법을 구형 브라우저에 적응할 수 있도록 변환시켜준다. 

 

4)JSX : 

리액트에서 사용하는 html이라고 생각하면 된다. 

이것을 사용할 때, 지켜야 할 규칙이 있다. 

(1) 태그는 반드시 닫아준다.

(2) 두개 이상의 엘리먼트는 감싸주어야 한다. -> 이를 위해 fragment라는 것이 생겼다. 문서상으로는 불필요한 div가 없어지게 된다.

(3) 조건부 렌더링 : 삼항연산자를 사용함. 

(4) 함수 바로 호출하기 :

(function() {
	if(value ===1) return <div> 1이다! </div>
    if(value ===2) return <div> 2이다! </div>
    if(value ===3) return <div> 3이다! </div>
}) () 

//함수의 앞과 뒤에 ()로 감싸주고 바로 뒤에 ()을 입력하면 이 함수를 호출하지 않아도, 
//선언과 동시에 바로 호출이 가능하다. 에로우 함수를 사용하면 더 간단하다. 

(() => {
	if(value ===1) return <div> 1이다! </div>
    if(value ===2) return <div> 2이다! </div>
    if(value ===3) return <div> 3이다! </div>
}) ()