codinghatso

끝말잇기 웹 게임을 만들면서 사고력 기르는 훈련을 하고자 합니다.순서도 설계를 통해 절차를 정리한다면 좋은 결과를 얻을 수 있다.내부함수[prompt : 입력값 받기alert : 공지하기confirm : 의사를 물어볼 때 ] 입력태그는 value로 값을 가져오며, 이외 태그들은 textContent로 값을 가져오고 설정한다.순서도의 의사결정 부분에서 OR 또는 AND인지에 따라 최적화가 가능하다.최적화는 진리표를 사용하면 더 정확하게 구분할 수 있다. 예) OR 진리표첫 번째 조건두 번째 조건최종 결과truetruetruetruefalsetruefalsetruetruefalsefalsefalse내용 정리순서도 그리기대화 상자 띄우기태그 선택하기태그에 이벤트 달기순서도 최적화하기 1번째 참가자..

DOMContentLoaded와 window.onload는 모두 웹 페이지 로딩 과정에서 발생하는 이벤트입니다만, 각각의 이벤트가 발생하는 시점과 그 의미에는 중요한 차이점이 있습니다. DOMContentLoadedHTML문서가 완전히 로드되고 파싱 되었을 때 발생합니다.DOM 트리가 완성되었으며, 스크립트 실행을 위한 준비가 완료된 상태입니다.외부 리소스(이미지, 스타일시트, 프레임 등)의 로딩을 기다리지 않습니다.주요 포인트실행 시점 : 이 이벤트는 HTML 문서가 완전히 파싱되고, DOM 트리가 완성되었을 때 발생합니다. 하지만 이미지, 스타일시트, 프레임 등 외부 리소스의 로드는 기다리지 않습니다.사용 이유 :  이 이벤트 리스너는 문서가 완전히 로드되었을 때 JavaScript 코드가 실행될 준..

시작하기 앞서 객체지향 프로그래밍과 함수형 프로그래밍의 차이점을 간단하게 정리하려고 합니다. 함수가 일급이냐 vs 객체가 일급이냐 * 일급 : 값으로 다룰 수 있으며, 변수에 담을 수 있다. 함수에 인자로 사용될 수 있으며, 결과로도 사용될 수 있다. 객체지향 프로그래밍 일급 객체를 사용을 지향하는 프로그래밍을 객체지향 프로그래밍이라고 합니다. 객체가 처리 요청을 받으면, 객체 내부에서 데이터 처리 후 반환하는 방식입니다. 객체지향의 큰 특징은 캡추다정상 으로 외웠던 그 단어들이 잘 보여줍니다. 캡슐화 추상화 다형성 정보은닉 상속성 여기서는 각 특징에 대한 자세한 글은 작성하지 않을 것입니다. 추가적으로 최근에는 캡추상다 연(관성) 정으로 외우시는 분들도 있는 것 같습니다. 개인적으로 객체지향은 캡슐화와..

JS로 재사용가능한 태그 만들어 사용하기 let 변수이름 = document.createElement("태그이름"); - 변수에 원하는 태그를 생성하여 담아놓는 패턴. let 텍스트변수 = document.createTextNode("문자열 또는 HTML Symbols"); - 변수에 문자열이나 특수문자를 담아놓고 사용하는 패턴. https://www.htmlsymbols.xyz/unicode/U+00D7 HTML Symbols ... www.htmlsymbols.xyz 담아놓은 '태그변수'에 Class를 부여하고 태그의 자식인자로 '텍스트변수'를 할당한다. 이렇게 활용 가능한 태그가 완성된다. 접근자 이해하기 선택된 태그의 위치를 파악하고, 선택된 태그를 기준으로 상대적인 경로로 접근합니다. 예) no..

react를 사용해서 개인적으로 하는 첫 프로젝트입니다. react 공문서를 학습하고, 이해하기 힘들거나 정보가 마음에 안 들 때는 ChatGPT를 활용해서 학습했습니다. 그리고 글이 맥락이 없을 것입니다. 개발하면서 생각나는 대로 끄적이는 낙서장이니 가볍게 구경하고 가시면 될 것 같습니다. 감사합니다. 1. flexbox 같은 css 기능이 왜 적용이 안 되지? react로 개발을 하면서 javascript를 사용하듯이 개발하면 여러 문제를 만나는 것 같습니다. css에서 직접 사용 /* YourComponent.css */ .flex-container { display: flex; /* 다양한 Flexbox 속성을 여기에 추가하세요 */ } /* 각각의 Flex Item에 대한 스타일 */ .flex..

useEffect의 두 가지 형태 첫 번째 컴포넌트가 렌더링 될 때마다 실행 useEffect(() => { //작업... }); 두 번째 화면에 첫 렌더링 될 때 실행 배열 인자의 값(value)이 변화할 때마다 실행 useEffect(() => { //작업... },[value]); // [] 두번째 인자가 빈 배열일 때에는 화면에 첫 렌더링 될때 만 실행한다. useEffect의 Clean Up useEffect(() => { const timer = setInterval(() => { console.log('타이머 돌아가는 중...'); }, 1000); return () => { clearInterval(timer); console.log('타이머가 종료되었습니다.'); }; }, []); 한번..

useState는 state와 setState를 배열 형태로 return 해 줍니다. const [state, setState] = useState(초기값); state에는 현재 상태 값이 들어있습니다. setState로 상태 값을 업데이트시켜줄 수 있습니다. setState값이 변경 될 때마다 업데이트(렌더링) 됩니다. State값을 변경할 때 변경할 값이 이전 State값과 연관되어 있다면 콜백함수를 사용하는 게 좋습니다. setState((prevState) => { return newState; }) //배열 형태는 [input, ...prevState] 스프레드 문법으로 새로운 배열을 return 하면 된다. State의 초기값이 어떤 무거운 함수의 결괏값으로 전달될 때 콜백함수로 전달하면 초기..

"javascript에서 this는 함수를 호출한 객체이다" 전역에서 this 호출 시 window객체를 가리킨다. function main(){ console.log(this); } main(); //와 window.main()은 같다. //window객체를 가리킨다. 'use strict'를 사용하면 함수를 호출한 객체를 명시하지 않으면 undefined 값을 반환한다. const object = { name: 'hatso', main: function() { console.log(this); }, }; object.main(); //이렇게 하면 main함수를 호출한 object객체를 this가 가리킨다. //만약 const main2 = object.main; //main2(); //이렇게 호출한다..