본문 바로가기

javascript4

[Instagram-Clone] 지난 6일간 난 무얼 했는 가? 프런트엔드 작업을 다 끝내고 이제 백엔드를 해보려고 보니 나의 귀가 팔랑 거리기 시작했다. 예전에 써본 Express를 쓰는 것이 맞는 것일까? 아니면 TypeScript를 배웠으니 Nest.js(이하 Nest)를 쓰는 것이 맞는 선택일까? 결론을 먼저 말하면 Nest를 선택했다, 그 이유는 새로운 것을 배워보고 싶어서 이다. 정말 간단한 말이지만 그 안에는 많은 것이 내포 되었있다. 객체지향 (OOP)에 대해 궁금한 것이 많았다 " 대체 객체지향이 뭐지? Java가 객체지향적 언어라는 말은 들어 봤는데 " " 디자인 패턴은 또 뭐야? , 싱글톤? SOLID? " 정말 배워보고 싶고 궁금했다. 그렇다고 Java를 사용해서 Spring을 처음부터 배우기에는 너무 힘들 것이라 판단해 제외.. 2023. 1. 18.
[Instagram-Clone] 시작 2023-01-08 PM 07:52 Start 기획했던 대로 파일부터 나누어 보았다 파일만 나누었을 뿐 내용은 텅 비어있는 껍데기 파일일 뿐이다 (사진으로만 보면 어려울 수도 있으니 Github 주소를 첨부 : https://github.com/juuuuung/Instagram_clone) GitHub - juuuuung/Instagram_clone Contribute to juuuuung/Instagram_clone development by creating an account on GitHub. github.com 로그인/가입 변경 버튼 "이걸 먼저 구현해 두어야 편하지 않을 까?" 하는 생각으로 우선순위 1번으로 정했다 문제들 useState를 사용하여야 겠다고 생각한 뒤 나는 순조롭게 진행해 가고.. 2023. 1. 8.
[Instagram-Clone] 파일 구조 파일 구조 파일 구조에 대해 깊게 생각해 봐야 할 것 같다. 예전에 작은 프로젝트를 진행했을 때도 파일 구조로 인해 프로젝트가 더러워 보이는 것은 물론 내가 진행하는 프로젝트 이지만 알아보기 정말 어려웠다. 저 당시 프로젝트를 끝내고 나서 "다음 프로젝트 때는 많은 시간을 들여서라도 파일 구조에 대하여 확실히 기획하고 가자" 라고 다짐했었다 그것이 지금이다 Atomic Design React로 프로젝트를 하는 사람들이면 한 번쯤은 고민해 본다는 Atomic Design Pattern (이하 Atomic )이다. Atomic은 Componenet를 정말 잘게 쪼개서 하나하나 조립해 가는 방식이다 사진을 보도록 하자 위 사진은 Navigation Bar을 구성하는 요소를 점점 잘게 쪼개 본 것이다 Atom .. 2023. 1. 8.
[Instagram-Clone] 프로젝트를 시작하며 프로젝트의 목적 내가 이 프로젝트를 해보아야겠다 결정한 이유는 " React와 TypeScript, SCSS를 배웠는데 어디에 사용해봐야 하나? "라는 생각에서 시작되었다. 프로젝트의 목적은 1. 당연하게도 프로젝트를 진행하며 React와 TypeScript의 지식을 쌓으려고 한다 2. 이 프로젝트를 하며 React, Typescript의 장단점에 대해서 확실히 하고 각각의 기술이 필요한 상황이 어떤 때인지를 구분해 보려고 한다 3. 내가 과연 얼마나 할 수 있나 테스트하는 목적 또한 존재한다 이렇게 3가지 목적으로 프로젝트를 시작해보려 한다 물론 진행하면서 추가될 수 있다 (●'◡'●) 프로젝트 규칙 1. 모르는 것이 있다면 공식 문서, Stack Over Flow를 보자 (유튜브 X, 블로그 X) 2.. 2023. 1. 7.