bluelion2 / project-issue-repo Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 3 KB

프로젝트를 진행하면서 있던 오류와 해결을 기록하는 repo

project-issue-repo's Introduction

강승훈

코드와 커피를 좋아합니다. 커피 한 잔 어떠신가요 ☕

🏠 서울에 살고 있습니다.
🔭 프리윌린에서 프론트엔드 개발자로써 즐겁게 일하고 있습니다.
😍 혼자보다 같이, 어제보다 내일을 위해 개선하려 노력합니다.

🤔 궁금하신게 있으시다면 연락주세요! 💬

📫 Gmail
📋 Resume

project-issue-repo's People

Contributors

Stargazers

Watchers

project-issue-repo's Issues

[Mobx] - 자식 컴포넌트로 computed값을 내려줄 때, 변경을 감지하지 못함

부모 컴포넌트에서 위의 옶션값을 관리하고, 그 값중 일부를 computed를 통해서 자식인 Footer 컴포넌트로 내려주고 있었다

자식컴포넌트에서 해당 computed 값을 가지고 있다가, 특정이벤트가 실행되면 해당 값을 사용하는데, 변경되는 값을 감지하지 못하고 초기에 내려주는 값만 사용하고 있었다.

220401 touch Event 버그

22/04/01 출석앱 버그 정리

4.1일 출석앱 버그에 대한 사후부검

이슈

모바일 앱에서 touch를 할 때 간헐적으로 눌렀음에도 값이 입력되지 않는 이슈가 여럿 접수

재현

모바일에서 바로 손을 때면 되지만, 살짝 끌면 되지 않음

원인분석

사용자가 숫자를 입력할 때의 이벤트가 onClick만 등록되어있음
- onClick
- onTouchStart
- 영상

_._2022-04-04_._9.57.26.mov

해결방안

1차) onClick → onTouchStart 이벤트로 교체 ⇒ but 모달과 다른 곳에서 사이드 이펙트 발생
- Ex) 모달 open 시 뒷배경 클릭도 같이 잡혀서, 모달 오픈 → 바로 닫힘 현상 발생
2차) Touch가 빈번한 부분만 Touch event로 변경하기 (출석코드 입력 부분만으로 수정, 그 외에는 onClick)
- 테블릿에서 onClick 이벤트를 못 잡는 것은 아님. 손으로 닿았을 때

Todo

출석앱은 현재 앱 내 웹뷰로만 쓰고있지만, 웹으로도 쓸 가능성이 다분함
- ontouchstart 이벤트 뿐만 아니라 웹에서 접근할 경우 onClick도 지원해야 함

자료 정리

GlobalEventHandlers
- HTMLelement, window, document 등 여러 인터페이스가 공유하는 공통 이벤트 처리기를 묘사합니다. 물론, 각각의 인터페이스는 아래에 나열된 항목뿐만 아니라 더 많은 이벤트 처리기를 추가할 수 있습니다.
GlobalEventHandlers - Web API | MDN
- globalEventHandlers의 함수들이 전부 지원되는 것은 아님
"globaleventhandler" | Can I use... Support tables for HTML5, CSS3, etc

onclick vs ontouch(onTouchStart, onTouchEnd)

onClick
- html element에서 기본적으로 지원되는 click
  이벤트 → React에서는 onClick

onTouchStart
- 정확히는 ontouchstart이벤트 → React에서 합성이벤트로 지원하는 경우 onTouchStart 사용
- ontouchstart 는 모바일에서 켜는 웹의 경우 지원되는 이벤트
  - 데스크탑에서는 적용되지 않음 - 브라우저 호환성 체크

    - 참고 - mdn & caniuse
        
        [Touch events - Web API | MDN](https://developer.mozilla.org/ko/docs/Web/API/Touch_events)

이벤트 순서
- onTouchStart ⇒ onTouchEnd ⇒ OnClick
- 길게 클릭시 onTouchStart ⇒ onTouchEnd (onClick 이벤트 동작 안함)

[Mobx] mobx observable이 동작하는 원리

✨ What?
발견된 이슈 간단히 정리하기

어떻게 Mobx에서 Observable한 값을 관리를 할까?

📚 캡쳐한 사진들

[AWS] Code Pipeline 빌드 실패 현상

기존에 이슈없이 잘 되고 있던 ci/cd 셋팅들이 와장창 깨져있는 상태를 발견...

[HTML] SVG -> tsx 변환하기

✨ What?
발견된 이슈 간단히 정리하기

📚 캡쳐한 사진들

Ex) 
clock.svg -> clock.tsx 변환


#!/bin/bash

# svg filename 받기
echo "Enter the svg filename: "
read svgFileName
echo "echo $svgFileName"

# svg 파일명 만들기
type=".svg"
svgFile=$svgFileName$type
echo "echo $svgFile"

# svg 파일에 접근해서 안에 정보를 가지고 오기
svgValue=`cat $svgFile`
echo "value $svgValue"

# 새 tsx 컴포넌트 파일명 만들기
newFileName=$( echo ${svgFileName}"_icon" | perl -pe 's/(^|_)./uc($&)/ge;s/_//g')
newFile=$newFileName".tsx"
echo $newFile

# tsx 컴포넌트 파일에 script 넣기

cat > $newFile <<EOF
import { s } from './icon.style'
import React from 'react'
import { IconProps } from '../iconProps'

export const $newFileName = React.forwardRef<SVGSVGElement, IconProps>(
  ({ size = 16, name = 'icon', color, style, ...props }: IconProps, ref) => {
    return (
      $svgValue
    )
  }
)

EOF


# svg 에 있는 width="xx", height="xx", fill="xx" 제거하기
sed -i "" 's/width="24"//g' $newFile
sed -i "" 's/height="24"//g' $newFile

# svg 에 props 넣어주기
sed -i "" 's/fill="none"/\ncss={s}\nstyle={{ width: size, color, ...style }}\ndata-svg-name={name}\n{...props}\nref={ref}/g' $newFileName.tsx

#  index.ts 에 tsx export 추가하기
newFilePath="export { $newFileName } from './$newFileName' "
echo $newFilePath >> index.ts

# 원본 svg 제거하기
rm -rf $svgFileName".svg"

# ------------------
# - 참고
# https://wikidocs.net/33828
# https://codechacha.com/ko/shell-script-substring/

[AWS] Phase context status code: YAML_FILE_ERROR Message: mapping values are not allowed in this context at line 2 에러 발생

Code Pipeline 설정시

Phase context status code: YAML_FILE_ERROR Message: mapping values are not allowed in this context at line 2
AWS Code Pipeline 셋팅 예제하면서, 해당 에러 발생하면서 오류남.

buildspec.yml 작성하기

[WebView] 신규 웹뷰 프로젝트 작업 전 준비하기

웹뷰 프로젝트를 진행하기 앞서서 신경쓸 것들 정리

플랫폼(안드로이드, IOS) 지원범위
- 기능이 어디에서는 되고, 어디는 안되는 경우가 생길 수 있다고 함.
- 테스트 기기 확보
기획의 중요성
- 기획이 휙휙 바뀌게 되면 개발이 그 만큼 힘듬..
- 최대한 캐물어서 문서화 시키기
네이티브 개발자와 소통
- 서로 쇼부를 봐야할 경우가 빈번함.

우선은 이정도

NextJS에서 image 파일들 경로를 찾지못해 빌드가 실패하는 현상

NextJS에서 build시, /component 아래에 있는 파일들이 /public아래에 있는 이미지들을 찾지 못하는 현상이 발생하고 있다.
image를 불러오기 쉽게 next-images를 쓰고있는데 이쪽에 문제가 있지 않나 추측을 우선 해본다.

경로
폴더 구조
/pages/index.tsx - 여기서도 마찬가지로 public까지 찾아가니 잘 불러오고 있다.

[Jasmine] : test code error

Return이 string인지 확인하는 테스트코드 작성중 발견한 에러

Test를 진행할 해당 function
Test Code
Error

내가보기엔 같은데 왜지!!!???

[Vite] CRA에서 Vite로 변환하기

✨ What?
발견된 이슈 간단히 정리하기

사내에서 쓰는 CRA + CRACO를 Vite로 변환하기

업무 시간이 살짝 붕 떠서, 빌드 속도가 느려서, 커스텀하게 건드리기 어려워서, 다른걸 써보고 싶은 욕구 등등의 이유로 변환 시작

📚 캡쳐한 사진들

[AWS] 페이지 이동 후 새로고침시 에러 발생

처음 진입시에는 잘 보이다가, 다른 페이지 이동후 새로고침시 에러가 발생하고 있는 상황

aws s3 배포 - codepipeline으로 자동배포되어있음.

This XML file does not appear to have any style information associated with it. The document tree is shown below.

[Mysql] Mysql password Error

ERROR 1045 (28000): Access denied for user 에러 발생

password를 분명히 맞게 입력했는데, 해당 에러 발생

해결

zeta wiki

위 해결책이 있었으나, 그 동안 mysql 공부한걸 복습할 겸 지우고 다시 설치함
Homebrew 를 이용한 mysql 설치

[Mobx] 데이터가 변경되는 동안의 에러

번역

현재 상태 변경과 같은 부작용은 허용되지 않습니다. 예를 들어 React 구성 요소의 렌더링 기능에서 상태를 수정하려고합니까?

render하는 시점에서 데이터가 변경되어서 에러가 나는거 같은데......

[JS] Nested Try Catch Error 처리하기

현재 웹 매쓰플랫 프로젝트 구조는

서버와 통신하는 API단
api를 받아와서 데이터를 가공하는 처리를 하는 Controller
controller를 조작, UI와 관련된 기능을 하는 Service
화면에 뿌려지는 UI

이렇게 구성되어있다.
문제가 되는건, API에서 일어난 에러 처리를 위해 UI에서 처리해야하는 것들이 몇가지 보이는데, 어떻게 처리하는게 좋을지 질문을 받았다.
(Ex - 로그인 요청시 서버에서 http error처리 외에, 따로 주는 에러메세지와 code들)

그동안에는 UI와 api 두개로만 분리를 해서 try catch를 통해 바로 처리를 했는데,
이렇게 layer가 분리된 프로젝트에서는 에러가 어디 층에서 난 것인지 확인이 쉽지 않아보였다.

[PWA] IOS - PWA앱에서 input focus시 키보드가 나오지 않는 이슈

✨ What?
발견된 이슈 간단히 정리하기

회사 내부에서 진행중인 웹 프로젝트를 진행하고 있다. IOS도 대응을 안하고 있는데, 유저 요청건중 1등이 해달라는 이슈여서, 잠깐 살펴보았다.
다행히 UI가 크게 뒤틀리거나 그러진 않아서 살짝살짝 수정하고 마무리 된 상황 + 하는김에 PWA도 적용시켜서 해볼까 해서 시작하게 되었다.

상단 status bar도 색상이 잘 먹혔고, 디자인도 잘 적용된 상황에서 아이디, 비밀번호를 입력하려고 하는데, 가상키보드가 나타나지 않고 있다....

📚 캡쳐한 사진들

[Ionic4] : keystore 분실

원인 : Application을 재배포 하기 위해 작업 후 빌드 중,
구글 플레이 스토어에 배포전에 어플리케이션에 서명하는 keystore를 삭제해버림

결과 : 복구 불가능이라서, 새로운 어플리케이션으로 배포함.

[AWS] AWS Codebuild에서 JS heap out of memory 로 인한 빌드 실패

이전에 잘 되던 pipeline에서 빌드가 계속 실패하고 있길래 뭔가하고 로그를 찾아봤다.

음..sourceMap에서 문제가 있다는 건데, local단에서는 build가 되고 있어서, 일단 code build에서 컴퓨터 성능을 올려보아서 테스트를 해보는 것으로...

[React-native] : JAVA_HOME 경로 Error

React -native run-android시 경로상에 JAVA_HOME이 없다는 에러 생성

Ionic4 Project 진행시 했던 경로

.bash_profile 내부에서의 경로 설정

[JS] : 이미지의 사이즈 균일문제

요청 사항

리스트의 높이가 최대한 비슷하면서, 안의 이미지도 보일 수 있을 정도가 되도록 요청받음.
이미지의 가로, 세로 및 여백의 유무가 제각각임.

문제점

서버로 부터 받은 리스트를 동적으로 그려줄 때, 이미지의 가로, 세로가 재각각임.
기존 스타일을 조금 수정해서 작업을 하는 것을 목표로 함.

이미지 높이값을 고정으로 두게 될 때, 해당 문제처럼 가로가 짧고 높이가 긴 경우 너무 작게 나오는 경우가 발생하게 됨.

[React Native] Cocoapods install이 안될때

상황

react-native-cli: 2.0.1
pod --version : 1.8.4
react-native: 0.61.5

React native 개발 셋팅하기 따라하던 중, IOS관련 설치가 불가능하고 실행이 안됨.

React-native init project
cocoapods을 인스톨 할 수 없다는 에러가 나옴
react-native run-android 는 정상 동작
react-native run-ios 시 cocoapods 관련 에러 발생

error Could not find "Podfile.lock" at /Users/kangseunghun/Desktop/ksh/sample/ios/Podfile.lock. Did you run "pod install" in iOS directory?

[AWS] CodeBuild 이후 s3로의 복사를 하지 않음.

AWS codepipeline, codebuild로 SPA 자동배포하기
해당 예제를 보면서 따라하는 중, 마지막에 빌드 후 결과물이 배포 버킷에 들어가지 않는 문제 발생.

빌드 완료 모습

pipeline 생성 모습

흠.. 뭐가 문제일까.. 글을 다시한번 정독해봐야겠다.

[AWS] Github personal access Token 인증

✨ What?
발견된 이슈 간단히 정리하기

Github 인증이 ID/PW 가 사라지고 personal access token으로 인증해야 함.
EC2에 git clone 후 배포시, private한 레포는 인증이 안되 git clone이 실패하는 이슈

📚 캡쳐한 사진들

[React Hook Form] - Nested Array안에 값이 변경되었는지를 체크하지 못함.

✨ What?
발견된 이슈 간단히 정리하기

Nested Array form Example

Nested Array 안에서 value가 변경되었을 떄, 해당 input을 손 댔는지 비교하는 isDirty , dirtyFields 값이 제대로 동작하지 않음

📚 캡쳐한 사진들

[AWS] AWS S3 배포자동화시 쓸모없는 이전 파일을 제거하기

aws s3에 배포자동화 셋팅을 해두었는데, webpack 번들링하면서 고유한 이름의 파일들을 생성하고 있었다.

푸시 및 빌드할 떄마다 새로운 파일들을 추가하고, 이전에 빌드한 파일들을 지워야 해서 찾아보던중,

aws s3 remove문서를 참고해서 buildspec.yml을 수정하였으나 build가 실패해버림 ㅠ

[Angular] : Expresion changed after it has Benn checked error

Main Component : ngOnint에서 event-modal을 오픈시 해당 에러 감지
- Angular material을 사용해서 만듬
- 에러만 감지하고, 기능에는 이상이 없음

새로운 컴퓨터에 개발환경 셋팅하기

새로운 컴퓨터에 개발환경을 셋팅하기 위해, 필요한 것들을 받을 수 있는 링크 모음입니다.

Homebrew : link
NodeJs : link
- Homebrew - NodeJs : link
- n을 이용해서 nodejs 설치 후 brew uninstall node => n으로 node. 패키지 설치하기 참고
Yarn : link

Iterm2 ; link
Vscode : link
- setting sync : link
Postman: link
Xcode : App Store에서 다운로드
Zeplin : link
Slack : link
Source Tree : link
Browser list : Chrome, FireFox 등등

Angular-cli : link
Create-react-app : link
Node-sass
Eslint / Tslint

[xlsx] data를 excel로 변환시 큰 숫자의 축약

✨ What?
발견된 이슈 간단히 정리하기

큰 숫자가 담긴 데이터를 excel로 변환시 excel에서 축약된 숫자로 나옴.

121201010101을 excel로 변환시 1.21201E + 11 로 노출 (실제 값은 원본대로 나옴)

📚 캡쳐한 사진들

[React Native] : TypeError: undefined is not an object

금요일에 정상 작업 후 오늘 작업을 진행하기 위해
react-native run-ios 시 해당 에러 발생

[React] 이미지 용량 이슈

[AWS] AWS Codebuild에서 JS heap out of memory 로 인한 빌드 실패 - 해당 건에 대해서 찾아보던중에, Icon.tsx가 왜이렇게 많이 용량을 잡아먹는지 궁금해졌다. 이미지 파일이지만 그래도 이렇게 많이 잡아먹나?

220419 AWS Json error fix

22/04/19 검정교과서 JSON Error

환경

web: dev, live 모두
aws : freewheelin-live

원인

검정교과서 정보를 주는 certified-json 파일의 CORS 에러
- 도메인이 달라서 브라우저에서 차단함
  - teacher.mathflat.com / download.mathflat.com
- 파일
  - www.download.mathflat.com/certified-json

해결

cloudfront, s3 설정 변경
- cloudfront
  - cloudfront - download.mathflat.com 동작 - 편집의 설정 변경

s3 - cors 정책 수정

- AllowedMethods - 허용되는 요청

참고

aws s3

cors option guide

Amazon S3에서 CORS 구성 및 확인

aws cloudfront

CloudFront의 "No 'Access-Control-Allow-Origin' header" 오류 해결

[Webview] 안드로이드 앱 내부의 웹뷰 또는 브라우져를 열 때 이미지가 안나오는 이슈

✨ What?
발견된 이슈 간단히 정리하기

페이스북 앱 내부의 웹뷰 또는 링크를 통해 홈페이지를 볼 때, 특정 부분의 이미지가 안나온다고 마케팅 팀에서 연락을 받고 확인함.

📚 캡쳐한 사진들

[Storybook] Storybook 빌드 실패

✨ What?
발견된 이슈 간단히 정리하기

3주전 스토리북 컴포넌트를 추가 작업한 뒤, 나중에 확인하려니 갑자기 안된다는 이슈가 들어와서 확인중.
최근에 몇몇 패키지 업한것만 있는데, 거기서 부터 확인해봐야 할듯 함.

📚 캡쳐한 사진들

Error 발생

Mobx 설치 후 store 연결 뒤 react-native run-ios 실행시

Runtime Error: Expected a constructor 발생

mobx스토어 연결을 하지 않으니 에러가 생기지 않는 것으로 보아 mobx에 문제가 있다고 판단함.

[PWA] IOS support list

✨ What?
발견된 이슈 간단히 정리하기

IOS - PWA 관련 개발시 지원 기능 참고

https://firt.dev/notes/pwa-ios/

📚 캡쳐한 사진들

[Mobx] observable한 값을 어떻게 React Component에 적용할까

✨ What?
발견된 이슈 간단히 정리하기

📚 캡쳐한 사진들

Mobx에서 상태관리를 통해 값을 observable하게 관리하고 가져다 쓸 수 있다. React와 같이 쓴다면 어떻게 React Component가 알고 view에서 보여줄 수 있을까??

[React-native] : Compile Error

증상 : React-native run-ios 후 정상적으로 빌드되지 않고 Error 발생
Error를 읽어보면, Yoga에 문제가 있는것 같다.

package.json

{
  "name": "menu",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "ios": "react-native run-ios",
    "android": "react-native run-android"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-firebase": "^5.4.0",
    "react-native-gesture-handler": "^1.2.1",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "@types/react": "^16.8.18",
    "@types/react-native": "^0.57.60",
    "@types/react-navigation": "^3.0.7",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3",
    "typescript": "^3.2.2"
  },
  "jest": {
    "preset": "react-native"
  }
}