프로그래밍/REACT4 React로 카페 만들기 프로젝트 (3) 서론 이번 프로젝트의 핵심은 뭐니뭐니해도 Typescript라고 생각한다. 깃허브를 뒤지면서 다른 사람의 Typescript 코드를 본적이 있는데 확실히 Javascript랑은 확연히 달랐다. 근본적인건 똑같지만 좀 더 모듈화에 초점을 맞춘 느낌이 들었다고 해야하나? 들어오는 값의 타입과 나가는 값의 타입을 명시하는 것 때문에 정말 함수가 하나의 출입관리국처럼 보였기 때문일지도 모르겠다. 내가 지난번에 Typescript로 카카오톡 클론을 만들었지만 솔직히 그건 상당히 죽쑨 코드가 됐다고 생각하고.. 그걸 반성해서 이번에는 Typescript의 Interface 기능을 좀 더 잘 살려보겠다는 마음가짐으로 개발에 임했다. Interface란 Typescript에서 타입 체크를 위해 사용되는 기능이다. "자.. 2021. 10. 30. REACT로 카페 만들기 프로젝트 (2) 서론 이번 프로젝트는 부트스트랩을 사용했다. 부트스트랩은 좀 더 편하게 스타일을 꾸미고 싶을 때 사용한다. 아니, 스타일을 꾸민다기보단 보편화 되어 있는 기능을 편하게 구현하고 싶을 때도 사용한다. 골치아픈 드랍다운 버튼이라던가 말이다. 나는 처음부터 CSS로 전부 구현하는 게 싫어서 부트스트랩을 사용했다. 부트스트랩으로 이미 완성된 컴포넌트를 불러와서 그걸 조금씩 수정하는 게 훨씬 간편하다. 다만 아닌 경우도 있다. 버튼 같은 경우에는 부트스트랩에서 불러오면 워낙 적용된 효과가 많기 때문에 사용자가 색깔을 바꾸는 것조차 쉽지 않다. 적당히 때를 잘 보고 쓸 줄 알아야 한단 소리다. REACT의 부트스트랩 일반적인 자바스크립트 프로젝트에서 부트스트랩을 사용하는 방법과 리액트 프로젝트에서 부트스트랩을 사용.. 2021. 10. 4. REACT로 카페 만들기 프로젝트 (1) 오랜만에 글을 쓴다. 저번에 타입스크립트만으로 카카오톡 클론을 구현해봤는데 프레임워크 없이 하려니까 너무 힘들었다. 그래서 이번에는 프레임워크도 같이 사용해서 그럴싸한 결과물을 만들어보는 걸 목표로했다. 하지만 파이어베이스는 사용하지 않기로 한다. 편리한 만큼 단점도 있고, 무엇보다 서버사이드도 내 손으로 직접 만들어보고 싶기 때문이다. 작업은 현재 중반까지 왔다. 작업을 진행하면서 의도치 않던 상황에 종종 맞닦뜨려 당황했지만 큰 무리 없이 잘 해내온 것 같다. 여전히 초보자의 티를 벗어나지 못하는 작품이지만 나름 만족한다. 사용한 기술은 다음과 같다. React Typescript Bootstrap Express Mongo DB Redux Saga Ckeditor 이 외에는 자질구레한 것들이라 굳이 언.. 2021. 9. 24. 리액트용 부트스트랩 리액트에서 부트스트랩을 사용하는 방법은 import로 불러와서 컴포넌트를 사용한다. 그래서 기존의 부트스트랩과는 사용 방법도 다른만큼 어느정도의 기능의 차이도 있을 거라고 생각한다. 나는 부트스트랩에 대해서 잘 모르기 때문에 답답해서 어떤 기능이 있나 한 번 찾아봤다. 공식 홈페이지의 문서를 참조해서 그냥 이런게 있다 라는 것만 적어봤다. 레이 아웃 문서 내에서 컴포넌트로 분류되지는 않지만 부트스트랩은 레이아웃 기능을 제공합니다. 이 레이아웃은 반응형 flexbox로 만들어졌습니다. Container -> width에 반응형을 준 컨테이너 레이아웃을 사용할 수 있습니다. 가운데로 정렬된 수평의 컨텐츠를 보여주는 데 용이합니다. Fluid Container -> 가로의 해상도에 상관없이 항상 100%의 w.. 2021. 9. 11. 이전 1 다음
