본문 바로가기

전체 글

Portal Portals Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 이 말은, 컴포넌트들의 상하 관계, 구조를 가지고 있는 문서인 DOM 상에서, 자식 컴포넌트를 부모 컴포넌트 바깥에 있는 다른 컴포넌트에 전달할 수 있다는 뜻이다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째 인자(container)는 DOM 엘리먼트입니다. createPortal 메서드의 첫번째 파라미터 child를 통해 우리가 원하는 컴포넌트를 Portal에 집어 넣을 수 있다. 두 번째 인자 contai.. 더보기
createSlice - Redux Toolkit createSlice 리듀서 함수의 대상인 초기상태와 “슬라이스 이름”을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성해 주는 함수. const counterSlice = createSlice({ name: '', // 이 모듈의 이름 initialState : {}, // 이 모듈의 초기상태 값 reducers : {}, // 이 모듈의 Reducer 로직 }) initialState : 이 모듈의 초기 생태 값 name : 이 모듈의 이름 reducers : 이 모듈의 Reducer 로직 import { createSlice } from '@reduxjs/toolkit' const initialState = { number: 0 } const counterSlice = cre.. 더보기
TIL (코딩 테스트, 바닐라 JS) 문제 1. 코딩테스트 하는 중 시간복잡도 & 순회도 고려하지 않은 것 2. 코드를 좀더 간결하게 하는 실력 부족 3. javascript 활용도 부족(바닐라JS) 시도한것 1. 코딩테스트 문제를 풀고 나서 다른사람들이 한 풀이 참고 & 복습 2. 노마더 코더 바닐라 JS 교육 시청 해결 방법 1. 코딩 테스트 어려웠던 것 문제 정리 & 복습 2. 노마더 코더 바닐라 JS 내용 복습 알게 된것 classList.togle("event") classList.add() 와 classList.remove() 를 한 메서드로 묶을 수 있다. array.prototype.join("원하는 내용") join은 배열을 합칠 때 괄호 안에 있는 문자 혹은 숫자를 넣을 수 있다. ex) arr = ['q','w']; le.. 더보기
프로그래밍 기초03 (구조 분해 할당) 배열 분해하기 // 이름과 성을 요소로 가진 배열 let arr = ["Bora", "Lee"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // surname엔 arr[1]을 할당하였습니다. let [firstName, surname] = arr; console.log(firstName); // Bora console.log(surname); // Lee 반환 값이 배열 메서드인 split() 함수 일땐 let [firstName, surname] = "Bora Lee".split(' '); 쉼표를 사용하여 요소 무시하기 쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있습니다. // 두 번째 요소는 필요하지 않음 let [firstName, , title] = ["Juli.. 더보기
가우스 계산법 문제 숫자 2개가 주어질 때, 두 숫자 사이의 값을 구하는 코딩 테스트 문제를 풀었다. 풀긴 풀었는데, 반복문을 많이 써서 그리 좋은 방법은 아닌것 같다. 나는 코딩테스트를 보고 난뒤 항상 다른사람이 푼 풀이를 보는데, 더 좋은 방법이 있어서 오늘이ㅡ TIL로 올릴려 한다. 시도한 것 function solution(a, b) { var answer =0; for(let i = Math.min(a,b); i < 더보기
프로그래밍 기초 02(배열과 메서드) 오늘은 함수와 객체에 대해 배우는 시간이었다. 오늘 배운 내용을 조금 정리하고자한다. 배열과 메서드 splice arr.splice(index[, deleteCount, elem1, ..., elemN]) 첫번째 매개변수는 조작을 가할 첫 번째 요스를 가르키는 인덱스(index)입니다. 두번 째 매개변수는 deleteCount로, 제거하고자 하는 요소의 개수를 나타냅니다. elem1, ..., elemN은 배열에 추가할 요소를 나타냅니다. 예시. let arr = ["I", "study", "JavaScript"]; arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거 console.log( arr ); // ["I", "JavaScript"] let arr = ["I", "study".. 더보기
Method Chaining (함수 연달아 쓰기) Mathed Caining : 메서드가 객체를 반환하게 되면 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다. 이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining) 이라 부른다. 초록색 글씨에 해당하는 부분이 이전 메서드(노란색 블럭)가 리턴하는 값이다. 이전 메서드가 리턴하는 값에 다음에 연결된 메서드가 적용된다는 점이 메서드 체이닝의 핵심이다. function solution(strings, n) { let answer = []; for (i=0; i 더보기
프로그래밍 기초01(항해99) TIL를 생각해봤는데, 그래도 매일 적어주느게 좋을거같다. 사실 몇일 간은 블로그에 다른 글을 올리면 TIL은 따로 올리진 않았는데 좋지 않은거 같다. 다른건 다른거고 매일 한 내용을 정리할 필요가 있어보인다. 2/13일 기준으로 TIL을 다시 적으려 한다. 이번주 부터 javascript 언어를 공부하는 주가 됬다. 사실 책같은 문서를 받고 공부하는거라 그렇게 좋진 않았다. 별도의 인강 같은건 없고, 혼자 책보면서 공부하다가 모로는거 있으면 구글링 하고 ... 아 마지막에 section 공부? 라고 하면서 매니저님이 내용정리 해주는 건 있었다. 사실 큰 기대는 하지 않았지만, 그래도 조금 실망스럽긴했다. 일단 진도를 따라가야 되니, 공부를 하는 중에 몰랐던 내용이 있었고 어제 javascript 카테고.. 더보기

티스토리툴바