하새의 블로그
  • 홈
  • 태그
  • 메뉴 닫기
  • 글작성
  • 방명록
  • 환경설정
    • 분류 전체보기 (66)
      • 개발 공부 (63)
        • Android (31)
        • Flutter (2)
        • React (6)
        • Next.js (5)
        • CSS (1)
        • Kotlin (6)
        • Java (1)
        • PHP (3)
        • 환경 구축 (7)
        • MySQL (1)
      • 생활지식 (0)
      • 스크랩 (1)
      • SafePass (1)
      • RicorTodo (1)
  • 홈
  • 태그
개발 공부/환경 구축

[Windows] 윈도우 10 OpenSSL 설치하는 방법

[Windows] 윈도우 10 OpenSSL 설치하는 방법 1. OpenSSL 다운로드하기 아래의 링크로 들어가서 최신 버전의 OpenSSL을 다운로드 받는다. EXE를 눌러 다운로드 받으면 된다. http://slproweb.com/products/Win32OpenSSL.html 지금(2023.02.15)기준으로는 위의 버전이 최신 버전이다. 2. 설치 파일을 다운로드 받았다면 실행해서 설치해준다. 환경변수를 설정해줘야해서 경로를 잘 확인해둔다. 변경사항 없이 Next를 눌러서 설치하면 된다. 3. 환경변수 설정 Path에 bin폴더 경로를 추가하고 OPENSSL_CONF라는 환경변수를 새롭게 생성해야한다. 시스템 환경 변수 편집 화면으로 들어가서 환경 변수 버튼을 클릭한다. OpenSSL을 설치한 경..

2023. 2. 15. 12:25
개발 공부/Next.js

[Next.js] 모달(Modal) 만들기 styled-components

버튼을 누르면 모달(Modal)을 띄우고 그 모달안에 리스트가 있는 형태이다. 먼저 import import React, { useState, useEffect } from 'react'; import styled from "styled-components"; 버튼과 모달이 될 div, 그리고 모달 안에 들어갈 리스트 아이템을 생성했다. 리스트의 경우는 ul 과 li를 써도 되고 편의에 따라서 div로 바꿔도 된다. 추후에 나는 div로 바꿨다. const Button = styled.button` background-color: #5633EC; color: #FFFFFF; border: none; border-radius: 10px; font-size: 16px; height: 50px; width: ..

2023. 2. 14. 23:33
개발 공부/환경 구축

도메인 TLD 종류 및 각 의미 정리 (.com, .net 차이 )

'.com', '.net'과 같이 URL 끝에 붙는 부분을 최상위 도메인 (TLD)라고 한다. TLD는 도메인이 속한 웹사이트 또는 조직의 유형을 나타내는 데 사용된다. .com 가장 널리 사용되는 TLD이며 일반적으로 전자 상거래 사이트 및 비즈니스와 같은 상업용 웹 사이트에 사용된다. .net 인터넷 서비스 제공업체, 네트워크 솔루션 제공업체 및 기술 회사와 같은 기술 관련 웹사이트용 .org 일반적으로 비영리 조직에서 사용된다. 자선 단체 및 재단. .gov 미국의 정부 기관 및 조직을 위해 예약되어 있다. .edu 대학과 같은 교육 기관용으로 예약되어 있습니다. .mil 미국의 군사 조직용으로 예약되어 있다. .info 뉴스 및 참조와 같은 정보 제공 웹사이트에 사용된다. .biz 소기업 및 전자..

2023. 2. 12. 11:24
개발 공부/Next.js

[Next.js/JS] next-auth session 상태에 따라 화면 전환하기

next-auth를 적용한 것을 전제로 진행합니다. BottomNavigation을 만드는 와중 특정 버튼을 눌렀을 때 로그인 상태에 따라서 보여줄 화면을 다르게 해야하는 부분을 구현해야했다. 1. import 화면 전환에 쓸 Router와 상태값 변화 감지를 위한 useState, useEffect 그리고 세션을 가져오기 위한 getSession을 import 한다. import Router from "next/router"; import React, { useState, useEffect } from 'react'; import { getSession } from "next-auth/react" 2. 세션 가져와서 set 하기 const BottomNav = () => { const [session,..

2023. 2. 6. 15:56
개발 공부/CSS

[CSS] display: grid 사용시 가운데 정렬하는 방법

적용 환경 : Next.js Array에 있는 값을 일정하게 배열을 하고 싶어서 grid라는 것을 사용해 봤는데 안에 있는 아이템들이 정렬이 안되어서 알아보게 되었다. display:grid; 와 함께 place-items: center; 를 같이 사용해 해결 할 수 있었다. place-items: center; display: grid; 적용한 부분 {numbers.map((line) => { return ( ) })} 웹 프론트 어렵다 ㅜ _-..(삽질 중)

2023. 2. 2. 10:48
개발 공부/React

React 처음 했을 때 정리해보자 - 3주차 -

1일차 react와 DB 연동을 테스트 하기 위해서 우선은 개인 계정에 RDS 인스턴스를 생성해서 테이블을 설계를 시작했다. 나온 디자인을 토대로 필요한 데이터가 무엇인지 생각해보고 조금씩 해나갔다. UI작업을 이어갔는데 도애체 화면에서 왜 짤려서 나오는지를 알 수가 없어서 UI 하는데 종일 보냈던 듯 하다. DB에서 더미 데이터를 넣어서 console로 데이터를 확인하는 부분까지 진행하고 마무리. useEffect에 대한 이해가 없어서 조금 어려웠다. 2일차 Redux에 대해서 알아보고 테스트를 해보았던 것을 이제 react 안에서 전역으로 쓸 수 있도록 적용해 나가기 시작했고 동시에 DB 작업도 이어나갔다. 여기서 좀 애 먹었던 것이 DB값이 UI에 반영하려는데 이때 DB값이 빈값이라는 것이었다. D..

2022. 11. 15. 09:43
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • ···
  • 11
  • »

전체 카테고리

  • 분류 전체보기 (66)
    • 개발 공부 (63)
      • Android (31)
      • Flutter (2)
      • React (6)
      • Next.js (5)
      • CSS (1)
      • Kotlin (6)
      • Java (1)
      • PHP (3)
      • 환경 구축 (7)
      • MySQL (1)
    • 생활지식 (0)
    • 스크랩 (1)
    • SafePass (1)
    • RicorTodo (1)
  • 최근 글
  • 최근 댓글

최근 글

최근댓글

Powered by Privatenote Copyright © 하새의 블로그 All rights reserved. TistoryWhaleSkin3.4

티스토리툴바