본문 바로가기

전체 글

IT관련/NextJS 2022. 5. 19.
Next js에서는 a태그대신에 Link태그를 사용하자 ! 안녕하세요 ! 이번에는 Next JS에서는 Link태그에 대해서 ! 또한 단순히 a태그를 이용하면 안되는 이유에 대해서 알아보겠습니다 ! 먼저 바로 단순히 a태그만 이용해서 구현해보겠습니다 a태그 이용하기 일단 간단히 a태그만 이용하면 저런식으로 경고문자가 나와줍니다!!! / 이거말고 /about 이런식으로 이용하면 없어지긴하는데 next js에서 제공해주는 Link 태그를 사용합시다 !!! Link태그 이용하기 저런식으로 위에처럼 간단히 할 수 있습니다 !!! 하지만 여기서 a태그를 왜 써야하지? 라는 의문이 있을 수 있습니다 !! 그럼 한번 a태그를 빼볼까요??? 이런식으로 잘 들어오는것을 확인 할 수 있습니다 !!! 하지만 ! 저희가 저기 Link태그에 클래스명을 줘서 스타일을 적용하고 싶다면 ??..
IT관련/CSS 관련 2022. 4. 27.
Tailwind css를 이용해서 Dark(다크)모드를 구현해보자 !!! 안녕하세요 ! 저번 반응형 페이지에 이어서 이번에는 다크모드를 구현해보겠습니닷 !!! 다크모드도 Tailwind css를 이용하면 너무너무 간단하게 되니까 연습 해봅시다 ! 먼저 저는 리액트 환경에서 진행할것입니다 !! 먼지 기존의 화면을 봐볼까요?? 기존 화면 저렇게 있습니다 !!! 그리고 아래에 보시면 다크모드라고 원을 만들었습니다 !! 이제 구현을 해볼까요?? const [dark, setDark] = useState("다크모드"); // 다크모드 있는곳 텍스트 ! const toggleDarkMode = () => { if (localStorage.getItem("theme") === "dark") { // 다크모드 -> 기본모드 localStorage.removeItem("theme"); // ..
IT관련/aws 2022. 4. 22.
http는 사용하기 싫다 ! cloudfront을 이용해서 https로 리다이렉트 시키자 ! (feat. S3, route53, aws SSL등록) 안녕하세요 !!! 저번 글 : https://heokknkn.tistory.com/37 이번에는 저번 route 53와 S3 연동에 이어서 SSL을 등록해보겠습니다 ! 그리고 https로까지 리다이렉트를 시켜보겠습니다 ! 그래야 HTTPS를 사용하니까요 ! AWS Certificate Manager(ACM)이란? AWS Certificate Manager(ACM)은 AWS 웹 사이트와 애플리케이션을 보호하는 퍼블릭 및 프라이빗 SSL/TLS X.509 인증서와 키를 만들고, 저장하고, 갱신하는 복잡성을 처리합니다. ACM에서 직접 발급하거나 서드 파티 인증서를 ACM 관리 시스템으로 가져오는 방법으로 통합 AWS 서비스에 대한 인증서를 제공할 수 있습니다. ACM 인증서는 단일 도메인 이름, 여러 특정 ..
IT관련/aws 2022. 4. 20.
aws의 Route53와 S3를 연동해보자 ! 안녕하세요 ! 이번에 플젝을 하면서 도멘을 사서 S3와 연동을 해보면서 정리를 해봤습니다 !!! aws를 혼자서 제대로 하는것은 처음인데요 ;; 하면서 너무나 어렵지만 재미있네요 !! 그럼 해보겠습니다 ! 우선 도메인부터 aws에서 구매 or 직접 다른데서 구매를 하시면 좋습니다 ! 도메인 준비 우선 도메인을 등록하시면 이렇게 나옵니다 !!! 저는 먼저 aws직접 샀습니다 !!! 안사신분들은 aws서 도메인 등록에서 하고싶은 도메인을 적으셔서 사시거나 다른곳에서 구입하셔도 괜찮습니다 ! 그 다음에 호스팅 영역으로 들어갑시다 ! 저는 구매를 해서 밑에와같이 1개가 있습니다 ! 안하신분들은 호스팅 영역 생성으로 하세요 ! 간단하게 도메인 입력하시구 설명쓰시고 기본설정으로 끝 ! 여기까지 하셨으면 벌써 반은 ..
IT관련/JavaScript 2022. 4. 19.
몇일 차이가 나지? JavaScript에서 날짜 계산을 해보자 (일자계산해보기 ! ) 안녕하세요 ! 오늘은 javascript에서 간단하게 날짜 계산하는법을 알아보겠습니다 !!! 저는 typescript에서 진행할겁니다 !! 먼저 !! 기본적으로 날짜를 제공해주는 Date함수를 이용하자 ! Date함수를 이용해서 기본적인 날짜를 가져와봅시다 ! 밑에처럼 코드를 짜주시고 ! console.log로 확인해봅시다 ! 이렇게 나왔습니다 !!! 데이트 함수는 object로써 사용가능합니다 !!! 그러면 본격적으로 날짜 계산을 위한 틀을 만들어볼까요?? 일자를 먼저 뽑아보겠습니다 !! ( 형식은 '년도-월-일' export const formatDate = (dt: Date): string => { const y = dt.getFullYear(); const m = ("0" + (dt.getMont..
IT관련/NextJS 2022. 4. 12.
document is not defined 에러가 뭐야? 해결법 !! (feat. window is not defined) 안녕하세요 !! Next JS를 쓰다보면 「document is not defined」나「window is not defined」를 볼 수 있습니다 ! javascript 문법을 쓰는건데 왜 일어나는거지라고 저도 엄청 생각했습니다 ! 이 에러가 일어나는 원인과 해결법을 알아보겠습니다 !!! document is not defined window is not defined 자 먼저 밑에와 같이 써봅시다 ! 이러고 나서 ! 자신의 웹 화면을 봐주세요 ! 그럼 오류가 !!! window도 한번 써볼까요??? window도 마찬가지입니다 !!! 왜 이런 현상이 발생할까요?? 단순히 javascript문법을 쓰는건데 ;;; 이유는 아래와 같습니다 ! 원인은?? Next JS는 서버쪽과 클라이언트 측에서 모두 움직..
IT관련/setting(셋팅) 관련 2022. 4. 5.
「vscode」 다양한 개발 셋팅!! ( 개발자를 위한 ! matching tag or indent) 개발 속도를 높여보자 ! 안녕하세요 ! 요번에는 제가 vscode에서 셋팅한것들을 소개하려고 합니다 !!!! 먼저 아직 적용을 안한모습부터 보여드리겠습니다 ! 밑에와 같은 모습인데요 !!! 저는 indent라던가 ! 괄호라던가 ! 가만히 있을 때 커서가 깜빡깜빡 하잖아요? 그 때의 색상이라던가 !! 아니면 className을 두번 클릭 했을 때 ! 모든 className가 같이 match해서 나오는데 그 때의 색상이 눈에 잘 안들어와서요 ㅜㅜ ( 코드가 길어지면 찾기도 힘들고 ㅜㅜ ) 그래서 아래와 같이 소개하겠습니다 ! 그래서 우리 모두 개발속도를 높여봅시다 !! 먼저 ! [Deprecated] Bracket Pair Colorizer 2 이건 괄호에 대해서 입니다 ! 다운로드를 해주시고 !! 확인을 한번 해봅시다 ! 혹시라도..
IT관련/DB(데이터베이스) 관련 2022. 4. 5.
prisma의 upsert를 이용해서 데이터를 만들어보자 ! (db insert or update!) 안녕하세요 !! 이번에는 prisma와 upsert를 이용해서 !!! 데이터를 만들어보려고 합니다 ! ( DB insert or update ) 데이터를 만들면서 데이터가 있는지 판단해서 제가 넣으려는 데이터가 중복되면 안만들고 ! 중복이 안되면 만드는 그런 Logic입니다 ! * 참고로 저는 next js에서 하지만 ! react환경이라던가 javascript와 npm을 사용하고 계셔도 무방합니다 ^^ 그럼 시작하겠습니다 ! 먼저 이렇게 기본적인 Form을 만들어주세요 !! Email 로직부터 해보겠습니다 ! 아 ! 테스트를 하시기전에는 꼭 db에 connect를 해주세요 !!! 「pscale connect DB명」 email을 넣어주시고 check email를 해보겠습니다 ! 로직순서는 아래와 같습니..
IT관련/Redux 관련 2022. 4. 4.
Redux Toolkit에 대해서 깊게 알아볼까요? (configureStore, combineReducers, createSlice) 안녕하세요 ! 전체적인 흐름 : https://heokknkn.tistory.com/21 저번에 ~ Redux의 관해서 대해서 공부를 해봤는데요 ! 이번엔 그 중에서 configureStore와 configureStore란? ・Reducer에서 반환된 새로운 state를 Store라는 객체로 정리해 관리하는곳입니다 ・Store는 Redux Toolkit configureStore에 객체 형식으로 reducer를 전달하여 만들 수 있습니다. ・또한 기존에 createStore비슷하지만 ! 여기서 주의할 점은 {reducer: rootReducer} 로 만들어 주어서 넣어야합니다 ! (property의 명이 반드시 reducer !! 그리고 createStore와 달리 ! Thunk, dev tool까지 자..
IT관련/JavaScript 2022. 4. 1.
split을 이용해서 문자열 자르기를 해보자 ! ( javascript 문자열 자르기 ) 안녕하세요 ! 이번에는 Split를 이용해서 문자열 자르기를 해보겠습니다 !! Split 먼저 사용법을 알아보겠습니다 ! const str = '문자열' ; const result = str . split (구분 할 문자 또는 정규 표현, 분할 수); 이렇게 됩니다 !! 딱 봐서 감이 안오시나요?? 그럼 바로 실습을 해봐야겠죠??? 위와 같이 됩니다 !!! str과 result의 결과값이 같아 보일수도 있는데요 !! 가장 큰 차임점은 result는 split를 사용함으로써 배열이 된다는것입니다 !!! 그것도 「,」 컴마로 인해서요 !!! 그럼 아래에서 1번더 실습을 해보겠습니다 ! 이런식으로도 자신이 원하고싶은 구분자를 넣어서 구분을 할수도 있습니다 ^^ 또한 !! 마지막에 limit를 설정해서 ! 몇개..
728x90

티스토리툴바