RoseDevlog

Frontend

0. 어느덧 개발을 시작한지도 4년이 다되어간다 ..!  마침 프로젝트가 끝난 김에 이번 블로그에서는 코드리뷰를 할때나 PR을 쓸 때 나왔었던 이야기들, 동아리 세미나 시간에 도움이 되었던 조언들 그리고 현재 하고 있는 고민들과 나름대로 효과있었던 방법들을 정리해보았다.   1. 코드 가독성 향상1. 네이밍변수/함수: camelCase 사용컴포넌트: PascalCase 사용 2. 단어 선택일반적인 단어를 구체적인 단어로 대체비슷해보이지만 다른 의미를 갖는 단어를 구분  2. Styled Components 파일 구성1. 컴포넌트 파일에 Styled-Components가 너무 많아져서 복잡해질 때,무조건 styled.ts 파일을 따로 만드는 것보다 작은 컴포넌트로 분리하는 방향  3. 컴포넌트 구조 설..

2025. 2. 19.

Frontend/프론트엔드

0. 작업에 앞서 클로바 사이트의 프론트엔드 개발이 마무리 되면서 1년 동안 피땀눈물이 섞인 졸업프로젝트도 이제 끝을 향해가고 있다 ... !! 클로바 사이트는 React로 개발을 했다 이번 블로그에서는 개발 이후의 단계인 1) Vercel 배포, 2) 커스텀 도메인을 붙이기, 3) 개발(dev/테스트) 환경과 운영 환경을 분리하여 배포하기까지의 여정을 소개하려 한다  1. 개발 환경 vs 운영 환경1. Git Flow 전략개발은 develop 브랜치에서 분기하여 페이지별(또는 기능별)로 진행기능이 구현 되면 → develop 브랜치로 머지  main 브랜치는 qa까지 마무리되면 develop에서 최종 머지를 한다 개발 환경develop 에서 분기 되는 배포 사이트 다음 release의 기능들 및 수정 ..

2024. 11. 13.

Frontend/기능 구현

const [isFile, setIsFile] = useState(null); /* 사진 업로드 */ const fileInputRef = useRef(null); const navigate = useNavigate(); function saveFile(imageFile: File[]) { setIsFile(imageFile); // setUploadLocation(true); navigate("/upload"); } function handleAddPicBtn() { fileInputRef.current && fileInputRef.current.click(); } function handleFileInputChange(e: React.ChangeEvent) { ..

2024. 7. 18.

Frontend/프론트엔드

아키텍처 내부 개발 오픈소스 https://medium.com/@mergingkr/%EB%B2%A8%EB%A1%9C%ED%8D%BC%ED%8A%B8%EB%8B%98%EC%9D%B4-%EB%93%A4%EB%A0%A4%EC%A3%BC%EB%8A%94-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%84%B1%EC%9E%A5-%EC%9D%B4%EC%95%BC%EA%B8%B0-4af11fbbf372 벨로퍼트님이 들려주는 개발자 성장 이야기 의 열여덟번째 개발자 인터뷰로, 오늘은 벨로퍼트, 김민준님의 이야기를 전해드리려 합니다. medium.com 조직의 성과는 어떤 요소에 영향을 받을까 ? 실험의 횟수 새로운 실험을 하는 횟수에 무조건 비례 고객이 어떤 것을 사랑할 지 예상하지 말고 테스트하자 마이크로..

2024. 4. 2.

Frontend/프론트엔드

왜 내 서비스는 느릴까 ? 개발환경 : fast, trusted 배포환경 : slow, untrusted 이미지 최적화 Image Sprite : www.toptal.com/ We connect expertly vetted talent with world-class clients. Learn why the top companies trust Toptal. www.toptal.com Image File Format JPEG : 사진이나 예술품 이미지 손상 PNG : 디지털 크리에이티드 AI Generated 이미지 압축 시 큰 용량 차지 WEBP : 브라우저 제한 SVG : 아이콘 사용 시 좋다 js로 포맷하여 사용 가능하다 백엔드에게 여유가 있다면 ? CDN : Content Deleivery Netwo..

2024. 3. 31.

Frontend/회고용👧🏻🐥😶

const [comment, setComment] = useState('') comment를 갱신할 수 있는 setComment도 함께 넘겨주려 했다. 그런데 넘겨 받은 곳에서 setComment의 타입을 일반 함수처럼 아래와 같이 정의했더니 자꾸 에러가 났다 interface InModalPropsTypes { setComment: (v:boolean)=>void; } 알고보니 useState 상태변경 함수 setComment는 아래처럼 해줘야 했던 것 interface InModalPropsTypes { setComment: React.Dispatch; } export default function MyPageModal(props: InModalPropsTypes) { const {setComment..

2023. 11. 28.

Frontend/회고용👧🏻🐥😶

1. extension 설치 확인 2. 설정 > Format on Save 체크 3. 설정 > Default Formatter : Code Formatter 2,3안해도 보통 cmd+s하면 되는 것 같다

2023. 11. 28.

Frontend/회고용👧🏻🐥😶

setting.json에 코드 추가 "editor.codeActionsOnSave": { "source.fixAll.stylelint": true, // stylelint 자동 수정 "source.fixAll.eslint": true // eslint 자동 수정 }, "stylelint.enable": true, "stylelint.config": null, "css.validate": false, "less.validate": false, "scss.validate": false, "stylelint.validate": [ "css", "scss", "postcss", "typescript", "typescriptreact" ], "stylelint.configFile": ".stylelintrc.js..

2023. 11. 28.