[TIL] 2023.06.07 word-break로 문자열 줄바꿈하기

table body에 띄어쓰기 없이 영어로 텍스트를 입력했을 때 줄 바꿈이 되지 않고 테이블 레이아웃이 깨지면서 가로 스크롤이 생기는 문제가 발생했다. 테스트 삼아 일반적인 영어 텍스트를 작성했을 때는 아무 문제없는 것을 알아냈다. 그래서 띄어쓰기 없이 작성한 것이 문제인가 싶어서 관련 키워드로 검색을 해봤다. word-break: break-all; 이것저것 검색해 보다가 알게된 것이 css word-wrap 속성. word-wrap: break-all을 적용했더니 내가 원하는 대로 띄어쓰기 없이 글을 작성했을 때에도 줄 바꿈이 잘 되는 것을 확인할 수 있다. +) 근데 `word-break: break-all` 속성을 지정했더니 단어가 깨지면서 개행되는 문제가 있었다. 나는 테스트 용으로 띄어쓰기 없..

• format_list_bulleted JavaScript
• · 2023. 6. 7.
• textsms

[React] resize 이벤트로 브라우저 크기에 따라 javascript 적용하기

CSS와 관계없이 브라우저의 width에 따라 컴포넌트 내에서 javascript를 다르게 적용하기 위해 resize 이벤트를 사용했다. resize 이벤트 const [width, setWidth] = useState(window.innerWidth); const isMobile = width { setWidth(window.innerWidth); }, 200); useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); // cleanup }; }, []); resize 이벤트는 document view의 크기가 변경될 때..

• format_list_bulleted 개발 기록장
• · 2023. 6. 7.
• textsms

[TIL] 2023.06.06 Programmers_순서 바꾸기

순서 바꾸기 문제 설명 정수 리스트 num_list와 정수 n이 주어질 때, num_list를 n 번째 원소 이후의 원소들과 n 번째까지의 원소들로 나눠 n 번째 원소 이후의 원소들을 n 번째까지의 원소들 앞에 붙인 리스트를 return하도록 solution 함수를 완성해주세요. 입출력 예 num_list n result [2, 1, 6] 1 [1, 6, 2] [5, 2, 1, 7, 5] 3 [7, 5, 5, 2, 1] 입출력 예 #1 [2, 1, 6]에서 첫 번째 이후의 원소는 [1, 6]이고 첫 번째까지의 원소는 [2]입니다. 두 리스트를 이어 붙이면 [1, 6, 2]가 됩니다. 입출력 예 #2 [5, 2, 1, 7, 5]에서 세 번째 이후의 원소는 [7, 5]이고 세 번째까지의 원소는 [5, 2, ..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 6. 6.
• textsms

[Recoil] 새로고침해도 유지되는 state_Recoil Persist

결제 기능을 구현하는 과정에서 결제창이 넘어가며 state가 초기화되어 결제 승인 페이지에 도착하기 전에 사용자가 입력한 예약 정보가 모두 날아가는 문제가 발생했다. 그래서 사용자가 입력한 예약 정보를 임시로 저장하기 위해 Recoil Persist 기능을 이용하여 구현했다. Recoil Persist란? Recoil과 함께 사용할 수 있는 별도의 라이브러리로, Recoil로 생성한 global state를 localStorage 혹은 sessionStorage에 저장하여 새로고침해도 state가 유지되도록 사용할 수 있다. 기존 Recoil 사용 방법과 동일하게 useRecoilState 등의 훅을 이용하여 쉽게 Storage에 상태를 저장할 수 있다. Recoil Persist 사용 방법 npm in..

• format_list_bulleted 개발 기록장
• · 2023. 6. 6.
• textsms

[TIL] 2023.06.04 Programmers_수 조작하기 2

수 조작하기 2 문제 설명 정수 배열 numLog가 주어집니다. 처음에 numLog[0]에서 부터 시작해 "w", "a", "s", "d"로 이루어진 문자열을 입력으로 받아 순서대로 다음과 같은 조작을 했다고 합시다. "w" : 수에 1을 더한다. "s" : 수에 1을 뺀다. "d" : 수에 10을 더한다. "a" : 수에 10을 뺀다. 그리고 매번 조작을 할 때마다 결괏값을 기록한 정수 배열이 numLog입니다. 즉, numLog[i]는 numLog[0]로부터 총 i번의 조작을 가한 결과가 저장되어 있습니다. 주어진 정수 배열 numLog에 대해 조작을 위해 입력받은 문자열을 return 하는 solution 함수를 완성해 주세요. 입출력 예 numLog result [0, 1, 0, 10, 0, 1,..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 6. 4.
• textsms

[TIL] 2023.06.03 Programmers_배열 조각하기

배열 조각하기 문제 설명 정수 배열 arr와 query가 주어집니다. query를 순회하면서 다음 작업을 반복합니다. 짝수 인덱스에서는 arr에서 query[i]번 인덱스를 제외하고 배열의 query[i]번 인덱스 뒷부분을 잘라서 버립니다. 홀수 인덱스에서는 arr에서 query[i]번 인덱스는 제외하고 배열의 query[i]번 인덱스 앞부분을 잘라서 버립니다. 위 작업을 마친 후 남은 arr의 부분 배열을 return 하는 solution 함수를 완성해 주세요. 입출력 예 arr query result [0, 1, 2, 3, 4, 5] [4, 1, 2] [1, 2, 3] 이번에 매번 처리할 query의 값과 처리 전후의 arr의 상태를 표로 나타내면 다음과 같습니다. query의 값 query 처리 전..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 6. 3.
• textsms

[TIL] 2023.06.02 Programmers_배열 만들기 3

배열 만들기 3 문제 설명 정수 배열 arr와 2개의 구간이 담긴 배열 intervals가 주어집니다. intervals는 항상 [[a1, b1], [a2, b2]]의 꼴로 주어지며 각 구간은 닫힌 구간입니다. 닫힌 구간은 양 끝값과 그 사이의 값을 모두 포함하는 구간을 의미합니다. 이때 배열 arr의 첫 번째 구간에 해당하는 배열과 두 번째 구간에 해당하는 배열을 앞뒤로 붙여 새로운 배열을 만들어 return 하는 solution 함수를 완성해 주세요. 입출력 예 arr intervals result [1, 2, 3, 4, 5] [[1, 3], [0, 4]] [2, 3, 4, 1, 2, 3, 4, 5] 첫 번째 구간에 해당하는 배열은 [2, 3, 4] 입니다. 두 번째 구간에 해당하는 배열은 [1, 2..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 6. 2.
• textsms

Vercel로 배포 시 속도 개선 방법_Function Region

Vercel Project Settings > Functions를 들어가면 Function Region을 선택할 수 있다. 그런데 Vercel로 배포 시 Function Region 디폴트가 USA로 설정되어 있기 때문에 이것을 무조건 한국으로 바꿔주는 것이 좋다. Setting Serverless Function Regions 함수가 해당 데이터베이스에서 멀리 떨어진 지역에서 호출되는 경우 응답 시간이 느려집니다. 데이터베이스에 가까운 지역에 서버리스 기능을 배포하면 성능을 크게 향상시킬 수 있습니다. 서버리스 기능과 데이터 소스가 물리적으로 가까울 때 데이터 소스에서 데이터를 읽는 데 대기 시간이 줄어듭니다. Function Region이 미국인 경우 POST 요청에 2.70초가 소요되었다. Func..

• format_list_bulleted 개발 기록장
• · 2023. 5. 31.
• textsms

[TIL] 2023.05.31 Programmers_홀짝에 따라 다른 값 반환하기

홀짝에 따라 다른 값 반환하기 문제 설명 양의 정수 n이 매개변수로 주어질 때, n이 홀수라면 n 이하의 홀수인 모든 양의 정수의 합을 return 하고 n이 짝수라면 n 이하의 짝수인 모든 양의 정수의 제곱의 합을 return 하는 solution 함수를 작성해 주세요. 입출력 예 n result 7 16 10 220 입출력 예 #1 예제 1번의 n은 7로 홀수입니다. 7 이하의 모든 양의 홀수는 1, 3, 5, 7이고 이들의 합인 1 + 3 + 5 + 7 = 16을 return 합니다. 입출력 예 #2 예제 2번의 n은 10으로 짝수입니다. 10 이하의 모든 양의 짝수는 2, 4, 6, 8, 10이고 이들의 제곱의 합인 22 + 42 + 62 + 82 + 102 = 4 + 16 + 36 + 64 + ..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 31.
• textsms

[TIL] 2023.05.30 Programmers_문자열 겹쳐쓰기

문자열 겹쳐쓰기 문제 설명 문자열 my_string, overwrite_string과 정수 s가 주어집니다. 문자열 my_string의 인덱스 s부터 overwrite_string의 길이만큼을 문자열 overwrite_string으로 바꾼 문자열을 return 하는 solution 함수를 작성해 주세요. 입출력 예 my_string overwrite_string s result "He11oWor1d" "lloWorl" 2 "HelloWorld" "Program29b8UYP" "merS123" 7 "ProgrammerS123" 나의 1차 풀이 function solution(my_string, overwrite_string, s) { let slice = my_string.slice(s, s + overw..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 30.
• textsms