본문 바로가기

JAVASCRIPT24

리액트 커스텀 훅 사용 시 다중상태관리와 클로저의 존재 이유 리액트의 컴포넌트리액트의 컴포넌트는 함수와 클래스로 나뉜다.요새는 함수 컴포넌트를 사용하는 추세라고 한다. 왜냐하면 클래스 컴포넌트는 변경에 취약하여 인스턴스로 만든 속성에 접근이 가능한 반면 함수는 내부 상태를 클로저로 관리하기 때문에 외부에서 접근하지 못한다.또한 클래스 컴포넌트는 리액트 컴포넌트를 반드시 상속 받아야하고 생성자 super 호출 및 render메소드를 반드시 구현해야함.함수 컴포넌트는 리액트 엘리먼트를 반환해야함.클래스 컴포넌트는 상태를 관리하기 위해 this 객체를 사용한다.반면 함수 컴포넌트는 상태관리에 한계가 있기 때문에 등장한 것이 훅(hook)이다.훅(hook)리액트의 useState를 사용하여 함수 컴포넌트의 state값을 변경한다. (클래스의 인스턴스의 경우 this.st.. 2024. 6. 12.
프로그래머스 레벨 1 - 평균 구하기 정답 및 풀이[자바스크립트] https://school.programmers.co.kr/learn/courses/30/lessons/12944 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 정수를 담고 있는 배열 arr의 평균값을 return 하는 문제. 문제 자체는 너무나도 간단해요. 제한사항 배열 arr은 길이 1 이상 100 이하, 그리고 원소는 -10,000 과 10,000 사이의 정수에요. 단순 for문을 돌려서 풀어도 성능에는 이슈가 없었기 때문에 신경써서 볼 부분은 아닌 듯 하네요. 답 function solution(arr) { var answer = 0; //배.. 2023. 8. 22.
프로그래머스 레벨 1 - 하샤드 수 정답 및 풀이[자바스크립트] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 주어진 정수가 하샤드 수 인지 아닌지를 true, false로 return 시키는 문제. 하샤드 수란, 정수 x가 정수 x의 자릿수 합으로 나누어 떨어지는 수이다. (ex- 18은 1+8=9로 나누어 떨어지는 수 이므로 하샤드 수임) 문제에 어떻게 하면 될지가 너무 잘 나와있어서 그렇게 어려운 문제는 아니라고 생각한다. 주어진 자연수의 각 자리수 합을 구하고 그것이 자연수와 나누어 떨어질 경우 true, 아니면 false를 리턴하면 되니까. 제한조건 x는 1 이상, 1000이하의 정수. 신경써서 코딩하지.. 2023. 7. 6.
리액트 vscode, node.js 설치 후 프로젝트 생성까지(create-react-app) 리액트란? 설치에 앞서 리액트를 간단하게 알아보자. 자바스크립트 라이브러리로 사용자 인터페이스를 더 간편하게, 그러니까 Single Page Application을 효율적으로 만들기 위해 쓴다. 우리가 자주 쓰는 웹이나 앱(ex 인스타그램)들 중 페이지를 새로고침하지 않고 정보를 새로 불러와 교체하는 방식의 페이지를 제작하는데 리액트가 효과적이다. 물론 자바스크립트로도 만들 수는 있지만 코드가 매우 길어져 관리가 복잡한 단점이 존재한다. 또 html 문법을 함수, array, object 같은 곳에 보관하고 재사용 가능해서 확장성 또한 뛰어나다. 자바스크립트의 라이브러리답게 기본 언어는 자바스크립트 문법과 매우 흡사하다. 하지만 jsx 같은 자바스크립트에서 볼 수 없던 파일 형식도 있고 문법도 조금씩 다.. 2023. 7. 5.
프로그래머스 코딩테스트 레벨 1 - 핸드폰 번호 가리기 풀이 해석 및 답안 [자바스크립트] https://school.programmers.co.kr/learn/courses/30/lessons/12948 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제전화번호를 마스킹하는 문제. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒤 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수를 만들면 된다. 해당 문제는 실무에서도 굉장히 많이 활용하는 유틸 함수이기 때문에 제대로 알아두면 좋겠다고 생각했다. 전화번호뿐만 아니라 아이디, 주민등록번호 등 민감한 개인정보에서는 거의 필수적으로 사용한다. 문자열의 길이나 숫.. 2023. 5. 3.
프로그래머스 코딩테스트 레벨 1 - 행렬의 덧셈 풀이 해석 및 답안 [자바스크립트] https://school.programmers.co.kr/learn/courses/30/lessons/12950 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 행과 열이 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 값을 구하는 문제. 행렬에 대한 기본적인 이해가 필요하다. 고등학교 수학 맨 첫 단원에서 배우는 것으로 기억하는데(내 기억이 맞다면) 지금 와서 떠올리려고 하니까 기억이 가물가물하다. 간단하게 짚어보면 행렬은 수를 행(Row)과 열(Column)에 맞춰서 직사각형의 모양으로 순서있게 배열하여 괄호([])로 묶은 것이다. 코딩 테.. 2023. 3. 29.