본문 바로가기

전체 글

 (69)
[MongoDB] MongoDB 명령어 기초 다지기(mongo명령어 안 될 때) 저번 포스트에서 mongod 명령어를 통해 어찌저찌 서버실행까지는 했다. 데이터베이스는 CLI, GUI 두 가지 도구를 통해 다룰 수 있는데 GUI는 mongoDB를 설치할 때 함께 설치했던 Compass를 통해서, CLI는 mongo shell을 통해서 cmd창에서 다룰 수 있다. 다른 블로그를 참고할 때 cmd창에 mongo명령어를 실행하면 된다고 했지만 나는 죽어도 안나왔는데, 그 이유가 환경변수에 등록해놨던 bin폴더에는 mongo.exe파일이 존재하지 않았기 때문이다,, 알고보니,mongo는 MongoDB 버전 4.4 이전까지의 MongoDB 셸 클라이언트 도구였고, 4.4버전 이후부터는 mongosh가 새롭게 도입되어 공식적으로 권장되는 도구였다. 그래서 mongo가 설치파일에 포함되어있지 않..
[MongoDB] MongoDB을 사용해보자(설치, 환경변수, 실행) DB를 사용하는 방법은 2가지가 있다. 1. CLI(Command Line Interface) - 터미널을 이용해 관리하는 방법 2. GUI( Graphical User Interface) - 시각적인 편의를 제공하는 툴 이전 프로젝트에서는 heidiSQL(MariaDB), MySQL Workbench(MySQL) 을 사용했었다. 그래서 본 프로젝트에서도 아마 compass를 위주로 진행하게 되겠지만 이번 프로젝트를 하며 CLI를 사용해서 관리하는 방법을 조금이라도 익혀보고자 한다. 1. 설치를 해보자 MongoDB는 Community Edition과 Enterprise Edition 두 가지 버전이 존재한다 Enterprise Edition은 보안 및 고급 기능, 지원 등을 필요로 하는 엔터프라이즈 환..
[전공자들 8] 7일차 - 로그인 /회원가입/비밀번호 재설정 화면 메인 페이지들을 끝내고 드디어 비중낮은 로그인/회원가입/비밀번호 재설정 페이지만 남아서 쉽게 생각했는데 막상 시작해보니 절대 쉽지않았다.. UI 구성은 심플하게 빨리 끝냈는데 여러 조건설정때문에 애를 먹었다. 특히 회원가입 화면에서는 이메일과 비밀번호에는 각각 형식 검증을, 이메일형식이 맞았을 때 인증번호 화면 출력과 인증번호가 맞았는지 검증, 그리고 비밀번호도 사용자 경험을 위해 비밀번호 재입력하는 과정을 거쳐야 하다보니 코드가 복잡해지고 많은 변수가 필요해졌다. 단계별 진행이 아니라 한 화면에 모든 입력을 받고 뭔가 실시간으로 즉시 체크되는 것처럼 화면을 만들고 싶어서 더 복잡해졌던 것 같다. 게다가 혹시나 인증을 받고 이메일을 수정하면 어떻게 되는거지? 비밀번호 재입력을 통과한 다음 원래 비밀번호를..
[전공자들 7] 6일차 - 댓글 숨기기, 답글 닉네임 @태그 붙이기 화면작업은 거의 막바지에 접어들었다. 이제 로그인/회원가입 등등만 하면 끝나는데 오늘은 드디어 야심차게 기획했지만 미뤄뒀던 피드 페이지를 만들 차례.. 프론트적으로 가장 중요한 작업은 두가지정도 있었다. 댓글 숨기기 리스트 형식의 게시판은 어차피 글제목 클릭을 통해 세부화면으로 넘어가기 때문에 댓글 숨기기 기능이 필요하진 않았지만 피드형식의 게시판엔 댓글을 모두 노출시키기엔 너무 스크롤이 많이 생겨서 불편할 것 같았다. 그래서 이렇게 처음엔 댓글이 숨겨져 있다가 댓글버튼을 클릭하면 이런식으로 아래에 댓글창과 댓글작성칸을 띄우기로 했다. 늘 그렇듯이 useState를 사용해 onCilck()이벤트가 발생할 때마다 토글을 만들면 되지 않을까 했지만 곧 한가지 문제점을 떠올렸다. 게시글은 각각 독립적이어야 하..
[전공자들 6] 개발 5일차 - modal 하나로 가성비를 챙겨보자 글 쓰기 버튼을 누르자마자 글이 써지는 페이지는 거의 없다. 마찬가지로 그 중요성과 영향력이 큰 활동일수록, 모달을 통해 재확인하는 작업을 필연적으로 거치게 된다. 앞선 프로젝트에서는 리액트를 처음해봐서 일단 적응하는게 우선이었다. 그래서 여러페이지에서 필요한 모달을 한 번만 구현할 수 있지 않을까 생각은 했었는데 실력 부족으로 실패했다.. (일일이 모든 페이지의 모달을 다 만들었음..) 하지만 이번엔 다름! 효율성은 아직 알 수 없지만 별다른 gpt의 도움 없이 스스로 해냈다는 것에 뿌듯! 일단 내가 필요한 모달의 종류는 글쓰기/회원탈퇴/각종 활동 삭제기능 해서 일단 7개정도이다. 먼저, 모달의 내용을 제외한 나머지 틀을 만들어 주고 props를 사용해 모달을 불러주는 곳에서 type이라는 변수에 어떤..
[전공자들 5] 개발 3일차 - 검색결과에서 검색단어를 파란색으로 표시해보자 풀스택 웹개발 프로젝트를 할 때 나는 처음에 퍼블리싱 - 백엔드 - 프론트 순서로 작업을 하곤 했다. (화면을 이쁘게 만들어 놔야 보기가 좋아서.. ?) 한 번 해보고 나서 비효율적인 부분을 발견했는데 게시판 목록같은 기능이 그랬다. 예를 들어서, 화면을 이렇게 설계했다면 처음에 똑같은 디자인을 만들기 위해 각 게시글들을 모두 하드코딩해서 박았었다. (줄간격 설정이나 크기 설정 등,,) 그러니까 나중에 백엔드 기능을 완성하고 그걸 프론트로 받아와서 보여주는 작업을 할 때 다시 수정을 했어야 했다 그래서 이번 프로젝트땐 백엔드부터 완성하고 여유롭게 프론트를 해볼까 싶었는데 아무래도 db도 처음써보고 다른 어려운 기능도 새롭게 도전하는게 많아서 엄두가 안났다.. ㅋㅋ,, 그래서 만만한 퍼블부터 시작하되 더미..
[전공자들 4] 개발 1일차 - 프론트 컴포넌트 구조 설계 내 화면설계는 크게 5가지 부분으로 나뉜다. 헤더, 푸터, 그리고 메인이 될 부분과 프로필 부분, 마지막으로 스크롤에 상관없이 고정적으로 오른쪽 아래 띄워질 채팅. 헤더푸터는 간단했는데 중간에 위치하는 세개를 구현하는 부분에서 시간이 좀 걸렸던 것 같다. 특히 오픈채팅부분이 원래는 안보이는 상태에서 버튼을 누르면 보여야 하기 때문에 저 화면 만들기가 제일 어려웠다. 결과적으로 성공하긴 했지만 App.js가 좀 지저분해진 것 같다. 일단 프로젝트를 모두 완성해서 배포 후 클린코드로 리팩토링을 해야겠다. 일단 오늘까지 한 것(프론트) 대충 큰 틀만 잡아놓고, 각각 메뉴를 클릭 했을 때의 연결정도만 시켜놨다. 오늘은 프레임을 짜는 작업이었고, 내일모레까지는 계속 퍼블리싱만 할 것 같다. 빡세게 하면 내일 끝날..
[Git]리액트 프로젝트 생성 후 github 연동 명령어/주의사항(README.md/branch) 오랜만에 프로젝트를 생성해서 깃연동부터 두번의 난관이 있었다,, 그래서 정리해두는 리액트 깃허브 연동법! 연동 순서 1. 리액트 프로젝트 생성 create-react-app 프로젝트이름 2. 깃허브 리포지토리 생성 : 깃허브 홈페이지에서 수동으로 리포지토리를 생성해준다. 추후 연동할 때 이 리포지토리의 주소가 필요! ※ 주의할 점 앞선 리액트 폴더를 생성할 때 자동으로 README.md파일이 만들어져 있음! 그래서 리포지토리 만들 때 이 README 파일을 체크하면 파일이 2개라서 연동할 때 충돌이 생겼었다.. 그래서 굳이 추가할 필요가 없음! 난 아래 내용을 삭제하고 충돌처리하여 올렸다 ^^,, 3. 기본 브랜치 설정 git init //새로운 Git 저장소를 초기화 //폴더나 프로젝트 디렉토리에서 이..

티스토리툴바