계속 개발하고 싶은 고래

요즘은 회사에서 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..

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-..

챕터 https://react.dev/learn/your-first-component 챕터 https://react.dev/learn/importing-and-exporting-components 포인트1. https://react.dev/learn/importing-and-exporting-components#the-root-component-file These currently live in a root component file, named App.js in this example. In Create React App, your app lives in src/App.js. Depending on your setup, your root component could be in another file, ..

1. state가 바뀔 때 2. props가 바뀔 때 3. 내 부모 컴포넌트가 다시 렌더링 될 때 -> 가끔은 자식 컴포넌트가 리렌더링 될 필요 없는데 억울하게 리렌더링 될 경우가 있다. 그 때 사용하는 것이 'memo'. 대신 state나 props가 바뀌면 잘 리렌더링 된다.

create-react-app으로 프로젝트 셋팅하고 tailwind css 추가하려고 하니까 별 에러가 다 나와서... 다 지우고 공식 문서에 나온대로만 따라했더니 이제야 잘 된다.. 1. 타입스크립트가 적용된 리액트 프로젝트 셋팅하기 나는 create-react-app 을 사용해서 프로젝트를 셋팅할거다. create-react-app 홈페이지에 나와있는 아래의 명령어를 실행한다. npx create-react-app my-app --template typescript 2. tailwind css 설치하고 적용하기 tailwind css 공식 홈페이지에 나온대로 명령어를 실행한다. npm install -D tailwindcss postcss autoprefixer 그 다음 아래 명령어를 실행하면 tai..

결론: create-react-app으로 리액트 프로젝트 만들 때, 프로젝트 이름에 'react' 넣지 말자^^ 리액트 프로젝트 만들 때 많이 사용하는 마법의 명령어 npx create-react-app begin-react 를 쳤는데 아래와 같은 에러가 나왔다. 구글링 해서 아래 명령어들 다 해봤는데 여전히 create-react-app이 안 먹힌다! npm uninstall -g create-react-app npm i create-react-app 이렇게 해서 다시 설치도 해보고 npx clear-npx-cache 이것도 해보고... 그러다 순간 든 생각이 '프로젝트 이름에 react가 들어가서 그런가?' 였다. 그냥 리액트 공부용으로 만들 프로젝트라서 대충 npx create-react-app b..

자바스크립트에서 화살표 함수는 아래처럼 생겼다. const callMe = () => { return '전화해' } 이렇게 한 줄 짜리 간단한 함수는 return 키워드와 대괄호를 생략해서 한 줄로 작성할 수도 있다. const callMe = () => '전화해' 여기까지는 익숙하다. 그런데 유튜브에서 제로초 채널에 올라온 자바스크립트 영상을 보다가 화살표가 두 개인 화살표 함수를 보고 순간 당황했다. '저건 뭐지..?' const callMe = () => () => '전화해' 대괄호가 없으니 return 키워드가 생략된 함수일 것이다. 그렇다면 정신차리고 다시 return을 넣어보면... const callMe = () => { return () => '전화해' } 이제 좀 구조가 보인다. '전화해..

xss cross site scripting: 자바스크립트 공격 예: 글쓰기 버튼 클릭 -> 글 작성 화면 -> 글 작성 이 때 글 작성할 때 같은 자바스크립트 코드를 넣어서 작성함 csrf 예: 하이퍼링크 이용.. 방지방법: 1 주소에 다 드러나는 get 방식 말고 post 방식 2 같은 도메인에서 들어온 요청이 아니면 다 차단 (header에서 referrer 검증) 3 csrf 토큰 사용 (스프링 시큐리티에서는 csrf 토큰 없으면 무조건 접근 차단함)