본문 바로가기

전체 글

 (159)
프로그래머스[Level1] - 시저 암호 https://school.programmers.co.kr/learn/courses/30/lessons/12926 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 문제를 처음 읽었을때 알파벳의 순서에 관련된 문제라고 생각이 들어 고심하다 아스키 코드를 이용해서 해결하였습니다 두번째 풀이는 아스키 코드를 쓰지 않고 해결한 풀이입니다.
[React] - Custom Hook * 훅 직접 만들기 - 리액트가 제공하는 훅을 이용해서 custom hook 을 만들 수 있다 그리고 커스텀 훅을 이용해서 또 다른 custom Hook을 만들수도 있다 - 훅을 직접 만들어서 사용하면 쉽게 로직을 재사용할 수 있다. - 리액트의 내장 훅 처럼 커스텀 훅의 이름은 use로 시작하는 것이 좋다 그러면 코드 가독성이 좋아지고 여러 리액트 개발 도구의 도움도 쉽게 받을 수 있다. - useState와 useEffect 훅을 이용해서 커스텀 훅을 만들 수 있다 이렇게 레고 블록처럼 기존 훅을 이용해서 새로운 훅을 만들 수 있다는 점이 리액트의 매력이다. - 커스텀 훅도 리액트에서 제공되는 내장 훅과 마찬가지로 단순히 함수를 호출하는 방식으로 간단하게 사용할 수 있다 - 커스텀 훅은 이렇게 내부 ..
[React] - useState 파헤치기 * 배치로 처리되는 상탯값 변경 함수 - useState 훅을 이용하면 컴포넌트에 상탯값을 추가할 수 있다> - useState 훅이 반환하는 배열의 두번째 요소는 상태값 변경 함수다 리액트는 상탯값 변경 함수가 호출되면 해당 컴포넌트를 다시 그린다 그 과정에서 자식 컴포넌트도 같이 렌더링된다. - 리액트는 가능하다면 상탯값 변경을 배치로 처리한다 - 배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다. 위 코드에서 count 상탯값을 두번 증가시키려고 했다 하지만 의도와 달리 1만큼 증가한다 이는 상탯값 변경 함수가 비동기로 동작하기 때문이다 리액트는 효율적으로 렌더링하기 위해 여러개의 상탯값 변경 요청을 배치로 처리한다 따라서 onClick..
[Javascript] - async / await * async / await - async / await 은 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능이다 = 프로미스가 자바스크립트 표준이 되고 2년 후 async await도 자바스크립트 표준이 되었다 - async await 을 이용해서 비동기 코드를 작성하면 프로미스의 then 메서드를 체인 형식으로 호출하는 것보다 가독성이 좋다 - await 키워드는 async await 함수 내부에서 사용된다 await 키워드 오른쪽에 프로미스를 입력하면 그 프로미스가 처리됨(fufulfilled) 상태가 될 때까지 기다린다 따라서 await 키워드로 비동기 처리를 기다리면서 순차적으로 코드를 작성할 수 있다 - async await 함수는 프로미스를 반환하기 때문에 후속 처..
백준 7568 - 덩치 https://www.acmicpc.net/problem/7568 7568번: 덩치 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩 www.acmicpc.net 문제풀이 브루트포스를 이용하는 문제이다 몸무게와 키가 자신보드 큰 사람을 반복문을 모두 돌려서 카운트 해주는 방식으로 해결하였다.
백준2798 - 블랙잭 https://www.acmicpc.net/problem/2798 2798번: 블랙잭 첫째 줄에 카드의 개수 N(3 ≤ N ≤ 100)과 M(10 ≤ M ≤ 300,000)이 주어진다. 둘째 줄에는 카드에 쓰여 있는 수가 주어지며, 이 값은 100,000을 넘지 않는 양의 정수이다. 합이 M을 넘지 않는 카드 3장 www.acmicpc.net 브루트포스 알고리즘 을 이용해서 해결하였다 삼중 for 문을 이용해 모든 카드의 경우의 수를 조합해서 M과 같거나 작은 수를 배열에 넣은 뒤 배열에 들어있는 값 중 최댓값을 출력하는 방식으로 해결하였다.
[Javascript] - 정규표현식 정규표현식 정규표현식의 플래그
[React] - Portal * Portal - Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM노드로 자식을 렌더링 하는 방법이다. - 쉽게 설명하면 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때 UI를 어디에 렌더링 시킬지 DOM을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능이다. - 기능은 리액트 V16에서 도입되었다 기존의 리액트에서 컴포넌트를 렌더링 할 대 children은 부모 컴포넌트의 DOM 내부에 랜더링 되어야 했다 Portal을 사용하면 DOM의 계층 구조 시스템에 종속되지 않으면서 컴포넌트를 랜더링 할 수 있다 -Portal을 이용하면 불필요한 스타일을 상속받는 문제를 해결할 수도 있고 그외에도 엘리먼트의 레이어 위치를 관리하는 z-index 스타일을 관리할때 유용하..

티스토리툴바