코딩 다이어리

❓ event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요? class 컴포넌트 때는 라이프사이클이 컴포넌트에 중심이 맞춰져 있었습니다. 클래스가 마운트 되려할 때(componentWillMount), 마운트 되고 나서(componentDidMount), 업데이트 되었을 때(componentDidUpdate), 언마운트(componentWillUnmount) 될 때 실행됐죠. 함수 컴포넌트에서는 조금 다르게 적용..

💡 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요? ref는 ‘reference’의 약자로 참조라는 뜻이다. HTML에서 dom요소에 이름을 달 때 id를 사용하듯이 리엑트에서 dom요소에 이름을 달 때 ref를 쓴다. DOM 이란 Document Object Model 의 약자로 직역하면 문서 객체 모델 웹 페이지를 이루는 요소들(ex. 태그)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이다. 즉, DOM은 HTML과 Javascript를 서로 이어주는 역할을 한다. 일반적인 DOM은 수정될 때마다 렌더링이 실시간으로 일어난다. 가상DOM..

* 숫자를 문자로 변환 후 배열로 만들기 split 타입이 숫자인 경우 split을 사용할 수 없다. 그래서 숫자를 문자열로 변환 후 split을 사용하여 배열로 만들어준다 숫자에 +'' 을 하고 split('')하여 배열로 만들어준다. function numberToString1(n) { return (n + '').split('') } numberToString1(1234) // [ '1', '2', '3', '4' ]

https://school.programmers.co.kr/learn/courses/30/lessons/82612 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 s..

https://school.programmers.co.kr/learn/courses/30/lessons/12954 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 제한 조건 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. for문으로 배열 순서대로 n번 돌리고 i=1부터 시작으로 하..

https://school.programmers.co.kr/learn/courses/30/lessons/12948 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 문자열에서 일부만 선택하기? 일부도 뒤에서부터 선..

https://school.programmers.co.kr/learn/courses/30/lessons/12944 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 총합을 reduce로 구하고 length로 나누면 될꺼같다 https://maydec2298.tistory.com/30 TIL - 프로그래머스 코딩테스트 : 없는 ..

https://school.programmers.co.kr/learn/courses/30/lessons/76501 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 배열을 순서대로 불러와야하기 때문에 for문으로 시작하고 처음에는 true 일때 ~ false 일때 ~ 를 생각해서 if를 쓰다가 삼항조건연상자가 생각나서 더 간단하게 쓸 수 있었다. function solution(absolutes, signs) { var answer = 0; for (let i = 0; i

https://school.programmers.co.kr/learn/courses/30/lessons/86051 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. .sort()로 정렬하고 겹치지 ..

https://school.programmers.co.kr/learn/courses/30/lessons/12925 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)..