분류 전체보기 (179) 썸네일형 리스트형 sum 함수 만들기 (재귀, 꼬리 재귀, 번역한 for문) https://jootang2.tistory.com/172 프로그램이란...? 개발자는 프로그래밍을 하는 직업이다. 프로그래밍은 뭘까? 프로그래밍은 프로그램을 만드는 일이다. 그렇다면 프로그램은 뭘까? 1. 프로그램은 코드가 아님 2. 실행파일 (ex : exe 파일)은 프로그 jootang2.tistory.com 이어서 오늘은 함수에 대해서 배웠다. 그리고 앞으로 이 수업을 들으면서 진행하는 방향도 알았다, Q. 1부터 10까지 더하는 함수를 작성해라 if(1){ let acc = 0; for(let i = 1 ; i v > 1 ? v + sum(v - 1) : 1; 현재 코드의 문제점 a() -> b() -> c() -> d() -> ........ : d가 처리되어야 c가 처리되고, c가 처리되어야.. 프로그램이란...? 개발자는 프로그래밍을 하는 직업이다. 프로그래밍은 뭘까? 프로그래밍은 프로그램을 만드는 일이다. 그렇다면 프로그램은 뭘까? 1. 프로그램은 코드가 아님 2. 실행파일 (ex : exe 파일)은 프로그램이 아님, 파일일 뿐임 3. 파일을 실행해서 OS에 적재한 상태가 프로그램임 4. 메모리에 적재돼서 올라가면 프로그램임 5. 파일은 프로그램 X 6. 프로그램은 명령과 값으로 메모리에 올라감 7. 실행파일 실행 -> 메모리에 명령이 쫙 올라감, 값들이 쫙 올라감 8. 메모리에 적재된 명령이 쭉 실행되면 프로그램이 종료 9. 중간에 명령에서 분기 처리, 명령간의 이동 10. 중간에 명령에서 뺑뺑 돌면 프로그램은 끝나지 않음 프로그램이 뭐냐고 하는 질문을 받으면 위의 내용을 떠올리가 위 사진을 떠올리면 된다. .. React : component에게 인자 넘겨주기 - props 지금까지는 컴포넌트를 만들고 그 컴포넌트에게 데이터를 넘겨주지 않고 그대로 렌더링만 했었다. 오늘은 컴포넌트가 사용할 인자를 넘겨주는 방법에 대해서 알아보았다. 1. 컴포넌트에서 사용할 인자 지정해주기 [props.js] const root = document.querySelector("#root"); const App = () => { return ( ); }; ReactDOM.render(, root); 2. 컴포넌트에서 인자 받아오기 [props.js] const Btn = (props) => { console.log(props) return ( ) } 이렇게 첫 번째 인자로 데이터를 받아올 수 있다. props를 콘솔에 찍어보면 넘겨준 test의 값을 볼 수 있다. 컴포넌트에서 데이터를 받을 때는.. React에서 useState사용하기 1. 동적인 데이터를 useState함수를 사용해서 지정해준다. [react.js] const root = document.querySelector('#root') const App = () => { let [counter, setCounter] = React.useState(0); } ReactDOM.render(, root); 2. 어떤 동작을 실행할 때 데이터를 수정해주는 함수를 만들어준다. 일반적으로 데이터 접두어로 set을 붙여서 만드는 듯 하다. [react.js] const root = document.querySelector('#root') const App = () => { let [counter, setCounter] = React.useState(0); function countUp(.. React에서 createElement 사용하기 1. React를 사용해서 페이지를 렌더링 하기 위해서는 React와 ReactDom을 가져온다. [index.html] 2. React.createElement 함수를 통해서 원하는 html 요소를 생성한다. [index.js] const span = React.createElement('h3', { onMouseEnter: () => console.log('mouse enter') }, 'TEST') const button = React.createElement('button', { onClick: () => {console.log('clicked')} }, 'Click me') createElement의 첫 번째 인자로는 html의 태그를 작성한다. createElement의 두 번째 인자로는 pr.. JS localStorage 사용하기 저번시간에는 html의 기본동작을 막을 수 있는 preventDefault 함수를 살펴봤다. 오늘은 localStorage에 데이터를 저장하고 가져오는 함수를 공부했다. 1. localStorage.setItem() localStorage에 원하는 값을 원하는 키와 매핑해서 저장할 수 있다. [index.js] const USERNAME_KEY = 'username'; function onLoginSubmit(info) { info.preventDefault(); const username = loginInput.value; loginForm.classList.add(HIDDEN_CLASSNAME) localStorage.setItem(USERNAME_KEY, username); greeting.inne.. JS에서 HTML 기본동작 막기 - preventDefault() 저번 시간에는 JS에서 css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다. 오늘은 (새로고침)이나 (페이지 이동)태그들의 기본동작들을 막는 함수를 살펴봤다. 1. 해당하는 element들에게 addEventListenr를 추가해준다. [index.js] const loginForm = document.querySelector('#login-form') const loginInput = document.querySelector('#login-form input') const link = document.querySelector('a'); function onLoginSubmit(info) { info.preventDefault(); const username = loginInput... JS에서 HTML element style - className 변경하기 어제는 JS에서 HTML의 요소들을 가져오고 수정하는 기본적인 방법을 공부했다. 오늘은 JS에서 직접 스타일을 주지 않고, css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다. 1. HTML에서 사용할 css파일을 명시해준다. [index.html] TEST 2. css에 사용할 클래스들을 정의해준다. [index.css] .title { color: blue; } .title.clicked { color: tomato; font-size: 20px; } 3. JS에서 변경하고자 하는 요소의 클래스 이름을 바꿔준다. [index.js] const title = document.querySelector('.title'); function handleTitleClick(){ const .. 이전 1 2 3 4 5 ··· 23 다음
