티스토리

Dr.Mlem Blog

검색하기

블로그 홈

Dr.Mlem Blog

dr-mlem.tistory.com/m

Dr.Mlem knows nothing but borking

구독자: 1

방명록 방문하기

주요 글 목록

JS에서 Json값으로의 접근방법 Q1.JS의 문법에서, Json의 키값을 통해서 값을 출력하는 방법에는, Json변수명.Json키이름 이렇게 접근하는 방식 하나와, Json변수명["JSON키이름"] 이렇게 접근하는 방식이 있는거야? A1.ChatGPT의 말: 맞아요! JavaScript에서 JSON 객체의 키 값을 통해 값을 출력하는 방법에는 두 가지가 있습니다:1. 점 표기법 (Dot Notation)문법: jsonObject.keyName장점: 간결하고 직관적이며 코드 가독성이 좋음.제약:키 이름이 숫자로 시작하거나, 공백 또는 특수 문자를 포함할 경우 사용할 수 없음.동적으로 키 이름을 설정해야 할 경우에는 사용할 수 없음.예시: const jsonObject = { name: "Alice", age: 25 };console.. 공감수 0 댓글수 0 2024. 12. 13.
const keys = Object.keys(survivedData).sort(); Q1.const keys = Object.keys(survivedData).sort(); 라는 코드가 있어. 여기서, Object.keys의 keys와, const keys의 keys는 다른것이지? 다르다면 어떻게 다른지 예시를 들어서 설명해줘. ChatGPT 네, 둘은 전혀 다른 것입니다.Object.keys: Object라는 전역 객체에 속한 정적 메서드로, 특정 객체를 인자로 받아 해당 객체의 열거 가능한(enumerable) 속성 key들을 배열 형태로 반환합니다.const keys: 코드에서 const keys = Object.keys(survivedData).sort();와 같이 선언된 keys는 Object.keys(survivedData)를 호출한 결과(즉, survivedData의 key.. 공감수 2 댓글수 0 2024. 12. 12.
원소가 배열인 Json의 작성 Q1.원소갯수가 N개인 어떤 배열 A가 있고, 똑같이 원소갯수가 N개인 배열 B가 있어. 이때, C라는 JSON을, const c = {A, B}; 라고 만들면, 어떻게 내부적으로 구성되는거야? A의 원소 a1이라는 키에 B의 원소 b1, a2에 b2..... 이렇게 대응되는거야? A1.2/2ChatGPT의 말: 아니, const c = {A, B};라는 코드는 네가 생각한 것처럼 배열 A의 각 원소가 키가 되고, 배열 B의 원소가 그 키에 대응되는 값으로 구성되는 객체를 만드는 것이 아니야. 대신, 이 코드는 단순히 배열 A와 배열 B를 객체의 두 개의 속성으로 포함하는 객체를 만드는 거야.구체적으로 살펴보자면:입력 코드const A = [1, 2, 3];const B = ['a', 'b', 'c'.. 공감수 0 댓글수 0 2024. 12. 11.
filter 함수, JS에서 파라미터의 규칙 Q1.어떤 배열 item이 있다고 하자. const totalSurvived=item.filter(heftychonk=>heftychonk.survived).length; 이렇게 filter 함수를 쓸 수 있는 이유는 뭐지? 원래 filter 함수를 쓰기 위해서는, item.filter((v,i)=>v.survived).length 이런 식 아니였나? A1.2/2ChatGPT의 말: 좋은 질문이에요! JavaScript에서 filter 함수의 동작과 함께 작성하신 코드의 차이를 이해하면 더 나은 이해가 될 거예요. 하나씩 살펴보겠습니다.1. filter 함수의 기본 동작Array.prototype.filter 함수는 배열을 순회하면서 조건을 만족하는 요소만 새로운 배열에 포함시키는 함수입니다. 이.. 공감수 0 댓글수 0 2024. 12. 10.
배열의 구조분해 Q1.const [totalPassenger, totalSurvived, totalDeath, survivalRate]=useMemo(()=>{},[]); 꼴도 Json 구조분해 같은 방식의 문법인가? A1.ChatGPT의 말: 네, const [totalPassenger, totalSurvived, totalDeath, survivalRate] = useMemo(() => {}, []); 형태는 JavaScript의 구조 분해 할당 (Destructuring Assignment) 문법을 활용한 것입니다. 하지만 여기서 조금 더 구체적으로 말하자면, 이는 배열 구조 분해를 사용한 예제입니다.구조 분해 할당이란?구조 분해 할당은 배열이나 객체에서 값을 꺼내 변수에 쉽게 할당할 수 있게 해주는 문법입니다.. 공감수 0 댓글수 0 2024. 12. 10.
JS에서 Json의 키에 연결된 함수값으로의 접근 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 12. 9.
JS의 getter, setter Q1.St2veK: StringFormatException 클래스의 에러 객제 e에서, get element() 라는 getter 함수가 있는데, 이 메소드가 리턴하는 요소 객체 el에 접근하기 위해서는, e.element로 접근해야해? 아니면 e.element()로 접근해야해? A1.GitHub Copilot: get element()는 getter 메소드이므로, `e.element`로 접근해야 합니다. `e.element()`로 접근하면 함수 호출로 인식되어 오류가 발생합니다. 따라서, `e.element`로 접근하세요. Q2.St2veK: JS에서 getter 메소드는, () 없이 접근하는게 JS 문법인거야? A2.GitHub Copilot: 네, 맞습니다. JavaScript에서 ge.. 공감수 0 댓글수 0 2024. 12. 6.
재할당과 불변 Q1.궁금한게, React용 JSX에서, const navigate = useNavigate(); 이렇게 선언하면 훅을 상수로 선언한거잖아? 그런데 이때, navigate("이동할 URL")로 쓰게 되면, 상수로 선언한 내용과는 무관한거야? JS에서 기본 데이터 타입 이외의 대상을 상수로 선언한다는 것은, 어떤 객체의 틀을 고정한다는 것의 느낌이지, 선언된 대상의 모든 코드를 고정한다는 것은 아닌거야? const 선언을 기본 데이터 타입에 하는 것과는 또 다른 경우인건가? A1.ChatGPT2초 동안 Thought about const와 React 훅개념 정리const navigate = useNavigate();라는 코드를 보면, useNavigate() 훅으로부터 반환되는 함수를 navigate라.. 공감수 0 댓글수 0 2024. 12. 6.
JS ES6 export(default, named) Q1.React를 공부하다 보니, 이래저래 import/export 할 일들이 많은데, 궁금해진 것이, JS ES6 버전 이후에서는 export 할 때 default export와 {}를 쓰는 export가 있던데, 1. {}를 쓰는 export를 named export 방식이라 하는지 2. export 하는 방식에는 default와 1번에 물어본 방식 뿐인지 3. 두 방식 import 시 모듈 이름을 바꿔서 쓸 수 있는지 4. import React from 'react'; 에서 React는 바꿔 쓸 수 있는지 이렇게 4가지가 궁금해. A1.ChatGPT의 말: JavaScript ES6의 **import/export**는 모듈화를 통해 코드를 더 효율적으로 작성하고 재사용할 수 있도록 도와주는.. 공감수 0 댓글수 0 2024. 12. 6.
서로 의존하는 기능들 중 하나만 import 하는 경우 Q1.클래스를 정의해둔 파일이 있는데, 같은 파일에, 정규 표현식 검사를 통과하지 못했을 경우 반환할 에러 클래스도 정의해두었어. 각각 RegexHelper 클래스, StringFormatException 클래스인데, RegexHelper의 정규표현식 검사를 하는 여러 메소드들에서, 정규표현식 검사를 진행하다가 문제가 생기면 StringFormatException 클래스의 객체를 생성해서 반환하고 있어. 일단 RegexHelper 클래스는 default export 중이고, StringFormatException 클래스는 named export를 하고 있어. 이 상황에서, 어떤 파일에서 RegexHelper 만을 import 해서 정규표현식 검사를 수행하다가 문제가 생겼을때, StringFormatEx.. 공감수 0 댓글수 0 2024. 12. 6.
조건에 대한 참/거짓을 리턴 (feat. filter()) Q1.const a = [1, 2, 3, 4, 5]; 그런데, const z = a.filter(function(v,i){ if(v%2!==0) } 라고 되어있으면, z에는 어떤 원소가 들어가게 되는지, 단계별로 설명해줘 1/2ChatGPT의 말: A1.이 코드에서 z에 어떤 원소가 들어가는지 단계별로 분석해보겠습니다. 하지만 코드를 보면 문제가 있습니다: filter의 콜백 함수 안에 if 블록이 있지만, 조건에 부합할 때 true를 반환하거나 false를 반환하는 명시적인 동작이 없습니다. JavaScript에서 filter는 true 또는 false를 반환해야 동작하므로, 이 코드가 실행될 경우 에러는 없지만 undefined를 반환하여 z는 빈 배열이 될 것입니다.이를 올바르게 고치고 분석.. 공감수 0 댓글수 1 2024. 12. 5.
confirm 함수 St2veK: if(!confirm(`레알로 ${dname}을(를) 삭제하는고양?`)){ return; // 삭제 취소했으니 뒤로 ㅌㅌ }이건 경고창을 띄우는 함수인가? GitHub Copilot: confirm 함수는 경고창을 띄우는 함수입니다. 이 함수는 사용자가 확인 또는 취소 버튼을 클릭할 수 있는 대화 상자를 표시합니다. 사용자가 확인을 클릭하면 `true`를 반환하고, 취소를 클릭하면 `false`를 반환합니다. 따라서, 코드에서 confirm 함수는 사용자가 삭제를 확인하는지 묻고, 사용자가 취소를 클릭하면 함수가 `return`을 실행하여 삭제를 취소합니다. 공감수 1 댓글수 1 2024. 12. 5.
scrollHeight? Q.St2veK: scrollHeight 이 속성은 뭐지? A.GitHub Copilot: scrollHeight 속성은 요소의 전체 높이를 나타냅니다. 이 높이는 요소의 내용이 스크롤되지 않은 상태에서의 전체 높이를 포함합니다. 즉, 요소의 실제 콘텐츠 높이를 나타내며, 스크롤 가능한 영역의 전체 높이를 의미합니다. 예를 들어, 다음과 같은 요소가 있다고 가정해봅시다: 첫 번째 줄 두 번째 줄 세 번째 줄 네 번째 줄 다섯 번째 줄이 요소의 scrollHeight를 가져오면, 요소의 실제 콘텐츠 높이를 알 수 있습니다:javascriptconst content = document.getElementById('content');console.log(content.scrollHeight);.. 공감수 1 댓글수 0 2024. 12. 2.
querySelector(".viewer > img") ??? (10-09 image_ex/index.js 에서)Q1.내가 궁금한 점이라서 다시 한 번 확인 부탁해. document.querySelector(".viewer > img") 이 내용에서, .viewer > img 이렇게 선택하는 것은, .viewer의 직계 자식의 img 태그들 중 첫 번째 대상을 선택하는 거야? A1.ChatGPT의 말: 네, 정확합니다! 🎯document.querySelector(".viewer > img")에서:.viewer > img는.viewer의 직계 자식 중에서 img 태그를 찾는 선택자입니다.CSS 선택자 >는 직계 자식 관계를 나타냅니다.따라서, .viewer 내부의 직계 자식 요소 중 첫 번째 img 태그를 선택합니다.결론.viewer > img는:클래스가 .vi.. 공감수 0 댓글수 0 2024. 11. 27.
e.preventDefault(); 02 Q1.e.preventDefault(); 이 코드로 링크로의 이동 또는 form 태그의 submit 이벤트가 즉시 실행되는 것이 막힌다면, 해당 동작들은 언제 실행이 되는거야? 예를 들어서, a태그에 어떤 주소값이 href로 주어졌다면, 그 주소로의 이동은 언제 이루어지게 되는거지? A1.ChatGPT의 말:e.preventDefault()는 브라우저의 기본 동작(예: 링크 클릭 시 페이지 이동, 폼 제출 시 새로고침)을 막는 데 사용됩니다. 즉, 기본 동작이 실행되지 않도록 브라우저에 지시하는 역할을 합니다.기본 동작 실행 시점브라우저는 다음과 같은 순서로 이벤트를 처리합니다:이벤트 트리거:사용자가 링크를 클릭하거나 폼을 제출했을 때 이벤트가 발생합니다.이벤트 리스너 실행:해당 이벤트에 연결된 ad.. 공감수 0 댓글수 0 2024. 11. 27.
e.preventDefault(); 01 St2veK: e.preventDefault(); 이 코드로 링크로의 이동 또는 form 태그의 submit 이벤트가 즉시 실행되는 것이 막힌다면, 해당 동작들은 언제 실행이 되는거야? 현재 파일기준으로, a태그에 걸린 주소로의 이동은 언제 이루어지게 되는거지? Workspace: e.preventDefault(); 는 이벤트의 기본 동작을 막기 위해 사용됩니다. 이 코드가 실행되면 링크로의 이동이나 폼 제출과 같은 기본 동작이 실행되지 않습니다. 현재 파일 기준으로, a 태그에 걸린 주소로의 이동은 e.preventDefault();가 호출되지 않을 때 이루어집니다. 즉, e.preventDefault();가 호출되지 않으면 링크로의 이동이 기본 동작으로 실행됩니다. 예를 들어, index.js 파.. 공감수 0 댓글수 0 2024. 11. 27.
파라미터 안받는 익명+콜백 함수 St2veK:useEffect(() => { // chrome 브라우저 로그 출력 수준에서 "상세" 항목 체크 필요 console.log('[CASE 1] %s ::: 화면에 컴포넌트가 처음 로드되거나, state-props 중 하나라도 변경될 경우 호출됨.', new Date()); });여기에 있는 함수는, 익명함수 형태이며 파라미터를 받지 않는 함수인거야? GitHub Copilot: 네, 맞습니다. useEffect에 전달된 함수는 익명 함수(anonymous function)이며, 파라미터를 받지 않는 함수입니다. 익명 함수는 이름이 없는 함수로, 주로 콜백 함수로 사용됩니다. 다음은 해당 코드의 구조입니다:javascriptuseEffect(() => { // chrome .. 공감수 0 댓글수 0 2024. 11. 26.
Json 구조의 복사 (10-08 date_range1의 index.js에서)Q1.const [myDate, setMyDate] = useState({ startDate:day.format("YYYY-MM-DD"), endDate:day.format("YYYY-MM-DD") }); 해당 내용을 통해서, myDate에는 useState에 입력된 Json 형태의 값이 들어가게 되고, 자연스럽게 그 Json 구조를 가지게 되는 것인가? A1.네, 맞습니다. useState를 사용하여 초기 상태로 JSON 형태의 객체를 설정하면, myDate 상태 변수는 해당 JSON 구조를 가지게 됩니다. 예를 들어, 다음과 같이 초기 상태를 설정하면: const [myDate, setMyDate] = useState({.. 공감수 0 댓글수 0 2024. 11. 25.
일반적인 모듈의 export 형태 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 11. 19.
JS에서 import시 확장자 (10-01 App.js에서)Q.import Hello from './MyComponent1'; 이거 import Hello from './MyComponent1.js'; 같이,js 라는 확장자를 안붙여줘도 되는거야?App.js:5 A.JavaScript에서 모듈을 import할 때 .js 확장자를 생략해도 됩니다. 대부분의 환경에서 import Hello from './MyComponent1';와 같이 사용할 수 있으며, 번들러나 해석기가 자동으로 파일을 찾습니다. 하지만 사용하는 환경에 따라 확장자를 명시해야 할 수도 있으므로 프로젝트 설정을 확인하는 것이 좋습니다. 공감수 0 댓글수 0 2024. 11. 18.
JS 비동기 처리 function doit(){ console.log("start do it"); // 실행 순 2 // 5초 대기 때림 const wakeUpTime=Date.now()+5000; while(Date.now() 해당 웹페이지는 5초간 벽돌. "순서대로" 실행되기 때문. // 순차적으로 실행되는 처리 -> 동기식 처리console.log("end code"); // 실행 순 4 function doit(){ console.log("do it started");}setTimeout(doit, 5000); // JS 내장 명령, 첫 번째 파라미터로 함수, 2번째로 시간(밀리초)을 받음 // 5초 후에 doit 함수를, 현재의 .. 공감수 2 댓글수 2 2024. 11. 16.
Object.fromEntries(formData)2 + Axios와 Json case "get": let data = null; try{ data=Object.fromEntries(formData); // 어제까지 한 여제에서는 formData를 객체로 만듦. 그런데 axios에서는 json이 필요. 그래서 위쪽의 코드로 formData를 Json으로 바꾸고 있었음. }catch(e){ // 오늘은 애초에json 으로 받아내기 때문에, 풀어낼 수 있는 객체가 없어서 바로 catch문으로 타게 됨. .. 공감수 0 댓글수 0 2024. 11. 7.
JS에서 files 속성 08-11 fileupload의 ajax/upload.html에서Q.const profilePhotoFiles = document.querySelector("#profile-photo").files; 에서, files가 붙여졌기 때문에, 단일 항목에 대해서도 다중항목에 대해서도 동일하게 취급할 수 있는 것인가?upload.html:72 GitHub Copilot사용된 1 참조네, files 속성을 사용하면 단일 파일이든 다중 파일이든 동일하게 처리할 수 있습니다. files는 항상 FileList 객체를 반환하므로, 선택된 파일의 수에 관계없이 같은 방식으로 접근하고 처리할 수 있습니다. 예를 들어:const profilePhotoFiles = document.querySelector("#profile-.. 공감수 0 댓글수 1 2024. 11. 6.
JS의 옵셔널체이닝 복습 (JS에서 옵셔널 체이닝 복습하느라 04-07의 10번 예제를 보는 와중) Q1. const user = {}; 일때, console.log(user && user.address && user.address.city); 이 값이 어째서 undefined가 나오는 것인가? A1. 이 코드를 단계별로 설명하겠습니다: 1. user 객체 선언:const user = {};user는 빈 객체이므로 아무런 속성이 없습니다. 2. 표현식 평가: console.log(user && user.address && user.address.city); 이 표현식을 좌측부터 순서대로 평가하면:user 부분: user는 빈 객체 {}로 truthy 값입니다.user.address 부분: user 객체에는 address 속성이 .. 공감수 0 댓글수 0 2024. 11. 3.
JS에서의 구조분해 (JS 복습을 위해서 04-07의 09 구조 분해를 보는 와중)Q1.const data = { name:'hello', age:20, height:172, weight:85}; const {name} = data; // 여기 잘 이해안되는 부분!!! 복습시 주의 이 과정이 어떻게 진행되는거야?(09-구조분해.js:28-29) A1.GitHub Copilot 사용된 1 참조이 코드는 객체 구조 분해 할당을 사용하여 객체 data에서 name 속성만 추출하는 과정입니다. 단계별로 설명하겠습니다:data 객체가 정의됩니다:const data = { name: 'hello', age: 20, height: 172, weight: 85 };구조 분해 할당을 사용하여 data 객체에서 name 속성만 추출합니.. 공감수 0 댓글수 1 2024. 11. 3.
JS에서 백틱(``) 과 작은따옴표, 그리고 큰따옴표로 문자열을 묶는 차이 Q1.JS에서 주소를 걸 때, `` 와 '' 또는 "" 셋 중 아무거나로 주소 경로를 감쌀 수 있는거야?예를 들어서, 지금은 주석처리 되어있지만, let data = await axiosHelper.get([[@{/api/department}]]/${deptno}); // ''? ``? ""?이 코드에서, get() 안에 ``로 묶든, '' 로 묶든, "" 로 묶든 차이가 없는거 아니야? A1.JavaScript에서 문자열을 감쌀 때 \``, '', ""` 세 가지를 사용할 수 있지만, 기능상 차이가 있습니다. 1) **백틱(```)**: 템플릿 리터럴로, ${변수} 형태로 변수나 표현식을 문자열 내에 삽입할 수 있습니다. 2) 작은따옴표(')/큰따옴표("): 일반 문자열로, ${...}를 그대로 문.. 공감수 3 댓글수 1 2024. 11. 2.
Object.fromEntries(formData)?? (08-10 AxiosHelper의 코드를 보던 와중) Q1. params: formData && Object.fromEntries(formData) 이 코드에서, Object.fromEntries(fromData)는 무엇을 하는 코드야? A1. Object.fromEntries(formData) 는 formData를 키-값 쌍의 일반 객체로 변환하는 역할을 합니다. FormData 객체는 폼 데이터를 다루기 위한 전용 객체로, 일반적인 객체와 다르게 동작합니다. 하지만 Axios에서 params 옵션은 일반 객체를 필요로 합니다. 따라서 FormData 객체를 그대로 params에 전달할 수 없으므로, Object.fromEntries를 사용하여 FormData를 일반 객체로 변환하는 것입니다. 코드를.. 공감수 0 댓글수 0 2024. 11. 2.
멀티레벨 드롭다운 메뉴 2 JavaScript를 사용하여 멀티 레벨 드롭다운 메뉴를 구현하면 좀 더 동적인 사용자 경험을 제공할 수 있습니다. 예를 들어, 클릭 이벤트로 메뉴를 열고 닫거나, 애니메이션을 추가할 수 있습니다.아래는 JavaScript를 사용하여 클릭 이벤트를 기반으로 멀티 레벨 드롭다운 메뉴를 구현하는 예시입니다.1. HTML 구조HTML 구조는 이전 예시와 동일합니다: 제품 제품 사용법 드로잉팁 제품 정보 연필 .. 공감수 1 댓글수 1 2024. 9. 12.
멀티레벨 드롭다운 메뉴 이렇게 여러 메뉴 중에 커서를 올려서 "제품 정보" 메뉴를 연 뒤, 열린 "제품 정보" 메뉴에 커서를 올리면 또 연필부터 여러가지의 제품들이 나오게 하는 것은 어떻게 해?ChatGPT said:ChatGPT이미지에서 설명된 것처럼 "제품 정보" 메뉴에 커서를 올렸을 때, 하위 메뉴가 나타나도록 구현하려면 HTML, CSS, 그리고 JavaScript를 결합하여 멀티 레벨 드롭다운 메뉴를 만들 수 있습니다.다음은 그 방법을 설명하는 기본적인 코드입니다.1. HTML 구조html 제품 제품 사용법 드로잉팁 제품 정보 .. 공감수 0 댓글수 0 2024. 9. 12.
자바스크립트에서의 변수 선언 You said:내가 배우기로는, 자바스크립트에서는 변수 선언을 할 때, 일단 무조건 변수에 해당할 메모리를 8바이트를 잡고, 해당 변수가 정수거나 해서 8바이트가 필요 없으면 그 중에서 필요한 메모리만 놔두고 버린다고 했는데, 그러면 그 버려지는 메모리는 어떻게 되는거야? ChatGPT said:ChatGPT자바스크립트에서 변수 선언과 메모리 할당에 대해 설명할 때, 약간의 오해가 있을 수 있습니다. 자바스크립트는 고수준 언어로, 메모리 관리의 세부 사항은 대부분 개발자가 아닌 자바스크립트 엔진(예: V8, SpiderMonkey 등)이 처리합니다.자바스크립트에서 변수 선언 시, 일반적으로 다음과 같은 동작이 일어납니다:변수 선언과 메모리 할당: var, let, const 키워드를 사용해 변수를 선언.. 공감수 1 댓글수 0 2024. 9. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.