전체 글

[Typescript] 기본 필수 문법

기본 타입 지정 let person_name_str :string = "KimJiWoo"; // 문자열 let person_name_array :string[] = ["KimJiWoo"]; // 문자열로 이루어진 array let person_name_union_array :(string | number)[]= ["Kim", 12, "HI"]; // 문자열과 숫자로 이루어진 array let person_name_obj :{name : string} = {name : "KimJiWoo"}; // 문자열로 이루어진 object let person_name_obj_str :{name : string | number} = {name : "Kim"}; // 문자열과 숫자로 이루어진 object let perso..

[코딩애플/React.js] input 태그를 활용한 글 생성, 수정 예제 풀이

이 번 회차는 코딩애플에서 내준 과제에 대한 전체 코드 및 아주 간략한 코드 설명 포스팅입니다. /* eslint-disable*/ import { useState } from 'react'; import './App.css'; function App() { let [title, settitle] = useState('부산 우동 맛집'); let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']); let [logo, setlogo] = useState('React Blog'); let [like, setlike] = useState([0, 0, 0]); let [modal, setModal] = useState(false); let [putindex,..

[React.js] props()에 대하여

❗ props( )란? 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체. ✔ props( ) 사용방법 1. 2. props 파라미터 등록 후 props.작명 사용 *파라미터 이름은 아무거나 상관 없음 let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']); return ( //제목1 = 맛있는 우동 ) function ModalUI(props) { return ( {props.modal_title[0]} 날짜 상세내용 ) } (참고1) props는 이렇게 10개 100개 1000개 무한히 전송이 가능하다. (참고2) 꼭 state만 전송할 수 있는건 아니다. 일반 변수, 함수 전송도 가능하고 일반 문자전송은 중괄호 없이 이렇게 해도 된다. ✔ pr..

[React.js] JSX, useState에 대하여

❗ JSX문법 JSX 문법이란 JavaScript 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 React 기본 내장 문법이다. 1. class 선언 대표적으로 두드러지는 문법은 class인데, React에서는 class라는 키워드를 사용할 수는 없고 className이라고 사용해야한다. 2. Data-Binding Data-Binding은 JavaScript 데이터를 HTML에 넣는 작업을 뜻한다. Front-end, Web-App 개발 시 Data-Binding할 작업이 많은데 React는 이걸 매우 쉽게 구현 할 수 있다. // JS // React function App() { let [title] = useState("제목"); return ( {title} ) 이런식으로 중간에 {중..

[React.js] React.js의 map() 반복문

** 중괄호 안에서 if문을 쓸 때는 삼항연산자를 사용할 것. ** 중괄호 안에서 for문을 쓸 때는 map()를 사용할 것. ❗ map() map() 함수는 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 1. array 자료 갯수만큼 함수안의 코드를 실행 해준다. [1,2,3].map(function(){ console.log("1") }) // 1 // 1 // 1 2. 함수의 파라미터는 array안에 있던 자료이다. [1,2,3].map(function(a){ console.log(a) }) //1 //2 //3 3. return에 무언갈 적으면 array로 담아준다. [1,2,3].map(function(){ return "test" }) //["test", "test", "test"] ..

[React.js] React 학습을 시작하기에 앞서 주절주절

드디어 JS ES6 기초를 어느정도 잡고 본격적으로 리액트 공부를 시작 하려한다. React.js를 공부를 시작하게된 계기는 현재 소규모 스타트업 회사에서 Vanilla.js를 사용하여 웹 개발자는 단독으로 프로젝트를 진행중이다. 하지만 나는 계속 성장하고싶고 많은것을 배우고싶고 회사에도 도움이 되고싶다. 물론 Vanilla.js는 분명 강력하지만 성장에 대한 욕구를 충족시켜주지는 못한다. 그래서 내가 먼저 앞장서서 React.js에 대해 학습하고 소규모 프로젝트를 혼자 완수할 수 있을 정도의 레벨을 갖고 왜 React.js를 사용해야하는지에 대해서 면밀히 조사하여 이 회사의 프론트엔드 프레임워크를 React.js로 채택하여 앞으로의 프로젝트에서는 React.js를 사용하여 개발을 진행할 수 있게끔 내가..

[JAVASCRIPT] 백준 9095번 문제 풀이

문제 정수 4를 1, 2, 3의 합으로 나타내는 방법은 총 7가지가 있다. 합을 나타낼 때는 수를 1개 이상 사용해야 한다. 1+1+1+1 1+1+2 1+2+1 2+1+1 2+2 1+3 3+1 정수 n이 주어졌을 때, n을 1, 2, 3의 합으로 나타내는 방법의 수를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, 정수 n이 주어진다. n은 양수이며 11보다 작다. 출력 각 테스트 케이스마다, n을 1, 2, 3의 합으로 나타내는 방법의 수를 출력한다. 예제 입력 1 3 4 7 10 예제 출력 1 7 44 274 const [n, ...input] = require('fs').readFileSync('dev/stdin').t..

[JAVASCRIPT] 백준 17202번 문제 풀이

문제 어린시절 다들 한 번씩은 이름으로 궁합을 본 적이 있을 것이다. 이것과 비슷한 방식으로 중앙대학교에는 핸드폰 번호 궁합을 보는 것이 유행이라고 한다. 핸드폰 번호 궁합을 보기 위해서는 먼저 궁합을 보고싶은 두 중앙대생 A와 B의 핸드폰 번호에서 맨 앞의 010과 "-"(하이픈)을 모두 제외한 후, A부터 시작하여 한 숫자씩 번갈아가면서 적는다. 그리고 인접한 두 숫자끼리 더한 값의 일의 자리를 두 숫자의 아래에 적어나가면서 마지막에 남는 숫자 2개로 궁합률을 구하게 된다. 예를 들어, 아래의 그림과 같이 A의 번호가 010-7475-9336 이고, B의 번호가 010-3619-5974 이면, 7346715995393764에서 시작하여 070386484822030, 77314022204233, 404..