개발 공부 기록

나는 무엇을 하는가?

전체 글 55

6개월 간의 프론트엔드 현장실습 인턴 회고

React도 제대로 쓸 줄 모르던 내가 사수가 없는 곳에서 6개월 간 인턴을 했다. 왜 인턴을 했는가?여러가지 이유가 있다.프론트엔드 실무 경험을 해보고 싶어서좋아하는 일로 돈을 벌고 싶어서내가 회사 생활에 적성이 맞는 사람인지 알고 싶어서3학년 2학기까지 수료하고 다리 수술을 해서+조금 쉬면서 진로를 찾고 싶어서 휴학 신청을 했다. 퇴원하고 걷는게 좀 괜찮아졌을 때는 알고리즘이랑 리액트 공부도 하고, 다리를 절면서 학원에서 아르바이트를 했는데 알바를 하는게 너무 재미가 없어서… 내가 좋아하는 일로 돈을 벌고 싶었다. 그리고 리액트를 공부하다 보니 더 깊게 실무 경험을 하고 싶은 마음이 들었다. 그래서 그 때부터 자소서도 쓰고 리액트, 자바스크립트 공부도 더 열심히 하며 인턴을 준비하기 시작했다. 사실 ..

회고 2024.12.17

AWS Amplify 배포 및 PR preview URL 생성하기

회사에서 AWS로 배포하며 팀원들에게 공유하려고 작성했던 글인데 조금 더 다듬어서 블로그에도 올려봅니다. Next.js로 배포를 하려면 어떻게 해야할까요?보통 vercel을 이용하여 배포하는게 일반적입니다. 그게 훨씬 쉽기도 하구요..그런데 vercel을 쓸 수 없는 경우가 있죠. 계정에서 무료로 배포할 수 있는 횟수를 다 채웠다던가, private organization에서 private repository를 배포하려면 매달 돈이 든다던가 ^^  보통 리액트 프로젝트를 AWS로 배포하면 S3에서 정적 페이지 배포, E2C에서 서버 배포, RDS에서 DB를 배포하는데요,저희는 Next.js에서 서버액션을 사용하기 때문에 S3를 이용해 정적으로 배포하면 안됐습니다.벌써 머리아프죠? 뭐가 뭔지도 헷갈리고 모..

개발 공부/AWS 2024.12.14

Github Readme.md 작성하기

README 파일은 GitHub과 같은 코드 저장소에서 프로젝트에 대한 설명과 정보를 알려주는 문서입니다.주로 프로젝트의 목적, 설치 방법, 사용 방법 등을 안내하여 다른 사람들이 프로젝트에 대해 쉽게 알 수 있도록 하죠~ Readme가 깔끔하게 잘 적혀있어야 이게 어떤 프로젝트인지, 뭘 개발했는지, 어떤 기술을 썼는지 잘 알 수 있겠죠?제 프로젝트도 아직 개발이 많이 진행되진 않았지만, 일단 Readme부터 써두고 점점 추가할 계획입니다 제 프로젝트는 아직 기획이 확정되지 않고 개발중이라 리드미에는 프로젝트 이름, 설명, 기간, 기술 스택, 실행 방법 정도만 넣었는데요, 기획이 확정되고 기능이 추가되면 프로젝트 구조, 기능 목록, 주요 기능 소개 등을 넣으면 좋을 것 같습니다. 1. Add a Read..

개발 공부/Git 2024.12.14

Git으로 협업하기

6개월 간의 인턴을 마무리하며 인수인계서를 쓰고 있다.그런데 다음 인턴분께서 Git을 사용해본 적이 별로 없으신 것 같아 인수인계서 쓰는 김에 Git 사용법+그 외 프로젝트 할 때 주의사항이나 참고하면 좋을 것들도 같이 정리해서 블로그에도 공유해본다.  Git을 사용해서 코드를 관리하는 방법은 대체로 아래 순서를 따릅니다. 이슈 생성→브랜치 생성 및 브랜치 변경→작업→commit→push→PR→merge→pull 1. 이슈 생성하기Git Repository에서 Issues를 클릭하고 New issue를 클릭합니다 title과 description을 씁니다Assginees에는 보통 assign yourself를 클릭해서 자기 자신을 선택합니다본인이 맡은 이슈는 본인을 assgin하고 같이 하거나 다른 사람..

개발 공부/Git 2024.12.13

react-router로 채팅방 라우팅하기

리액트는 프레임워크가 아닌 라이브러리이므로 내장 라우팅을 지원하지 않는다. 따라서 라우팅을 위해서는 a태그, window.location을 이용하거나, 라이브러리를 이용해야한다. 라이브러리를 사용하면 SPA환경에서 페이지 새로고침 없이 필요한 컴포넌트만 렌더링되고, 뒤로 가기/앞으로 가기 등이 더 자연스럽게 동작하기 때문에, 라이브러리를 사용해보기로 했다. Next에서는 Link 컴포넌트 혹은 useRouter 하나면 다 됐는데, 리액트에서는 react-router을 쓸 지 react-router-dom을 쓸 지도 정해야한다. 무슨 차이인가 싶어서 찾아본 결과..react-router-dom이 react-router의 확장된 버전이라고 한다.react-router라우팅을 위한 핵심(core) 로직만 포함..

5일만에 SQLD 따기

불안했는데 붙었다. 간신히 턱걸이로… 취득 배경 및 당시 상황인턴을 하던 중 프론트엔드 개발자도 DB와 백엔드 공부가 필요하다는 것을 느꼈다. 프론트엔드에서는 DB를 다룰 일이 별로 없지만 그래도 DB 구조를 알아야 백엔드 개발자와 소통할 때 조금 더 편할 것 같아, 인턴 중 SQLD 취득을 목표로 공부했다!전공자긴 하지만 데이터베이스 수업은 들은 적 없고, 백엔드가 아니라 프론트엔드 위주로 공부해서 SQL이나 DB도 다뤄본 적이 거의 없었다. DB다뤄본 적은 있는데 ORM 써서 SQL은 안써봄.. 정보처리기사를 땄었는 데 이 때 정처기 공부한다고 DB 정규화 DDL DCL 이런 개념 공부한 게 배경지식의 전부이다.점수를 보면 1과목은 거의 다 맞췄고 2과목은 거의 턱걸이 수준으로 다 틀렸는데, 정보처리..

리뷰 2024.12.09

채팅방 리스트 목록 구현하기

채팅방 디자인을 어떻게 하는게 좋을까?디스코드 같은 디자인으로, 왼쪽에 채팅방 리스트, 오른쪽에 채팅 리스트를 넣고 디스코드처럼 채팅방 리스트 최상단에 채팅방 추가 버튼을 넣는 게 좋을 것 같다. 채팅방 리스트 목록 디자인하기 shadcn/ui를 참고해서,왼쪽에는 저런 리스트 형태로 채팅방 리스트가 있고 오른쪽에는 채팅창 화면이 보이게 할 예정이다. 더미 데이터를 만들었다.const chatRooms = [ { id: 1, name: "일반 채팅방", participants: 15, lastMessage: "안녕하세요!", lastActivityTime: "방금 전", unreadCount: 3, lastSender: { n..

shadcn/ui 도입하기

클라이언트에서 ui를 만들어볼건데, 이번 프로젝트는 프론트보다는 백 공부의 목적이 크고, ui 라이브러리도 한번 사용해보고 싶었어서 shadn/ui를 이용해 볼 예정이다.shadn/ui란?react에서 사용할 수 있는 ui 라이브러리이다.npm으로 전체를 다운로드하는게 아니라 원하는 컴포넌트만 따로 다운받고, 직접 수정할 수 있기 때문에 디자인 변경이 쉽다.shadcn/ui shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com그리고 디자인이 무척 깔끔하고 예쁘다 ㅎㅎui 컴포넌트 외에 그래프, 채팅 등도 가능하므로...

채팅방 스키마, API 만들기 (mongoDB, thunderClient)

채팅방 스키마를 먼저 만들어 보자.채팅방 생성->채팅방 접속->웹소켓 연결 및 구현->메세지 데이터 DB 연결 순서로 진행할 것이다. Room SchemanamepaticipantsuserIduserNameuserProfileImagejoinedAtlastRead (안읽은 메세지 확인용. 마지막으로 읽은 시간)createdAtupdatedAtlastMessage1. 스키마 만들기import mongoose from "mongoose";const roomSchema = new mongoose.Schema({ name: { type: String, required: [true, "방 이름은 필수입니다."], trim: true, }, participants: [ { use..

채팅 앱 mongoDB 연결하기

채팅 앱을 구현 중인데, DB를 연결하려고 한다.DB는 어떤걸 쓸까 고민하다가... mongoDB를 쓰기로 결정했다. MongoDB란 무엇인가? 채팅 앱에 mognoDB를 사용한 이유닉네임과 메세지, 시간만 있으면 되므로 관계를 맺고있는 데이터가 적고, 변경되지 않음스키마가 없어서 추후 사진, 파일 전송 등 기능 확장이 용이러닝커브가 낮음읽기/쓰기가 빠르다최근 sqld를 공부하면서 sql이랑 조인 연산을 공부했어서 RDBMS를 이용해서 sql를 직접 사용해보고 싶은 마음도 있었지만, 채팅 앱을 구현하기 위해서는 noSQL이 더 나은 선택인 것 같아서 noSQL로 구현하기로 했다. 채팅 메세지는 noSQL, 채팅방 데이터는 SQL로 구현하는 경우가 있다고 하니 우선 개발해보고 확장이 필요하면 그 때 mys..