형상 관리 툴이란?

'형상 관리를 한다'라는 말은 개발되는 소스들의 변화를 관리한다는 말이다. 개인의 작업이 아닌 팀으로서, 개발 프로젝트를 진행한다거나 아는 사람들과의 토이 프로젝트를 진행할 때, 어떤 사람이 커밋을 했고, 해당 소스를 병합 핟기도 하는 등, 소스 관리를 보다 편리하게 해주는 툴이다.

프로젝트를 진행할 때마다 형상 관리 툴을 사용하게 되는데 최근 알게된(사용하게 된) 툴을 소개하려고 한다.

bitbucket

bitbucket은 최대 5명까지 무료 계정으로 사용할 수 있다. 빗버킷을 사용해 본 결과, 내가 느낀 장점들은 아래와 같다.

1. config 파일을 기반으로 파이프라인을 구축할 수 있어서, 빌드/테스트/배포의 자동화를 구축할 수 있는 환경을 제공한다.

2. 최대 5명까지 무료로 사용이 가능하다. 또한, 5명이 넘어가더라도 다른 저장소보다 경쟁력 있는 금액이라고 생각한다.

3. 협업 툴이 다른 형상 관리 툴보다 많다. jandi, jira 등 많은 협업 툴과 웹 훅 정도의 연동을 굳이 개발하지 않더라도, 연동할 수 있도록 지원한다.

4. 코드 리뷰를 지원하는 UI가 심플해서 보기가 편하다.

로컬 프로젝트를 repository에 올리기

1. 가입 후, Create Repository 클릭해서, 프로젝트 레퍼지토리를 생성한다.

2. repository 정보를 입력한다.

Project 프로젝트 명 (repository 내부에 들어갈 프로젝트 명)

Repository name repository 이름 입력 ex) API_SERVER_EXAMPLE

Access level 접근 레벨

Default branch name 기본 브랜치 입력 (입력 안해도 상관없다.)

3. 프로젝트를 생성한 repository에 import 시킨다.

터미널을 열고 내 로컬 서버에서 개발한 프로젝트 경로로 이동한다. 나의 경우는 [/user/developer/project/'프로젝트명'] 경로에 내가 작업하는 프로젝트가 있다. 해당 경로로 이동하여 아래와 같이 명령어를 입력한다.

git init - 깃 저장소 초기화
git add-all - 프로젝트 생성
git commit-m "first bitbucket commit" - 커밋 메세시 생성

그러나 해당 명령어를 순서대로 입력하게 되면 repository를 생성할 때 readme 파일을 생성해줬기 때문에 오류가 발생한다.

error : failed to push some refs ~~

4. 다음은 해결 방법이다. 다음 명령어를 순서대로 입력한다.

git init

git pull origin master -allow-unrelated-histories
// 이미 bitbucket 브랜치에 독립적인 프로젝트가 있는 것으로 판단하기 때문에, 관련 없는 두 프로젝트를 병합하겠다는 명시

git add

git push -u origin master

npx create-react-app simplediary

사용하지 않을 로고 파일, 테스트 파일들을 지우고 App.js 임포트 정리까지 해줬다.

2. 오늘의 학습목표

3. diaryEditor 컴포넌트 생성

import './App.css';
import DiaryEditor from './DiaryEditor';

function App() {
  return (
    <div className="App">
      <h2>일기장</h2>
      <DiaryEditor></DiaryEditor>
    </div>
  );
}

export default App;

4. 한 줄 짜리 입력 받기

사용자 입력값을 받을 수 있는 input값을 생성해주었다.

const DiaryEditor = () => {
    return (
    <div className="DiaryEditor">
        <h2> 오늘의 일기 </h2>
        <div>
            <input/>
        </div>
    </div>
    )
}

export default DiaryEditor;

5. 리액트의 useState import 하기

이제 이 값을 DiaryEditor 컴포넌트가 핸들링 할 수 있도록 state를 사용한다.

import { useState } from "react";

useState를 import 해준다.

작성자를 저장할 것이기 때문에

const [author, setAuthor] = useState("");

useState기본값을 주고 author라는 state와 author 상태변화를 주도할 setAuthor 상태변화함수를 만들어주었다. 여기서 첫번째 값은 현재 상태, 두번째 값은 Setter함수이다

input의 입력값이 바뀌면 입력값이 바뀔때마다 setAuthor 상태변화함수를 이용하여 author에 저장하려고 한다.

input의 값을 author로 설정해준 후 input이 수정되면 author의 값을 실시간으로 바꿔줄 수 있는 이벤트를 추가한다.

6. onChange

onChange props에 이벤트 객체 e를 매개변수로 사용하는 콜백함수를 전달해준다.

<input value={author} 
       onChange={(e)=>{
       console.log(e);
       }}/>

오늘의 일기 input에 값을 입력하면 console창에 change 이벤트 객체가 찍히는 것을 확인할 수 있다. 어떤 값을 입력했는지 확인하려면 타겟의 value 값을 적은 후 저장 console창을 확인해보면 input에 넣으려 하는 값이 뜬다.

7. 여러 줄 입력받기, onChange 이벤트를 사용하여 값 전달하기

위에서 설명했던 input과 textarea는 state를 이용하는 방법이 동일하다. value에 state이름, onChange에 e.target.value를 상태변화함수에 전달, 두 값이 가지는 자료형까지 똑같다.

8. 두 개의 state를 하나로 묶기

이럴 경우엔 state를 하나로 묶어주는 방법이 있다. setState를 할 때 새로운 객체를 만들어서 변경시켜준다. 바뀔 부분은 값을 넣어주고, 유지해야 할 부분은 state를 해준다.

import { useState } from "react";

const DiaryEditor = () => {

    const [state, setState] = useState({
        author: "",
        content: ""
    });

    return (
    <div className="DiaryEditor">
        <h2> 오늘의 일기 </h2>
        <div>
            <input value={state.author} 
            onChange={(e)=>{
                setState({
                    author: e.target.value,
                    content: state.content
                });
            }}/>
        </div>
        <div>
            <textarea value={state.content} 
            onChange={(e)=> {
                setState({
                    content: e.target.value,
                    author: state.author
                });
            }}/>
        </div>
    </div>
    )
}

export default DiaryEditor;

9. ...state 같은 스프레드연산자

그러나.. 지금처럼 2개가 아니라 인자가 10개 20개일때는? 한 개만 바꾸려다가 코드량이 길어질 수 있다는 문제점이 있다. 이럴 때 사용할 수 있는 건

            onChange={(e)=>{
                setState({
                    ...state,
                    author: e.target.value
                });
            }}/>

이때 주의해야 할 사항은 스프레드 연산자가 위에 위치해야 한다. 스프레드연산자가 밑에 위치하게 되면 업데이트한 값이 다시 state로 변경되기 때문

10. DiaryEditor 컴포넌트가 핸들링 할 수 있는 감정 선택 select 만들기

<div>
 오늘의 감정점수:
  <select
        name="emotion"
        value = {state.emotion}
        onChange={handleChangeState}
   >
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
    <option value={4}>4</option>
    <option value={5}>5</option>
  </select>
</div>

11. 저장 버튼을 생성하여 폼에 입력한 값 전달하기

    const handleSubmit = ()=>{
        console.log(state);
        alert("저장 성공");
    }

 <button onClick={handleSubmit}>일기 저장하기</button>

하단에 onClick이벤트를 넣은 버튼을 추가해주었다.

12. 약간의 CSS추가

가시성을 위해 약간의 style을 입혀주었다.

.DiaryEditor {
  border: 1px solid gray;
  text-align: center;
  padding: 20px;
}

.DiaryEditor input, textarea {
  margin-bottom: 20px;
  width: 500px;
  padding: 10px;
}

.DiaryEditor textarea {
  height: 150px;
}

.DiaryEditor select {
  width: 300px;
  padding: 10px;
  margin-bottom: 20px;
}

.DiaryEditor button {
  width: 500px;
  padding: 10px;
  cursor: pointer;
}

13. 결과

완성된 화면 !

loopedSlides: 1 을 넣어주면 된다.

In loop mode, duplicate slides are not being updated when the contents of the original slides change swiper controller 연동 오류일 때

문제 두 자연수 A와 B가 주어진다. 이때, A+B, A-B, A*B, A/B(몫), A%B(나머지)를 출력하는 프로그램을 작성하시오.

입력 두 자연수 A와 B가 주어진다. (1 ≤ A, B ≤ 10,000)

출력 첫째 줄에 A+B, 둘째 줄에 A-B, 셋째 줄에 A*B, 넷째 줄에 A/B, 다섯째 줄에 A%B를 출력한다.

💻답

const fs = require('fs');
const inputData = fs.readFileSync('/dev/stdin').toString().split(' ').map(Number);

const A = inputData[0];
const B = inputData[1];

console.log(A+B);
console.log(A-B);
console.log(A*B);
console.log(parseInt(A/B));
console.log(A%B);

지금까지 풀었던 사칙연산을 총 복습하는 문제였다. 자바스크립트에는 몫을 구하는 연산자가 따로 없기 때문에 A/B 문제에서 나눗셈 결과를 parseInt() 처리해서 정수만 뽑아낸다.

const fs = require('fs'); 
// node.js의 file system 모듈을 불러온다.

const inputData1 = fs.readFileSync('/dev/stdin').toString().split(' ');
// fs모듈의 readFileSync 함수를 통해 동기적으로 해당 경로의 파일 전체를 읽어들인다.
// 백준에서는 '/dev/stdin' 경로에 테스트 케이스 파일이 있다.
// 읽어들인 정보는 toString()함수를 통해 문자열로 변환해야 사용할 수 있다.
// 입력 받은 문자열을 split() 함수를 통해 배열화한다. (split(' '), split('\n') 등)
// 예) 2 3 입력시, inputData = ['2', '3']

const inputData2 = fs.readFileSync(0, 'utf8').split(' ');
// options으로 인코딩을 string 자료형으로 넘기는 경우, toString을 할 필요없이 문자열 반환

✔ 1000 A+B

문제 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력 첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력 첫째 줄에 A+B를 출력한다.

💻답

const fs = require('fs');
const inputData = fs.readFileSync(0, 'utf8').toString().split(' ');

const A = parseInt(inputData[0]);
const B = parseInt(inputData[1]);

console.log(A+B);

✔ 1000 A-B

문제 두 정수 A와 B를 입력받은 다음, A-B를 출력하는 프로그램을 작성하시오.

입력 첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력 첫째 줄에 A-B를 출력한다.

💻답

const fs = require('fs');
const inputData = fs.readFileSync(0, 'utf8').toString().split(' ');

const A = parseInt(inputData[0]);
const B = parseInt(inputData[1]);

console.log(A-B);

100vw - 여백 * 비율(세로/가로)

height: calc((100vw - 280px) * 0.6294); -> 이런 형태의 값이 나온다

// 결과
.attr() → #to_comment
.prop() → http://example.com/path/to/page#to_comment

<html>
<body>
    <h2>체크박스 예제</h2>
     <checkbox id="private" type="checkbox" checked />
</body>
<script>
  var $checkbox = $('#private');
  alert($checkbox.attr('checked'));  // checked 속성 값 
  alert($checkbox.prop('checked'));  // checked 프로퍼티 값
</script>
</html>

// 결과
.attr() → "checked"
.prop() → true / false

checked="checked"라는 attribute를 추가할 때 .attr('checked', 'checked'); 또는 .prop('checked', true); checked="checked"라는 attribute를 제거할 때 .removeAttr('checked'); 또는 .prop('checked', false);

selected="selected"라는 attribute를 추가할 때 .attr('selected', 'selected'); 또는 .prop('selected', true); checked="checked"라는 attribute를 제거할 때 .removeAttr('selected'); 또는 .prop('selected', false);

자바스크립트 .attr()과 .prop() 차이 정리

.attr() : HTML의 속성을 취급 .prop() : JavaScript프로퍼티를 취급

이 두 개의 메소드는 취급하는 정보가 다름 .attr()는HTML의 속성(attribute)을, .prop()는 JavaScript의 프로파티(property)를 취급하는 메소드임

회사에서 매일 쓰는 건데도 프로젝트의 완성(납기일 준수)만을 목적으로 한 실무였지 더 좋은 코드를 쓰기 위해선 별 노력을 하지 못했다. 그렇게 js를 기초의 중요성을 깨닫고 다시 입문자 강의부터 차근차근 듣는 중이다. 그 중에 가장 맘에 드는 (무료)강의는 생활코딩인데 선생님은 차분하고 좋은 목소리로 하나하나 핵심을 콕 집어 설명해주신다. HTML은 컨텐츠를 쓰는 언어, CSS는 컨텐츠를 디자인하는데 최적화된 언어, JS는 컨텐츠를 사용자와 상호작용 할 수 있게 만드는 언어라고 표현한 것이 인상적이었다. 개발을 시작한 이후로 나는 내가 쓰는 언어에 대해서 한 문장으로 정의해 본 적이 없었는데 아주 적절한 표현이라고 생각한다. 생활코딩 강의를 다 듣고 나서는 인프런에서 마음에 드는 react 입문 강의로 넘어갈 계획이다. 남들 다 하는 react 야 너도 할 수 있어

요즘 나는 '물고기는 존재하지 않는다'라는 책을 읽고있다. 책을 좋아하지도, 열심히 읽는 편도 아니지만 이 책의 내용이 어느새 회사 점심시간의 토론 주제가 되어있었다. 호불호가 많이 갈리는 책이라는 평이 있길래 궁금해져서 구매했다. 아직 두번째 목차도 벗어나지 못한 나는 잘 모르겠다. 한문단, 한문장을 읽는데에 많은 시간을 쓰게 하는 책인 것 같다.

요즘 건강한 식단에 관심이 생겼다. 회사에서 도시락을 싸다니거나 사먹거나 두 집단으로 나뉘는데 나는 도시락파다. 매번 사먹는 것도 지겹고 또 나가서 식당을 찾아 기다렸다가 밥을 먹고 돌아오면 점심시간이 끝난다. 온전히 나의 자유시간을 위한 선택이었는데 그렇다고 나는 건강한 음식만 먹었던 것은 아니었고 주로 닭가슴살볶음밥(이라고 쓰고 인스턴트 볶음밥), 편의점 삼각김밥, 아니면 샐러드 정도였다. 매번 이렇게 먹다보니 걱정이 되기 시작했다. 매일 끼니를 이런 식으로 채워도 괜찮을지.. 좀 더 후레쉬한 식단 없을까? 검색하다가 오버나이트오트밀 이라는 식단을 알게 되었다. 오트밀을 우유에 불려 요거트와 각종 견과류, 과일 등을 올려먹는 그야말로 건강식처럼 보였다. 어떤 사람은 잼이나 피넛버터를 올려 먹는데 나는 안올려 먹을 거니까 건강식단 아닐까? 합리화하며 오트밀과 요거트를 잔뜩 구매했다. 오늘 저녁에 만들어 먹어볼 생각이다. 건강해져라 네게 가진 거라곤 몸뚱아리 하나 뿐이다.

앞으로의 공부 목표와 회사에서의 업무, 나의 일상 루틴을 가감없이 공개하려고 한다. (점점 회사 업무 외 공부하지 않는 나를 채찍질 하기 위함이다..)

오늘은 퇴근 후 병원을 갈 것이고 내일은 운동을 꼭 가야겠다.

1. sticky속성을 갖는 요소는 상위 부모요소 안에서만 적용된다는 점
2. 부모요소에 충분한 height값을 줘야 한다는 점
3. sticky요소의 전체 부모요소 중에 overflow: auto, overflow: hidden, overflow: scroll 가 있으면 적용이 되지 않는다.

    // gnb 스크롤 이벤트
    var fixScroll = 0;
    $(window).scroll(function(event){
         var scroll = $(this).scrollTop();
         if (scroll > 2000){
              $("#gnb").addClass("fixed");
              $("html").css("overflow-x", "visible");
         } else {
              $("#gnb").removeClass("fixed");
              $("html").css("overflow-x", "hidden");
         }
         fixScroll = scroll;
    });
});

로컬에서 혼자 작업하며 잘 되던 sticky가 프로젝트 개발서버에 업로드 이후부터 적용이 안되는 것이었다.

이유는 해당 프로젝트 폴더에 공통으로 쓰이는 css파일의 html 태그에 overflow가 적용되어 있어서였다. 공통파일이라 삭제할 수는 없었고.. 스크립트로 sticky속성이 적용되는 시점에 html의 overflow 속성값을 visible로 잠시 바꿔주었더니 해결되었다.

css를 수도 없이 작성하면서 몰랐던 사실.. 반성해..

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.

제한 조건

• n과 m은 각각 1000 이하인 자연수입니다.

예시

입력

5 3

출력

문제풀이

// 입력받은 숫자를 'data'에 받음
process.stdin.setEncoding("utf8");
process.stdin.on("data", (data) => {
  const n = data.split(" ");
  // data(입력받은 숫자)를 배열로 변경한다.
  const a = Number(n[0]),
    b = Number(n[1]);
  // a는 한줄에 별의 갯수, b는 몇줄을 출력할 것인지

  // 입력 값 b(3) 만큼 반복문을 돌린다.
  for (let i = 0; i < b; i++) {
    // stars 변수를 초기화 해준다.
    let stars = "";

    // 위 for문이 한번 돌아갈 때 마다 입력 값 a(5) 만큼 반복문을 돌린다.
    for (let j = 0; j < a; j++) {
      // stars = stars + "*"
      stars += "*";
    }

    // 콘솔창에 현재까지 저장된 stars 값을 찍는다. (*****)
    console.log(stars);

    // i가 b(3) 보다 작을 경우 맨 위로가 다시 for문을 실행한다.
  }
});

별찍기는 대표적인 프로그래밍 문제 중 하나로 변수, 제어문을 이해하는 데 좋은 문제이다 보편적으로는 중첩 for문을 이용해 풀 수 있고, 자바스크립트의 경우 repeat() 메서드-MDN을 통해서도 풀 수 있지만 가장 보편적인 방법으로 풀어보았다.

주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요.

제한사항

• nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다.
• nums의 각 원소는 1 이상 1,000 이하의 자연수이며, 중복된 숫자가 들어있지 않습니다.

입출력 예 설명

입출력 예 #1

[1,2,4]를 이용해서 7을 만들 수 있습니다.

입출력 예 #2

[1,2,4]를 이용해서 7을 만들 수 있습니다. [1,4,6]을 이용해서 11을 만들 수 있습니다. [2,4,7]을 이용해서 13을 만들 수 있습니다. [4,6,7]을 이용해서 17을 만들 수 있습니다.

문제풀이

소수는 1과 자기 자신으로만 나누어지는 수를 의미한다. 먼저 소수인지 아닌지를 판별하는 함수를 하나 만들고, 전달받은 매개변수 값이 소수인지를 판별하기 위해서는 매개변수 값의 제곱근까지의 숫자들에 대해 나누어 떨어지는 값이 있다면 소수가 아니고, 없다면 소수라고 판단하여 반환한다.

매개변수 nums 배열에서 3가지 숫자를 더하여 새로운 수를 만들어내는 과정을 반복문을 사용하여 모든 숫자를 거치며 만들어낼 수 있는 숫자를 만들어내고, 만들어진 숫자를 미리 작성해둔 소수 판별 함수를 사용하여 소수인지 판별한다.

소수라면 answer의 값을 1씩 증가시켜준 뒤, 최종적으로 소수가 되는 경우의 개수를 반환한다.

해답코드

function solution(nums) {
    let answer = 0;

    for (let i = 0; i < nums.length; i++) {
        for (let j = i + 1; j < nums.length; j++) {
            for (let k = j + 1; k < nums.length; k++) {
                if (isPrime(nums[i] + nums[j] + nums[k])) {
                    answer++;
                }
            }
        }
    }

    return answer;
}

const isPrime = (n) => {
    for (let i = 2; i <= Math.sqrt(n); i++) {
        if (n % i === 0) {
            return false;
        }
    }
    return true;
}

order order의 숫자가 크면 클수록 정렬의 뒷 순서로 밀린다. 주의해야 할 점은 구조적으로는 바뀌지 않고 보여주는 순서만 바뀜

flex grow, shrink, basis의 단축속성이다.

flex-grow 기본 값은 0 기본 너비를 제외한 공백을 나누어 계산한다. 값이 클수록 값의 배수만큼 크기에서 상대적인 우위를 차지한다. 공백이 없을때에는 적용되지 X, 그땐 _shrink_를 사용한다.

e.g. ( 1 / 2 / 1 ) => ( 25% : 50% : 25% )

flex-shrink 기본값은 1이다. 값이 작을수록 커지며 flex-items들의 크기에서 숫자만큼의 우위를 차지한다. 감소의 유무(0,1)로 레이아웃을 잡는다. 줄어들지 않아야 하는 요소는 0으로 설정한다.

flex-basis 기본값은 auto이며 item의 기본 너비를 설정한다. item들의 width 값이 100px라도 flex-basis를 통해 기본 너비를 단위만큼 만들어 비율을 설정할 수 있다.

align-self 개별 아이템의 수직 정렬을 만든다.

자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식 최근에는 XML 보다 JSON을 더 많이 사용한다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미

Ajax의 동작방식

1. 요청 : 브라우저는 서버에 정보를 요청한다. (브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를 구현하고 있다.)
2. 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.

jQuery를 이용한 Ajax

jQuery에서 제공하는 $.ajax([settings])함수는 아래와 같은 구조로 구성되어 있다.

$.ajax ({
  // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
  url    : "url", // 요청이 전송될 URL 주소
  type    : "GET", // http 요청 방식 (default: ‘GET’)
  async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true,  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data  : {key : value}, // 요청 시 포함되어질 데이터
  processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // 요청 컨텐트 타입 
  dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
  beforeSend  : function () {
    // XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
    // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
  },
  error    : function(xhr, status, error) {
        // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
        // error 콜백이 호출될 수 있습니다.
        // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
        // 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출됩니다.
    // try - catch - finally의 finally 구문과 동일합니다.
  }
});

GET과 POST의 차이

데이터가 어디에 위치하는가에 있음. POST요청시에 URL에 파라미터가 보이지 않는 이유는 데이터가 요청 바디에 포함되기 때문. 그렇기 때문에 GET과 POST에 따라 데이터를 URL에 추가해야할지 요청 바디에 추가해야하는지를 알고 있어야 한다.

XMLHttpRequest jQuery.ajax()

데이터가 저장되는 곳

버튼을 클릭하면 클릭수(Total Click)를 화면에 렌더링하기

1. countUp 함수 내에 render 함수를 넣어 버튼을 클릭할 때마다 렌더링 되도록 한다.

 function countUp() {
    counter++;
    render();
}

function render() {
    ReactDOM.render(<App />, root);
}

이는 렌더링할 요소가 많아질수록 매번 렌더링을 해줘야 한다는 불편함이 있기 때문에 그다지 좋은 방법이 아니다.

2. State를 사용한다.

setCounter를 이용해 컴포넌트를 재생성하여 UI에 렌더 함수를 따로 추가하지 않아도 리렌더링이 가능하다. {State} 영역만 업데이트 되기 때문에 보다 효율적인 방법이다.

function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
        //리렌더링의 역할(컴포넌트 업데이트)
      };
      return (
        //컴포넌트
        <div>
          <h3> Total clicks : {counter} </h3>
          <button onClick={onClick}> Click me </button>
        </div>
      );
    }

ReactDOM.render(<App />, root);

<h1 className="hi"> Super Converter </h1>
<label htmlFor="hours"> Hours </label>

JSX에서는 class(x) clasName(O) / for(x) htmlFor(O)

<input
    value={flipped ? amount * 60 : amount}
    id="minutes"
    placeholder="Minutes"
    type="number"
    onChange={onChange}
    disabled={flipped}
/>

• 삼항연산자 : flipped(default:false)가 true라면 flipped가 한 번 눌러졌다는 이야기, 즉 hours를 입력하고 그것을 분 단위로 바꿔야 한다.
• disabled : true이면 해당 input에는 입력할 수 없다.
• onChange : input에 변화가 생기면(사용자가 input에 값을 입력할 때) onChange 함수가 실행된다.
• event.target.value를 얻게 되는데 바로 input의 value이다.
• 한 컴포넌트 안에서 다수의 컴포넌트를 렌더링할 수 있다.
• 컴포넌트는 무조건 대문자로 시작해야 한다 잊지말기

<body>
    <div id="root"></div>
</body>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
            const [amount, setAmount] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setAmount(event.target.value);
            };
            const reset = () => setAmount(0);
            const onFlip = () => {
                reset();
                setFlipped((current) => !current);
            }
            return (
                <div>
                    <h1 className="hi">Super Converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes</label>
                        <input
                            value={flipped ? amount * 60 : amount}
                            id="minutes"
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange}
                            disabled={flipped}
                        />
                    </div>
                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input
                            value={flipped ? amount : Math.round(amount / 60)}
                            id="hours"
                            placeholder="Hours"
                            type="number"
                            disabled={!flipped}
                            onChange={onChange}
                        />
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flip</button>
                </div>
            );
        }
        ReactDOM.render(<App/>, root);
    </script>

노마드코더-react-basic 리액트 공식문서

React 파일은 컴포넌트를 담당. React DOM 파일은 실제 DOM에 렌더링을 담당.

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

• body 이후에 위치

02. ReactDOM.render();

React element들을 html내부에서 보여줌

ReactDOM.render(<Container/>, root);

03. JSX파일 babel을 이용해 변환해주기

React JSX: JavaScript언어의 확장. JavaScript에서 HTML형식을 그대로 사용할 수 있게 하는 등 XML과 같은 문법을 native JavaScript로 변환해줌. Babel: 자바스크립트 컴파일러. 여러가지 브라우저를 지원하기 위해 ES6로 작성된 코드를 ES5로 변환해줌.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

이때, 우리가 코드를 넣는 script파일 type을 text/babel로 설정해줘야 에러가 나지 않는다.

04. 컴포넌트의 첫글자는 무조건 대문자

컴포넌트는 자바스크립트 클래스. 참조 시 <컴포넌트명/>형식으로 쓰임. 소문자로 쓰면 div나 span 같은 HTML 태그로 해석되기 때문에 반드시 대문자로 시작해야함.

TIL

<body>
    <div id="root"></div>
</body>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function Title() {
            return (
                <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
                Hello i'm a span
                </h3>
            );
        }
        const Button = () => (
            <button 
            style={{backgroundColor: "tomato",
        }}
            onClick={() => console.log("im clicked")}
        >
            Click me
            </button>
        );
        const Container = () => ( // 이 부호는 function하고 괄호 열고 return 하는 것과 같은 의미
            <div>
                <Title/>
                <Button/>    
            </div>
        );
        ReactDOM.render(<Container/>, root);
    </script>

플러그인을 쓰지 않고 풀페이지 효과 구현해보기

window.addEventListener("wheel", function(e){
    e.preventDefault();
},{passive : false});
// 기본 이벤트 제거

var $html = $("html");
var page = 1;
var lastPage = $(".content").length;

$html.animate({scrollTop:0},10);
// 페이지 선언

$(window).on("wheel", function(e){

    if($html.is(":animated")) return;

    if(e.originalEvent.deltaY > 0){
        if(page== lastPage) return;

        page++;
    }else if(e.originalEvent.deltaY < 0){
        if(page == 1) return;

        page--;
    }
    var posTop = (page-1) * $(window).height();

    $html.animate({scrollTop : posTop});
  // 마우스 휠을 굴렸을 때 이벤트 추가

    $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll > 1) {
          $("header").css("background" , "#000000");
        }
        else{
          $("header").css("background" , "transparent");   
        }
      })
 // 스크롤 하면 헤더 색상 변경 
});

추가해야 할 것

• 스크롤 될 때마다 active되는 pagenation

.reviewBoxTtl {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

overflow 속성은 hidden으로 준다. 지금은 부모의 width값이 inherit되어 보이지 않지만 당연히 줄이고자 하는 div에 width property를 줘야 원하는 만큼 글을 줄이고 말 줄임표가 나오게 된다. ellipsis 속성은 가장 간단하게 긴 글을 줄일 수 있는 방법이지만 1줄로 줄이는 것밖에는 되지 않는다.

여러줄로 줄이기 위해 다음과 같이 적용해보았다.

.reviewBoxTtl {
    max-height: 120px;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4; // 글의 최대 라인수를 결정
    -webkit-box-orient: vertical;
    word-break: break-all;
}

white-space는 normal로 준다. 여기서 -webkit-line-clamp는 글의 최대 행 숫자이다. 4로 설정하면 4줄까지만 나오고 말줄임표로 마무리 된다.

-webkit은 크로스브라우징을 위해 필요한데, -webkit은 구글, 사파리 브라우저에서 사용 가능하다 적용할 때 브라우저 지원 범위를 확인하고 사용하기!

마치면서

text-overflow 속성은 display 속성이 블럭 형태인 경우에만 적용된다. 즉, inline의 경우는 적용되지 않음. 이를 적용하기 위해서는 반드시 아래와 같이 display를 block 또는 inline-block과 같이 설정해야만 적상적으로 작동한다는 것을 명심하자

구글링 그만하고 외워버리자..

        document.querySelector('.menu').addEventListener('click', e => {
            if(e.target.nodeName === 'LI') {
                let id_value = e.target.dataset.link;
                document.querySelector(id_value).scrollIntoView({behavior : 'smooth'});
            }
        });

괄호안에 {behavior : 'smooth'} 코드 추가시 스크롤 이동이 ease-in-out과 같이 부드러워진다