728x90 반응형 SMALL 전체 글135 첫번째 개인프로젝트를 끝 마치며. 현재 개발한 프로젝트에 사용된 기술등 왜 선택했고 왜 쓴건지 정리를 해보려 한다 1. 왜 React를 SPA(Single Page Application)로 선택했나? - React는 가상 DOM 기술을 통해 빠른 렌더링을 실현하며, 이는 SPA에서 특히 중요함. 또한 React Native와의 연관성은 향후 네이티브 앱으로의 확장을 고려할 때 매우 유용함 React는 JSX 문법을 사용해 컴포넌트 기반의 개발을 가능하게 하고, 이는 코드의 가독성과 유지 보수성을 향상시킴. 2. Express 프레임워크를 선택한 이유는 무엇인가? - Express는 Node.js의 HTTP 모듈을 추상화하여 비동기 작업을 보다 효율적으로 처리할 수 있도록 도와줌. 또한 미들웨어 구조를 통해 요청과 응답을 다루는 것이 간편.. 2024. 3. 11. 4) 개인프로젝트 - 소켓통신 https://socket.io/ Socket.IO Reliable Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect. socket.io 소켓 통신은 http 통신과 달리 실시간으로 데이터를 주고받고 하는게 가능하다 게임에서 채팅치면 바로 유저들과 소통 가능하지 않음? 카톡이나 혹은 메신저등 메시지를 실시간 주고받는게 가능하지 않음? 인터넷방송 송출같은거만 봐도 실시간으로 영상보고 도네도하고 그러잖음? Zoom 회의같은것도 초대해서 .. 2024. 3. 11. 3) 개인프로젝트 - 서버단 (2) models 모델이 중요허지 솔직히 고백하자면 원칙대로 안하고 거꾸로 했다 모델을 만들기전에 어떻게 할지 설계라는걸 먼저 해야 한다 그런데 설계를 마지막에 했다 몰라서라기 보다 어쩌다보니 그렇게 됬다 결과는 시간만엄청 잡아먹었다는것 User 모델 각 모델들간에 관계 설정이 중요하다 - hasOne : 한 모델이 다른 모델을 가질때 (ex. 각 유저는 하나의 프로필만 갖는다) - hasMany : 한 모델이 다른 모델 여러개를 가질때 (ex. 각 유저는 여러개의 포스트를 갖는다) - belongsTo : 다른 모델에 속할 때 사용 (ex. 각 포스트는 하나의 유저에 속한다) - belongsToMany : 다 대 다. 두 모델 간에 중간 테이블을 통해 관계를 맺을 때 사용 (ex. 각 유저는 여러개의 채팅방에 참여하며.. 2024. 2. 28. 2) 개인프로젝트 - 서버단 (1) 서버가 차라리 익숙하다랄까 이것도 하다보니 결국 똑같은거 반복 하고 있던데 클라이언트가 요청을 보내면 서버는 그 요청값 분석해서 응답을 해주는걸 한다 이런거 썻다 시간만 더 있었다면 좋았으련만.. 로그기록 남기려고 winston이랑 morgan 설치 했는데 제대로 써먹지 못했음 그래도 일단 로그 기록이 남을수 있게 폴더와 파일을 만들어두긴 했는데 모든 에러에 대해 다 잡아내야 하는데 시간을 좀 더 투자해봐야 할것 같은 기술임 잘 모르는 기술이라 당장 뚝딱 만들수 없었음 서버는 app.js 이게 중요하다 모듈이다 라우팅 경로는 메인 하나면 된다 물론 기능별로 뜯어 놓으면 좋지만 코드 길어지는게 싫다 이게 거대 프로젝트면 따로 분류하는편이 좋긴함 passport써서 인증 할거다 대체적으로 이렇게들 쓴다 이거.. 2024. 2. 28. 1) 개인 프로젝트 - SNS 만들기(UI, 페이징코드) SPA : Single Page Application 리엑트로 개발 했음 이유는 요즘 많이 사용되는 기술이며 이걸 배워두면 어플만들때 사용하는 기술인 공부하는데 오래 걸리지 않을 뿐더러 이건 스마트폰 어플만들때 사용하는 기술이라고 함 무튼.. 돈이 되는 기술을 먼서 습득하기위해 빡세게 공부 했음 물론 그 이게 끝은 아니지만 자 그럼 제작한 UI를 봐보자 전문 웹 디자이너는 아니라 솔직히 허접하다 단, 기능적인 측면에서 바라 보는게 좋음 CSS, HTML, JS 모르면 웹 화면을 만들기 쉽지 않음 그래서 빡시게 공부했다 웹 디자이너가 아니 관계로.. 겉은 좀 허접해보이지만 기능적으로 봐야 함 리엑트 폴더는 두개다 클라이언트와 서버 클라이언트는 유저가 서버에 요청할때 쓴다 서버는 이제 유저 요청 받으면 합당.. 2024. 2. 28. WebSocket 사용법(3)(feat. 채팅기능앱 만들기) 이제 채팅을 해보자 어떻게 실시간으로 통신 주고받고 DB에 저장도 하고 그럴가? 메시지를 저장할 state가 필요할거 같고 해당 메시지를 보내는데 쓸 함수도 필요할거 같음 간단하게 생긴 InputField가 있음 에 불러다 연결 해줄건데 문자 담을 스테이트와 보내는 액션을 취할 함수를 만들어주고 이 sendMessage는 컴포넌트 안에 보면 form 태그 있는데 거기에 onSubmit={ sendMessage } 여기 있음 저거 e.preventDefault()은 이제 onSubmit이 자꾸 리프래쉬 하려 하는걸 막을때 쓴다. 그리고 이렇게 emit 말하는 코드를 썻으니 이제 서버로 가서 듣거on을 만들어 주자 클라이언트에서 메시지를 저장 했고 .emit() 을 사용해 서버로 보냈음.. 그럼 이걸 저장 .. 2024. 2. 5. WebSocket 사용법(2)(feat. 채팅기능앱 만들기) 클라이언트에서 이름을 작성해 서버로 보내기를 할거다 그전에 클라이언트에서 말하는거 작성해보자 아주 간단하게 프롬포트 띄워서 입력받는걸 만들었다 그리고 페이지 실행시 동작되게 useEffect를 사용해서 해당 함수 불러오게 하면 입력 되는거 확인. . 이제 소켓 써서 넣어보자 말을 할때 그러니까 보낼때는 emit을쓴다고 했음 첫번째 인자 "login" 이것은 무슨말을 할건지?에 대한거 두번째 인자는 보낼 값 다음으로 콜백함수를 넣을수 있는데 실행하고 완료되면 완료됬다 응답받는거 .emit("대화의 제목", 보낼 내용, 콜백함수) 이제 서버에서 듣는거 작성 해보자 서버의 io.js 파일이다 첫번째 인자 "login"은 아까 말할때 썻던거 그러니깐 이제 듣는거겠지 그 다음으로는 콜백함수 넣어주는데 아까 use.. 2024. 2. 5. WebSocket 사용법(1)(feat. 채팅기능앱 만들기) http는 단방향 통신 WebSocket은 양방향 통신 그래서 실시간 채팅같은거에 많이 씀 ★ 2024. 2. 5. JWT 사용 방법 Login의 방식에는 총 3가지의 방식이 있다 1. Cookie 2. Session 3. JWT 단점 Cookie - 유저의 정보가 클라이언트쪽에 저장되있음. 그래서 JS 몇줄로 이 쿠키의 위변조는 얼마든지 가능함. - 로그인한 사용자는 downy이지만 terry라는 사용자의 쿠키로 변조시키면 서버는 사용자를 다르게 인식한다 이거임 Session - 유저가 로그인 할 때 마다 이 SessionId가 생서이 되는데 만약 유저가 몇만명 된다 이러면 DB에 이 유저 정보를 담는것 만으로도 서버에 큰 부담이 된다 - 요청 할때 마다 DB에 접근 해야함 그래서 JsonWebToken이 나왔음 이 토큰을 소유한 사람이 권한을 증명 받을수 있는것 장점 JWT - 서버는 암호화된 토큰을 생성해서 클라이언트에 전달만 하.. 2024. 1. 20. 이전 1 2 3 4 ··· 15 다음 728x90
