Bin's Blog

1.1 UseEffect - 컴포넌트의 Lifecycle(인생주기)가 존재한다. 1. 페이지 들어갔는데 보이는 순간을 페이지 장착(mounted)된다고 한다. 2. 가끔 업데이트 된다(update) - state조작시 3. 필요없으면 제거된다.(unmounted) - 다른 컴포넌트로 이동시 그래서 위의 인생주기에 간섭할 수가 있다. - 수정, 삭제, 이동할 때 특별한 기능을 구현한다. 간섭하기 위해서 useEffect()를 사용한다. Function 안에 사용하면서 mount, update시 코드 실행한다. - 언제 쓰니? 1. 실행시점이 약간 다르다.(렌더링이 다 되고 나서 실행된다) 2. 그럼 반복하거나 어려운 작업들을 Html이 렌더링이 되고 나서 실행하니까 조금 더 효율적이다. 3. 시간 오래 걸..

1.1 style-components - 이제까지 배웠던 style을 꾸미는건 className을 넣고 css 파일로 이동해야했다. - 귀찮으니 style-components를 사용해보자. // 이런식으로 styled.만들고 싶은거 + ``백틱 기호 안에 꾸미고 싶은거 꾸미고 변수로 정의하고 let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` 버튼 1.1.1 style-components의 장점 - css 파일 안 열어도 된다. - 스타일이 다른 js파일로 오염되지 않는다. (vue.js scoped와 비슷하다.) - 기존 css파일의 스타일은 다른 js의 파일에 적용되기도 한다. - 기존 css파일의 오..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. rows * columns 크기인 행렬이 있다. 행렬은 1부터 rows * columns까지의 숫자가 한 줄씩 순서대로 적혀있다. 2. 직사각형 모양의 범위를 여러 번 선택해, 테두리 부분에 있는 숫자들을 시계방향으로 회전해야 한다. 3. 각 회전들을 배열에 적영한 뒤, 그 회전에 의해 바뀐 숫자들 중 가장 작은 숫자들을 순서대로 배열에 담아 return해라. ▶ 정답 코드 function solution(rows, columns, queries) { let answer = []; // 0..

ES6부터 새롭게 추가된 타입인 Symbol에 대해서 알아보자. 고유성이라는 단어가 Symbol의 핵심 단어이다. 예를 들어, 학교에서 학생들이 같은 유니폼을 입어도 그들 자신만의 고유한 이름을 가지고 있어서 선생님은 이름을 통해 학생을 구별할 수 있다. Symbol은 자바스크립트에서 고유하고 변경할 수 없는(immutable)한 데이터 타입이다. 즉, 한 번 생성된 Symbol은 다른 어떤 Symbol과도 완전히 다른 고유한 값을 가지게 된다. Symbol 함수를 호출할 때마다 새로운, 고유한 Symbol 값을 생성한다. 그래서 Symbol은 주로 객체의 키(key)로 사용되며, 이를 통해 객체 내에서 고유한 속성을 보장한다. 객체는 무엇일까? 여러 가지 정보를 담을 수 있는 일종의 상자이며, 이 정보..

1.1 절차형 프로그래밍 컴퓨터에게 어떻게 문제를 해결하라고 지시하는 방식의 프로그래밍이다. 예를 들어, 초콜릿 케이크를 만든다고 생각해보자. 레시피는 우리에게 무엇을 해야 할지 순서대로 알려준다. 재료 준비, 재료를 섞고, 그 다음에는 오븐에서 케이크를 굽는다. 이와 마찬가지로, 절차형 프로그래밍은 컴퓨터에게 문제를 해결하기 위해 필요한 단계를 순서대로 알려준다. 일이 진행되는 방식으로 코드를 구현하기만 하면 되기 떄문에 코드의 가독성이 좋으며 실행 속도가 빠르다. 그렇기 때문에 계산이 많은 작업 등에 쓰인다. 그러나 이런 방식에는 단점이 있다. 훨씬 더 복잡한 문제를 해결하려면 수천 개 이상의 단계를 거쳐야 한다. 모듈화하기 어렵고, 유지 보수성이 떨어진다. const ret = [1,2,3,4,5,..