본문 바로가기
300x250

분류 전체보기198

유효성 검사 하기_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.
코드스테이츠 5주차 Pre-course + HA시간 후기 드디어 22주 중에 5주 간의 첫 번째 섹션이 끝났다. 5주 동안 코드스테이츠가 준비한 커리큘럼과 과제를 9시부터 6시까지 진행하며 개발자가 되기 위한 시간을 가졌다. 그리고 각 섹션이 끝날 때마다 보는 ha시간까지 마쳤다. 일종의 테스트다. 코플릿 코플릿은 문제가 나왔다. 지금까지 배운 문자열, 반복문, 배열, 객체, 고차함수 등등 모두 섞어서 문제가 꽤어렵게 나왔다. 5문제 중에 4문제는 술술풀린건 아니지만 고민을 하다보니 방법을 찾았다. 한문제가 문제였다. 코플릿에서 DOM문제가 나올지 몰랐는데 나오면서 엄청나게 당황했다, 그래서 이건 마지막에 시간을 많이 쓰면서 조건 3개중에 2개만을 충족시켰다. 코플릿은 재밌는데 잎으로 얼마나 더 어려워질지...ㅎㅎ react 리액트 또 다른 하나의 과제는 RE.. 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.
코드스테이츠 4주차 리뷰 코드스테이츠를 시작한지 4주가 지났다. 시간이 정말 후딱 간다. 저번주엔 DOM과 고차함수, 리액트에 대해 배웠다. \ 3가지를 배우면서 HTML과 CSS, JAVASCRIPT가 왜 기초인지 어떻게 활용되는지 알게된 느낌이다. 특히 리액트는 HTML과 자바스크립트를 융합해서 사용하기에 헷갈리는 부분이 많았다. 계속 따라해봐서 그러지 이해가 될랑말랑 한다. 이번 리액트 강의는 코드스테이츠에서 배운것도 도움이 많이 되었지만, 코딩앙마 라는 유튜브채널이 도움이 되었다. 리액트, 자바스크립트, 타입스크립트를 배우고 싶다면 이채널 추천합니다!! 이번주에 난이도가 확 상승해서 찾아보는 시간과 고민하는 시간에 많은 시간이 들었다. 중간중간에 있는 스프린트리뷰로 체크하면서 반성하게 된건 내가 너무 검색에만 취중해서 코.. 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.
자바스크립트 객체 개념정리(1)_javascript_Object_객체접근,객체추가,객체삭제,객체만들기 object 오늘은 자바스크립트에서 꽃이라고 하는 '객체'에 대해 알아보겠습니다. 객체를 가장 쉽게 말하면 '키와 밸류의 집합체'입니다. 배열은 순서에 따라서 정해지지만 객체는 의미에 따라 접근할 수 있습니다. 밑에 있는 것을 천천히 읽다보면 쉽게 이해가능하실겁니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86.. 2021. 4. 27.
Dom 기본개념 정리(1)_querySelector_setAttribute_textContent_innerHTML 오늘은 dom이라는 개념에 대해서 알아보겠습니다. Dom이란 Document Object Model의 약자이며 html을 java script가 이해할 수 있게 객체로 만드는 것을 말한다. 즉, html 문서의 구조와 관계를 객체로 표현한 모델 이다 dom의 장점은 자바스크립트를 이용해서 엘리먼트의 속성값을 얻어내거나 변경할 수 있다. html 문서도, javascript 객체도 둘다 트리구조 로 되어 있고 여기서 트리구조란, 이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다. 마지막으로, document 라는 전역변수로 접근이 가능합니다. document 객체에는 많은 속성과 메소드가 존재합니다.. 2021. 4. 27.
반응형

티스토리툴바