728x90 분류 전체보기95 02.12.25[개발일기] 주니어 개발자 협업일기-Next.js, Typescript 1. 커스텀훅을 만들때 특정 프롭스값이 존재할때만 해당 프롭스값을 리턴하고, 만약 없으면 useSWR 활용해서 API 응답값 넘겨주고 싶을때 아래와 같이 작성하자. 바로 useSWR 첫번째 인자에 삼항 연산자를 대입하는 것이다. 이렇게 하면 해당 변수가 만약 프롭스인 경우, 유연하게 커스텀훅을 호출해서 특정 값을 조건에 따라 자식 컴포넌트에 넘겨주는데 편리하다. 만약 특정프롭스 값이 API 응답값의 응답여부에 따라 의존하는 경우에도 유용하게 활용될 수 있는 비즈니스 로직 기법이다. 2025. 2. 12. 08.12.24[개발일기] 주니어 개발자 협업일기-Flutter 1. 박스안에 가로로 2개 이상의 아이템을 넣고 싶을땐 Row안에 Children을 사용해 배열에 넣고 싶은 아이템을 지정해주면 된다.이때 배경색을 지정해주면 현재 컨테이너가 어느정도 너비와 높이를 차지 하고 있는지 한눈에 보기 편하다.Container( width: double.infinity, height: MediaQuery.of(context).size.height, // 현재 화면의 전체 높이를 가져옴 color: Colors.blue, // 배경색 추가 (선택 사항) child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('This container takes up the full heig.. 2024. 8. 13. 03.11.24 Cypress 환경 설정 cypress 설치 // cypress 설치 yarn add cypress --dev // cypress 앱 오픈 yarn e2e-web:dev cypress open cypress.config.js module.exports = { e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, }, }; 2024. 3. 11. 03.04.24 You Don't Know JS 스터디 후기 this는 도대체 어떻게 탄생했을까? 비동기 콜백지옥은 왜 만들어지게 되었나? 이번 글에서는 위 질문에 대한 궁금증을 조금이나마 해소하고 싶은 오랜 꿈이 있었습니다. 이에 열정 가득하고 실력 짱짱한 상우님 그리고 상권님과 함께 'You Don't Know JS'의 this와 프로토타입 및 비동기와 성능에 대한 책을 2023년 8월 29일부터 2024년 2월 14일까지 총 12회에 걸쳐서 스터디 한 내용을 회고하고, 당시 느꼈던 인사이트들을 공유하고자 합니다. 명시적 바인딩이 암시적 바인딩보다 우선순위가 높다. JavaScript에서는 함수를 호출할 때 this 키워드가 해당 함수를 호출한 객체를 참조하도록 설계 되었습니다. 바인딩은 특정 컨텍스트(context) 또는 객체에 함수를 연결하는 과정을 의미합.. 2024. 3. 10. 03.22.23 {BOJ} 10810번 나이계산하기 - node.js 공넣기 🔗 문제 링크 https://www.acmicpc.net/problem/10810 문제 설명 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 들어있지 않으며, 바구니에는 공을 1개만 넣을 수 있다. 도현이는 앞으로 M번 공을 넣으려고 한다. 도현이는 한 번 공을 넣을 때, 공을 넣을 바구니 범위를 정하고, 정한 바구니에 모두 같은 번호가 적혀있는 공을 넣는다. 만약, 바구니에 공이 이미 있는 경우에는 들어있는 공을 빼고, 새로 공을 넣는다. 공을 넣을 바구니는 연속되어 있어야 한다. 공을 어떻게 넣을지가 주어졌을 때, M번 공을 넣은 이후에 각 바구니에.. 2023. 3. 22. 03.08.23{개발일기} debounce 활용 계좌번호 예외처리 UI 성능 최적화하기 서론 2023년 1월 30일부터 3월 7일까지 '오늘의집사'라는 프로덕트를 개발하면서 만났던 개발이슈 중, 마이페이지 계좌관리 기능의 계좌등록 기능을 구현하면서 은행별 계좌번호 입력갯수에 따른 예외처리 이벤트 핸들러 함수가 필요했습니다. 계좌번호 입력시 input 이벤트가 짧은시간 연속적으로 발생하는 상황속에, 은행별 계좌번호 입력칸마다 부족한 숫자 자릿수만큼 'X글자를 입력하세요!'라는 알람 문구를 노출 시켜야하는 요구사항이 있었습니다. 이로인해 계좌번호 입력시 input 이벤트가 과도하게 짧은시간 연속해서 해당 이벤트 핸들러 함수가 호출되므로 서비스 성능에 치명적인 이슈가 발생할 가능성이 다분하여 고민하게 되었습니다. 금번 포스팅에서는 이러한 문제를 어떤 관점으로 접근했고 어떻게 해결하였는지에 관한 .. 2023. 3. 8. 02.15.23{개발일기} CDN 아키텍처 구성 및 활용사례 CDN 아키텍처 정의 CDN(Content Delivery Network) 아키텍처는 사용자의 지리적 위치에 따라 웹 페이지, 이미지, 비디오 및 기타 유형의 파일과 같은 콘텐츠를 사용자에게 전달하기 위해 함께 작동하는 분산 서버 네트워크입니다.CDN의 기본 아이디어는 콘텐츠를 최종 사용자에게 더 가깝게 가져와 콘텐츠가 인터넷을 통해 이동하는 데 필요한 거리를 줄이는 것입니다. 이것은 결과적으로 웹 사이트 또는 애플리케이션의 속도와 성능을 향상시키는 데 도움이 됩니다. CDN 아키텍처는 특히 원본 서버에서 멀리 떨어진 사용자를 위해 웹 애플리케이션 및 웹 사이트의 속도, 성능 및 안정성을 개선하는것을 목표로 설계됩니다. CDN 아키텍처 구성 CDN 아키텍처는 아래와 같은 구성 요소를 가지고 있습니다. 에.. 2023. 2. 15. 02.03.23{개발일기} Object와 Map 바르게 알고 사용하기 서론 Map객체와 Object 객체의 차이는 무엇일까요? 물론 Object와 Map은 둘다 유사하게 getter와 setter 메소드를 갖고 있고, 삭제 및 수정도 가능합니다. 하지만 Map을 사용하는 특별한 이유들이 MDN 공식문서에 잘 설명되어 있음을 확인할 수 있었습니다. 대괄호 표기법의 위험성 Object로 키-값을 관리하면 악성해커의 경우 쉽게 대괄호표기법을 활용해 키와 값을 재정의하여 보안에 취약할 수 있습니다. 무슨 근거로 보안에 취약한지 궁금하여 관련내용을 MDN에서 더 찾아보았는데, 이를 이해하기 위해선 먼저 Object 키에 접근하는 대괄호 표기법과 점표기법의 기능 차이부터 짚고 넘어가야 했습니다. 대괄호 표기법 vs 점표기법 '점표기법'은 변수로 특정 프로퍼티 값을 수정 불가능하지만,.. 2023. 2. 4. 01.15.23{개발일기} 가비아에서 구매한 개별 도메인 netlify에 배포 자동화 셋팅 및 HTTPS 도메인 인증 개요 DNS 구성 요소 및 네임서버에 대한 개념없이 그저 강의에서 알려주는 대로 따라 셋팅 했을 때 초기 배포엔 문제가 없었습니다. Netlify에서 제공해주는 도메인이 아닌 가비아 DNS 호스팅 서비스에서 구매한 도메인 주소를 Netlify 네임 서버로 연결 시도했을 때, 해당 도메인 주소로 호스팅 서비스 연결이 안되었을 뿐만 아니라, 기존에 배포했던 도메인 주소로 자동 배포까지도 작동이 안되었습니다. 해당 문제를 해결하는 과정에서 알게 된 내용을 기록하고자 본 포스팅을 작성하게 되었습니다. 해당글은 2023년 1월 15일에 초안이 작성되고 1월20일 기준으로 최종 작성완료 된 글이기에, 이 글을 읽으시는 시점이 많이 최근이 아닌 경우, netlify 서비스 UI 및 호스팅 정책이 변경 될 수 있는 점.. 2023. 1. 15. 01.11.23{개발일기}onerror와 addEventListener 둘 중 어느것이 더 나은가? AddEventListener와 onerror 용도 차이 고민 계기 image 태그에 src 속성값을 불러 올 때 404 에러 예외처리가 필요했고, 대체 이미지를 설정하는 과정에서 error이벤트 리스너를 통해 대체 이미지 주소로 src 속성값 핸들링이 필요했습니다. MDN으로 error event handler를 검색해보았을 때 크게 2가지 방식이 정의 되어 있음을 확인할 수 있었습니다. 첫번째 방식은 Element.addEventListener의 첫번째 파라미터 값에 'error'라는 이벤트를 넣고 콜백함수를 실행하는 방식이었습니다. element.addEventListener('error', function() { /* do stuff here*/ }); 다른 하나는 onerror 라는 이벤트 핸들.. 2023. 1. 11. 이전 1 2 3 4 ··· 10 다음 728x90
