엠마의 개발공부일지

스프링 - 리액트 프로젝트에서 웹으로 push알림 보내기 FCM이란? - Firebase Cloud Messaging(알림push요청을 fcm서버로보내면, 해당 토큰을 가진 유저에게 알림발송) - 실시간 알림을 받을 수 있기때문에, 웹사이트에서 활용하기 좋음 - 웹 이외에도 IOS, Android에서도 사용가능(사용방법이 각각 조금씩 다름) FCM을 사용하는 이유? - 비슷한기술로 SSE를 많이 사용하지만, SSE는 단방향통신만 가능하고 FCM은 양방향가능! 추후 확장가능성을 생각할때 - 양방향 기술로 써보고 싶었음. 전체흐름 - FCM은 여러 언어로 구현할 수 있지만, 이 포스팅은 프론트-TS, 백엔드-Springboot기준으로 작성 FE 1. FCM사이트에서 프로젝트를 생성하고, 토큰을 요청한다 2...

float - 이미지 / 텍스트를 배치 정렬방식 가로, 세로방향 중심축 설정 flex-direction : row, column, row-reverse 컨텐츠가 가로범위를 넘어가면, 다음줄로 wrapping하는것 flex-wrap : nowrap, wrap-reverse 이 둘을 합친거 👉 flex-flow : row nowrap; 아이템 배치 배치를 가운데, 오른,왼쪽으로 하는것(중심축배치) justify-content : flex-start, center, space-around, space-between 중심축이아닌곳의 배치 align-items : center , baseline(텍스트에맞춰 정렬) justify-content의 중심축아닌축의 간격 및 위치 align-content : center..

* 크리스탈레포트란? : 레포트 툴(report tool) : 회사 전산 등에서 출력이 필요한 경우, 필요한정보를 모아 레포트화 해주는 툴 자세한내용은 아래링크 참고 https://www.softwarecatalog.co.kr/isrc/mp/2006/07/cr/html/about1_.htm Crystal Reports란? 1. Crystal Reports? 통합 커스텀 디자인 레포트를 데이타 베이스 응용프로그램에 추가하여 웹을 통해 리얼타임으로 생성 해주는 웹 레포팅 툴입니다 . Crystal Reports는 거의 모든 데이터를 강력한 동 www.softwarecatalog.co.kr * 하고자 하는것 : 크리스탈레포트에 도장이나 사인 등 이미지의 누끼(배경제거)를 따서 넣고싶다. * 문제 1. 배경을 ..

DOM(Document Object Model) : HTML문서를 객체로 표현한것 : 브라우저가 HTML문서를 읽고, 해석할 때 DOM객체가 만들어 진다 JS로 HTML태그 제어하기 요소 노드 생성 : const li = document.createElement("li"); 생성된 노드에 내용추가 : li.textContent = '글자추가'; 요소 노드 추가 : head.prepend(li); -(queryselector사용한 변수) ✔.prepend : 맨 앞에추가 ✔.append : 맨 뒤에추가 ✔.before : 앞에 추가 ✔.after : 뒤에추가 HTML 속성 제어 📌HTML의 각 tag들은 요소노드의 프로퍼티가 됨 ⭐예외 : HTML표준이 아닌속성(ex-href) .getAttribute :..

🔰노드 시작하기🔰 익스프레스 앱 애플리케이션 프레임워크 -앱 : 현재 장치 자체에서 동작하는것 -웹 페이지 : 네트워크를 통해 장치에 전달되는 것 터미널 사용하기 📌파워셸 사용법 익히기 => 디렉터리 이동방법, 파일복사.이동.지우는방법, 명령줄 프로그램에서 빠져나오는방법 npm : 노드 패키지 관리자 : 패키지를 설치하고 의존성을 관리함 -g : 패키지를 전역으로 설치(시스템 전체에서 쓸 수 있음) 노드로 만드는 단순한 웹 서버 웹서버 : 단순히 파일을 컴퓨터-> 브라우저로 전송 노스 = 지금만드는 앱이 곧 웹서버이다 이벤트기반 프로그래밍 = 프로그래머가 어떤 이벤트를 사용할수잇는지, 거기에 어떻게 응답해야하는지 알아야함 (사용자가 클릭하면, 그 클릭에 대한 이벤트는 프로그래머가 처리) => 직관적이다 ..

오브젝트 빌트인 : 사전에 만들어 놓음 (Number, String) 네이티브 : 빌트인도 포함. JS스펙에서 정의. 호스트 : 나머지 오브젝트. (window, DOM_querySelector) => JS 오브젝트처럼 사용 📌host object를 익혀야 함(브라우저의 모든 요소기술을 연결하고 제어함) 오브젝트 vs 인스턴스 오브젝트 : new연산자 사용x (let obj = {};) 빌트인 Object 프로퍼티 new Object() : 괄호 안의 타입에따라 인스턴스 생성 Object : object인스턴스생성 valueOf : 프리미티브값 반환 {} : 오브젝트리터럴 / let abc={};(오브젝트 인스턴스 만들기) 빌트인Object구조 오브젝트.prototype : prototype이 있으면 인..

프로미스 비동기간편하게 오브젝트, 장시간 플젝 수행후 성공하면 그 결과값을, 아니면 에러를 전달. (수강신청하면 공지 받을 수 있음) 콜백쓰지않고 비동기코드를 깔끔하게해주는 오브젝트(클래스) => 상태(state) : pending(처리중인상태) - 성공(fulfilled) /실패(rejected) => producer / consumer 각 견해 이해 1. Producer :프로미스가 만들어질때, 자동으로 실행됨. '//'사용시 뒤의코드가 정리된다 2번에서 1번의 결과가 잘 동작되면 then에 들어오고, resolve의 값을 파라미터로 갖고온다. .then의 프로미스는 프로미스를 리턴하므로, 그 프로미스의 .catch를 소환하는개념! "chaining" => 그렇기때문의 각 메서드가 어떤것을 리턴하는지..

게시판에서 댓글처리하기 1. 댓글등록 버튼에 onclick이벤트로 처리, 함수를 연결해준다. (함수에 파라미터를 이용하여 ajax에서 활용할 값을 전달해 줘도된다.) 2. 전달할 값의 id값으로 해당 값을 가져온다. 3. 넘어온 값의 타입을 확인한다.(typeof메서드&3항연산자를 활용하여 간결하게!) => ajax로 넘어온값은 int도 String으로 바뀌는듯..하다! 그래서 숫자를 쓸거면 "parseInt"로 형변환 해준다 => bindData : db에 넣을 값을 toString(문자처리)해주었다(db에 해당 컬럼을 int로 설정해 놓았기 때문) => 값이 안적혀있다면 "작성자를 입력해주세요" 전달(return사용하여 바로 끝내기) => 적혀있다면 4단계로 이동 4. response할때 data기입..