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 JWT? 내가 설명하면 말이 길어질 수 있으니 정말 좋은 글을 찾아 왔다. [Server] JWT(Json Web Token)란? 현대 웹서비스에서는 토큰을 사용하여 사용자들의 인증 작업을 처리하는 것이 가장 좋은 방법이다. 이번에는 토큰 기반의 인증 시스템에서 주로 사용하는 JWT(Json Web Token)에 대해 알아보도록 하 mangkyu.tistory.com jwt에 대해서..

난 무얼 했는 가? 프런트엔드 작업을 다 끝내고 이제 백엔드를 해보려고 보니 나의 귀가 팔랑 거리기 시작했다. 예전에 써본 Express를 쓰는 것이 맞는 것일까? 아니면 TypeScript를 배웠으니 Nest.js(이하 Nest)를 쓰는 것이 맞는 선택일까? 결론을 먼저 말하면 Nest를 선택했다, 그 이유는 새로운 것을 배워보고 싶어서 이다. 정말 간단한 말이지만 그 안에는 많은 것이 내포 되었있다. 객체지향 (OOP)에 대해 궁금한 것이 많았다 " 대체 객체지향이 뭐지? Java가 객체지향적 언어라는 말은 들어 봤는데 " " 디자인 패턴은 또 뭐야? , 싱글톤? SOLID? " 정말 배워보고 싶고 궁금했다. 그렇다고 Java를 사용해서 Spring을 처음부터 배우기에는 너무 힘들 것이라 판단해 제외..

2023-01-11 PM 11:31 내가 이것을 하는 이유: 나의 현재 실력을 알고 성장하기 위해 3일 만에 최근에 글을 쓴 것이 벌써 3일 전이라는 것에 놀랐다. 분명 사이사이의 기억이 있지만 지금 생각해 보면 마치 꿈속에서의 일 같다. 글을 쓰지 않는 동안 Login Component와 Sign Component를 꾸몄다 결과 먼저 ( "인스타"라고 적혀있는 부분은 저작권 문제가 있지 않을까 해서 글로 적어 놓았다 ) 최대한 똑같이 만들어 보려 노력하였지만, 역시나 어려웠다 scss 파일은 계속해서 더러워 지고 깔끔히 해보겠다고 노력은 하지만 어떻게 정리를 해야 할지 모르겠고 해서 일단은 "일단 정리는 나중에, 다 끝내고 해 보자 "라는 마인드로 깔끔하게 머리에서 잊고 똑같이 만드는 것에만 집중했다 ..

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-01-08 PM 01:20 로그인 화면 기획 가입하기를 누르면 제자리에서 옆 이미지와 Input만 늘어난다 Login컴포넌트와 SIgn Up 컴포넌트로 나눠야 할 것 같다. Components 파일 구조 기본 적인 파일 구조는 이렇게 가져가야 할 것 같다 (●'◡'●)! 라고 말하는 순간 나의 머릿속에 한가지 섬뜩한 생각이 스쳐 지나간다 "Style은 어디에 저장 하지 (＃°Д°)?" 1. Module.css 를 사용하여 컴포넌트 각각에 파일을 추가하여 관리한다 2. Page 폴더에서 한 번에 관리한다 3. Molecules에서 각각 단위의 Layout 마다 관리하기 4. Organisms 폴더에서 각 폴더마다 관리한다 3번으로 결정했다

파일 구조 파일 구조에 대해 깊게 생각해 봐야 할 것 같다. 예전에 작은 프로젝트를 진행했을 때도 파일 구조로 인해 프로젝트가 더러워 보이는 것은 물론 내가 진행하는 프로젝트 이지만 알아보기 정말 어려웠다. 저 당시 프로젝트를 끝내고 나서 "다음 프로젝트 때는 많은 시간을 들여서라도 파일 구조에 대하여 확실히 기획하고 가자" 라고 다짐했었다 그것이 지금이다 Atomic Design React로 프로젝트를 하는 사람들이면 한 번쯤은 고민해 본다는 Atomic Design Pattern (이하 Atomic )이다. Atomic은 Componenet를 정말 잘게 쪼개서 하나하나 조립해 가는 방식이다 사진을 보도록 하자 위 사진은 Navigation Bar을 구성하는 요소를 점점 잘게 쪼개 본 것이다 Atom ..

React를 선택한 이유 1. Component를 나누어 개발 할 수 있어 UI를 관리하기 편하다. 2. Virtual DOM 을 사용 (사실 React만 사용 하는건 아니긴 하지만 그냥 넣었다) (https://velopert.com/3236) 3. 방대한 커뮤니티 4. 가비지 컬랙터, 메모리 관리 기능을 지원 5. UI 수정과 재상용성이 좋음 6. 확장성이 좋음 Instagram 클론 코딩을 하며 React의 장단점을 확실히 하려고 한다 프로젝트를 끝내고 Svelte와 Rxjs에 대해 알아 보고 React와 비교해 보고 싶다 TypeScript를 선택한 이유 1. Type이 생겨 컴파일 하기전 오류를 알 아낼 확률을 높여준다 2. 커뮤니티가 방대하다 3. 큰 프로젝트에 필수불가결한 존재 4. 확장성이..

프로젝트의 목적 내가 이 프로젝트를 해보아야겠다 결정한 이유는 " React와 TypeScript, SCSS를 배웠는데 어디에 사용해봐야 하나? "라는 생각에서 시작되었다. 프로젝트의 목적은 1. 당연하게도 프로젝트를 진행하며 React와 TypeScript의 지식을 쌓으려고 한다 2. 이 프로젝트를 하며 React, Typescript의 장단점에 대해서 확실히 하고 각각의 기술이 필요한 상황이 어떤 때인지를 구분해 보려고 한다 3. 내가 과연 얼마나 할 수 있나 테스트하는 목적 또한 존재한다 이렇게 3가지 목적으로 프로젝트를 시작해보려 한다 물론 진행하면서 추가될 수 있다 (●'◡'●) 프로젝트 규칙 1. 모르는 것이 있다면 공식 문서, Stack Over Flow를 보자 (유튜브 X, 블로그 X) 2..