더 알아보기/팁24 [React] useState를 선언할 때 let이 아닌 const를 사용하는 이유 강의를 듣다가 useState를 선언할 때 왜 let이 아닌 const를 사용하는지에 대한 의문이 생겼고, 강의 내용을 쓸 수 없기 때문에 구글링을 통해서 클로저에 대한 부가적인 이해 및 관련 글을 읽게 되었다. hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com 위 두 글을 정독하게 되었는 데 useState를 함수 뜯어보았을 대략적으로나마 어떤 방식으로 hook이 작동되는지 알 수 있었고 그 과정 속에서 클로저의 역할을 이해하게 되었는 데 (이해.. 2024. 4. 3. if문/switch문을 mapping(key, value) 관계로 변경하여 코드 줄이기 (출처👏) 현재 진행 중인 프로젝트에 바로 적용할 수 있으면서 클린 한 코드를 만들 수 있는 방법을 찾던 중 위 영상을 보게 되었는 데 나뿐만 아니라 많은 사람들에게 도움이 될 것 같고 알았으면 좋겠어서 적용한 예시를 정리해보았다! (미래에 나에게 매우 큰 도움이 될 것 같다.) const backMap = { A: 'a', B: 'b', C: 'c', }; const backHandler = () => { console.log(backMap[path]); } const backMap = { A: () => { console.log("A"); }, B: () => { console.log("B"); }, C: () => { console.log("C"); } }; const backHandler = ().. 2022. 10. 31. next/image를 활용한 이미지 최적화 우연히 아래 글을 보게 되었는 데 지금 진행하고 있는 프로젝트가 Next.js라서 적용해보면 좋을 것 같았다. Next/Image를 활용한 이미지 최적화 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 지금 진행하고 있는 프로젝트에서 가끔씩 이미지가 제각각으로 로딩되는 부분이 신경 쓰였는 데 이 글을 통해 많은 도움을 받았다. Next/Image 컴포넌트의 기능은 크게 3가지라고 하는 데 - lazy loading : 이미지 로드 시점을 이미지가 필요할 때까지 지연 시키는 기술 - 이미지 사이즈 최적화 : 스테이지에서는 기존 표시되는 영역에 비해 5배 큰 이미지를 로드하고 있어 Next/Image는 디바이스 크기 별로 srcSet을 미리 정해두고, 사용자의 디바이스에 맞.. 2022. 8. 3. power mode + background 익스텐션 써보기 코드 치는 맛이 없어서 역동적인 익스텐션을 찾던 중에 power mode와 background를 섞어 보았다. vscode 에디터에서 ctrl + shift + x를 누르거나 확장 아이콘을 눌러서 각 익스텐션을 설치 해주고 Power Mode - Visual Studio Marketplace Extension for Visual Studio Code - Your code is powerful, unleash it! The extension made popular by Code in the Dark has finally made its way to VS Code. marketplace.visualstudio.com background - Visual Studio Marketplace Extension fo.. 2022. 7. 12. VSCode > 프로젝트 트리 구조 출력하기 프로젝트 파일이 많아지면서 이걸 어떻게 문서로 작성해야 깔끔하고 보기 좋을까 고민을 하던 중 트리 구조라도 나눠 볼까 싶어졌다. 찾고 찾다가 아래 블로그에서 답을 찾았다. 👀 나의 프로젝트 구성을 한 눈에? 프로젝트 README 작성 중.. 2020년 프로젝트들의 README를 작성 중... 파일 설명에 대한 고찰이 생겼다. velog.io 두 가지 방법을 알려 주시는 데 미래에 내가 다시 봐도 이해하기 쉬워야 하기 때문에 나 나름대로 정리해보았다. 첫 번째 방법 : CMD를 통해 파일 트리를 작성할 수 있다. CMD를 켠다. 트리 구조를 출력하고 싶은 프로젝트 경로를 복사한다. (이 과정이 조금 헷갈렸는 데 알고 나면 매우 쉽다.) (파일 탐색기 → 프로젝트 폴더 → 경로 복사) 복사한 경로를 CMD에.. 2022. 5. 11. 404 페이지 템플릿 사용법 1) 구글에 404 페이지 템플릿 검색 → 아래 사이트의 무료 템플릿 활용 Colorlib Error 404 V12 A modern, engaging and easy-to-use free crying emoji error page template with a responsive structure and home button. colorlib.com 2) 사용하고 있는 이메일로 구독해서 템플릿 다운 받음 3) img, css, html 폴더 안에 있는 코드들을 Next.js에 맞게 변형 시킴 44 죄송합니다... 원하시는 페이지를 찾지 못했습니다. 홈페이지 바로가기 /* 404 페이지 css */ * { -webkit-box-sizing: border-box; box-sizing: border-box; }.. 2022. 3. 8. console console.log() console.table() : 객체(Object), 배열(Array) 같은 값들을 보기 좋게 시각적으로 표시 해주는 기능 (객체나 배열을 찍을 때 유용한 기능) console.log() 사용 시 console.table() 사용 시 console.count() : console이 몇번 출력 되었는 지 직관적으로 보여주는 기능 위와 같은 스크립트가 있다고 했을 때 fetchUsers() 함수처럼 여러번 호출되는 함수가 있을 경우 몇번이나 호출 되는 지 계산하는 경우가 있다. 이때, console.log()를 이용하여 확인 할 수 있지만 console.count()를 이용하면 더 효율적이다. console.log() 일 때 console.count() 일 때 위 코드에 consol.. 2022. 2. 15. JPEG vs WebP vs AVIF 이미지를 3배수로 뽑아 오다 보니 파일 용량이 너무 커져서 webP를 사용하여 이미지를 하는 방식을 사용 하였다. 결과적으로 이미지 용량이 4배 정도 줄어 들었다. 2022. 1. 24. 코딩 잘하는 팁 3가지(DRY, KISS, YAGNI) 코드 리뷰 시 자주 등장하는 세가지 용어를 통해 더러운 코드를 깨끗하게 만드는 방법을 알아보자!! 1. DRY (Dont't Repeat Yourself) → "반복하지 마라"의 약자입니다. 상반대는 개념에는 WET이 있습니다. 1) Write Every Time → "매번 작성하고" 2) Write Everything Twice → "모든 걸 두번씩 작성하고" 3) Waste Everyone's time → "결국 모든 사람들의 시간을 낭비하는 방식"을 말합니다. DRY는 특정한 지식, 의도, 로직 등이 다양한 곳에서 다양한 방식으로 계속 반복 되어지는 것을 피하자 반복하지 마라!의 원칙입니다. 시스템 내에서 특정한 지식과 로직은 단 한 곳에서 명확하고 신뢰 할 수 있도록 존재 해야 합니다. 코드를 바.. 2022. 1. 9. 이전 1 2 3 다음 728x90
