doeunn.log

▶이미지 파일 업로드 기능 구현 - 아이콘 클릭으로 업로드하고 화면에 띄우자 이번 글에서는 프로젝트 진행 중에 겪었던 어려움을 해결한 방법에 대해 기록해 보려고 합니다 :) 다음 글에서는 업로드 후 해당 이미지 파일과 JSON 데이터를 함께 post 요청을 보내는 것까지 해볼 예정입니다. 🔎 이미지 파일 업로드 보통 이미지 파일 업로드를 하기 위해 다음과 같이 작성합니다. 해당 input 태그는 보이지 않게 하고 겉에 있는 div에 클릭 이벤트를 주어 이미지 파일 업로드 기능을 구현했는데요. 자세하게는 input 태그에 useRef를 걸어두고 겉에 있는 div에 클릭 이벤트가 발생하면 Ref를 통해 current.click() 이 되도록 코드를 작성했습니다. input 태그는 보이지 않게 하고 아이콘을 ..

▶제곱근과 제곱 구하기(Math.sqrt, Math.pow) 이번 글에서는 자바스크립트 내장 함수를 사용해서 제곱근과 제곱을 구하는 방법에 대해 알아보도록 하겠습니다. 🔎 제곱근 구하기 - Math.sqrt( ) 함수 인자로 값을 넘겨주면 루트 값을 반환합니다. 만약 매개변수가 음수이면 NaN을 반환합니다. Math.sqrt(4); // 2 Math.sqrt(16); // 4 Math.sqrt(100); // 10 Math.sqrt(2); // 1.4142135623730951 Math.sqrt(0); // 0 Math.sqrt(-1); // NaN ❓ 어떤 수가 제곱수가 맞냐고 물어볼 때 어떤 수 n이 주어질 때 그 수가 제곱수(어떤 자연수를 제곱했을 때 나오는 정수)가 맞으면 1을 반환, 아니면 2를..

▶반복문 for, map, forEach, filter 사용법과 차이점 코딩테스트 문제를 풀다보면 배열에 반복문을 적용하는 경우가 굉장히 많습니다. 매번 어떤 함수를 적용할까..하는 걱정을 하곤 하는데요.. 오늘은 여러가지 배열을 반복하는 함수에 대해 정리해 보려고 합니다. 🔎 for( ) for()은 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회를 합니다. 참고로 중간에 break 문을 만나면 반복문을 더 이상 진행하지 않고 즉시 탈출합니다. 예시 array = [ 1, 2, 3, 4, 5 ] 라는 배열이 있다고 할 때 배열의 아이템을 순서대로 출력해봅시다. let array = [1, 2, 3, 4, 5]; for(let i=0; i item * 2); console.log(ar..

▶리액트 useRef 에 대해 알아보자 오늘은 프로젝트를 진행하면서 구글링을 하다가 처음으로 사용하게 된 useRef에 대해 먼저 자세히 알아보려고 합니다 :) 🔎 useRef ? useRef는 .current 프로퍼티로 전달한 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지 useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 리액트 훅인데요. 여기서 Ref는 reference, 즉 참조를 뜻합니다. 우리가 자바스크립트를 사용할 때 특정 DOM을 선택하기 위해서는 querySelector 등의 함수를 사용했었죠? 예를 들어 어떤 DOM 요소를 선택해서 innerText ..

▶자바스크립트 정렬 함수 - sort 오늘은 자바스크립트 정렬 함수인 sort에 대해 알아보려고 합니다. 파이썬을 먼저 배운 입장에서는 그냥 sort하면 sort 되는 줄....... 🔎 sort ? 자바스크립트 배열의 내장 함수에 sort()가 있는데요. 명칭 그대로 배열 안의 원소를 정렬하는 함수입니다. 📌 문법 arrayObj.sort(sortFunction) arrayobj 자리에는 Array 객체 sortFunction 자리에는 요소 순서를 결정하는 데 사용되는 함수의 이름입니다. sortFunction 자리를 생략하면 오름차순, ASCII 문자 순서로 정렬됩니다. 📌 문자 정렬 문자 정렬의 경우에는 ASCII 문자 순서로 정렬하면 됩니다. let alphabets = ['b', 'd', 'a'..

▶배열 인덱싱 - splice와 slice 이번 글에서는 배열의 일부를 추출하고 싶을 때 사용하는 메서드 splice와 slice에 대해 알아보고 차이점에 대해서도 살펴보려고 합니다. 🔎 splice( 시작인덱스, 몇 개 지울거?, 혹시 넣을 거?) splice는 시작 인덱스로부터 몇 개를 지울 건지를 인자를 통해 넘겨줍니다. let my_list = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; my_list.splice(1); // 시작 인덱스만 지정하고, 몇 개를 지울지는 안 넣었을 때 // ['b', 'c', 'd', 'e', 'f', 'g'] 인덱스 1부터 끝까지를 리턴함 console.log(my_list); // ['a'] 인덱스 1부터 모든 데이터를 다 지움 my_lis..