Coding/TIL (Today I Learned) (29) 썸네일형 리스트형 [AWS] MFA 키 분실 후 인증받고 재설정 한 경험 사내 프로젝트 진행을 위해 회사 공용 이메일 계정으로 AWS 계정을 만들어 사용했다. 이메일은 회사 공용 계정이었지만 인증은 내 휴대폰으로 해 두었는데 휴대폰에 문제가 생겨 초기화하면서 MFA 인증을 하지 못하게 되었다. 테스트 버전으로 세팅 중이어서 IAM 계정도 별도 설정해두지 않았던 터라 로그인을 할 방법이 없었다. 도움말에는 대체 인증방법이 있는데, 계정에 등록된 휴대전화가 있는 경우 그 방법이 가능했다. 하지만 이 계정에는 회사 전화번호가 등록되어있어 내 휴대폰으로 인증번호를 받을 수가 없는 상황. IAM 계정을 할당해서 사용했어야 했는데, 처음이라 몰랐다. 서비스팀에 지원 요청하기 결국 방법이 없어 아래 페이지에서 Request를 작성했다. (현재는 한국어 지원은 안 되는 것 같다.) http.. 갑자기 발생한 react-native run-android 에러 상황 01. 오늘 새벽까지 잘 작동했던 react-native run-android 가 오후에 실행했더니 에러가 발생했다. 아니 코드 한 줄 바꾼게 없는데 왜?? 내용을 보면 빌드는 성공한 것 같은데 에뮬레이터에서 앱을 실행시키지를 못했다. 내 작업환경은 macOS에서 안드로이드 앱을 디바이스 없이 에뮬레이터로만 확인하는 중. android build Error type 3 Error: Activity class { } does not exist. 같은 문구로 구글링해서 몇 가지 블로그 글을 찾았지만 따라해도 해결되지 않았다. 대부분 제시한 해결방법은 안드로이드 스튜디오에서 상단 메뉴에 build > Clean Project 를 한 후 안드로이드 스튜디오 재 실행 > rebuild project 클릭 >.. state 불변성 관리, immer 라이브러리 써보기. 프로젝트를 진행하면서 전에 써보지 않은 redux-saga, hooks, styled-components 등을 적용해보고 있다. 또 한 가지는 immer 인데 코드 반영 전후로 필요성과 문법을 살펴보고 정리해둔다. 레퍼런스 : https://immerjs.github.io/immer/docs/example-reducer https://react.vlpt.us/basic/23-immer.html immer 가 무엇이고 왜 쓸까? 리액트에서는 배열이나 객체를 업데이트 할 때 직접 수정하지 않고 불변성을 지켜주면서 업데이트를 해야 한다. 객체의 경우 Spread syntax (...)를 사용하고, 배열의 경우 push, splice 같은 함수 대신 concat, filter, map 등의 함수를 사용해야 함... MySQL : connection 중복 이슈 MySQL 연동하는 과제를 진행하면서 GET/POST 시에 계속 에러가 발생했다. DB 연결은 되었지만 요청을 하면 매번 아래와 같은 타입 에러가 발생했다. TypeError: db.query is not a function. //도대체 왜!! 쿼리 스트링에는 오류가 없었기 때문에 에러 로그로는 원인을 알 수 없었다. 아직 디버깅이 서툴기 때문에 에러 로그로 확인이 안 될 때가 가장 답답한데, 시간을 많이 허비하고 나서야 원인이 DB 연결 쪽의 이슈라는 것을 발견했다. 원인은 DB connection의 중복. node-mysql 모듈을 사용하는 경우 mysql.createConnection()을 하고 나면 아래에 connection.connect()로 다시 연결할 필요가 없다고 한다. 불필요한 코드이고 .. MySQL: SQL문 입력하다 ' 또는 `을 입력했을 때 이번 주 데이터베이스 입문, 지난 이틀간 에러를 해결할 수 없어 MySQL을 설치했다 설치했다 지웠다를 몇 차례 반복했다. 원인을 명확하게 알 수 없었고 뭐가 뭔지 모르는 상태라 분노가 상승했지만 튜토리얼과 여러 블로그들의 도움을 받아 어찌어찌 연동에 성공하고 심신의 안정을 찾을 때 즈음. sql문을 입력하다가 작은따옴표가 실수로 입력됐다. 그리고 빠져나올 수가 없었다. 순간 너무 화가 났다!! 해결방법 : sql문 끝에 작은따옴표(') 또는 백 틱(`)을 입력한 경우 다시 한번 같은 부호를 입력해 주고 세미콜론(;)을 닫아준다. mysql> SHOW TABLES' '> '> ; '> ; //세미콜론 만으론 안끝남 '> '> '> //원래의 화살표(->) 모양이 '> 또는 `> 이렇게 바뀌어 나옴 '> .. JavaScript: Promise, async & await 이해 이전 과제를 진행하던 중에 Promise라는 개념이 이미 몇 차례 등장했었는데 그때는 그때 당장 익혀야 할 다른 것들이 많아서 프로미스는 공부하지못했다. 나중에 다루게 될 개념이라고 들었기 때문에 이런 게 있구나 정도로 넘겼음. 하지만 자바스크립트에서 비동기 처리는 중요한 부분이기 때문에 이번에 정리를 해 둔다. 레퍼런스: MDN: Using promises 캡틴판교: 자바스크립트 Promise 쉽게 이해하기 비동기 처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 것.(non blocking) 비동기 처리의 예로는 setTimeout(), ajax 통신을 들 수 있다. 이런 특징은 코드를 실행하는 시간을 효율적으로 쓸 수 있지만, 실행되는 순서를.. ES6: Destructuring (구조분해 할당) 이번 스프린트부터 리액트를 다루게 되는데, ES6 문법을 잘 알고 있어야 리액트를 활용한 과제를 진행할 수 있다고 한다. 그중 Destructuring이 익숙지 않아 블로그에 정리해 본다. Destructuring assignment란? 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 JS 표현식인다. 간단히는 배열과 객체를 좀 더 편하게 다루기 위해 ES6에서 추가된 방법이다. 해체라는 단어가 모호하기 때문에 이전 문법과 비교해서 예시를 보는 게 이해하기 쉬웠다. Array destructuring 이전 문법에서 우리가 배열에서 어떤 값을 추출하기 위해서는 아래와 같이 변수들 각각의 인덱스를 지정해 주어야만 했다. var number = [1, 2, 3, 4, 5]; var a = .. CORS(Cross-Origin Resource Sharing) 에 관하여 스프린트를 진행하면서 CORS라는 개념이 등장했다. 웹 개발을 위해서 알아야 할 기본적이고 중요한 이슈인 듯한데 짧은 세션 영상으로는 이것이 왜 필요한지, 언제 사용하는지 정확히 이해가 되지 않아서 조금 더 알아보고 정리해둔다. CORS : Cross-Origin Resource Sharing? 추가 HTTP 헤더를 사용하여 브라우저에게 한 출처에서 실행 중인 웹 응용 프로그램의 다른 출처의 선택된 자원에 대한 접근 권한을 알려주는 메커니즘.이라고 MDN에 나와있지만 좀 어렵다. 예들 들면 현재 도메인과 다른 도메인으로 리소스가 요청되는 경우, https://domain-a.com에서 제공되는 프런트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.co.. 이전 1 2 3 4 다음
