개발 공부

[노마드코더] NextJS 시작하기 #1

[노마드코더] NextJS 시작하기 #1 [노마드코더] NextJS 시작하기 #2 [노마드코더] NextJS 시작하기 #3 [노마드코더] NextJS 시작하기 #4 [노마드코더] NextJS 시작하기 #5 NextJS의 가장 기초를 배우기 위해서 강의를 들으려고 한다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 우선 명령어를 사용해서 원하는 위치에 next프로젝트를 생성해준다. cmd나 vscode의 터미널에 입력해주면 된다. npx create-next-app@latest 그런 다음 이제 pages안에 있는 파일을 모두 지워준다. 우선 라이브러리와 프레임워크의 차이점을 알아보자. react는 언제..

[Next] NextJS의 getInitialProps, getStaticProps, getStaticPaths, getServerSideProps 함수

Next 프로젝트를 처음 생성하고, 초기 세팅되어있던 페이지들을 하나씩 뜯어보면서 구조를 파악하는 중이다. 그러다가 pages/users/[id].tsx에서 다음과 같은 함수를 발견했고, 아마 데이터를 가져오는데 있어서 build time에 가져오도록 하는 그런 함수인듯 싶어서 찾아봤다. 들어가기 전 CSR : 첫 렌더시에는 페이지 로드만 수행, 다시 렌더링할 때 데이터를 불러온다. 그래서 데이터가 검색엔진에 걸리지 않는다. 대신에 데이터를 한번에 가져오기 때문에 페이지 이동시에는 속도가 빠르다. SSR : 첫 렌더시에 데이터도 같이 가져온다. 렌더를 한번만 수행하기 때문에 초기 로딩 속도가 빠르고, 검색 엔진에 데이터가 걸린다. 그러나 페이지를 이동할때마다 매번 데이터를 불러오기 때문에 페이지 이동 시..

[JAVA] JDBC란? 자바에서 JDBC 사용하기 (JAVA + MYSQL)

공부하는 입장이기 때문에 혹시 글에 잘못된 점이 있다면 댓글로 알려주시면 감사하겠습니다! 이번주에는 계속해서 DB와 관련해서 공부하고 있다. 처음에는 MySql을 사용하면서 쿼리문을 작성하는 연습을 했고, 오늘은 이제 자바와 MySQL을 연결해서 데이터를 가져와보려고 한다. JDBC란? JDBC란 Java DataBase Connectivity 의 약어로 Java와 DB연결을 위한 표준 API이다. 조금더 자세하게 설명하면 자바에서 DB를 연결하고, 그 안에 있는 데이터를 가져오기 위해서 사용하는 API이다. 이 글에서는 자바는 Eclipse, DB는 MySQL을 사용할 예정이다. 우선 전체적인 구조를 보면 크게 4가지로 나뉜다. 자바와 DB를 연결하기 위해서는 두 단계를 거쳐야한다. JDBC API는 ..

[WEB] Next.js + Typesctipt + StyledComponents 프로젝트 생성하기

이번에 새로운 사이드프로젝트를 진행하면서 기술 스택들이 정해졌고, 해당 스택들을 사용해서 프로젝트를 생성하려고 한다. react와 scss로 작업해본 경험이 있어서 이번엔 크게 next.js (react를 했으니 그래도 좀 수월하지 않을까라는 생각) 와 typescript, styled-component를 사용해보려고 한다. next 프로젝트 생성하기 with Typescript $ npx create-next-app --example with-typescript [프로젝트 이름] typescript와 같이 next프로젝트를 생성해주는 명령어이다. 실행이 끝나면 cd 를 사용해서 프로젝트로 이동해준다. $ npm install npm install를 사용해서 필요한 패키지들을 설치해준다. 설치가 다 되면..

[Spring] 인프런 스프링 입문 강의 정리 #1

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 글에서 나오는 모든 코드와 사진들은 김영한님의 인프런 스프링 입문 강의에서 가져온 것임을 미리 알립니다. 오늘은 알고리즘도 하기 싫고 cs도 하기 싫어서 그냥 스프링 강의를 들었다. (아무것도 안하면 불안한 취준생이라...) 그 유명한 김영한 님의 스프링 강의! 처음 듣는 거라서 우선 무료 강의를 들어봤다. 강의를 들으면서 정리해야하는 내용들과 나중에 공부할 때 도움이 될만한 내용들을 적을 예정이다. 글에서 나오는 모든 코드와 사진들은 김영한님..

[Github] ReadMe 리드미 꾸미기 (및 매우 소소한 팁들)

그동안 하고 싶었던 깃허브 리드미를 드디어 간단하게 꾸며봤다. 나도 여러개의 블로그를 보면서 꾸민거라서 수정할 때 언제든지 볼 수 있도록 정리하려고 한다. 우선 리드미를 꾸미기 전에 가장 먼저 해야하는게 있다. 레포지토리 만들기 내 깃허브에 들어갔을 때 나의 readme가 보이기 위해서는 레포지토리를 생성하고 그 안에 리드미 파일에서 작업을 해줘야한다. 1. new 클릭 이제 본인의 깃허브 아이디와 동일하게 입력한다. 주황색 박스에 있는 것이 내 깃허브 아이디이므로 빨간 박스에도 동일하게 입력해준다. 나는 이미 만들어져있기 때문에 존재한다고 뜨고 있다. 그러면 이제 밑에 파란 박스에 고양이가 ✨special✨ repository 라고 소개해준다! 또한 밑에 두 개를 모두 체크 해주고 밑에 초록색 박스의 ..

라디오 버튼을 이미지로 구현하기 [이전 블로그 게시글]

https://blog.naver.com/k915k1004/222537805779 라디오 버튼을 이미지로 구현하기 Carpe diem blog.naver.com

[정리] 웹 폰트란? [이전 블로그 게시글]

https://blog.naver.com/k915k1004/222477549279 [정리] 웹 폰트란? 참고 : https://wit.nts-corp.com/2017/02/13/4258 개인 정리용으로 기록한 것으로 대충 정리함. 더 자세한... blog.naver.com