계속 개발하고 싶은 고래

vscode로 ios 에뮬레이터를 실행하려다 보면 가끔 이런 에러가 발생한다. Failed to launch iOS Simulator: Error: Emulator didn't connect within 60 seconds 아래처럼 Simulator를 완전 종료하고 다시 실행해주면 깔끔하게 해결된다. (랩탑을 주기적으로 종료해주자)

요즘은 회사에서 react-admin 라이브러리를 사용한 백오피스 작업을 주로 담당하는데 고객들에게 발행한 인보이스를 관리하는 페이지가 하나 있다. 종종 인보이스를 직접 처리할 경우가 있어서 해당 인보이스를 미수, 취소 처리하는 기능을 예전에 추가했었다. 그 땐 직접 처리하는 건 이거면 될 줄 알았는데 최근에 수동으로 입금 완료 처리도 해야하는 경우가 생겼다. 그래서 일단 추가 기능도 작업은 했는데 간단했지만 내심 찝찝한 부분이 있었다. 피곤해서(오후 6시가 넘은 시각이었다...) 차마 더 고민을 못하고 PR을 올렸는데 아래와 같은 코멘트를 받았다. 내가 두루뭉실하게 찝찝했던 부분이 다시 떠오르며 창피했다. 내가 보완할 부분은 1. 비즈니스 로직과 ui가 커플링 되어있으니 분리하기 2. 처리 타입이 늘어..

[요약] aws amplify 콘솔에서 환경 변수를 설정할 때, 만약 서버 사이드에서 사용하는 환경 변수가 있다면 '환경 변수' 탭에서도 추가해야 하지만, '빌드설정' 탭에서도 yaml 파일을 수정해줘야 한다. 예를 들면 이렇게 될 것이고 꼭 build: 에서 npm run build 앞에 아래 명령어 들을 추가해줘야 한다! 사실 aws에 가이드가 아주 잘 나와있다 ( https://docs.aws.amazon.com/amplify/latest/userguide/ssr-environment-variables.html ) version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - env | grep -e DB_HOST -e DB..

Preserving and Resetting State https://react.dev/learn/preserving-and-resetting-state https://react.dev/learn/preserving-and-resetting-state#the-ui-tree https://react.dev/learn/preserving-and-resetting-state#state-is-tied-to-a-position-in-the-tree pitfall 부분 To React, these two counters have the same “address”: the first child of the first child of the root. This is how React matches them up bet..

드디어 풀지 못한 문제가..! 그 동안은 어찌저찌 풀기라도 했는데 이 문제는 풀지 못했다!!!!! 두 문자열이 주어졌을때, 한 문자열을 옆으로 밀어서 다른 문자열을 만들 수 있는지 판별하는 메소드를 작성하는 문제였다. 반복문도 사용해보고 sort도 사용해보고 slice로 잘라도 보고 이런 저런 방법을 시도해 봤지만 뭔가 아닌것 같은데.. 싶었다. 결국 풀이 영상을 보니, 두 문자열 중 하나를 이어 붙여서 다른 문자열이 그 안에 있는지 찾는 방법이 있었다. 뭔가를 밀어서 다른걸 만들어라! 라는 문제를 만나면 이렇게 하나로 이어 붙이는 방법이 있을 것 같다. (이렇게 하니까 입시 공부 같다...) https://youtu.be/HwpF73JJC8s

https://react.dev/learn/managing-state Reacting to input with state 1 https://react.dev/learn/reacting-to-input-with-state https://react.dev/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative https://react.dev/learn/reacting-to-input-with-state#thinking-about-ui-declaratively https://react.dev/learn/reacting-to-input-with-state#step-1-identify-your-components-different-..

알파벳이 담긴 배열과 단어들이 담긴 배열이 주어졌을때, 각 알파벳을 하나씩 모두 갖고 있는 단어가 있으면 1 없으면 2를 리턴하는 문제였다. 어떤 문자열의 구성에 관한 문제라면 정규식을 이용하는 것이 제일 간결하다고 생각한다. 그래서 이리저리 검색해서 나는 아래처럼 풀었다. 1. 각 알파벳 하나씩 모두 있는지 검사하는 정규식 작성 2. 단어들의 배열에다가 find 메소드로 정규식의 test를 통과하는 것이 있는지 확인 3. 있으면 1리턴, 없으면 2 리턴 근데 아래 영상을 보니 sort로 훨씬 간단하게 풀었다. function solution(spell, dic) { const found = dic.some(vocab => [...vocab].sort().toString() === spell.sort()..

numbers.replace(/zero|one|two|three|four|five|six|seven|eight|nine/g, (v) => { return obj[v] })​ numbers.replace(/zero|one|two|three|four|five|six|seven|eight|nine/g, (v) => { return obj[v] }) 숫자의 영어 이름으로 이루어진 문자열이 주어지면 각 영단어를 정수 숫자로 바꾼 것을 리턴하는 문제였다. 내가 접근한 방식은 replaceAll을 사용하는 거였다. 1. 각 영단어에 매칭되는 숫자들을 가진 object 준비 (Map을 사용하고 싶었으나 귀찮았음...) 2. 1번 object에서 키만 뽑아내서 반복문을 돌며 각 단어마다 문자열에다 replaceAll로 ..

숫자 배열이 주어졌을때 각 숫자의 크기 순서가 담긴 배열을 리턴하는 것이다. 만약 [1, 72, 10] 이 주어졌다면 [3, 1, 2] 를 리턴해야 한다. 나는 아래와 같이 풀었다 1) 주어진 배열을 slice 로 얕은 복사 후, sort로 큰 순서대로 정렬 2) 정렬한 배열을 반복문 돌면서 크기 순위를 객체에 기록 3) 본래 주어진 배열을 map 돌면서 2번의 객체에서 각 요소의 크기 순위를 찾아 담은 배열을 리턴 이렇게 해도 맞긴 하지만 좀 더 간단하게 푸는 방법이 있었다. 주어진 배열을 slice 후 정렬하는 것까진 똑같다. 그 후에 주어진 배열을 map을 돌면서 정렬된 배열에서 각 요소가 몇 번째 index에 있는지 indexOf를 사용해 찾은 다음 거기에 1을 더해서 리턴하는 방법이다. http..

문자열과 숫자가 주어지면 숫자 만큼 문자열을 쪼개서 배열에 넣은 뒤 리턴하는 문제였다 slice와 for 문을 사용해서 풀었는데 처음에 조금 헤매서 문제 난이도에 비해 시간이 오래 걸렸다. 아래 풀이 영상에서는 정규표현식을 사용했다. 정규표현식을 특정 문자를 찾아 뭔가를 할 때 주로 사용하다 보니 이번 문제를 풀 때 떠올리지 못했다. 생각해보니 전화번호 xxx-xxxx-xxxx 나 카드번호 xxxx-.. 입력 인풋을 만들때 비슷한 정규표현식을 사용했었다! return str.match(new RegExp(`.{1, ${n}}`, 'g')) https://youtu.be/_hyCyqOVH-8