TIL
# 211015 TIL
장기현장실습 SNU 성문 분석 윈도우 환경에서 1:1 성문 분석을 할 때, JSON.parse 형식이 맞지 않으면 빈 화면 나타나는 문제 해결 형식이 맞지 않아 나타나는 에러를 잡은 것은 아니지만 빈 화면이 뜨는 현상을 해결함 JSON.parse 코드가 있는 부분에 try, catch문을 사용해 에러 처리를 함 AnalysisResultCard.tsx, SingleAnalysisPage.tsx 각 파일에 JSON.parse 하는 부분을 try 블록으로 감싸줌 Catch 블록에는 window.alert() 함수를 띄우고, 사용자에게 오류 메세지를 보이게 하며, 빈 화면이 아닌 기존 페이지가 유지될 수 있게 함 json으로 파싱된 값을 return 하는 경우에는 해당 값 대신 undefined를 retrun..
# 211014 TIL
장기현장실습 SNU 성문 분석 외부에서 서버 ip로 접근할 수 있도록 포트포워딩하기 위해서는 게이트주소로 들어가 로그인을 한 후, 외부 포트 범위를 설정해주어야 한다. 로그인 권한이 대표님께 있어서 대표님이 해결해주셨다. 외부에서 183.98.35.16으로 접속하면 서버 IP 192.168.1.31로 변환되어 접속된다. 포트 번호는 기본 80으로 하여 따로 작성하지 않아도 되도록 설정했다. 윈도우 환경에서의 문제 발생 (로컬, 셋업 파일로 설치한 프로그램 모두) 1:1 분석 시, 특정 파일을 선택하고 분석하기를 누르면 빈 화면이 뜨면서 오류가 발생했다. 로그를 찍어보니 JSON.parse를 할 때 첫글자부터 JSON 형식이 아니라 발생하는 오류였다. 또, 도커로 진행상황을 살피던 중, 분석이 잘될 때는 ..
# 211013 TIL
장기현장실습 SNU 성문 분석 현재 작성된 포맷에 맞게 이미지 이름과 버전을 작성하여 docker build 빌드가 성공적으로 완료되어 docker images 명령어로 이미지가 생성된 것을 확인함 sudo docker push [이미지이름] 명령어로 해당 이미지를 gitlab에 push함 yarn start로 클라이언트 애플리케이션이 로컬에서 잘 돌아가는 것을 확인 빌드와 셋업파일 생성을 위해 yarn package함 생성된 셋업 파일 중 msi 설치 파일로 성문분석 프로그램 설치 분석 시, 특정 파일을 선택할 때 빈 화면이 뜨면서 오류 발생 Json.parse 관련인데 undefined 되어 오류 뜨는 것으로 확인 외부에서 서버 ip로 접근할 수 있도록 세팅해야함 브라우저에 게이트 주소를 입력하여 포..
# 211012 TIL
장기현장실습 SNU 서버 세팅 snu repository에 초대 받고 설명 들음 analysisapp: 클라이언트 코드 (vue.js로 작성됨) analysisapp_react: 클라이언트 코드 → analysisapp을 react로 작성한 코드 analysissite: 서버 코드 analysissite_v1: 서버 코드 중, 엔진을 바꾸면서 따로 뺀 코드 프로젝트를 빌드해서 다른 원격 프로그램에서도 설치할 수 있도록 하자. package.json의 script를 보면 package-win이 있는데, 이는 윈도우 환경에서 설치할 수 있는 셋업파일도 함께 만들며 빌드해준다. 윈도우 환경에서 package-win을 실행하자. 그런데 빌드하는 과정에서 여러 오류가 발생할 수 있으니 주의할 것. 그리고 win의..
# 211008 TIL
장기현장실습 리액트 학습하기 웹 게임을 만들며 배우는 React (12/64) 띵동 이슈를 해결하기 위해, 부족한 개념을 학습하고 정리함 리액트로 컴포넌트를 어떻게 만들지 선언해줄 수 있다. 리액트 돔은 리액트 코드를 브라우저에 붙여주는, 화면에 실제로 반영해주는 역할을 한다. 렌더링을 통해 돔에 컴포넌트를 그려서 보내준다. 리액트의 렌더부분에서 자바스크립트 대신 HTML 문법을 쓰는데, 그 코드를 원래 인식할 수 없다. 그런데 이 부분을 바벨이 인식할 수 있도록 도와준다. 바벨이 JSX (JS + XML) 문법을 원래의 자바 문법으로 바꿔줘서 인식할 수 있게 된다. 리액트에서는 바뀌는 부분은 state로 등록 해야하는데, 등록할 때는 상태의 초기값을 넣어주면 된다. input에서 onChange에 e...
# 211007 TIL
장기현장실습 띵동 이슈 #373 (푸드테크 등 외부 POS 정보 작성 및 저장 기능 추가) 기존 코드를 보고 수정해보며 해결방안 모색 하고 싶은 것 관리자가 option(푸드테크, 만나플래닛, 기타 등)을 선택하고 ‘조회’ 버튼을 클릭했을 때, option마다 input UI를 다르게 보여주고 싶음 생각한 해결 방안 관리자가 선택한 option을 value: string으로 받아와서 onChange해주면 될 것 같음 (useState set함수(value) 설정) onChange로 인해 변수 값이 저장되어 있을 테고, 조회 버튼을 클릭했을 때 그 변수가 푸드테크라면 이런 UI를 띄워주고, 그 변수가 만나플래닛이면 저런 UI를 띄워주고,,, 하는 로직으로 구성하고자 함 (이런 경우가 2가지 이면 삼항 연산..
# 211006 TIL
장기현장실습 띵동 이슈 등록 및 진행 #373 1. 푸드테크 관련 개선 아이디어 이슈 등록 - 기존 푸드테크 구조 리팩토링에서 파생된 이슈이기 때문에 #347 이슈 링크 걸어둠 2. 외부 POS 정보 설정하는 UI 추가 임의로 푸드테크가 선택되었을 때의 input을 함께 추가함 Option.js에 EXTERNAL_POS_PROGRAM : 푸드테크, 만나플래닛, 기타(추후 생길 수 있는 외부 포스명)을 추가해둠 Select option에서 EXTERNAL_POS_PROGRAM 중 1개를 선택하면 onChange에 해당 값을 저장 저장된 값에 따라 보여줄 input창이 달라야해서 이걸 구현해야하는 상태이고 현재는 로직만 파악 프론트엔드 개발환경 학습하기 프론트엔드 개발환경의 이해와 실습 (8/39) [인프런..
# 211005 TIL
장기현장실습 띵동 (푸드테크) 관련 미팅 order-service-server에서 서버를 작동 npm start 하면 오류가 남 → 인증을 위한 키 값이 필요하기 때문 .aws/credentials 폴더와 파일을 생성하여 키 값 직접 설정 (리눅스 파일 편집, AWS 문서 참고) https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/cli-configure-files.html export AWS_PROFILE=ddingdong 으로 AWS 권한을 주어 문제 해결 (3100 포트에서 실행됨) 이 부분 적용해서 서버 연결되도록 세팅 (완료) 앞으로의 과제 TMS 상점정보에 이 상점이 어떤 외부 포스(푸드테크/만나플래닛 등)를 사용하는지에 대한 정보를 직접 입력할 ..