혼자 적어보는 노트

React의 props에 대한 이해. jsx에선 component에 정보를 보낼 수 있다. 컴포넌트에서 컴포넌트로는 물론 컴포넌트에서 children component로 정보를 보낼 수 있다. 정보를 보내기 위해서는 아래와 같은 방식을 사용한다. content라는 component에 name이라는 property에 first라는 값을 주었다는 뜻. 이렇게 지정한 property들을 props라고 부른다 function App() { return ( hi hello ); } 예를들면 이런식으로 props name과 value를 마음대로 설정할 수 있고 여러개의 props를 전송할 수 있다. function Content(props) { console.log(props); return hey } // Obj..

JSX란? javascript안의 HTML이라고 볼 수 있다. javascript와 HTML사이의 이 조합을 jsx라고 부른다. (react에서만 있는 개념) JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이라고 볼 수 있다. Component function App() { return ( hi hello ); } component는 위와 같이 React 엘리먼트를 반환하는 함수이다. javascript 함수이기 때문에 말 그대로 함수 컴포넌트라고 한다. react는 여러가지의 component를 만들 수 있다. *component명은 대문자로 생성해 주는 것을 원칙으로 한다. 컴포넌트 생성 및 다중 컴포넌트 렌더링 component를 만들 때는..

React 세팅 리액트를 사용하기에 앞서 필요한 것은 아래와 같다 node.js / npm / npx node.js는 해당 사이트에서 운영체제에 맞게 설치가 가능하고, npm은 node.js설치시 자동으로 설치가 된다. npx는 cdm에서 npm install npx -g로 설치가 가능하다. git도 함께 설치해서 진행하는것이 좋다. node -v npm -v npx -v 설치후 위의 명령어를 입력하여 version을 확인함으로 설치가 제대로 완료되었는지 확인할 수 있다. 설치 완료 후 cd Documents로 가서 명령어를 사용하여 리액트 aplication을 생성해 주어야 한다. npx create-react-app [App-name] React 동작 방식에 대한 이해 생성된 react create ..

sort() 함수 Javascript에서 배열을 정렬하기 위해 sort()를 사용한다. arr.sort([compareFunction]) compareFuction 이 값이 생략된다면 요소들을 문자열로 변환 유니코드 순서대로 문자열을 비교하여 정렬. *숫자또한 문자열로 정렬되어 [1, 4, 6, 10, 30] 입력시 [1, 10, 30, 4, 5, 6] 이렇게 앞글자대로 정렬된다. compareFunction(a, b) - 이 반환값이 0보다 작은 경우 a가 b보다 앞으로 정렬된다. - 리턴값이 0보다 클 경우 b가 a보다 앞으로 정렬된다. - 만약 0을 리턴한다면 a와 b의 순서를 변경하지 않는다. let arr = [1, 4, 6, 10, 30]; arr.sort((a,b)=> a-b); consol..

https://lovetype-jt.netlify.app/ 처음으로 netlify를 이용해서 웹 사이트를 배포해보았다. 회원가입-로그인-파일드래그-도메인설정 끝! 질문 답변은 미완성이지만 기능 구현하는 부분에 있어서는 질문과 답변. 그리고 이미지만 있다면 다른 테스트도 진행해 볼 수 있을 것 같다. - 만들면서 새로 알게된 점 for문을 통한 클릭한 엘리먼트의 데이터 전송 주어진 데이터를 사용자의 선택에 따라 로드하는 방식 데이터를 불러오는 과정에서 더 나은 알고리즘 선택 netlify를 이용한 웹 사이트 배포 카카오 공유하기 api사용 - 개선하고 싶은 점 애니메이션 추가 : fade in/out 외에 조금더 다양한 애니메이션을 구현해보고 싶어졌다. 로딩중 페이지 작업 : 마지막 질문의 답변 선택 후 ..

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 로그인 후 내 애플리케이션 이동 애플리케이션 추가 버튼 클릭 후 앱이름/사업자명 작성 후 저장합니다. 생성된 애플리케이션을 클릭후 왼쪽 메뉴의 [플랫폼]을 클릭하여 Web 플랫폼을 등록해줍니다. 상단메뉴 문서 - 메세지 클릭 시 메시지 API에 대한 문서를 읽을 수 있습니다. https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js Kakao Developers 카카오 API를 활용하..

let num=1234; let sum=0; while(num){ sum+=(num%10); num=Math.floor(num/10) } // 4 + 3 + 2 + 1 console.log(sum) // 10 자릿수 구하려면 나머지를 구하는 방식으로 접근하여 진행 혹은 reduce 사용 let num=1234; let sum = num.toString().split('').reduce((a,b) => a + Number(b), 0); console.log(sum) // 10

진행 상태 바 진행 상태 바 표시는 생각보다 간단했다 html에서 status bar를 status로 감싸주고 질문으로 넘어가는 함수 안에 statusBar의 with를 (100/전체 질문 수)*(질문index-1) + "%" 로 변경되게 하였다. Result페이지 이동 질문으로 넘어가는 함수 안에 질문의 index 가 전체 질문 개수와 같으면 결과 함수가 실행되게 설정 if(qIdx === qCount){ goResult(); return; } 결과값을 도출하려면 사용자가 몇 번째 질문에서 몇 번째의 답을 적었는지를 담아주어야 하는데 질문을 생성하는 함수에 answer의 index값을 받아서 답변을 클릭하면 만들어 놓은 select 배열의 qIdx 번째의 요소의 값에 aIdx 값이 들어가게 만들어주었다..