본문 바로가기

💻 DEV94

[React] React.Fragment 란? ✨ React Fragment 의 기본 기능 컴포넌트의 리턴문 내부에서 별도의 노드를 추가하지 않고 여러 엘리먼트를 그룹화할 수 있도록 한다. const Component = () => { return ( ) } ✨ Fragment 의 특징은? Key 를 전달할 필요가 없는 경우 빈 태그처럼 사용할 수 있다. Key 가 있다면 를 명시해주어야 한다. 엘리먼트가 너무 많아질 때는 최상단과 하단에 Fragments을 추가해 그룹화 하는 방법을 활용할 수 있다. const Component = () => { return ( // Key 가 없는 경우 ) } Fragment 의 장점은? React 문법 특성상 하나의 컴포넌트 당 하나의 엘리먼트만 반환할 수 있기에, 반환문을 div 나 여타 태그로 전체 엘리먼트.. 2021. 5. 9.

[React] 리스트의 Key ✨ React 에서 Key란? 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. function NumberList(props) { return ( 1 2 3 ) } Key 의 특징은? 고유한 값이어야 하며, 형제 노드인 다른 아이템과의 중복된 키 값은 허용되지 않는다. 또한, 컴포넌트의 구성요소로 전달되지 않는다. (따라서 props 에 key 가 포함되었다 해도 props.key 로 사용 불가하다) 주의할 점 컴포넌트 하나를 여러 차례 반복해서 나열할 경우 컴포넌트 자체가 하나의 list 가 된다. 이 경우, 컴포넌트 자체의 key 값을 변경해주어야 한다. function ListItem(props) { .. 2021. 5. 9.

[Javascript] 객체의 Deep Copy (깊은 복사) ✨ Object 란? Javascript의 Reference type (객체/참조형 타입) 에 속하는 Data type 이다. 한국어로는 '객체'로 불리우며, key 와 value 들로 구성되어 있다. 객체는 Heap 라는 메모리 공간에 저장되며, 변수에는 해당 공간을 참조하는 주소값이 할당된다. 따라서 새로운 변수에 객체 변수 자체를 할당할 경우 객체 자체의 복사가 이루어지지 않으며, 객체를 바라보는 주소만 복사된다. // 참조 할당: 서로 다른 변수가 같은 객체를 참조하게 됨 let obj = {0:'zero', 1:'one'} let obj1 = obj // obj의 객체 주소가 복사됨 obj1.1 = 'changed one' // obj1 에서 값을 변경해주면 obj // {0:'zero', 1:.. 2021. 5. 9.

[Javascript] 함수 : Currying (커링) ✨ Curry 함수란? 함수를 반환(return)하는 고차함수의 일종이다. 이때, 반환되는 함수를 클로저(Closure)라고 칭하기도 한다. function curry(func) { // curry() 는 커리함수이다 return (function closure(something){ // callback() 는 클로저이다 return (console.log(something)) }) } ✨ Currying(커링)이란? 여러 개의 매개변수를 단일 호출에 처리하는 함수를, 각각의 매개변수가 개별로 호출될 수 있도록 변환하는 작업을 커링(Currying)이라고 한다. function sum(a, b) { // 일반 함수 sum() 을 커링하여 변환해보도록 한다. return a + b; } function c.. 2021. 5. 9.

[프로그래머스] 스택/큐(Stack/Queue) : 주식가격 문제 설명 초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요. 제한 사항 - prices의 각 가격은 1 이상 10,000 이하인 자연수입니다. - prices의 길이는 2 이상 100,000 이하입니다. 입출력 예 Prices Return [1,2,3,2,3] [4,3,1,1,0] 입출력 예 설명 - 1초 시점의 ₩1은 끝까지 가격이 떨어지지 않았습니다. - 2초 시점의 ₩2은 끝까지 가격이 떨어지지 않았습니다. - 3초 시점의 ₩3은 1초뒤에 가격이 떨어집니다. 따라서 1초간 가격이 떨어지지 않은 것으로 봅니다. - 4초 시점의 ₩2은 1초간 가격이 떨어지지 않았습니다. - 5초 .. 2021. 5. 7.

[프로그래머스] 스택/큐(Stack/Queue): 다리를 지나는 트럭 문제 설명 트럭 여러 대가 강을 가로지르는 일 차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 트럭은 1초에 1만큼 움직이며, 다리 길이는 bridge_length이고 다리는 무게 weight까지 견딥니다. ※ 트럭이 다리에 완전히 오르지 않은 경우, 이 트럭의 무게는 고려하지 않습니다. 예를 들어, 길이가 2이고 10kg 무게를 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다. 따라서, 모든 트럭이 다리를 지나려면 최소 8초가 걸립니다. solution 함수의 매개변수로 다리 길이 bridge_length, 다리가 견딜 수 있는 무게 weight, 트럭.. 2021. 5. 7.

[프로그래머스] 스택/큐(Stack/Queue): 프린터 문제 설명 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄되는지 .. 2021. 5. 7.

[프로그래머스] 스택/큐(Stack/Queue): 기능개발 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 - 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. - 작업 진도는 100 미만의 자연수입니다. - 작업 속도는 100.. 2021. 5. 7.

[Anaconda] 맥(Mac) 터미널에서 아나콘다 설치하기 최근에 파이썬 라이브러리 이것저것으로 실험을 하다가 결국 콘다 환경 내에서 잦은 충돌이 발생하기 시작했다. 문제를 해결하기 위해 터미널을 만져보다가 결국 conda PATH 설정도 변경해 conda, pip 명령어들조차 실행이 안 되기에 이르렀다. 고민하다가 삭제 후 재설치를 하는 것이 가장 낫겠다 싶어 다시 설치를 하게 되었다. 터미널에서 아나콘다를 삭제하는 방법은 간단하다. 터미널 창을 연 후 anaconda3 폴더가 있는 경로를 찾아 들어가 지워주면 된다. 나의 경우 경로가 `~/Users//` 로 되어있었기 때문에 먼저이 폴더를 삭제해주는 작업부터 시작했다. 주의할 점이 몇 가지 있는데, 1. 일반 사용자 권한으로 폴더를 삭제할 경우 권한이 없어 명령이 실행되지 않을 수 있다. 이 경우 명령어 앞.. 2021. 4. 19.

이전 1 ··· 7 8 9 10 11 다음

티스토리툴바