반응형 고민, 이슈 정리10 좋은 코드에 대한 생각 정리 고민항상 개발하면서 생각하는 공통사항이다.지금보다 깨끗하고 더 나은코드를 작성하고 싶다....그래서 더 나은코드가 뭔데?결국 매번 답을 내리지 못한채 코딩을 이어갔고 조금 더 정성들여 코드를 작성해왔다.이젠 이글을 통해서 내 생각을 정리하고 꾸준히 생각나는대로 업데이트 해보려고 한다.균형있는 개발코드사실 좋은코드, 나은코드라는 것이 정답이 있지는 않다.누군가는 짧고 구동 속도가 빠른코드라면 좋다고 느낄 것이고누군가는 주석이 잘 달려있다면 좋다고 느낄 것이고누군가는 버그가 없다면 좋다고 느낄 수 있다. 내 생각은 다음과 같다. 읽기 쉽고, 유지보수가 용이한가?사용자 편의를 고려했는가?확장이나 업데이트를 고려했는가?안정적이며 예외상황을 최소화 했는가? 이제 하나씩 내용을 정리해보자.읽기 쉽고 유지보수가 용이.. 2025. 4. 14. [JavaScript] Global Locale 다국어 지원하기 개발하던 프로젝트에 다국어를 지원하기로 했다.한, 영, 일 3개국어를 대상으로 하고 기존 Text를 다국어처리 해야하는데...언제 다 바꿀지 부터 막막하다. 처음부터 했으면 좋았을걸... 우선 구현 방식부터 선정해보자. 구현방식1. 직접 모듈 개발 및 텍스트 표현보유한 다국어문서를 JSON으로 파싱-각 뷰, 컴포넌트에서 가져다 쓸수 있게 개발하는 방식장점 - 커스텀이나 유지보수에 용이하고 가볍다.단점 - 개발공수가 발생하며 사용하는 파일에 import를 하거나 글로벌 모듈로 설정해야한다. 2. 라이브러리 사용 (i18n)JSON형식의 파일을 사용해서 i18n 라이브러리로 각 컴포넌트에서 언어 변형장점 - 개발공수가 짧다.단점 - 커스텀이 제한적이다. 결정결국 두가지 방법을 조합해서 다음과 같이 사용하기.. 2025. 4. 11. 프론트엔드 개발자 회고 인생의 첫 회고라는 것을 기록하려고 한다. 단순히 메모나 기록을 넘어서 내가 어떻게 성장하고 있는지 적어보고 싶다. Why? 개발자 가장먼저 어떻게 개발자라는 직업을 가지게 되었는가 컴퓨터, 통신을 전공으로 하는 실업계 고등학교를 나왔지만 프로그래밍을 해본경험은 거의 없었다. 해본것이라곤 전공선생님 코드를 따라하는 정도의 C, Visual basic 정도 하지만 평소에 컴퓨터나 전자제품, 하드웨어, 소프트웨어를 좋아하는 성격이라서 자주 접하기도 했고 관련 영상도 자주 봐왔다. 전향을 결심한 건 '목표가 없다는 것' 그저 삶에 안주하며 발전하지 않고 있다는게 결정적인 이유였다. 주변을 둘러봤을때 누군가는 발전을 위해 공부하고 높은곳에 올라서있고 누군가는 그저 안주한채로 나와 비슷한 위치에 있거나 뒤쳐져 있.. 2023. 12. 27. [해결]moment.js deprecated이슈로 인해 datetime 라이브러리 교체 (feat. day.js) moment.js의 deprecated소식을 접하고 나서 이걸 이제야 알았다니 자존심이 상했다. 그렇지만 그럴 시간이 없어 빠르게 프로젝트가 완성되기 전 교체작업을 진행하려 한다. 원인 느린속도 무거운 용량 가변성 예측이 어려운 디버깅 여러 Datetime 라이브러리들과 비교해보았을때 크게는 3배까지 차이가 날정도로 느린경우도 발생한다. 용량 또한 2배~5배정도는 차이가 있는 것으로 보인다. 사실 가장 큰문제는 mutable이라는 점과 디버깅이 어렵다는 점이다. const now = moment(); console.log('변경 전 now : ',now.toLocaleString()); const targetDay = now.add(10, "day"); console.log('변경 후 now : ',no.. 2023. 8. 29. [해결] Invalid date cross-browsing 날짜객체 에러(크로스 브라우징) 실시간 시계를 표시하는 컴포넌트가 있는 프로젝트를 배포하고 나서 테스트과정에 문제를 발견했다. 프로젝트 특성상 크로스 브라우저를 체크할 필요는 없지만 IOS환경인 safari 브라우저에서 date객체를 사용한 시계, 날짜들이 표시되지 않고 Invalid date가 발생하는 것이다. 발생하는 문제를 파악하기위해 찾아보니 의외로 간단한 문제였고 이는 cross browsing 개발을 할때에 고려해야하는 사항이다. 문제점 chrome에서는 정상작동이며 safari에서만 날짜가 표기되지 않는다. 원인 safari에서는 YYYY.MM.DD형식의 DateFormat을 지원하지 않는다. 즉 date객체에서 포맷을 변경할때 주의해야하는 건데, 기존에는 moment를 사용하여 현재 시각을 받아서 포맷을 바꾸어주는 간단한.. 2023. 8. 24. [해결] Next.js GCP AppEngine 배포 환경변수 분기 Next.js 프로젝트를 완료한 후 배포환경을 설정하던 도중 예상치 못한 난관에 마주했다. Google Cloud Platform의 App Engine을 사용해 배포하는데 문제는 project-dev서비스와 project-prd서비스로 나누어 각각 환경변수를 다르게 사용하려했다. dev서비스에는 .env.development 파일을, prd서비스에는 .env.production파일을 사용하도록 하려는데 지금까지 시도해본 모든 방법, 설정은 모두 한쪽만 다르게 설정해내지 못했다. 내가 생각한 순서도에 따르면 다음과 같다. "scripts": { "dev": "next dev", "lint": "next lint", "start:dev": "APP_ENV=development next start", "sta.. 2023. 8. 11. [해결] 데이터 column-key가 다르다?? (data mapper module) 기존 직장 폐업으로 인한 이직 후 프론트엔드를 전담하게 되었다. 기존 VueJS를 사용하던 프로젝트를 인계받고 소스를 한참 들여다 보던 도중 등골이 오싹하기 시작했다. 같은 의미와 목적을 가진 데이터의 컬럼명 (key)가 다르게 response되는 것이다. 예시 ) response 1 { name : "장준수", age : 29, address : "서울시 강서구 ..." } response 2 { UserName : "장준수", Old : 29, Place : "서울시 강서구 ..." } 맙소사 카멜, 스네이크케이스와 같은 표기법도 다르고 키값이 다른경우가 종종 보이는 것이다. 이유를 살펴보니 현 직장 특성상 기계의 데이터를 실시간으로 받는 서버가 따로 존재해 발생하는 것으로 추정된다. 또 개발초기 코.. 2023. 8. 7. [미해결] React Infinite UpScrolling 웹, 앱에서 무한스크롤이 많이 사용된다. 작업난이도도 쉬운편이고 여러가지 라이브러리나 예재가 많아 구현하는데 문제가 거의 없는편이다. 하지만 이번에 마주친 버그는 스크롤을 위로 올렸을때 과거, 이전목록을 불러오는 UpScrolling이다. 실시간채팅에서 과거 채팅을 불러올때 많이 사용되는데 과거 데이터를 불러오게 되면 위쪽에 추가되고 사용자 화면에 표현되는 데이터는 바뀌면 안된다. 그런데 immutability (불변성)에 의해 문제가 발생하는 것같다. 동작방식 1. UpScroll을 통해서 사용자가 상단근처 또는 상단에 도달했을때 과거 데이터를 불러온다. 2. 다음과같이 채팅메시지리스트를 바꾼다. ...code const [messages,setMessages] = useState([]); ...get.. 2023. 5. 30. 디자인패턴 M-V-VM에 대한 고민 MVVM디자인 패턴으로 개발한지 8개월이 넘어간다. Model - View - View Model로 분기하여 작업해 재사용성을 극대화 할 수 있다. View는 렌더링 Model은 비즈니스 데이터 형식 정의 ViewModel은 View에서 사용되는 데이터들을 관리하게 된다. 그런데 여기서 의문점이 있다. 1. View에서는 State사용을 피해야하는 건지?React Next.js는 아주 간편한 변수관리 State라는게 있다. 예를들면 이런것이다. function Input():ReactElement { const [value, setValue] = useState(''); const handleChangeValue = (e:ChangeEvent) => { const { value } = e.target; .. 2023. 5. 16. [해결] Socket.io 웹뷰 접속지연 재직중인 회사에서 개발중인 프로젝트에 Socket.io를 도입하기로 했다. 서버개발자와 협업하여 크게 어려움 없이 개발하며 Socket.io를 활용한 실시간채팅을 구현해냈다. 그런데 이게 왠걸 Local환경에서 잘만되던게 웹뷰 (하이브리드앱)에서만 접속이 지연되는 것이 아닌가... 원인을 파악해보자. 접속순서는 이렇다. connect -> connection -> joinRoom 먼저 connect는 소켓 서버와 연결을 요청한다. connection은 서버에서 room을 줄 준비가 되었음을 의미한다. connection을 수신하면 joinRoom요청으로 입장과 동시에 메시지, 상대방, 나의정보를 받는다. 발견사항 1 매번 접속지연이 발생하는 것이 아니라 약 3회에 1번꼴로 종종 발생한다. 이것은 사용자에.. 2023. 5. 16. 이전 1 다음 반응형
