미농의 하루 미농의 하루

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 그리고 이..

기존의 코드는 이쪽: https://minjh1126.tistory.com/41 1. React 기본 설정 & State 이해하기 어느덧 4학년의 첫 학기 개강을 했습니다. 그러다 보니 이제 슬슬 졸업 준비를 해야 하는데, 저희 학교 같은 경우에는 캡스톤이 졸업 필수라 팀에 참여했습니다. 근데 다들 저보다 너무 잘해서... minjh1126.tistory.com ( 기존 코드는 노마드 코더의 react 강의를 참고했습니다.) 캡스톤 준비 때문에 한창 바쁜 와중입니다. 순수 React만 써봤는데, 그 때는 작은 프로젝트이다 보니 괜찮았지만 캡스톤 같이 큰 프로젝트에서는 상태 관리가 어려울 거라고 친구가 알려주더라고요. 그래서 이 라이브러리를 사용하기로 했습니다. 친구는 이미 많은 사용해본 것 같지만 저는 ..

이번에는 리액트를 사용해 TodoList를 만들었습니다. 확실히 전에 Javascript로 만들었던 때와 코드 라인 수 자체가 적고 간편하게 만들 수 있더라고요. 이래서 다들 리액트 리액트 하시나 봐요. 이번 기회에 조금 확실히 알게 되었습니다. useEffect를 사용한 줄 알고 포스팅을 해야겠다! 하고 적기 시작했는데 안 썼네요... 머쓱. 그래도 옛날에 CRUD 게시판을 만들 때 map() 함수 때문에 아주 개고생을 했던 경험이 있기 때문에, 이를 한 번 적어보도록 하겠습니다. 1. map? 코딩이나 프로그래밍을 해보셨다면 많이 들어보거나 써보셨을 기능이죠. 특히 코딩테스트 준비로 백준이나 등등 문제 풀이에서는 절대 빠질 수 없는 개념입니다. 우선 그동안의 map의 개념이 무엇인지 보자면 값을 저장..

어느덧 4학년의 첫 학기 개강을 했습니다. 그러다 보니 이제 슬슬 졸업 준비를 해야 하는데, 저희 학교 같은 경우에는 캡스톤이 졸업 필수라 팀에 참여했습니다. 근데 다들 저보다 너무 잘해서... 다급하게나마 공부를 해보려 합니다. 스크럼 경험 같은 부분은 이론 밖에 모르는지라 진행 방식 같은 쪽만 열심히 보고, 실질적으로 중요한 실력을 좀 쌓아보려고 해요. 이번에 프론트엔드로 참여하게 되어서 React를 최대한 빠르고 정확하게 공부해 보겠습니다. 1. 기본 설정 우선 vscode에서 파일을 하나 생성해 줍니다. 파일 속의 파일 형태로 작업하고 싶지 않다면 그냥 진행해 주셔도 됩니다. 터미널을 켜서 npx create-react-app 파일이름(새로운 파일) 을 적어 React의 기본 형태를 깔아줍니다. ..