천천히 느리게 천천히 느리게

1. 문제 2. 해결방안 const reverse = x => { let array = []; let strings = x.toString().split("").reverse().join(''); console.log(strings); for(let i =0; i < strings.length; i++) { if(strings[i] === '-') { array.unshift(strings[i]); }else { array.push(strings[i]); } } return Number(array.join('')); } reverse(-1234);

1. 문제 2. 해결방안 const twoSum = (nums, target) => { let array = []; for(let i = 0; i < nums.length; i++) { for(let y = 0; y < nums.length; y++){ if(nums[i] + nums[y] === target) { array.push(i , y); return array; } } } } twoSum([4, 9, 11, 14], 13)

1. state ◎ state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 함수형 컴포넌트와 state를 다루는데 방법에 차이가 있어서 기록을 남기자. 2. state의 사용법 ◎ 동적인 데이터를 다룰 땐 바로 state를 사용한다. 함수형 컴포넌트에서도 연습했던 카운터 예제를 통해 연습해보자. CounterClass라는 컴포넌트를 만들고 코드는 다음과 같다. 위의 코드를 한번 살펴보자. 2-1. state 정의 ◎ constructor 에서 super(props)를 호출 한 이유는 , 우리가 컴포넌트를 만들게 되면서, Component를 상속했으며, 우리가 이렇게 constructor를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 된다. 그렇기에 리액트 컴포넌트가 지니고 있던 생성자를..

1. useState ◎ 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 사용하는 함수가 useState이다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState라는 함수는 리액트의 Hoooks 중 하나이다. ※ Hook은 클래스 안에서 동작하지 않는다. 2. 예시 ◎ 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 구현해보자. 그다음엔 App에서 Counter를 렌더링 해보자. 2. 이벤트 설정 ◎ Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정을 해보자. Counter 컴포넌트를 다음..

1. props ◎ props는 properties의 줄임말로, 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용해야 한다. 2. props의 사용법 ◎ 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 해보자. 그러면, 다음과 같이 코드를 작성하면 된다. Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐 어떻게 하면 되는지 코드를 작성해보자. 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면, props.name을 조회하면 된다. 3. 여러개의 props, 비구조화 할당 ◎ Hello 컴포넌트에 또 다른 props(color)를 전달..

1. 컴포넌트 만들기 ◎ component를 만들 때는 클래스 component와 함수형 component가 있다. 예전에는 클래스 컴포넌트를 사용하였지만 리액트에서 Hooks라는 개념이 등장하고부터 함수형 컴포넌트를 많이 사용하는 추세이다. 그래서 현재 많이 사용하고 있는 함수형 컴포넌트로 만들고 나중에 클래스 컴포넌트를에 대해 알아보겠다. 자, 이제 함수형 컴포넌트로 src 디렉터리에 Hello.js라는 파일을 만들어보자. 리액트 컴포넌트를 만들 때는 import React from 'react'; 를 통하여 리액트를 불러와 주어야 한다. 그리고 코드의 최하단에는 export defualt Hello; 를 통하여 Hello라는 컴포넌트를 내보겠다는 의미로 코드를 작성하여야 한다. 이렇게 해주면 다른 ..

1. React 란 ◎ React는 페이스북에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다. 페이스북을 비롯하여 Airbnb, Netflix, Twitter 등 세계를 선도하는 서비스들이 React를 사용하고 있다. 그중에서도 에어비앤비와 넷플릭스는 페이스북 못지않게 React를 생태계에 적극적으로 기여하고 있다. 2. Framwork? Library? ◎ React가 프레임워크인지, 라이브러리인지 헷갈려하는 개발자도 있습니다. React는 Angular 같은 Framwork가 아니라 Library이다. Router처럼 웹을 만드는 게 꼭 필요한 도구들이 기본적으로 포함되어있지 않다. 그 대신 가볍고 무엇보다 훨씬 빠르게 배울 수 있다. 3. 특징..

1. 시작 ◎ 현재 많은 애플리케이션에 사용되는 모달을 만들어 보고 싶었다. 스터디 기간에 만들었던 자기소개 페이지에 my resume 버튼을 클릭하면 이력서 미리 보기 모달이 나오게 구현해보았다. 2. 레이아웃 정말 간단히 만든 레이아웃이다. 나중에 더 제대로 구현할 생각이다. 문득 모달을 만들어보고 바로 구현해본 거라 없어 보일 수 있다. 레이아웃을 먼저 구성한 후 css를 입혀보았다. css를 입히고 나름 모달 처럼 나왔다. 하지만 시작부터 모달이 나오는 문제가 발생하였다. 모달은 어떠한 클릭이벤트가 걸리면 나오기 때문이다. 이제 코드를 보면서 해결책을 봐보자. 3. 코드 ◎ html code my resume 안녕하세요 이력서 미리보기 모달창 닫기 .section_link class를 가진 div..