본문 바로가기
300x250

개발 공부/웹개발54

react 리액트 반복문 만들기 map 이번 포스팅은 리액트에서 반복문을 만드는 방법에 대해 알아보겠습니다. 먼저 App.js에 만든 movies라는 변수의 형태입니다. 총 4개의 객체가 있는 배열입니다. 두번째는 renderMovies라는 변수를 선언하는데 movies라는 배열을 반복문을 돌려 같은 함수를 적용시킵니다. 밑에 보시면 movie라는 변수(24번 줄)를 선언하였는데 여기서 movie는 배열을 순서대로 도는 변수라고 생각하시면 될거같습니다. 인덱스로 나타내면 -> movies[0], movies[1], movies[2], movies[3] 이런 식으로 반복이 될겁니다. 여기서 movie는 movies[0], movies[1], movies[2], movies[3] 이거라고 보시면 됩니다. 배열안의 객체를 돌며 title과 id, .. 2021. 5. 10.
알고리즘_배열안의 배열 객체 만들기, 객체 오름차순 비교 개인 정보를 담은 배열을 입력받습니다. 조건에 맞게 각 개인의 전체 이름을 요소로 갖는 배열을 리턴해야 합니다. 조건1) firstName 과 lastName 이 모두 있으면 나타내고 하나만 있을때는 하나만 나타내줍니다. 조건2)사람들의 나이는 모두 다르고, 오름차순으로 정렬해야합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let peoplelist = [ [ ['firstName', 'goo'], ['age', 42], ['gender', 'male'], ], [ ['firstName', 'kim'], ['lastName', 'gangjun'], ['age', 30], ['gender', 'female'], ], [ ['lastName', 'lee'], ['a.. 2021. 5. 9.
알고리즘_아이소그램 문제풀이 문자열을 입력받아 아이소그램인지 여부를 리턴해야 한다. 아이소그램은 각 알파벳을 한 번씩만 이용해서 만든 단어나 문구를 말한다. isogram 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function isIsogram(str) { let newStr = str.toLowerCase(); let result = true; if(str.length === 0){ return result; } for(let i = 0; i 2021. 5. 9.
문자열을 정수로 바꾸는 함수 parseInt() 와 parseFloat() 정리/Java script 문자열을 정수로 바꿔주는 함수 2가지 1. parseInt(string [. n]) 문자열을 정수로 바꾸는 함수이다. 특징 1)[.n]은 옵션이다 들어갈 수 있는 숫자는 2,4,8,10,16,36 - n진법일때의값으로 바꾼다. (하지만 아직 나에겐 쓸일이 없다.) - 안쓰면 그냥 10진법 2)소수부분이 있으면 버린다. 3)띄어 쓰기로 여러개의 수가 있으면 첫번째 수만 바꿔준다. 4)공백으로 시작하면 공백 무시 5)수가 아닌 문자면 NaN을 반환 예시) parseInt('25.34') ===> 25 parseInt('200', 10 ) ===> 200 parseInt('100', 2) ===> 4 parseInt('0x100') ===> 256 2. parseFloat(string) 문자열을 실수로 바꿔주.. 2021. 5. 9.
유효성 검사 하기_code states 과제 4주차에 진행했던 유효성 검사 과제이다. 아이디가 4글자이상이면 사용할 수 있는 아이디라고 뜨고, 비빌번호는 비밀번호 확인이랑 같아야 한다. dom으로 진행하였다. 모바일 폼과 브라우저 크기에 맞쳐서 css 스타일을 변화하게 만들어봤다. 겉표지만 만든거고 아직 부족하지만 재밌는 과제였다. 코드는 밑에 에서 확인하실수있습니다. github.com/dydwns2441/validation-check dydwns2441/validation-check Contribute to dydwns2441/validation-check development by creating an account on GitHub. github.com 2021. 5. 8.
react 리액트 조건렌더링 이번 포스팅은 react에서 조건렌더링 하는 방법에 대해 알아보겠습니다. useState를 사용해서 저 toggle이란 버튼을 누르면 false => true로 true=> false 바뀌게 하는겁니다. 1) 8-10 줄을 보시면 renderCondition이라는 변수를 만들고 그안에 컨디션이 true면 true를 보여주고 아니면 false를 보여준다는 삼항연산자를 사용하여 할당하였습니다. 2)이 변수를 15번 줄에 {} 중괄호를 사용해서 넣어줬구요. 3)그밑에 버튼을 하나 만들었습니다. onClick으로 toggle이라는 함수를 넣어줬습니다. 4)toggle이라는 함수는 condition이라는 변수가 반대가 될수있는 setCondition함수를 가지고 있습니다. 5) 5번줄을 보시면 useState의 .. 2021. 5. 8.
HTML 필수 태그 정리(2)_리스트, 정의, 인용,list,ul,ol,li,description list,div,span,quotations html 태그 정리 두번째 입니다. 오늘은 tag 크게 5개의 태그를 준비했습니다. 첫번째. lists 리스트 입니다. ul은 unordered list로 순서가 상관없을때 쓰고 ol은 order list 로 순서가 필요할때 사용합니다. ul과 ol의 자식요소로 li (list item)이 있습니다. 사용법도 간단합니다. ul 태그를 사용한 경우 오른쪽의 결과를 가집니다. ol 태그를 사용할 경우 오른쪽의 결과를 가집니다. 두번째. description list 정의 리스트 입니다. 이것은 용어를 정리할 때 사용하며, 로 정보제공할때 사용합니다. 은 정의리스트를 쓰겠다고 말하는 태그이다. 이 안에 정의 내리려는 이름 태그와 정의의 밸류값 태그 이다. 다음과 같이 사용한다. 세번째. Quotations 인.. 2021. 5. 3.
자바스크립트 객체 개념정리(2) 객체메소드_assign_keys_values_fromEntries_entries 오늘은 객체에서 사용하는 메소드 method에 대해서 알아보겠습니다 객체 개념에 대해서 확인하고 싶으시다면 miracleground.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EA%B0%9D%EC%B2%B4%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%ACjavascriptObject%EA%B0%9D%EC%B2%B4%EC%A0%91%EA%B7%BC%EA%B0%9D%EC%B2%B4%EC%B6%94%EA%B0%80%EA%B0%9D%EC%B2%B4%EC%82%AD%EC%A0%9C%EA%B0%9D%EC%B2%B4%EB%A7%8C%EB%93%A4%EA%B8%B0 오늘 살펴볼 객체메소드 5개는 Object.assi.. 2021. 4. 28.
자바스크립트_화살표함수(arrow function) 개념정리 오늘은 화살표 함수에 대해 알아보겠습니다. 화살표 함수는 ES6에서 처음 등장한 새로운 함수 선언 방법입니다. 함수 선언식 : function 키워드로 단독으로 함수를 선언한 것 1 2 3 function sum(num1, num2) { return num1 +num2; } cs 함수 표현식 : 변수에 함수를 할당한 것 1 2 3 4 const sum = function sum( num1, num2 ) { return num1 + num2; } Colored by Color Scripter cs 화살표 함수 => 화살표를 이용해서 선언하는 것 기존의 함수 선언 코드에서 구조를 비교할것 1 2 3 4 const sum = (num1, num2) => { return num1 + num2; } cs 만약 위.. 2021. 4. 28.
반응형

티스토리툴바