개발자 최솔이

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. [vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue ul 요소는 항목의 목록을 나타내며, 항목의 순서가 중요하지 않습니다. 즉, 순서를 변경하면 문서의 의미가 크게 변경되지 않습니다. [vue/no-super-root] 템플릿 루트에는 정확히 하나의 요소가 필요합니..

온라인에서 다운로드받은 nuxt 프로젝트에서 오류가 발생했다. npm install > npm run dev 실행했더니 Vue Package version mismatch : 라는 오류가 발생. Vue packages version mismatch: - vue@2.6.14 - vue-server-renderer@2.6.12 package.json 파일에서 vue와 vue-server-renderer 의 버전이 명시되어있지 않아서 자동으로 최신 버전으로 업뎃을 했고, 그 결과 vue 와 vue-server-renderer의 버전이 일치하지 않는다는 내용. package.json 파일에 다음을 추가해준다. "vue": "^2.6.12", "vue-server-renderer": "^2.6.12", packa..

vs code 에서 별다른 설정을 만지지 않았음에도 불구하고 내가 원했던 대로 개행이 되지 않았다. 또한 자꾸 스크립트 부분에 작은 따옴표를 사용한다고 설정 해두었는데 저장할때마다 큰 따옴표로 변경되어 불편함을 느꼈다. 검색해보니 설정이 바뀌어있었다. vscode 의 단축키 ctrl + shift + p 로 메뉴 검색을 열어서 Open Settings (JSON) 을 열어준다. ctrl + f로 formatter 라고 검색해보면 "editor.defaultFormatter": "esbenp.prettier-vscode", 이렇게 eslint 가 아닌 prettier 로 설정되어 있음을 알 수 있다. 그 부분을 아래와 같이 eslint 로 변경해주면, 성공적으로 원하던 부분에서 개행이 된다. "editor..

https://ridibooks.com/books/852000731?_s=search&_q=%ED%81%B4%EB%A6%B0%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4&_rdt_sid=search&_rdt_idx=0 클린 소프트웨어 소프트웨어 개발을 위한 사려 깊은 조언으로 가득한 책!『클린 코드』를 비롯한 베스트셀러 저자이자 소프트웨어 개발 전문가로 저명한 로버트 C. 마틴은 이 책을 통해 소프트웨어 개발자, 프로 ridibooks.com 클린 시리즈의 책을 알게 된 것은 ‘클린 코드’라는 책이 먼저였다. 개발자의 필독서라나? 그러다가 우연한 계기로 클린 소프트웨어라는 책도 있다는걸 알게 되었고, 최근 구매하여 보기 시작했다. 먼저, 읽고 싶었던 클린 코드도 읽기가..

Entity Framework core 데이터 연동방식을 두가지로 제공한다. 1. Code-First 방식: 코드 작성 우선주의 마이그레이션 : 미리 작성된 코드로 데이터베이스에 테이블과 컬럼을 생성하는 방식 2. Database-First 방식: 데이터베이서 작업 우선주의 모든 테이블과 컬럼을 데이터베이스에서 테이블과 컬럼을 우선 생성한다. Entity Data Modeling : 코드를 손쉽게 작성할 수 있도록 도와준다. 먼저 Code-First 방식으로 진행해보기로 한다. Code First 방식 이전 게시글에서 작성한 프로젝트를 열어서 그중 DataModels/User.cs 파일을 열고, DataAnnotations 를 추가하고 , 어노테이션을 작성한다. [Key, StringLength(50),..

네트워크 관리사 2급 실기 문제 유형 및 배점은 다음과 같다. 1번. 케이블링 1문제 * 6.5점 2~9번. 에뮬레이터를 이용한 윈도우 설정 문제 8문제 * 5.5점 10~11번. 리눅스 2문제 * 5.5점 12~15번. 단답형 네트워크 문제 4문제 * 5.5점 1~3번. 라우터 문제 ( 현재 페이지 ! ) 3문제 * 5.5점 라우터 문제를 정리한 기념으로 포스팅을 한다. 15번 이후에 새로 1,2,3번 문제로 진행되므로 시험 순서상으로는 마지막에 해당된다! 정리 순서는 다음과 같다. interface 문제 show (확인) 문제 line 문제 그 외 (ip, hostname) 1. interface 문제 @ serial 2/0에 frame-relay방식으로 캡슐화 > en > conf t > inter..

최솔이의 작성 요령 개념 개념 ? 명령어 $ npm ... 주석 // 플러그인, 팁 * 주제별로 언급 @ 2021-12-07 VUE CLI / VUE 파일의 구성 요소 3가지 CLI ? Command-Line Interface 를 의미한다. 터미널을 통해 프로젝트를 손쉽게 시작할 수 있도록 도와준다. $ npm install -g @vue/cli // npm 이라는 명령어를 통해 vue cli를 전역(-g)에 설치해준다 * vue cli 공식 사이트 https://cli.vuejs.org/ $ vue create hello-world // 간단하게 프로젝트를 생성 할 수 있다. 강의 내에서 간단한 프로젝트 생성은 건너 뛰고 lint ? 코드 작성의 규칙을 정함 eslint , rules 도 마찬가지 pu..

닷넷 코어는 패턴 프로그래밍에 최적화 되어있다. 패턴 ? 사용자에게 보다 나은 서비스를 제공 프로그램 개발 ? 테스트와 유지보수가 쉬워야 한다. 애플리케이션의 존재 목적 ? 사용자를 만족시키는것 닷넷코어는 아래 2가지를 사용한다 MVC 패턴 (Model-View-Controller) 의존성 주입 패턴 (Dependency Injection) 2021-12-07 MVC 패턴(Model-View-Controller) MVC 프로젝트 생성 C - MembershipController 컨트롤러 폴더에 추가 public IActionResult Login(LoginInfo login) {} 생성 내용에는 if문 내부에서 ModelState.IsValid 를 확인 if문으로 ID, PW가 일치하는지 확인하고 일치하..

나는 해리포터 두 번째 시리즈인 비밀의 방이 출간될 때부터 전시리즈를 출간일에 구매해온 해리포터 덕후다. 매해 출간 전부터 용돈을 모았고, 용돈이 부족할땐 작디작은 학교 앞 서점에서 카운터에 계신 사장님의 눈치를 봐가며 읽곤 했다. 놀이동산에 관심도 없었지만 오사카 살면서 유니버셜 스튜디오 재팬을 가고 싶은 이유가 있었다면 해리포터 단 하나만이 목적이라고 해도 과언이 아닐정도.. 대학 다닐 땐 전권을 가져가서 방학 땐 하루에도 몇 시간씩 침대에 누워 다시 읽곤 했다. 그리고 요 몇 년간 ebook만 읽게 되면서 ebook으로도 전권 소장 중이다...ㅋㅋ 서론은 이만하고... 작년부터 출간되기 시작한 해리포터 미나리마 에디션 구매 후기를 작성해보고자 한다. 비밀의방 미나리마 에디션 출간일이 10월 26일이..

기존 구린 방법 1. 하위 컴포넌트 변경하기 (A의 버튼을 눌러서 B, C, D를 거쳐 E에 있는 값을 변경) 2. 상위 컴포넌트 변경하기 (E의 버튼을 눌러 역으로 D,C,B 를 거쳐 A에 있는 값을 변경) 각 함수들에 props를 인자로 받아서, B,C,D,E로 넘겨주어야 했다. 이문제를 해결하기 위해 useContext를 사용하기로 했다. 1. 하위 컴포넌트 전체에 데이터를 공유하는 방법 데이터를 set 하는 놈 = 가장 상위 컴포넌트 => provider 데이터를 get 하는 놈 = 모든 하위 컴포넌트에서 접근 가능 1) consumer import PersonContext from "../contexts/PersonContext"; export default function Example1() ..

지난 11월 14일 일요일 한국정보통신자격협회 주최의 네트워크 관리사 2급 필기 시험을 응시했다 시험 장소는 8일 월요일이 되어서야 발표가 났고, 다행히(?) 서울의 중심지역인 선린 인터넷 고등학교였다. 어떤 후기에서 보니 건대였다고 해서 조금 걱정했는데 안심이었다. 시험 과목 네트워크관리사 2급 필기 시험은 아래 네 과목으로 구성되어있다. 1. 네트워크 관리 일반 2. TCP/IP 3. NOS 4. 네트워크 운용기기 공부 기간 & 공부 방법 이전 SQLD 합격 수기에서도 작성했지만.. 나는 이론서를 굉장히 좋아한다. 책장 채우기도 꽤 좋아해서 컴퓨터, 개발 관련 서적이 아니더라도 책장을 채우며 만족감을 느낀다. (다 읽는다고는 안했다 ㅎ) 추천도서는 SQLD와 마찬가지로 영진닷컴의 이기적 네트워크관리사..

Basic Hooks useState: state를 대체 할 수 있다. useEffect: 라이프 사이클 훅을 대체 할 수 있다 Additional Hooks useReducer : state를 변경하는 로직이 담겨있는 함수 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들때 다음 state가 이전state에 의존적일때 Redux를 안다면 쉽게 이용 가능 useMemo useCallback createRef: (Uncontrolled-createRef) : 항상 레퍼런스를 생성해서 렌더될때 넣어준다 useRef: (Uncontrolled-useRef) : 렌더사이에도 유지해준다. 최초 렌더시 undefiend -> 이후 태그 출력 React-Router-Hooks useHistory 이전: props를 ..

// 프로젝트 생성 $ npx create-react-app style-loaders-example // install $ npm i sass $ npm i classnames $ npm i styled-components 스타일로더 CSS 모듈, SASS 모듈 Styled Component 1,2 react shadow ant design

먼저 프로젝트 내에 Pages라는 폴더를 생성하고, Home , About , Profile, NotFound 등 jsx파일을 추가한다. // Home.jsx export default function Home() { return Home 페이지입니다.; } App.js 파일에서 react-router-dom 에서 browserRouter, Redirect, Route, Switch, Link 를 import 한다. 또한 이동시킬 페이지들을 모두 import한다. import { BrowserRouter, Redirect, Route, Switch, Link } from "react-router-dom"; // App.js 의 App return 내부 (isLogin ? : )} /> 코드를 확인해보면 ..

지난 9월 5일 일요일 42회 SQLD 시험을 치렀고, 10월 1일 합격 발표가 났다. 여타 시험들에 비해 합격 발표가 늦게 나오는 이유는 주관식 문제 때문일까.. ㅎ 책 소개 SQLD 공부 방법으로는 다들 노랭이 책을 언급하곤 한다. 2~3 회독하고 가면 합격은 거뜬하다고들..... SQL 자격검정 실전문제 https://book.naver.com/bookdb/book_detail.naver?bid=11346202 SQL 자격검정 실전문제 SQL 자격검정 실전문제는 국가공인 SQL 전문가 및 국가공인 SQL 개발자 자격시험 대비 수험서로 SQL 전문가 가이드에서 다루고 있는 데이터 모델링의 이해, SQL기본 및 활용, SQL 고급 활용 및 튜닝 등 book.naver.com 하지만 나는 노랭이만 봤을 ..

ESlint : 내부적으로 스타일을 규정하는 것 $ npm i eslint -D // 다운로드 $ npx eslint --init //설정파일 생성 $ npx eslint index.js // index.js파일의 코딩 스타일 검사 Prettier : 예쁜 코드 만들어주는 코드 포매터 $ npm i perttier -D//설치 $ npx prettier index.js//index.js 코드 예쁘게 /// -> console.log('hello')-> console.log("hello"); // 따옴표는 ' ' 만 사용하고 세미콜론은 false로 설정했다. $ npx prettier index.js --write // js파일이 바뀜 /// default format => prettier// settin..

$ npm init -y CRA 사용해서 $ npx create-react-app [프로젝트이름] 개발모드 실행 $ npm start 프로덕션 모드 실행 $ npm run build $ npx sesrve -s build 테스트 모드 $ npm test eject : CRA 를 제거하는것, 되돌릴수 없음. CRA만으로 해결이 안될 때 제거 $ npm eject

후기에 작성하기 전에.. 광고나 홍보가 아닌 개인적인 후기임을 알린다. 수강 계기 vue나 react를 공부하고 싶어서 웹서핑을 하다 보면 꼭 만나는 광고가 있다. 패스트 캠퍼스, ㅈㄹㅂㅇㅅ, 국비 학원 등등... 패스트캠퍼스 사이트에 들어가면 마지막 할인은 ㅇ일 ㅇ시간 남았다며 구매를 독촉하는 느낌이 들어 이미지가 좋지 않았지만 상세 페이지의 내용들은 그야말로 사람을 현혹시키는 내용이었다. 이럴 때야말로 실제 후기를 열심히 찾아보고 수강 신청해야겠다는 생각이 들었는데 패스트캠퍼스의 전반적인 후기는 썩............. ...호평은 아니었다. 혹평 혹은 비난에 가까운 게시물도 여럿 있었고, 신고를 받은 건지 알 수는 없지만 삭제된 게시물도 여럿 있었다. 하지만, 가난한 직장인으로서 다른 온라인 강의..

aixos란 Nodejs 혹은 브라우저를 위한 프로미스 기반의 HTTP 비동기 통신 라이브러리이다. 즉 HTTP 요청을 처리할 수 있는 기능이다. jQuery의 ajax랑 유사한 개념인듯하다. axios 설치 npm -> npm install axios aixos의 간단 예제를 테스트하려면 영화 검색 사이트를 만들기에 좋은 데이터베이스를 제공해주는 OMDb API에서 API KEY 인증이 필요하다. >> http://www.omdbapi.com/ // aixos 를 사용하기 위해 import import axios from 'axios' // 영화정보를 가져오는 함수 작성 function getMovieInfo(){ const APi_KEY = '비공개' axios .get(`https://www.omd..

인터넷 브라우저를 사용하면서 우클릭 - 검사를 누르거나 키보드의 F12를 누르면 개발 툴을 확인할 수 있다. 위의 여러 가지 탭 중에서 애플리케이션을 선택하면 위 사진과 같이 로컬 스토리지, 세션 스토리지가 있는 걸 알 수 있다. 로컬 스토리지(Local Storage)란 ?? 데이터가 만료되지 않음 (크롬의 시크릿 창인 경우 지워짐) 세션 스토리지(Session Storage)란 ?? 페이지를 닫으면 사라짐 스토리지에 저장하는 값들은 key value 형태로 구성되어 있다. 아직 로컬 스토리지와 세션 스토리지의 사용처(?)는 학습하지 않았지만 로컬 스토리지와 세션 스토리지에 값을 추가하고, 읽고, 수정하고, 삭제하는 방법에 대해 배웠다. 어려운 내용이 아니므로 코드 블럭으로 작성하기로 한다. // .s..