hani hani

자바스크립트에서 this는 다른 언어나 객체 지향 프로그래밍에서 사용하는 this와 다소 다르게 동작할 수 있습니다. 특히, this는 함수가 호출되는 방식에 따라 다르게 동작합니다. 오늘은 자바스크립트에서 this가 어떻게 동작하는지, 화살표 함수에서 this는 어떤 특징을 가지는지, 그리고 이를 어떻게 잘 활용할 수 있는지 알아보겠습니다. 목차this의 개념this의 동적 바인딩this의 활용  this의 개념자바스크립트에서 this는 함수가 호출될 때 this가 바인딩된 객체를 참조합니다. 이때 this가 참조하는 객체는 함수가 어떻게 호출되었는지에 따라 달라집니다. 전역 컨텍스트에서의 this환경참조전역전역 객체브라우저 환경window 객체Node.jsglobal 객체 함수 내부에서의 this함수..

본 글을 자바스크립트에서 자료형 변경하는 방법에 대해 다룬 내용입니다. 목차 1. 정수 2. 실수 3. 문자 (문자열) 4. 논리 1. 정수 // 1. Number // 주어진 값을 숫자로 변환, 부동 소수점 숫자로 인식 console.log(Number("123")); // 123 console.log(Number("123.45")); // 123.45 console.log(Number(true)); // 1 console.log(Number("123")); // NaN (숫자로 변환할 수 없는 경우) // 2. parseInt // 주어진 값 하나하나를 정수로 추출, 부동 소수점 이후 숫자는 무시 // 두 번째 매개변수로 기수(진수)를 지정, 생략 시에는 10진수 console.log(parseInt..

본 글은 배열과 집합을 다룬 내용입니다. 목차 1. 배열과 집합을 차이점 2. 성능 3. 배열 4. 집합 1. 배열과 집합의 차이점 개발자는 데이터를 효율적으로 다루고 관리하기 위해 다양한 상황에 적절한 자료구조를 선택하고 활용할 수 있어야 한다. 데이터를 어떻게 관리하는지에 따라 프로그램의 성능이 달라진다. 그래서 우리는 늘 적절한 선택을 해야한다. 데이터 구조의 특징을 잘 기억해야지 적절한 선택을 할 수 있다는 점을 잊지 말고 공부하면 좋겠다! 이제 본론으로 돌아와 배열과 집합의 차이점을 정리하면 아래와 같다. 집합은 중복을 허용하지 않는 고유 값들의 모임 배열은 중복을 허용하고, 순서를 갖는 값들의 모임 여기서 기억해야 할 키워는 중복과 순서이다. 집합은 중복 X, 순서 X 배열은 중복 O, 순서 ..

평소에 프로그래머스 통해서 코딩 테스트 준비하고 있는데 가끔 헷갈리는 함수들이 있어 종류 별로 정리해보려고 한다. 먼저 수학 관련된 함수에 대해 알아보자. (문제에서 자주 사용했던 함수들 위주 정리) abs() 절대값 반환 (숫자의 부호를 무시하고, 크기만 나타내는 값) Math.abs(number); let num1 = 2; let num2 = -2; let num3 = 2.5; Math.abs(num1); // 2 Math.abs(num2); // 2 Math.abs(num3); // 2.5 ceil() 주어진 숫자 x 이상의 최소 정수를 반환 (정수로 올림하는 함수) Math.ceil(number); let num1 = 2; let num2 = -2; let num3 = 2.5; let num4 ..

오늘은 JS에서 비동기 처리하는 방식에 대해 한번 더 정리하고자 한다. 이전에 프로젝트 때문에 비동기 공부를 했었는데.. 내용이 많다.. 그래서 면접 공부할 때 찾아보기가 힘들어서 핵심만 간단하게 정리하려고 한다. 비동기가 필요한 이유 자바스크립트는 싱글 스레드이기 때문에 한번에 하나의 작업만 수행 가능! 즉, 이전 것이 완료되지 않으면 다른 업무 수행 불가 (대기시간이 길어짐 = 작업 시간 길어짐 = 성능 문제 발생) 비동기는 이전 것이 완료되지 않아도 다른 업무 수행 가능! 단, 로직이 끝났을 때 원하는 동작 수행을 위해 콜백 함수를 사용하면서 콜백 지옥이 발생할 수 있음. (가독성 떨어짐, 로직 변경 어려움 등 문제 발생) https://hani-develop-history.tistory.com/4..

오늘은~! useRef에 대해 자세하게 공부해보자. 소분소분 프로젝트에서 회원가입을 담당했는데 정말 고민이 많았다. 실시간 유효성 검사하여 사용자에게 안내 메시지도 보여줘야 하고, input 태그가 각자 리렌더링 되도록 해야하고... 허헣.. 나름 신경써서 작업했는데 아쉽게도 라이트 하우스 90점을 넘지 못해 개선중이다. 일단 1차로 해결하고 싶은 부분은 리렌더링이다. 단순하게 컴포넌트를 상세하게 분류하거나, 아니면 커스텀 훅을 활용하거나 등등 여러가지 고민을 했지만 비밀번호 확인 때문에 쉽지가 않다. 사용자가 입력한 비밀번호와 일치하는지 확인하기 위해서는 같은 단에 선언해야 하는데.. 이 경우 하나만 변해도 다른 부분이 같이 리렌더링이 된다... 일단 객체를 활용해서 그나마 리렌더링 덜 하게 바꾸긴 했..

오늘은 터미널에 yarn create react-app {프로젝트 이름} 을 입력 했을 때 생성되는 파일 및 폴더에 대해 공부할 예정이다. (중요한 것들 위주로만!) 일단 실행 순서는 index.js > index.html > App.js 이다 src 폴더 index.js: 진입점 JS 파일, 주로 DOM에 렌더링 하는 역할 App.js: 루트 컴포넌트로 여기에서 다른 컴포넌트를 조합 및 렌더링 public 폴더 index.html: 진입점 HTML, 리액트 어플리케이션이 렌더링 되는 곳 그 외 폴더 node_modules: 프로젝트의 의존성 라이브러리가 설치되는 폴더 package.json: 프로젝트에서 어떤 것 (모듈 등)을 사용하는지에 대한 정보가 기록된 파일 처음에 리액트 공부할 때 프로젝트 구조..

리액트를 기초부터 다시 공부해보려고 한다. 우선 리액트에서 자주 사용하는 JS 메서드부터 시작해보자! :) Map 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출, 반환 값으로 새로운 배열을 생성 원본 배열을 변경하지 않고 새로운 배열을 반환 -> 배열을 변환하거나 재구성할 때 유용~! 이제 위에 내용은 Map의 기본 내용이고, 리액트에서 map 메서드는 반복되는 컴포넌트를 렌더링 할 수 있게 해준다. 이 때, key 값을 넣어줘야지 경고 메시지가 뜨지 않는다. const names = ["눈사람", "얼음"]; const nameList = names.map((name, index)=> {name}); key를 설정해줘야 하는 이유 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었..