미농의 하루 미농의 하루

1. 시작DB는 본격적으로 연결했으니, 이제는 그 안에 들어갈 것들을 세부적으로 정해주면 됩니다. 우선 알아야할 게 MVC 패턴입니다. 모든 코드들을 하나의 파일에 다 때려박으면 모든 게 불편해집니다. 물론 파일 구조는 단순해지기야 하겠지만... 나머지 전부가 단점일 정도로요. 그래서 대다수 서비스들이 보다 효율적으로 코드를 나누기 위해 선택한 것이 MVC 패턴입니다. Model: 데이터 관련View: 클라이언트 측 관련(보여주는 거)Controller: 제어 관련 아주 간단하게 표현하자면 이렇습니다. 뷰를 통해 보여줄 것을 보여주고, 어떤 요청을 받았을 때는 컨트롤러가 처리하고, 데이터가 필요할 때는 모델에게서 꺼내옵니다. 가장 중요한 것은 각 요소가 각자 할 일만 한다는 점입니다. 그렇기 때문에 ..

본격적인 환경 설정 후에는 데이터베이스를 연결해줘야겠다는 생각을 했습니다. 애초에 프론트와 백이 있을 때 백의 api가 완성되어야 프론트에서 원활한 테스트가 가능하고, 백엔드는 api를 짜기 전 데이터베이스를 설정해줘야 할 것 같았습니다. 데이터베이스들 중에는 고민했지만 별다른 ORM이 필요 없고, 꽤 복잡한 SQL을 사용하지 않아도 되는 걸 선택했습니다. 바로 MongoDB!! 사용하는 건 처음이지만? NoSQL 종류들 중에서는 제법 유명한 편이니 자료가 많지 않을까 싶습니다. 1. 시작 우선 몽고DB 공식 사이트에서 가입을 해줍니다. https://www.mongodb.com/ko-kr MongoDB: The World’s Leading Modern DatabaseGet your ideas to m..

1. 시작 원래 백엔드로는 SpringBoot을 배우고 싶어 환경설정까지 했으나... 자바가 너무 어렵습니다. 거의 기초부터 아는 수준인데 @Bean 이런 것도 잘 모르겠고 배울 건 너무 많고... 장고 등등에 눈을 돌리다, 차라리 내가 하던 것에서 덧붙이는 방식으로 하자! 라는 마음이 들어 과감하게 노선을 틀었습니다. 이미 자주 사용하던 자바스크립트로 백엔드까지 하면? 일단 내가 편할 것 같다! 라는 불온한 마음으로 프로젝트를 시작했습니다. 2. 환경 설정 우선 Node.js로 백엔드, React로 프론트엔드를 할 예정입니다. 그렇기 때문에 환경 설정을 위한 준비로... 폴더를 백과 프론트로 구분했습니다.project/├── front/ -> React├── back/ -> Node.js 그리고 이..

1. npx tailwindcss init 에러 / tailwind.config.ts 파일 없음   tailwindcss 생성 중 init 실행 시 npm err! 이라는 에러가 떴습니다. 게다가 여러 설정을 하려고 보니 tailwind.config.css 파일이 없었습니다. Gpt에게 물어봤으나 모두 tailwind.config.css 파일을 확인하라는 말만 반복하길래 설마 아직 업데이트 안 된 에러인가 했습니다. 그래서 Tailwind 공식 문서를 확인해보니, 4.0 버전 이후로 init 명령어가 안 되고 tailwind.config.css 파일이 없어졌다고 합니다. 설정하는 방법은/* global.css */@import "tailwindcss";  tailwindcss가 이미 설치된 파일이라는 가..

1. 프론트엔드로 레이아웃 구현하기: https://minjh1126.tistory.com/71 [Vue3 + Spring Boot] 1. Todo 레이아웃 만들기https://github.com/minhong1126/todo_full/tree/FE/layout GitHub - minhong1126/todo_fullContribute to minhong1126/todo_full development by creating an account on GitHub.github.com    React로 캡스톤디자인 진행을 하다 보니 다른 언어들minjh1126.tistory.com     프론트엔드의 기본적인 구성이 끝났으니, 이제 본격적인 구현을 위해 백엔드의 환경을 설정해 줄 차례입니다. 줄곧 프론트엔드만 했..

1. Each *.vue file can contain at most one top-level  block.  Vue 같은 경우에는 컴포넌트나 파일 이름을 기존 태그와 구별하기 위해 두 단어 이상으로 적어줘야 합니다. 예를 들어 파일 이름을 단순히 Footer.vue라고 했을 때 인식하지 못 합니다. 그래서 MainFooter이나 main_Footer 등 다양한 표기법으로 두 단어 이상 적어주면 해결됩니다.

https://github.com/minhong1126/todo_full/tree/FE/layout GitHub - minhong1126/todo_fullContribute to minhong1126/todo_full development by creating an account on GitHub.github.com    React로 캡스톤디자인 진행을 하다 보니 다른 언어들 등에 관심이 생겼습니다. 그 중에서 가장 관심이 갔던 게 Vue랑 Spring이었습니다. 왜냐하면... 10년을 넘게 지낸 친구가 있는데 마침 다른 학교 같은 학과를 갔고? 같은 시기에 캡스톤을 진행했고? 같은 프론트엔드 역할을 맡았고? 심지어 비슷한 기능들을 개발하는데? 유일하게 다른 언어인 Vue를 썼기 때문입니다. 고민거리도 ..

https://school.programmers.co.kr/learn/courses/30/lessons/131128 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  1. 문제 두 개의 문자열 X, Y가 주어진다. 두 문자열은 길이가 3이상, 300만 자리의 숫자가 들어있다. 그 중에서 숫자 짝꿍을 찾아야 한다. 숫자 짝꿍이란, 두 숫자 중 같은 숫자들만 가져와 조합할 수 있는 가장 큰 숫자이다. 예를 들어X: 12341Y: 22451  일 때, 두 숫자의 공통인 1, 2, 4을 우선 뽑는다. 그리고 그 숫자들을 조합했을 때 만들 수 있는 가장 큰 숫자인 421이 짝꿍 숫자가 된다.  2. 접근 방법1...