본문 바로가기

전체 글

 (152)
[본캠프] REACT2. Component(붕어빵) 주의) component는 항상 대문자로 시작해야 한다.  컴포넌트 종류함수형 컴포넌트 function MyComponent() { return Hello, World!;}클래스형 컴포넌트class MyComponent extends React.Component { render() { return Hello, World!; }} function App() { return ( 부모자식관계테스트 );}function Grandfa() { return 나는 할아버지입니다. }function Moder() { return ( 나는 엄마입니다. );}function Child() { return ( 나는..
[본캠프] REACT.1 개발세팅 [개발환경세팅]           내가 만든 my-reacttest가 만들어진 걸 볼 수가 있다.     ls를 해보니 내가 만든 my-reacttest가 뜬다. 빨간박스 안에 있는 걸 순서대로 입력해주었다.        local링크를 클릭 했는데 거부당했다.........왜...                  위 사진처럼 start하니까 갑자기 또 안된다 분명히 됐는데 왜..? 그래서 yarn add react-scripts를 해주었고         yarn add react-scripts해주고 다시 cd my-reacttest, yarn, yarn dev해주고 local링크를 클릭하니까 아래 사진처럼 잘 뜬다. 드디어 성공!!!!!!!!!!!!!!!파일 킬 때도 yarn dev하면 된다.
Lv.0 약수의 합 [18/100] 만약 n값이 12라면? 1로 나눌 경우 몫은 12,2로 나눌 경우 몫은 63으로 나눌 경우 몫은 4 4로 나눌 경우 몫은 3 쭉쭉쭉 뽑아서  새배열에 push해주면 된다. 그리고 reduce로 누적연산하면 끝. function solution(n) { let arr =[] for(i=1; i acc+cur,0)}
Lv.0 자릿수 더하기 [17/100] function solution(n) { return String(n).split('').reduce((acc, cur) => acc + cur * 1, 0);}cur*1을 하는 이유는 숫자로 변환하기 위해서다.그냥 출력하면 문자열 123이런식으로 출력되기 때문에 오답이 된다.
[주말]Counter만들기 버튼을 생성하여 숫자가 작아지거나 커지거나 reset할 수 있는 걸 색상을 넣어서 구현해 보았다. let count = 0;const number = document.querySelector('.number');function updateColor() { if (count 0) { number.style.color = "green"; } else { number.style.color = "yellow"; }}//변수선언해서 할당하지 않고 addEventListener에서 같이 선언한 이유는 //반복적인 작업이 아니기 때문이다. //한번만 선언해서 할당해야하는 경우에 이렇게 쓰고 있다.document.querySelector('.btn-increase').addE..
[주말]Color Flipper 만들기 const body = document.querySelector('body');const btn = document.querySelector('.button');let colors = [ 'yellow', 'green', 'pink', '#dc143c', 'rgba(123, 123, 123, 0.5)'];btn.addEventListener('click', colorChange);function colorChange() { const random = parseInt(Math.random() * colors.length); body.style.backgroundColor = colors[random];};색을 배열로 만들어서 버튼 클릭하면 배경색이 바뀌는 걸 구현해 보..
Lv.0 평균구하기 [16/100] 입출력 예arrreturn [1,2,3,4]2.5[5,5]5     누적연산해서 길이만큼 나눠서 몫을 구하면 된다.function solution(arr){ let sum=arr.reduce((acc,cur)=> acc+cur,0); return sum/arr.length;}
[textContent] 제출 const nameInput = document.querySelector('.name-input'); const displayName = document.querySelector('.display-name'); document.querySelector('.btn-submit').addEventListener('click', function () { const name = nameInput.value; // 입력된 이름 가져오기 displayName.textContent = `안녕하세요, ${name}!`; // 이름 표시 nameInput.value = ''; // 입력 필드 초기화 ..

티스토리툴바