min

오늘은 프로젝트를 시작하는 주만큼 내가 처음에 준비해야 할 것들이 많았다. 그래서 나는 오늘 내가 협업을 하면서 주관적으로 내가 필요했다고 느껴졌던 부분들에 대해서 설명을 하려고 한다. 1. 코드 컨밴션 코드 컨밴션은 협업을 하는 데 있어서 내가 가장 중요하다고 생각했다. 우리는 프로그래머다. 프로그래머는 코드를 읽고 , 코드를 작성하기 위해서 생각하는 사람이다. 즉 코드와 아주 밀접한 관계가 있는 사람이다. 근데 만약에 다른 사람과 협업을 할 때 서로의 변수명이 다 다르다면 어떨 것인가? 만약 개발자가 코드를 읽기 어렵다면 어떨 것인가? 이는 엄청난 비용과 유지보수의 힘든 점들을 가져올 것이다. 즉 변수명 하나로 인해서 이렇게 까지 큰 스노우 볼이 굴러올 수 있다. 그래서 우리는 사전에 변수명 , 파일..

오늘은 클론코딩에서 가장 까다로운 리스트 나열에 대해서 도전해보았다. 이게 무슨 말인지 이해하기 위해서는 다음과 같은 그림을 통해서 알 수 있다. 여기서 리스트 뷰가 바로 내가 구현해야 할 과제 였다. 이 과제에 핵심은 줄어드는 화면에 맞춰서 리스트뷰가 실시간으로 변경이 되어야 한다는 점이었다. 이게 무슨 말이냐면 만약 화면이 약간 줄어들었을 때는 리스트 뷰가 가로 3 세로 4로 바뀌고 화면이 중간 정도 줄어들었을 때는 리스트 뷰가 가로 2 세로 4로 바귀고 화면이 전부 줄어들었을 때는 가로 1 세로 4로 바뀌어야 한다는 점이 관건이었다. 이때 내가 처음에 적용한 방법은 display를 flex로 주는 것이었다. flex shrink와 flex grow를 통해서 늘어나는 화면 , 줄어드는 화면에 맞춰서 ..

오늘은 항해 99에서 미니 프로젝트 주차 , 클론코딩 주차 등 협업을 하면서 내가 느꼈던 부분들에 대해서 작성해볼려고 한다. 그 이유는 이번 기회를 통해 내가 현업을 하면서 놓쳤던 부분들을 블로그로 정리함으로써 나중에 협업을 할 때는 더 발전된 모습으로 협업을 진행하고 싶기 때문이다. 1. 가는 말이 고와야 오는 말이 곱다. 내가 협업을 하면서 가장 중요하게 생각하는 부분은 말을 하는데 최대한 존중하는 자세로 대화를 하는 것이다. 이번에 미니 프로젝트를 하면서 CORS , 이미지 업로드 , CI/CD , HTTPS등 굉장히 많은 이슈들이 있었다. 그리고 이런 이슈들이 있을 때마다 프론트와 백엔드 모두 힘들었다. 하지만 이럴 때일수록 더 말을 곱게 하는 것이 더욱 중요하다. 만약 말을 하는데 있어서 좋지 ..

1. 핵심 기술 1-1) 업로드/ 삭제 / 상세페이지 빵집 리뷰와 관련된 글들을 업로드 , 삭제기능 제공 빵집 리뷰 리스트에서 특정 item을 상세하게 볼 수 있는 기능 제공 1-2) 로그인 / 회원가입 빵집 리뷰와 관련된 글을 삭제하기 위한 로그인 / 회원가입 기능제공 2. 기술적 의사 결정 1. vercel를 사용한 이유 vercel를 사용한 이유는 github에 push를 하면 자동적으로 build와 배포 과정이 이루어집니다. 즉 배포 과정이 최적화가 되고 이로 인해서 개발 프로세스가 굉장히 간단해지기에 사용했습니다. 2. styled-components 를 사용한 이유 styled-components를 사용한 이유는 동적으로 스타일링이 가능하기 때문입니다. styled-components는 CSS..

우리 프로젝트는 크게 3가지 단계로 이루어져 있다. 1. CREATE / READ 구현 2. UPDATE / DELETE 구현 3. 로그인 / 회원가입 구현 여기서 우리는 UPDATE / DELETE를 하기 전에 이미지 미리보기 기능을 구현해야 하는 상황이 왔다. 그래서 나는 어떻게 하면 이미지를 주소를 따서 보여줄 수 있을까에 대해서 생각해보았다. 그래서 오늘은 내가 이미지 미리보기 기능을 어떻게 해쳐나갔는 지에 대해서 작성해볼려고 한다. 1. 이미지 미리보기 기능 구현 로직 설명 이미지 미리보기 기능은 크게 3가지 단계로 나눠어져 있다 . 첫번째는 input [type = "file"]로 file객체를 받는다. 두번째는 이 file 객체의 상태를 저장한다. 이때 저장되는 값의 형태는 object 형식..

오늘은 항해 99에서 미니 프로젝트를 진행하는 주차였다. 그래서 나는 프론트 1명 백엔드 2명으로 팀을 만들어서 프로젝트를 진행했다. 그래서 오늘은 내가 미니 프로젝트를 하면서 배웠던 것들 중에서 axios에 대해서 써볼려고 한다. 1. axios instance https://minprogramming.tistory.com/entry/axios-instance-interceptor에-대하여 axios instance, interceptor에 대하여... 1. axios instance 도대체 왜 쓰는 거야? : axios instance를 쓰는 가장 큰 이유는 유지보수 때문이다. 그럼 여기서 드는 의문은 왜 유지보수 측면에서 axios instance를 쓰면 좋은지 이다. 이 이유를 설명하기 minpr..

이번주는 항해에서 미니 프로젝트를 하는 주였다!!! 나는 나랑 정말 쿵짝이 잘 맞는 팀원들이랑 팀이 되어 정말 기분 좋게 프로젝트를 할 수 있었다. 프론트는 나 혼자라서 조금 힘들기 했지만 백엔드 분들이 나의 상황을 정확하게 이해해주셔서 크게 어려운 점들은 없었다. 그래서 오늘은 내가 프로젝트를 하면서 겪었던 트러블 슈팅들과 이를 어떻게 해결했는지에 대해서 작성해볼려고 한다. 1. 중첩 라우팅 우리 프로젝트의 특징은 기존의 원페이지를 극한으로 사용하는 것이었다. 즉 이게 무슨 말이냐면 메인 페이지의 템플릿을 그대로 유지하면서 다른 페이지들마다 새로운 컴포넌트를 붙이는 형식으로 진행되는 프로젝트였다. 그래서 나는 이전 페이지에 있던 내용을 기억해서 다른 페이지에도 쓸 수 있도록 만드는 것이 관건 이었다. ..

오늘은 vite 프로젝트에서 작업을 많이 했다. 그래서 오늘은 vite 프로젝트를 왜 사용하고 이를 사용하면서 느꼈던 장점 들을 설명하려고 한다. 1. vite 프로젝트를 사용하는 이유 vite 프로젝트를 사용하는 이유는 vite 프로젝트가 가볍기 때문이다. 이가 무슨 말이냐면 기존의 CRA로 만든 프로젝트의 경우에는 기본적으로 설정하는 것들이 많기 때문에 전체적으로 프로젝트가 무겁다. 즉 잘 돌아가지 않는다. 하지만 vite의 경우에는 굉장히 가볍다. 즉 기본적으로 설정하는 것들이 많지 않기 때문에 프로젝트가 가벼운 것이다. 즉 빠르게 돌아간다. 이러한 이유들로 vite 프로젝트의 경우에는 빠르게 변화를 확인하고 싶을 때 사용하는 프로젝트 생성 방법 2. vite 프로젝트의 장점 2-1) vite는 정..