JavaScript & TypeScript8 TS와 JAVA에서 OOP를 구현하는 방식의 차이와 아키텍처 공부에 대한 필요성 저는 요즘 객체 지향을 공부할 겸, 겸사겸사 객체 지향의 정수인 자바도 학습하고 있습니다. 그리고 최근 타입스크립트와 OOP(Object-Oriented-Programming) 구조로 이루어진 회사의 코드에 추가 기능을 작업하던 중, 들었던 생각이 있어 이를 공유하고자 합니다. 일단 회사 코드 클래스의 설계는 대략 아래와 같이 하나의 부모 클래스를 여러 자식 클래스가 상속을 받는 구조입니다. Basis 클래스는 해당 클래스에 대한 정보들이 들어있고, DrawBasis 클래스는 Basis 클래스를 참조하며, Basis 클래스 안에 있는 속성을 어떻게 그려야 할 지를 정해주는 클래스입니다. 그리고 DrawBasis 클래스를 여러 자식 클래스들이 상속 받아서 다양한 자식 클래스들을 각각의 속성에 맞게 그려주는.. 2024. 4. 9. console.log를 사용하는 당신의 디버깅은 안녕하신가요? 자바스크립트를 사용하며 개발을 하다 보면, 코드의 실행 상태를 확인하기 위해 console.log()를 사용하여 로깅을 자주 사용합니다. 특히 변수의 값이나 객체의 상태를 확인할 때, 대부분의 개발자(저 포함)는 console.log()를 자주 사용합니다. 그러나 console.log()를 사용하여 객체의 상태를 확인하는 것은 몇 가지 이유로 바람직하지 않을 수 있습니다. 이 글에서는 그 이유와 함께, 제 경험을 예시로 들어, 객체의 상태를 보다 정확하게 확인하기 위한 대안으로 console.table()의 사용을 제안하고자 합니다. console.log의 한계 console.log() 메서드는 자바스크립트 개발에서 가장 흔히 사용되는 디버깅 도구 중 하나 입니다. 변수의 값이나 코드의 실행 결과를 신속.. 2024. 3. 22. 자바스크립트로 모바일 기기(iPad, iPhone) 구분하는 법 최근 다양한 디바이스 및 브라우저에 대한 호환성 작업을 진행하였다. 보통 자바스크릅트로 접속한 디바이스의 정보를 확인하기 위해서는 navigator 내장 객체의 platfom(deprecated 됨..) 혹은 userAgent를 사용한다. 따라서 우선 다음과 같이 코드를 짜서 접속한 디바이스에 대한 정보를 출력해봤다. 위와 같이 platform은 Win32(64여도 32로 출력된다고 한다), userAgent 문자열에도 접속한 디바이스와 브라우저에 대한 정보가 들어가 있는 것을 볼 수 있다. 여기까지는 문제가 없는데, iPad와 Safari를 통해 접속할 시에 userAgent에 대한 정보가 다르게 출력되는 문제가 생긴다. 검색 결과 나는 이 문제를 해결하기 위해서 디바이스의 터치 가능 여부에 따라서 D.. 2023. 9. 22. JSON.parse(), JSON.stringify()가 무엇인지와 왜 쓰는지 문제 상황 & 문제 인식 여느 때와 다름없이 회사의 업무를 보고 있었다. 특정 api에 axios 요청을 한 후, react-query를 이용하여 받아온 res 값을 파싱하여 화면에 띄워주는 일을 하고 있었다. 요청을 정상적으로 보내고 응답도 제대로 와서 점 표기법(Dot notation)을 사용하여 데이터 값에 접근을 하려고 하였다. 그런데 내가 원하는 값으로의 접근이 잘 안되었다. NaN에 해당하는 부분에 원래는 NaN이 아닌 res.data.totalCount라는 숫자가 들어가야 하는데 나의 의도와는 다르게 NaN이 출력되는 모습이다. 원인 분석 처음에는 데이터가 제대로 안 오는 줄 알아서 Postman을 통해 API 응답 데이터를 확인해 보았다. Postman에서도 확인을 해보니 응답 데이터가 객.. 2023. 5. 25. 이전 1 2 다음 728x90
