TIL30 [항해 99 클론코딩 주차 1일차] 오늘은 프로젝트를 시작하는 주만큼 내가 처음에 준비해야 할 것들이 많았다. 그래서 나는 오늘 내가 협업을 하면서 주관적으로 내가 필요했다고 느껴졌던 부분들에 대해서 설명을 하려고 한다. 1. 코드 컨밴션 코드 컨밴션은 협업을 하는 데 있어서 내가 가장 중요하다고 생각했다. 우리는 프로그래머다. 프로그래머는 코드를 읽고 , 코드를 작성하기 위해서 생각하는 사람이다. 즉 코드와 아주 밀접한 관계가 있는 사람이다. 근데 만약에 다른 사람과 협업을 할 때 서로의 변수명이 다 다르다면 어떨 것인가? 만약 개발자가 코드를 읽기 어렵다면 어떨 것인가? 이는 엄청난 비용과 유지보수의 힘든 점들을 가져올 것이다. 즉 변수명 하나로 인해서 이렇게 까지 큰 스노우 볼이 굴러올 수 있다. 그래서 우리는 사전에 변수명 , 파일.. 2023. 7. 24. [항해 99 클론코딩 주차 2일차] 오늘은 클론코딩에서 가장 까다로운 리스트 나열에 대해서 도전해보았다. 이게 무슨 말인지 이해하기 위해서는 다음과 같은 그림을 통해서 알 수 있다. 여기서 리스트 뷰가 바로 내가 구현해야 할 과제 였다. 이 과제에 핵심은 줄어드는 화면에 맞춰서 리스트뷰가 실시간으로 변경이 되어야 한다는 점이었다. 이게 무슨 말이냐면 만약 화면이 약간 줄어들었을 때는 리스트 뷰가 가로 3 세로 4로 바뀌고 화면이 중간 정도 줄어들었을 때는 리스트 뷰가 가로 2 세로 4로 바귀고 화면이 전부 줄어들었을 때는 가로 1 세로 4로 바뀌어야 한다는 점이 관건이었다. 이때 내가 처음에 적용한 방법은 display를 flex로 주는 것이었다. flex shrink와 flex grow를 통해서 늘어나는 화면 , 줄어드는 화면에 맞춰서 .. 2023. 7. 24. [항해 99 클론코딩 주차 6주차 WIL] 오늘은 항해 99에서 미니 프로젝트 주차 , 클론코딩 주차 등 협업을 하면서 내가 느꼈던 부분들에 대해서 작성해볼려고 한다. 그 이유는 이번 기회를 통해 내가 현업을 하면서 놓쳤던 부분들을 블로그로 정리함으로써 나중에 협업을 할 때는 더 발전된 모습으로 협업을 진행하고 싶기 때문이다. 1. 가는 말이 고와야 오는 말이 곱다. 내가 협업을 하면서 가장 중요하게 생각하는 부분은 말을 하는데 최대한 존중하는 자세로 대화를 하는 것이다. 이번에 미니 프로젝트를 하면서 CORS , 이미지 업로드 , CI/CD , HTTPS등 굉장히 많은 이슈들이 있었다. 그리고 이런 이슈들이 있을 때마다 프론트와 백엔드 모두 힘들었다. 하지만 이럴 때일수록 더 말을 곱게 하는 것이 더욱 중요하다. 만약 말을 하는데 있어서 좋지 .. 2023. 7. 23. [항해 99 미니 프로젝트 5주차] 1. 핵심 기술 1-1) 업로드/ 삭제 / 상세페이지 빵집 리뷰와 관련된 글들을 업로드 , 삭제기능 제공 빵집 리뷰 리스트에서 특정 item을 상세하게 볼 수 있는 기능 제공 1-2) 로그인 / 회원가입 빵집 리뷰와 관련된 글을 삭제하기 위한 로그인 / 회원가입 기능제공 2. 기술적 의사 결정 1. vercel를 사용한 이유 vercel를 사용한 이유는 github에 push를 하면 자동적으로 build와 배포 과정이 이루어집니다. 즉 배포 과정이 최적화가 되고 이로 인해서 개발 프로세스가 굉장히 간단해지기에 사용했습니다. 2. styled-components 를 사용한 이유 styled-components를 사용한 이유는 동적으로 스타일링이 가능하기 때문입니다. styled-components는 CSS.. 2023. 7. 19. [항해 99 미니 프로젝트 주차 이미지 미리보기에 대하여...] 우리 프로젝트는 크게 3가지 단계로 이루어져 있다. 1. CREATE / READ 구현 2. UPDATE / DELETE 구현 3. 로그인 / 회원가입 구현 여기서 우리는 UPDATE / DELETE를 하기 전에 이미지 미리보기 기능을 구현해야 하는 상황이 왔다. 그래서 나는 어떻게 하면 이미지를 주소를 따서 보여줄 수 있을까에 대해서 생각해보았다. 그래서 오늘은 내가 이미지 미리보기 기능을 어떻게 해쳐나갔는 지에 대해서 작성해볼려고 한다. 1. 이미지 미리보기 기능 구현 로직 설명 이미지 미리보기 기능은 크게 3가지 단계로 나눠어져 있다 . 첫번째는 input [type = "file"]로 file객체를 받는다. 두번째는 이 file 객체의 상태를 저장한다. 이때 저장되는 값의 형태는 object 형식.. 2023. 7. 17. [항해 99 WIL 미니 프로젝트] 오늘은 항해 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.. 2023. 7. 16. 이전 1 2 3 4 5 다음
