목록Javascript (110)

내맘대로 개발일지

[NextJS] Syled-components 사용하는 방법

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^5.1.6"😢 내가 겪은 문제개발환경 ( http ) 에서는 문제가 없었는데 배포환경 ( https ) 에서는 한번씩 디자인이 깨졌다.아니면 새로고침 했을 때 디자인이 깨져있다가 원상복구되는 현상을 겪었었다.해결방법을 찾아보니, .babelrc 를 이용하여 해결하는 방법은 되게 많이 설명되었는데, NextJS 11 버전부터는 비권장 하는 방법이다.그래서 열심히 정보를 찾아봐서 하는 방법을 찾아서 기록해두려고 한다. 언제나 복사 + 붙여넣기 하면 사용할 수 있도록.먼저 stlyed-components 를 추가해준다. 나는 NextJS + Typescript 환경이니까 설치npm install @..
Javascript/Next 2023. 8. 17. 00:19
[NextJS] NextJS 모바일 시스템공유 하는방법

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 이 코드는 정말 많이 사용하는 것 같다 .. 아무래도 모바일 대응을 하다보면 공유하기 버튼을 클릭 했을 때 시스템 공유 모달이 열리게 하고 싶은 경우가 많아서 그렇다. 그래서 언제든지 꺼내사용할 수 있도록 여기에 기록하려고 한다 . 언제나 똑같이 복사 + 붙여넣기 하면 바로 사용할 수 있도록 .. 개발을 못하는 나를 위해 복붙은 언제나 중요한 것 같다 ^^ share.tsx export const testShare = () => { const baseUrl = window.location.origin; const url = new URL("/", baseUrl..
Javascript/Next 2023. 8. 17. 00:09
[NextJS] 이미지 다운로드 하는 방법

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 모듈화가 중요하다는 말을 참 많이듣는것같다. 전부 함수화 해서 모듈화 해서 사용하고 있는데 이미지를 다운로드 하는 일은 많을 것 같아서 해당 함수를 여기에 기록해두려고 한다. 언제든지 복사해놓고 사용 할 수 있도록 코드를 넣어놓도록 해야겠다. downloadImage.tsx export const downloadImage = ( imageUrl: RequestInfo | URL, fileName: string ) => { // 이미지를 불러와서 Blob 객체 생성 fetch(imageUrl) .then((response) => response.blob()) ...
Javascript/Next 2023. 8. 17. 00:04
[NextJS] SSR 방식이 뜨는 이유, 그중 NextJS

😢 내가 겪은 문제 원래는 작년까지만 해도 ReactJS 개발을 했었다. 하지만 SEO 의 중요함을 깨닫고 SSR 개발을 진행하려고 했다. 그중 React 기반의 NextJS 를 알게 돼었고, 지금까지 NextJS 개발을 이어오고 있다. 요즘엔 SEO 의 중요성이 강조되면서 같이 SSR 프레임워크가 인기가 같이 높아지고있다고 한다. 그래서 SSR 의 인기가 많아지는 이유를 여러 방면에서 살펴 보려고 한다. 다음과 같은 이유가 있다고 한다. SEO (Search Engine Optimization) 개선 : 검색 엔진은 페이지의 내용을 수집하고 인덱싱하는데 HTML 내용을 기반으로 작업한다. CSR (Client-Side Rendering)의 경우 초기 로딩 시에는 빈 페이지가 보여지고 JavaScript..
Javascript/Next 2023. 8. 17. 00:00
[React] ReactJS 가 인기가 많은 이유

😢 내가 겪은 문제 나는 원래 Spring JAVA 개발을 했다. 짝꿍인 jQuery 와 함께 웹 프론트 개발을 처음 시작했었다. 대한민국은 자바 공화국이라 스프링만 할줄 알아도 밥굶을일은 없다고 들었다. 근데 React 가 프론트 개발에서 엄청난 인기를 받고 있다고 해서 궁금했다. React 는 어떤 강점이 있는지 간단하게 확인해보고 이런게 있구나 ~ 하고 내가 쓰는 React 가 어떤 강점이 있는지 확인해보려고 한다. 가상 DOM (Virtual DOM): React는 가상 DOM을 사용하여 효율적으로 UI를 업데이트할 수 있다. 단방향 데이터 흐름: React는 단방향 데이터 흐름을 지원한다. 이로 인해 데이터의 흐름을 예측 가능하고 관리하기 쉽게 만든다. 컴포넌트 기반 아키텍처: React는 컴포..
Javascript/React 2023. 8. 16. 23:40
[NextJS] Syled-components props 전달 하는 방법

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 React 로 개발할 때는 그냥 props 전달해주면 바로바로 사용할 수 있었던 것 같은데 .. Nextjs + Typescript 로 개발하려니 props 가 전달이 안된다 .. 계속 없는 오버러드라고 사용할 수가 없단다. 난 정말 타입스크립트가 너무 어렵다 .. ㅠ width: ${(props) => props.similarPercentage}%; 해서 해결방법은 인터페이스를 만들고 사용하는 방법이다. 생각보다 간단하긴 한데 타입스크립트를 알고 쓰기 위해서는 많은 공부가 필요할 것 같다 .. 해당 코드는 % 막대기를 만들면서 작성한 코드이다. export ..
Javascript/Next 2023. 8. 16. 17:37
이전 Prev 1 ··· 15 16 17 18 19 Next 다음