# TIW
WIL
Week I Learend 이번 주에 레벨 4를 시작했다. 원래 화요일에 레벨 4 시작인데 이번엔 특이하게 레벨을 시작하면서 지난 레벨의 레벨 말하기를 했다. 그래서 수요일은 재택을 했고, 정식적으로는 목요일부터 시작했다. 이틀밖에 안됐지만 그동안 배운 것들을 기록하고자 한다. 아키텍쳐, 디렉터리 구조 백엔드끼리 정한 과업?은 아래와 같다. 정하게 된 스토리는 대충 이렇다. 현재 패키지 구조를 아래 사진처럼 도메인형으로 가져갔다. 하지만, 음식점을 조회하는 Query성 Servic
자바스크립트(JavaScript) LV.1
자바스크립트(JavaScript) 1. 자바스크립트란 HTML을 조작하기 위해서 사용한다. 영어를 알면 이해가 쉽다. > 주석 : // 2. 구성 단계 > - HTML / CSS로 미리 디자인한다. > > - 조건을 넣어 필요할 때만 보이도록 조정한다. > 3. 함수(Function) > - 자바스크립트는 함수 작명시 camelCase 방식으로 짓는다. (openAlert) > - 조작할 HTML의 하단에 script 코드를 짜야한다. > - 셀렉터 오타를 주의한다. (개발자 도구에서 디버깅) > - 기본 문법 오타를 주의한다. (대소문자) 4. 함수의 파라미터 5. 이벤트 리스너 > - 클래스 명으로 찾을 수도 있다. > > - ex) document.getElementsByClassName('클래스명')[인덱스
MARKDOWN
Markdown 마크다운은? 일반 테스트 기반의 경량 마크업 언어다. > 마크업(markup)은 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 장점 문법이 간결하다. 문서, 웹 사이트, 메모 등 다양하게 사용할 수 있다. 벨로그 및 깃허브 등의 플래폼에서 지원한다. 다양한 환경에서 편집 및 작성이 가능하다. 텍스트로 저장되어 용량이 작아 보관이 쉽다. 단점 표준이 없어 사용자 및 도구에 따라 형태가 상이하다. 태그를 이용하지만, 모든 HTML 마크업을 대체하지 못한다. 문법 1. 개행(New line) 줄 바꿈 : 공백 2칸 단락 바꿈 : 엔터 2번 or `` 2. 제목(Header) #을 1 ~6개로 사용한다. (크기 1 > 2 > 3 > 4 > 5 > 6) 제목1 제목2
TIW_220822
🦝 2022-08-22 (월) 오늘 한 것 Node.js + Express로 임시 서버 생성 및 리액트 연결 AWS EC2 인스턴스 생성 및 서버에 NGINX를 통한 배포 (진행중) 오늘 배운 것 nginx와 express는 무엇이고 왜 쓰는지? nginx 동시 접속 처리에 특화된 웹서버로 클라이언트로부터 http 요청을 받아 요청에 해당하는 파일을 http 통신을 통해 응답해주는 프로그램 웹서버 특성상, WAS와는 다르게 정적 컨텐츠 호스팅에 특화되어있고 이 밖에 리버스 프록시, 캐싱, 로드 밸런싱, 미디어스트리밍 등 유용한 여러 역할을 수행한다. 가벼움과 높은 성능 지향 리버스 프록시 서버 내부 애플리케이션과 외부 클라이언트 사이에 자리 잡아 클라이언트 요청을 적절한 서버로 보내주는 역할 Node.js나 tomcat 같은 많은 어플리케이션들은 스스로 서버와 같은 역할을 하지만 Nginx에서
TIW_220811
🦝 2022-08-11 (목) 오늘 한 것 차트 css 수정 및 부제목 추가 card collapse하는 설정 버튼 css 수정 및 아이콘 hover시 nametag 띄워주는 tooltip 추가 최초 렌더링시 화면을 가득 채우기 위한 차트 필터 초기값 설정 오늘 배운 것 initializeState - Recoil에서 state initialization 하기 MutableSnapshot을 통해 상태를 초기화하기 위한 선택적인 initializeState prop을 취한다. 이는 모든 atom을 미리 알고 있고, 상태가 동기적으로 설정되어야하는 서버사이드렌더링과 호환되는 경우 지속되는 상태를 로딩하는데에 유용할 수 있다. 나는 비동기 처리를 위해 react-query를 사용하였기에 queryClient.fetchQuery로 데이터를 불러와 set함수를 통해 초기값을 설정하였다. queryClie
TIW_220810
🦝 2022-08-10 (수) 오늘 한 것 대시보드 header에 card 컴포넌트들 collapse 효과 여부의 전역 상태를 관리하는 버튼 구현 차트 컴포넌트 필터 목록 역순으로 수정 Bootstrap card css를 미리 만들어두었지만... 부장님과 상의 끝에 다른 쪽으로 방향을 바꾸는 것이 낫겠다 싶어 수정 또 수정..! 바 레이스 차트 필터 버튼 클릭시 드롭다운 안되는 에러 해결 -> Card 레이아웃 컴포넌트가 차트 컴포넌트 내에 포함되는 구조였고 차트 필터 변경시 컴포넌트가 리렌더링 되면서 Card 컴포넌트도 리렌더링되어 bootstrap으로 제작된 버튼 기능 오류 발생 -> 아예 대시보드 페이지에서 레이아웃 컴포넌트 + 차트 컴포넌트 이런 식으로 사용하는 것이 나은지 고민이다... 오늘 배운 것 리액트 라이브러리 사용시 label 태그에서 for -> htmlFor 속성 사용 > Type '{ children: str
TIW_220809
🦝 2022-08-09 (화) 오늘 한 것 Bootstrap card css 생성 및 레이아웃 적용 card header에 차트 드래그 앤 드랍 및 삭제 버튼 디자인 적용 및 기능 구현 차트 드래그시 놓여질 위치 css 적용 (className=draggable-source--is-dragging) 오늘 배운 것 TypeScript에 string key로 객체에 접근하는 방법 TypeScript에서는 기본적으로 객체의 프로퍼티를 읽을 때, string타입의 key 사용을 허용하지 않기에 아래처럼 코드를 작성하면 컴파일 에러를 만나게 된다. 따라서 객체에 index signature를 추가하여 해결한다. 참고 자료(Reference) [TypeScript에서 string key로 객체에 접근하기](https://soopdop.github.io/2020/12/01/index-signatures-in-typ
TIW_220808
🦝 2022-08-08 (월) 오늘 한 것 포틀릿을 통한 차트 이동 구현 gh-pages 배포시 cors 문제 해결 (야매로 한 거라 다시 봐야할 듯 싶다) Bootstrap Card 레이아웃 생성 및 Card header에 있는 특정 아이콘 클릭시에만 차트 드래그 앤 드랍 구현 오늘 배운 것 @shopify/draggable Draggable 속성 handle - 특정 버튼 클릭시에만 drag & drop 가능하게 구현 plugins: [Plugins.SortAnimation] - drag & drop 시 부드러운 애니메이션 및 주변 컴포넌트 상하좌우 움직이게 적용 echarts 공백 제거 방법 grid - 속성으로 원하는 만큼의 공백을 제거한다. 에러 해결 react 프로젝트 gh-pages에 배포시 cors 문제 해결 개발 단계에서는 http-proxy-middlewar
TIW_220801
🦝 2022-08-01 (월) 오늘 한 것 에러 해결 터미널에서 Git id, password로 로그인 안되는 현상 해결 2021.08월 이후 id/pw 방식이 아닌 token을 이용해 로그인하기에 발생하는 문제로 아래의 방법으로 해결 해결 방법 깃헙 접속해 로그인 Settings > Developer setting > Personal access tokens에서 새 토큰 생성 Note란에는 원하는 사용처 입력 후 expiration에서 사용 기간 선택 후 scope에서 repo 선택 token 선택되면 꼭 다른 곳에 복사 !!!! (한번 보고 보여지지 않음) 로컬 컴퓨터의 깃에 등록 global로 등록하지 않고 git pull 사용할 때 다시 id/pw 입력하라 하면 본인 깃헙 아이디, 복사한 토큰을 패스워드로 전달하면 된다. git clone 후 npm i 시 생기는 에러 (ER
TIW_220729
🦝 2022-07-29 (금) 오늘 한 것 채팅 api 연동 및 데이터 차트 컴포넌트에 뿌려주는 작업 드디어 끝!! 피드백 받으면서 api에 대해 모호했던 것들을 확실히 이해할 수 있었다. 오늘 배운 것 Date.toISOString() 자바스크립트 Date 객체를 ISOString(yyyy-mm-ddThh:mm:ss)형식의 문자열로 반환하는 방법 사용하는 api에는 time 데이터가 해당 형식으로 이뤄져 있는데 이상하게 현재 시간으로 조회해도 이전의 시간으로 변형되어 왜 그런건지 이해를 못해 개발을 하는데 좀 헤맸었다. 이유는 우리나라 Time Zone이 아니라 UTC타임존(zero offset)을 사용하기 때문이다. UTC를 기준으로 Date 객체를 가공하고 싶다면 setHours()가 아닌 setUTCHours()를 사용해야 한다.
TIW_220728
🦝 2022-07-28 (목) 오늘 한 것 차트 컴포넌트 2개와 백엔드 채팅 api 연동을 통한 데이터 화면에 뿌리는 작업을 진행했다. 사용할 api가 한정적이었고 사용할 차트에 어떤 데이터를 어떻게 보여주는 것이 좋을지 고민하는 시간이 많았던 것 같다. 오늘 배운 것 VSCode의 gitLens라는 extension을 사용해봤는데 코드마다 히스토리가 남겨져서 굉장히 편리했었다. 한 컴포넌트 내에서 여러 api를 호출해야 했어서 react-query의 useQueries 메소드 사용을 했다. 타입스크립트로 작성을 했기에 리턴타입에 있어서 에러가 있었고 관련 설정 파일을 별도로 작성해야 했다. 이 부분은 따로 글을 작성할 예정이다. useEffect + setInterval 사용시 setInterval에서 시간 보장 문제로 인해 useInterval이라는 커스텀 훅을 배웠다. 몰랐던 부분도 많아서 이것도 별도로 글을 작성할 예
TIW_220726
🦝 2022-07-26 (화) 오늘 한 것 사용중인 Metronic template 폴더 구조와 동일하게 변경 CRA 기반 프로젝트 proxy 설정 및 회사 api 연동해서 라인차트에 데이터 렌더링 에러 해결 proxy 설정 후 url 변경되지 않는 문제 proxy 설정을 했음에도 불구하고 프로젝트를 실행하면 반영되지 않았다. 구글링으로 해결방법을 찾았으며 방법은 간단했지만 해결 후 bootstrap 관련 문제로 좀 골치아팠다. 결론적으로 무작정 폴더를 날리는 건 썩 좋은 방법이 아닌 것 같다... 관련 링크 해결 방법 proxy 설정 후 bootstrap 문제 위 방법으로 proxy 인식 안되는 문제 해결 후 프로젝트를
업무일지 : 강의 & 과제 기능 구현
업무의 시작 학습팀으로부터의 Request... 강의를 듣는 학생들에게 과제를 낼 수 있는, 그것을 매니징 팀에서 확인할 수 있는 시스템을 만들어달라는... DB 구조 짜기... 뇌가 안돌아가서 짜는데 애먹었다. 대충 이런 식으로 Lecture라는 새로운 collection의 기본 document 형식을 만들어 보았다. 잘 짜지 못하는 것 같지만, 굳이 해석을 해보자면 > lecture ID : 강의이름\강의매니저\시작날짜 lastrevise : 최신 수정일 students : 학생별 진행중과제/완료된과제를 저장하는 object studentList : students의 keys로 대체해도 되네...? 이런 망할... assignments: 과제ID별 과제내용과 과제기한을 기록하는 obejct assignKey : 과제가 생겨날 때마다 증가하는 (Auto였으면 하는) Increment Key. 굳이 students에게 과제자체가 아니라 과제ID를 부여한 이유 :
TIW - 220622
Today I Worked 학습팀 요청 사항 - TR 수정 부제 : 교재명 통일 및 총교재랑의 효율적인 기재 및 관리를 위한 제안서 Requirements *MongoDB Atlas new collection (교재) new collection or document (학습팀계정) *Node.js CRUD for 교재 Password check for 학습팀 계정 *React New : 교재 CRUD 페이지 표 형태의 교재 추가/수정/삭제 컴포넌트 학습팀의 고유 비밀번호 요구 및 입력 Modal 과목순 정렬, 교재순 정렬 기능 저장 시 수정일도 함께 저장됨 Revise : StudentEdit 페이지 
[후기] 1차 프로젝트 1주차 후기
월요일은 가~끔 좋습니다. 기능 구현 구매시 옵션 선택 탭 클릭시 페이지 내 이동 1. 구매시 옵션 선택 클론하는 홈페이지에서 상품 무게별로 가격을 다르게 설정해 주었기 때문에 옵션 선택시 수량 추가 탭이 추가되면서 총 제품 금액이 계산되도록 구현하였다. 데이터를 받아와서 계산해 주기만 하면 되었기 때문에 사실상 크게 어려운 작업은 아니었다(라고 생각했다). But, 예상치 못한 곳에서 막히는 일이 여러 번 있었는데 가장 크게 애먹었던 것은 select - option에서 onclick 이벤트가 먹히지 않는다는 것이었다. 애초에 onclick 이벤트를 지원하지 않기에 가능하지 않은 기능을_ "어찌하여 되지 않는가.."_ 를 외치면서 붙잡고 있
TIW 1월 30일 - todolist 3 ( delete api, preflight request )
todolist 3 List.jsx props로 {id, value, add_time}을 받는 List Component를 만들었다. XButton.jsx ( delete api 요청 ) props로 받는 id는 DB의 id(또한 PRIMARY KEY)이기도 하다. 그래서 id를 이용해서 delete 요청을 날린다. 지금은 아이템을 추가하는 기능은 없는데 아이템을 추가할때 id를 uuid 등으로 생성하고, XButton의 id prop으로도 넘겨줘서 쿼리요청에 사용해야겠다. server/todo.js ( preflight request, request 처리 ) preflight request를 cors 모듈을 쓰지 않고 처리해봤다. 작동모습 
TIW 1월 29일 - todolist 2 ( db 연동, cors, mysql )
todolist 2 Todo.js ( db 연동 ) 컴포넌트를 렌더링한 후(useEffect) 구축해둔 nodejs-express 서버로 api 요청을 보내도록 했다. 리스트의 key값으로 전역 변수로 0부터 차례로 숫자가 증가하게 했다가 마음에 들지 않아 uuid를 사용했다. cors, mysql cors react 서버는 localhost:3000 nodejs-express 서버는 localhost:3001 에서 실행중이다. port가 다르기 때문에 Same-origin policy를 위배한다. 따라서 Cross-Origin Resource Sharing을 해주기 위한 조치를 취해줘야 했다. request 중 simple request에 해당하는 상황이기 때문에 nodejs-express 서버측에서만 조치를 취해주면 됐다. Same-origin policy 위반 상황 예시 > 
TIW 1월 27일 - todolist
todolist 폴더 구조 App.js Todo.js List.js 생각 TIW을 하다보면 긴 코드도 생길텐데 github에 코드를 올리고 링크랑 내용을 올리는게 낫지 않을까 싶음 간단한 todolist를 만들어보려고 하는중. 크롱마스터님의 react hooks 이해하기 강의를 들었던 것이 생각나서 비슷하게 짜보려고 하고 있다. 오랜만에 react 코드를 작성하려고 하니까 낯선 것들이 있어서 TIW하길 잘했다는 생각이 들었다. ncloud에 docker-nodejs 서버를 올리고 db에서 list를 가져오고 업데이트하는 api를 제공하도록할 예정.. 인데 docker-nodejs 올리는 과정이 또 헷갈리고 시간이 걸릴 듯 하다.
TIW 1월 26일 - docker-mysql (한글, 패스워드, docker-compose secret 이용 등) 스크립트 작성
docker-mysql mysql 한글 적용 설정 초기 database 생성 스크립트화 유저 생성 및 docker-compose의 secret 기능을 이용해 mysql root, 생성한 유저 암호 보안유지하면서 설정 volume 설정으로 docker-mysql container를 새로 실행하더라도 데이터가 유지되도록함 폴더 구조 codes > mysql.Dockerfile /etc/mysql/conf.d/ 에 .cnf 설정 파일을 넣어주면 해당 내용을 바탕으로 mysql 설정이 초기화 된다. .cnf 파일의 이름이 상관없었던 것 같지만 체크해봐야 할 것 같다. 역시 docker-entrypoint-initdb.d 디렉토리에 원하는 .sql 파일을 넣어주면 초기 실행시 sql파일이 실행된다. > initdb.sql local_bookstore는 개인적인 프로젝트 db 이름이다. 원하는 이름으로 지정