본문 바로가기

전체 글122

CRA로 구축한 프로젝트에 TS 적용하기 이번 프로젝트에서 React + TS 를 쓰자고 했는데 초기세팅을 TS를 안넣고 CRA를 해버렸다 ㅜㅜ 그래서 다시 TS로 바꿔주는 작업을 해야했고 생각보다 간단하게 되어서 정리해보려고 한다. 방법 1 : CRA할 때 TS 설정하기 아직 CRA를 안했다면 아주 간단하게 TS로 시작할 수 있다. 물론 나는 CRA 이후에 TS로 바꿔주는 작업을 해야했지만 ㅜㅜ 아래 코드를 차례대로 실행하면 된다. 아래 코드를 실행 후 // CRA 실행 $ npm install craete-react-app // TS로 초기세팅 $ npx create-react-app [프로젝트 폴더명] --template typescript $ npm install --save typescript @types/node @types/reac.. 2023. 9. 29.
Array.from 이용해서 새로운 배열로 별점 생성하기 삼항연산자로 후기가 없을 경우 처리하기 이번 포스팅에서는 유저에게 이미 적힌 리뷰들을 볼 수 있는 리뷰 리스트를 구현해보도록 하자. 먼저 후기가 하나도 없는 유저라면 배열로 오는 데이터의 길이가 0일 것이기 때문에 그에 해당하면 후기가 없다는 것을 삼항연산자를 통해 보여주었다. {reviewData.length === 0 ? ( 아직 후기가 없습니다. ) : ( 후기 있는 경우 ) } new Array로 숫자를 별점 아이콘으로 만들기 후기가 있는 경우 백엔드에게 받아오는 후기의 평점는 양의 정수였는데 이 데이터를 별 아이콘으로 보여지도록 가공해야했다. 방법을 찾는 중에 멘토님께서 new Array()라는 것을 알려주셨고, new Array(숫자)를 넣어주면 숫자만큼의 길이를 가진 배열을 생성할 수 있었다.. 2023. 9. 24.
기업협업 프로젝트 회고록 1. About this project 개발기간: 2023.07.31 ~ 2023.08.24 회사 보안상 의사코드로 대체 1. 컴포넌트 생성 위해 새로운 tsx 파일 및 css 파일 생성 //컴포넌트 불러올 파일 1. 스크린샷으로 만들 컴포넌트에 ref 전달 2. 스크린샷을 만드는 함수에 만들어진 썸네일을 useState에 저장 3. 썸네일 보여 줄 컴포넌트에 썸네일 전달 //스크린샷으로 만들 컴포넌트 파일 1. 라이브러리 사용하려고 만든 custom hook import 2. 부모에게 props 받아오기 3. 스크린샷용 ref 선언 후 이미지화해야할 부분에 적용 4. import 해온 custom hook를 통해 라이브러리 사용 5. forwardRef 사용해 컴포넌트 export 1-1. 기업의 PE.. 2023. 9. 10.
[기업협업] 4주차 회고록 위코드의 마지막 과정, 기업 협업 종료 나름대로 다사다난했던 기업협업이 종료됐다. 알고 있었고 사용하고 있었던 것이더라도 현업에서 실제로 어떻게 사용되고 있는지 직접 보고 경험할 수 있었던 부분이 기업 협업의 제일 큰 장점이라고 생각한다. 특히 학원에서는 github main branch로만 push를 해왔는데 현업에서는 그럴 일이 거의 없다는 것이 사소하지만 배운 것 중 중요했던 것 top 10 안에 들어가는 것 같다. 학원에서도 많이 부족하다고는 느꼈지만 현업에 나오니 정말 많이 부족하다는 것을 깨달았다. A가 안된다고 B도 안될 이유는 없다 dom-to-image 라이브러리를 사용하면서 정말 많은 에러들을 만났다. 매주 새로운 에러를 만났고 그러다보니 회고록에도 매번 dom-to-image 라이브러.. 2023. 8. 31.
[기업협업] 3주차 회고록 내가 이걸 건들여도 되는건가? 역시나 이번주도 dom-to-image에서 에러가 생겼다. 여태 작업한 파일들은 이미지 경로가 한종류였는데 이번주에 작업한 이미지들은 경로가 2종류였고 각각 필요한 속성이 달라서 생기는 에러였다. 여러 이미지 중 유일하게 경로가 달랐던 이미지의 경로를 일치하는 방향으로 에러를 해결하기로 결정했다. 그래서 학원에서 해봤던 이미지를 s3로 올리는 과정이 필요했다. 회사의 파일이 각각의 기능에 맞게 정리가 아주 잘 되어있는 편이었는데 내가 해야하는 일은 파일을 3-4개 정도를 건들여야했다. 혹시나 잘못 건들일까봐 제일 신중하게 작업했던 것 같다. 물론 잘못하면 뒤로 돌리면 되지만..막상 할때는 그런 생각이 안 든다. 미리미리 조심조심 신중하게 작업하려고 노력했던 것 같다. 심지어.. 2023. 8. 30.
custom hook 제작해 리뷰 점수를 별점으로 만들기 이번 프로젝트에서 기능을 좀 더 고도화를 해볼까 하고 도전한 것이 별점이다. 처음에는 그냥 숫자로 나타내려고 하다가 아이콘도 써보고 싶고 별점을 구현해보고 싶어서 고민을 하다가 도전을 해보았다. 사실 그냥 숫자보다 별모양이 더 이쁘니까 ㅎㅎ //custom hook 및 style이라고 적혀있는 코드 외에는 모두 별점이 있는 컴포넌트에서 작업했다. 아이콘 선택 svg를 쓸지 뭘 쓸지 고민을 하다가 폰트어썸을 쓰기로 결정을 했고 그 중 fastar, solid를 기본으로 진행하였다. 사실 초기엔 빈 별에서 꽉 찬 별로 진행하고 싶었는데 두개를 import 해오는게 안돼서 꽉찬별의 색을 바꿔주기로 했다. import { FontAwesomeIcon } from '@fortawesome/react-fontawe.. 2023. 8. 23.

티스토리툴바