모-코드

I. 들어가며 지난 11월 29일부터 106개(비공개글 포함)의 TIL 을 쓴 TIL 1기를 마무리한다. 106개의 글은 뉴*처 선생님의 국비교육과정에서 해주신 강의를 기억하고자는 취지로 기록했다. 나의경우 교육과정을 마치기 전 취업했고, 과정 수료 후 몇일 뒤부터 출근했다. 출근한지 오늘부로 딱 2주가 되었다. 과정을 마무리하며 무엇을 느끼고, 취업을 해서 개발자로서 첫발을 내딛는데 내 마음가짐에 대해서 가볍게 남긴다. II. 국비교육과정의 시작과 끝 1. 시작 : 시작은 2022년 11월 23일이었다 1) 시험 불합격 발표와 포기 2019년 ~ 2022년 동안 공인노무사 시험 수험생이었다.(헌유예 불합격) 전문직 라이센스를 얻고싶었던 나는 20대 후반을 모두 받쳤지만 결국에 불합격의 고배를 마셨다. ..

I. Vue.js인증권한 1. pinia (1) 필요성 1) store에 있는 전역객체는 말그대로 전역적으로 있지만 리액티브한것을 쓰기 위해서 피니아를 쓴다. 2) 피이나 설치는 - npm install pinia 를 한다. (2) 파일세팅 1) 파일명변경 폴더명을 stores 로 바꾸고 useUserDtailsStore.js 만들기 2)useUserDtailsStore.js import { defineStore } from "pinia"; export default useUserDetailsStore = defineStore("userDetails",{ }); 3) import { createApp } from 'vue' import { createRouter, createWebHashHistory }..

I. 로그인 구현하기 1. 프론트 (1) loginHandler 1) loginHandler 또는 구글로 로그인 회원가입 | 비밀번호 찾기 2way binding을 하는 v-model 을 했다 그리고 클릭이벤트 관련 핸들링을 세팅했다. 2) fetch API async function loginHandler() { console.log(userDtails.username); let response = await fetch("http://localhost:8080/members/login", { method : "POST", headers : { "Accept" : "application/json", "content-type":"application/x-www-form-urlencoded" }, body:..

I. 들어가며 1) signle sign on -> 한번의 로그인으로 한번에,,, 한때 유행했어 그런데 보안문제 때문에 안쓰게 됨 지금은 open Authentication II. Rland로 인증권한 구현하기 1. front단 (Vue) (1) Rland로 Vue 기본세팅 1) composiotnAPI - Vue 기본루틴 App.vue() [main.js의 객체생성] -> index.html [main.js의 엘리먼트에 마운트] -> main.js [세팅] -> Layout.vue[지도] -> Index.vue[목적지] ( + Footer + Aside + Header) 2) 소스코드 vue 관련 객체를 생성한다. 엘리먼트를 세팅한다 이 경우 vue 가 들어갈 부분을 지정한다. import { cr..

I. 들어가며 이전에 매퍼로 하는게 있긴한데 불편해 package kr.co.rland.rlandapiboot3.controller; import java.util.HashMap; import java.util.Map; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController..

I. 스타일 파일구조 관련 1) css 는 public? asstet? public 은 변환기를 가치지 않는 영역이야 CSS 가 그대로 간다는거야 assat에 있는 css는 변환기를 거쳐 안좋을수도 있는데, 장점이 있어 minify / minified 은 배포용으로 화이트스페이스가 없는 한줄짜리임 개발버전과 배보버전 다름 2) 페이지는 하나인데, 컴포넌트가 있을 떄 어떡해야? 헤더푸터는 루트 레이아웃 나머지는 멤버에 들어가는 레이아웃 다른것은 어드민에 들어가는 레이아웃 vue에다가 넣을 수 있지만, 공통화 하기가 어려움 II. Vue.js 1. 들어가며 (1) 1) 어제 newlist 에다가 props 로 값을 전달할 수 있다. 2. 모달 띄어보기 (1) Modal.vue 파일 만들기와 slot 1) 파..

I. 들어가며 1) 어제 컴포지션API 썻고, computed 속성을 썻어 기존에 바인딩 되어있는데 data 중에서 내가 원하는 것을 타겟팅해서 동기화된 속성을 만들 때 우리는 computed 를 썻어 이것은 함수를 기반으로 해! 계산식이 달라진다는것이 정말로 달라지는지 보아야해 항목에다가 삭제버튼 추가할거야 눌렀을 떄 항목이 삭제될거고 vuw스럽게 MVC방법론으로 자연스럽게 하는것을 보자 II. Vue.js 1. 삭제하기 (1) 들어가며 1) input type 에서 button 등의 차이? 태그는 이미지를 버튼처럼 쓰기위해서 안에다가 이미지를 넣을 수 있어 꼭지금은 아냐, 버튼이 input 인 필요없이, js 기반이기 때문에 엘리먼트가 큰 의미를 가지지않는 이상한 세계야 어떤사람은 버튼을 span 누..

I. 수업 방향관련 수업방향성 관련 Vue -> 옵션즈 api 와 컴포지션 api 두가지가 있어 Exception Dao -> 를 mybatis 를 쓰는데, 대비되는것이 JPA야! Security -> BackendSecurity VS FrontedSecurity(on Vue) Dom -> Component (에디터 / 탐색기/ 드랍박스 / 모달 / ...) 등을 우리가 한다 이 중에서 일단 Vue.js -> compositionAPI 를 이용해서 한다. II. Composition API 대두 1. Composition API vs Options API (1) 들어가며 1) 탄생배경 Single file component(SFC) 나오면서 대두한것이 컴포지션이야 그래서 배타적인것은 옵션즈 API야! ..

I. dom 1. 파일업로드하기 (1) 서버로 파일 전송하기 1) 들어가며 AXIOS -> library 같은 파일전송을 위한 라이브러리도 있다. 2) js 파일업로드 구현 dropzone.ondrop = function(e){ e.preventDefault(); // console.log(e.dataTransfer.types); if(e.dataTransfer.files.length > 1) console.log("둘 이상의 파일 업로드 불가"); let file = e.dataTransfer.files[0]; let formData = new FormData(); // formData.append("username", "newlec"); //로그인 정보 // formData.append(file, ..

I. DOM 1. 이벤트 (1) 이벤트 객체 클릭했을 때 태그 찾기 1) 클릭했을 때 색 바꾸기 1 2 3 4 .s2 ul{ padding: 0; list-style-type: none; display: flex; } .s2 span{ display: inline-flex; width:100px; height: 100px; align-items: center; justify-content: center; color: white; font-weight: bold; background-color: blue; /* transition: .5s; */ } .s2 li.selected .box, .s2 li.selected span { /* 애니메이션 넣기 */ animation-name : selectedani..