본문 바로가기

분류 전체보기273

React - 5장 : ref. DOM에 이름 달기 - 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. - 요소에 id를 달면 css에서 특정 스타일을 적용하거나 자바스크립트로 해당 요소에 작업을 할 수 있다. 5-1. ref(reference) - HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. - 리액트 컴포넌트에 id를 사용하는 것은 권장하지 않는다. - 컴포넌트는 여러 번 사용할 수 있는데 id는 유니크한 값이기 때문에 잘못된 사용이 될 수 있다. - ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 떄문에 문제가 발생하지 않는다. 1) ref는 어떤 상황에서 사용해야 할까? - DOM을 꼭 직접적으로 건드려야 할 때 사용한다. - 특정 input에.. 2023. 2. 9.
React - 4장 : 이벤트 핸들링 4-1. 리액트의 이벤트 시스템 1) 이벤트를 사용할 때 주의 사항 - 이벤트 이름은 카멜 표기법으로 작성한다. - ex) onclick(x) -> onClick - 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. - DOM 요소에만 이벤트를 설정할 수 있다. - 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 4-2. 예제로 이벤트 핸들링 익히기 1) onChange 이벤트 - onChange 이벤트는 Form 요소에 값이 변하면 발생하는 이벤트이다. - onChange 함수안에 e 객체는 SyntheticEvent, 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. - 이벤트가 끝나고 나면 초기화되므로 정보를 참조할 수 없다. - 만약 비동기적으로 .. 2023. 2. 8.
[JS] String, Array, Object 자주 쓰이는 메소드 총정리 cheat sheet 1.String - str.length : 문자의 길이 반환. - str.at(index) : index에 있는 문자를 반환, -1 일 경우 마지막문자 반환. - str.indexOf(찾을문자열[,x]) : 찾을문자열을 처음 발견한 곳의 index 반환, 발견하지 못한 경우 -1 반환. 두번째 파라미터 x 가 입력되면, 첫인덱스를 x로 이동하여 역방향으로 검색한다. - str.lastIndexOf() : str의 특정문자가 마지막으로 등장하는 index를 반환한다. - str.replace(바꿀놈, 뭘로바꿀까) : 바꿀놈을 뭘로바꿀까로 바꿔줌 (바꿀놈에는 정규식도 사용 가능, 뭘로바꿀까에는 콜백함수도 사용 가능) (여럿일 경우 한번만 바꿈) (원본 값을 바꾸지 않음) - str.split(구분자 [,제한.. 2023. 2. 7.
Lv.1 프로그래머스 코딩테스트 정복 기념. 0단계는 단순한 배열 넣고빼기 삭제하기 순회하기 정렬하기 필터링하기 등의 메소드 위주의 단계였다면, 1단계는 배열/객체 계산, 날짜계산 등 거대하지 않은 데이터덩어리를 시간복잡도를 고려하여 효율적으로 관리하는 것에 대한 이야기가 주를 이루었다. 뿌듯하다! 이제 2단계로 가자 바로. 2023. 2. 7.
[Lv.1] 개인정보 수집 유효기간 (카카오 신입/인턴 코딩테스트) 1. 문제 개인정보 수집 유효기간 고객의 약관 동의를 얻어서 수집된 1~n번으로 분류되는 개인정보 n개가 있습니다. 약관 종류는 여러 가지 있으며 각 약관마다 개인정보 보관 유효기간이 정해져 있습니다. 당신은 각 개인정보가 어떤 약관으로 수집됐는지 알고 있습니다. 수집된 개인정보는 유효기간 전까지만 보관 가능하며, 유효기간이 지났다면 반드시 파기해야 합니다. 예를 들어, A라는 약관의 유효기간이 12 달이고, 2021년 1월 5일에 수집된 개인정보가 A약관으로 수집되었다면 해당 개인정보는 2022년 1월 4일까지 보관 가능하며 2022년 1월 5일부터 파기해야 할 개인정보입니다. 당신은 오늘 날짜로 파기해야 할 개인정보 번호들을 구하려 합니다. 모든 달은 28일까지 있다고 가정합니다. 다음은 오늘 날짜가.. 2023. 2. 7.
[Lv.1] 햄버거 만들기 1. 문제 햄버거 만들기 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯.. 2023. 2. 6.
React - 3장 : 컴포넌트 3-1. 컴포넌트를 선언하는 방식 - 컴포넌트를 선언하는 방식은 크게 두가지이고 클래스형과 함수형이 있다. 1) 클래스형 컴포넌트 - 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 한다. - state와 라이프사이클 API 사용이 가능하다. - 임의 메서드를 정의가 가능하다. import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 2) 함수형 컴포넌트 - 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. - 메모리 자원도 클래스형 컴포넌트보다 덜 사용한.. 2023. 2. 6.
[Lv.1] 신규 아이디 추천 (카카오 신입/인턴 코딩테스트) 1. 문제 신규 아이디 추천 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 .. 2023. 2. 6.

티스토리툴바