분류 전체보기 215

TypeScript 환경설정

JavaScript로 작성된 코드를 TypeScript로 변경한다. 예전에는 언어 변경을 '포팅'이라고 많이 불렀다. 자바스크립트에서는 parcel.js라는 번들러로 큰 설정없이 개발이 가능했다. 타입스크립트에서도 parcel.js를 사용이 가능하지만 약간의 추가적인 설정이 필요하다. 1. 이름은 app.js에서 app.js로 타입스크립트 파일이라고 선언해줘야한다. 2. tsconfig.json이라는 설정파일을 만들어줘야 한다. 타입스크립트는 트랜스 파일러다. 그래서 웹에서 동작시킬려면 js로 변환을 해줘야한다. 이 컴파일 과정에서 여러 옵션을 설정할 수 있다. (설정을 하지않으면 기본설정이 적용된다.) { "compilerOptions": { // 기능을 얼마나 엄격하게 적용할것인가. false로 해두..

Front End 2023.07.30

TypeScript 기본적인 문법들

type을 선언해줄때 type newsFeed = { id: number; comments_count: number; title: string; read?: boolean; } 이렇게 read뒤에 ?를 넣어주면 처음에 네트워크에서 데이터를 가져올때 optional하게 가져올 수 있는값이 되어 값이 없다가 나중에 넣을 수 있게된다. type을 선언할때 공통되는 속성을 따른 타입으로 선언해 하나의 타입을 선언할때 합쳐줄 수 있다. type News = { id: number; time_ago: string; title: string; url: string; user: string; content: string; } // 이렇게 공통되는 속성을 선언하고 type NewsFeed = News & { commen..

Front End 2023.07.30

poi(excel 라이브러리), iText(pdf 라이브러리)

엑셀api - poi pdf api - iText 엑셀은 sheet안에 row와 col으로 이루어져있다. 반복문을 사용해야하고 이중for문을 이용해야한다. 1차for문은 row를 핸들링하고 2차 for문은 col을 핸들링 해준다. poi를 통해 excel파일을 읽는 순서. Start Point -> Open Excel File -> Read the First Sheet -> For each Row in Sheet -> For each Cell in Row -> Print Cell Value -> End Point excel에서는 다양한 타입의 데이터가 들어가있는데 가져올때 sheet에서 row안에 cell에 cell.getCellType()을 통해 해당하는 셀타입을 골라내서 case문으로 각각 처리할 수..

Back End/Java 2023.07.27

URLConnection 네트워킹 API

Jsoup은 html만을 가져올 수 있었는데. 다른 리소스 예를들어 html, json, xml, 이미지, 파일(음악, 영상)파일을 내 컴퓨터로 가져올수있다. 네트워크 관련 API를 이용하면 되는데 URLConnection api의 하위의 http에 특화된 HttpURLConnection 클래스를 이용하면 특정 웹서버에서 데이터를 가져올 수 있다. 여기서는 가져오는 절차가 있다. 1 URL 생성 어느 사이트에서 데이터를 가져올지 url을 정해준다. 2 HttpURLConnection 초기화 연결을 할려면 이 클래스를 이용해 초기화를 해야한다. openConnection()을 이용해 HttpURLConnection 객체를 얻는다. 3 Http 메서드 설정 (예: GET) 요청을 하기위해 GET, POST ..

Back End/Java 2023.07.27

Jsoup API를 이용한 웹크롤링

Jsoup은 HTML문서를 웹 크롤링, 웹스크랩핑, 데이터 추출 등을 할 수 있게 도와주는 자바 라이브러리이다. Jsoup.connect(url) 주어진 Url에 연결을 시도한다. Connection 객체를 반환하여 GET, POST 요청을 할 수 있다. document.get() Connection 객체를 사용해 웹 페이지의 내용을 가져오고. Document 객체를 반환한다. Jsoup.parse(html) 주어진 html 문자열을 파싱해 document 객체를 생성한다. document.getElementById(id) 주어진 id에 해당하는 요소를 찾아 element객체로 반환한다. document.select(selector) 주어진 css 선택자와 일치하는 모든 요소를 찾아 elements객체(..

Back End/Java 2023.07.27

기타 API들

Json(JavaScript Object Notation) XML(eXensible Markup Language) 데이터를 표현하고 전송하기 위한 데이터 포맷 최근에는 Json이 더 많이 사용되고 있다. Json는 객체를 구조화된 텍스트형식으로 표현하는거고. 경량식이라 가볍고 가독성이 좋고 다양한 프로그래밍 언어와 호환이된다. { } 중괄호 안에 key와 value의 한 쌍으로 표현이된다. Json에서 배열도 표현이 가능한데 [ ] 대괄호안에 표현을 할수있고 대괄호 안에 { }의 Json데이터를 넣을 수 있다. json.org 사이트를 들어가면 추가적인 정보를 알 수 있다. XML은 데이터를 Tag형식으로 표현하는거다. 내부적으로 트리구조로 관리가된다. // Json형식 { "name":"홍길동", "a..

Back End/Java 2023.07.26

modal안에서 버튼이 두번 눌리는 버그

상황: 결재자를 선택해서 다음 그리드에 넘겨주는 버튼을 누르면 같은 사람이 두번이나 들어감. 해결: 여러 바닥에서 같은모달을 쓰고 그안에 결재하는 2차모달이 있었는데 결재하는 모달이 두개이다보니. include를 통해서 다른 결재modal에있는 button event를 불러와서 두번의 이벤트 액션을 뿌려줬다. 그래서 include된 모달들의 id나 name이 겹쳐서 이벤트가 두번이나 call됐던거였다. id랑 name의 이름을 각각 다르게 설정