21.07.05

📌 React 사용전 설치 리스트

1. Node.js
2. Yarn
3. Emotion
4. Apollo-Client
5. Graphql
6. Ant-Design
7. Material-UI
8. Axios

📌 React 기본 구조

import {//만들어 놓은 구성요소명 ex) Wrapper, Title} from //연결할 파일경로
export default function //페이지구분명(){
	return (
    	//화면에 보여지는 구성요소
    	<Container>
        	
  	</Container>
    )
}

return() 내부의 요소들이 화면에 보여진다.
import를 사용해서 외부 css연결하듯 style.js를 연결시킨다.

📌 Style.js 연결시키기

import styled from '@emotion/styled'

export const Container = styled.div`dispaly: flex;` 

위 기능을 사용해서 Container를 태그로 만들어 직접 사용이 가능하다.
''가 아닌 ``(~키)를 사용한다.

만들어진 태그는 인라인 속성 또한 줄 수 있다.

export const RadioBtn = styled.input``
<RadioBtn type="radio" name="Btn01"></RadioBtn>

📌 프로그래머스 알고리즘 연습문제

❓문자열을 정수로 바꾸기

• 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요.

• s의 길이는 1 이상 5이하입니다.
• s의 맨앞에는 부호(+, -)가 올 수 있습니다.
• s는 부호와 숫자로만 이루어져있습니다.
• s는 "0"으로 시작하지 않습니다.

function solution(s) {
    var answer = 0;
    answer = Number(s);
    return answer;
}

Number()를 사용해 문자열로 바꿔 answer에 담아 출력했다.

❓핸드폰 번호가리기

• 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

• s는 길이 4 이상, 20이하인 문자열입니다.

function solution(phone_number) {
    var answer = '';
    for(let i = 0; i < phone_number.length; i++){
        if(i < phone_number.length-4){
            answer = answer+"*"
        }else{
            answer = answer + phone_number[i]
        }
    }
    return answer;
}

전화번호 뒷 4자리 외에는 별을 추가하기 위해 phone_number의 총 길이에서 4를 뺀 index number 이하일때는 별이 추가되고, 그 외에는 숫자가 answer에 들어가도록 반복문을 사용하였음

❓같은 숫자는 싫어

• 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다.

  예를 들면,
  arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.
  arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.
  배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.

function solution(arr){
    var answer = [];
    let temp = arr[0];
    answer.push(temp);
    for(let i = 1; i < arr.length; i++){
        if(temp !== arr[i]){
            temp = arr[i];
            answer.push(temp);
        }else{
            continue;
        }
    }
    

어짜피 첫 시작점은 고정이니 temp 에 arr[0]을 넣어두고,
첫자리부터 비교를 해나가며 중복된 숫자는 continue를 통해 생략하였다.