728x90 반응형 SMALL 분류 전체보기135 2) React Project - Instagram Clone coding 다른건 이미 알고있음 ★ 이표시만 이제 사이드바를 함 만져보자고 sidenav는 스크롤을 내려도 고정이 되야 하니깐 position: fised 걸어두고 dispaly flex에 column을 하면 앞으로 생겨나는 블럭들은 다 밑으로 쌓일거 그런데 아이템들 사이에 공간을 일정히 벌려 둬야 하니까 justify-con을 space-between 마지막으로 로고 크기를 넓이 120px에 주변 사이 간격을 25px로 두는것으 뭐 이렇게 깔꼼하게 됬다 지금까지 별거 안쓰고 신기함 지금 ㄷㄷ ★ 아이콘 박아 넣자 https://mui.com/material-ui/material-icons/?query=home 여기서 할거 이걸 쓰려면 설치를 해줘야 함 설치 후 검색해서 하나하나 집어 넣으면됨 검색 하니까 이렇게 .. 2023. 12. 13. 1) React Project - Instagram Clone coding 아직 좀 잘 모르는 부분이 있어 클론코딩 하며 정리를 다시한번 더 해보려 한다 지금 개인프로젝트 중인데 뭔가 이상함을 느꼈다 라우트가 안된다.. 알고 있고 배운대로 하는데 왜 안되는지 정리 노트 봐도 모르겠다 그렇다는건 처음 빌드업 부터 잘못 됬다 라고 할수 있을것 같다 코드가 너무 지저분해졌다.. 지금 인스타그램 클론 코딩에서 얻어가야 할것은 1. 폴더별 코드 정리 2. 라우팅시 파라메터 라우팅과 부모 라우트 안에 자식 라우트 안에 자식라우트 안에..... 어떻게 하는지 3. props (사용법 말고 활용법 중심으로... 부모 라우트에서 자식의 자식의 자식의 자식등으로 전달은 되는데.. 그게 문제가 아님) ★ 이표시만 node -v 하면 현재 node 버전 확인 가능하고 npm -v 하면 같이 설치된 .. 2023. 12. 13. 6) 개인프로젝트 - UI를 만들수록 Server쪽 최적화와 다시 손봐야 할게 겁난디 ㄷㄷ 기능 구현이 겁날 정도로 일단은 UI만 만드는 중. . 라우팅 경로 수정 해야 할지도 모르며 props 로 연결을 시켜는 뒀는데 뭔가 안되는 곳도 있고 되는것도 있어서 어려움이 많음 이거 별거 아닌거 같은데 은근 규모가 커보임 프로젝트 진행시 늘 팀으로 협업해가며 진행 했었는데 혼자 만드려 하는게 솔직히 처음이라 쉽지 않음 강제로 박아 넣었던거 자주 불러와 쓰일거면 컴포넌트화 해서 html을 불러다 쓰는편이 좋을거 같아 싹 걍 불러오는걸로 바꿔 놓고 디자인 까지 끝 이건 게스트가 진입했을때의 화면이라 쪽지 보내는것만 가능하고 이건유저가 로그인했을때 볼수있는 화면이라 사적으로 받은 쪽지 내용만 볼수있는 구조로 만들었음 기능적으로의 구현은 일단 누가 로그인을 수행 했고 누가 진입했느냐에 따라 보여지는 화면이.. 2023. 12. 9. 5)Client UI 계속해서 만들어 나가는 중.. 아 막혔다 전문 웹디가 아니라 진짜 비루하긴 한데 일단은 뭐 만드는게 중요하고 기능구현이 더 중요하다 생각하니 홈인 메인 화면에 진입했을때 디자인 좀 더 손봐야 함... html 부분 따로 빼내서 생성하면 만들어지게끔 해야 함 원래는 처음 관심분야 등록을 했을때 그에 맞는 게시글 덩어리가 여기 탐색에 보여지게 하려 했다 그래서 맞는 덩어리 누르게 되면 그거에 맞춰 9X9 크기로 보여지고 스크롤을 내리면 무한히 보이게 만들 생각이였으며 뒤로가기시 다시 관심분야별 모든 사람들의 게시글 덩어리를 보여주는 식으로 하려 했는데.... 2일을 고생해서 도저히 안되겠고 시간없어서 그냥.. 처음부터 9X9로 모든 게시글 보여지게 했다 넛츠 라는 탭으로 유튜브의 숏츠 인스타의 릴스 같은 영상을 보는 곳으로 제작 방향을 .. 2023. 12. 8. 4)Client UI 화면 부분은 리액트가 거들테니 걱정마라구! 확실히 CSS를 좀 더 쉽게 개발할수있게 도와주는 이 React란 놈을 공부하게 되자 웹 화면 개발이 수월해 지긴 했다 그리고 그 결과물... 먼저 난 웹 디자이너가 아니기 때문에 이미 완성되 잘된 케이스를 그냥 갖다 쓸 필요가 있다 웹 프론트 스킬은 솔직히 원본 100% 구현은 공들이면 되겠지만 그럴만한 시간이 이젠 없으니깐...ㅜ 로그인 페이지 '/' 먼저 로그인 화면으로 이 레이아웃을 택했다 그리고 구현. .ㅋ 비슷하게 나마 따라 했으며 색감은 솔직히 디자이너가 아니라 구리다 회원가입 '/registPage' 전에 만들어둔거 그대로 쓰기로 했다 시간도 딱히 없고 로그인페이지에서 UI 따라해서 만들어도 되지만.. 저기 중복 확인 버튼 안이쁜데 아직 손못대고있는 이유가 있다 메인 페이지 '/' 로그인을.. 2023. 12. 2. 11) React - 마지막 Nodejs의 Express와 연동하는방법 이 React란 놈은 그냥 html을 이쁘게 만들어 주는 툴일 뿐이다 Vue, Svelte, Angular 등등 다 똑같다 그리고 지금 하려는데 Express에만 적용되는게 아닌 뭐 다른거에서도 연동하는방법은 다 똑같다 클라이언트에서 html로 보여주세요~ 하고 서버에 요청을 하면 서버는 리엑트로 만든 html을 보여줄 뿐이다 npm init -y 해서 기본값으로 프로젝트 생성하고 npm i express 해서 프레임워크 설치 후 정말 초 간단 서버만 만들어 열어놔보자 npx create-react-app 프로젝트명 해서 암튼 준비. .끝 이아니고 이대로는 쓸수가 없으니 리액트는 개발이 끝나면 꼭 빌드를 해줘야 html 파일이 나옴 npm run build 만약 빌드가 안된다면 진입경로가 잘못되진 않았는.. 2023. 11. 23. 0) React - SPA, 개발환경 세팅 - Single Page Application을 제작할때 사용 - 하나의 페이지에서 내용을 동적으로 변경하는 사용자 웹앱 ( Like인스타그램 같은거 ) - 사용 유저가 많고 오래됬고 탄탄함 - function으로 담던, Object로 담던지 html을 만들어만 놓으면 재사용하 편함 - 이거 잘 배워두면 React Native 라고 해서 앱만들 수 있음. 비슷해서 공부하기 쉬움 https://nodejs.org/en 설치 https://code.visualstudio.com/download 설치 npx create-react-app 프로젝트명 하면 React 프로젝트 하나가 생성됨 (맥은 앞에 sudo 붙여서) 생성완료 public : 정적인 static 파일 넣는곳 src : 화면 만드는곳 App.js.. 2023. 11. 7. 16) Nodejs - 백앤드 넓고 얕게 맛보기_정리_코드 최적화(출처 유튭 강의)★★★★ - 컨트롤러 log() 따로 빼기 login과 register에서 같은걸 쓰니깐 이걸 log()로 함수 만들어 따로 빼내면 짧아지고 코드 보기도 편해 졌다 조금 더 가보자 url로 따로 빼내서 오브젝트를 만들어주는데 method, path, status 이렇게다 그리고 log() 함수에 던져줄 값으로 response와 아까 담은 url을 담아 넣으면 log 함수 쪽은 이렇게 수정을 하면 좀더 간결하고 보기 편한 코드로 최적화가 된 그런데 로그인을 하게 되면 응답은 true인거 맞는데 message 부분이 담기지 않으니 undefined다 log() 함수에 true 쪽부분의 메시지를 이렇게 ||을써서 ""을 주자 상태코드 한번 보자 response에서 응답의 값이 넘어 올건데 에러가 400번대의 에러가 날.. 2023. 11. 6. 15) Nodejs - 백앤드 넓고 얕게 맛보기_정리_로그 관리하기(출처 유튭 강의)★★★ 로그 관리하는 법! 많이 사용되는 로그관리 모듈로는 morgan과 winston이 있다 morgan 사용하기 설치하고 app.js 가서 모듈 추가 해주고 미들웨어 등록해주고 개발 할때는 dev 로 서버를 열게되면 이렇게 서버에서 동작한 기록이 로그로 남는다 개발 포맷별로 여러 옵션이 있다 얘를 사용해 파일로 저장을 할 수 있나봄 스트림으로 경로를 지정해 해당 위치에 로그를 기록 시킬수 있는듯 함 저기 루트 경로를 지정하면 되는데 지금 app.js 안에 있으니 이렇게 현재 파일 위치로 잡아 주자 그리고 만들어야 하는게 바로 log 폴더 이렇게 log 폴더를 먼저 만들라고 코드 썻으니 하나 만들어주고 (주용한건 경로의 위치) accessLogStream 를 스트림에 넣어 연결해 주면 잉. . 에러가 났는데 .. 2023. 11. 5. 이전 1 2 3 4 5 6 ··· 15 다음 728x90
