웹 개발의 기록들

안녕하세요. Nerd-Lee입니다. 이 내용은 우아한형제들의 개발 팀장이신 김영한 님의 을 참고해서 공부한 내용을 바탕으로 글이 작성되었습니다. 1. 프로젝트 생성 spring boot start page 가기 스프링 부트는 스프링 프로젝트를 쉽게 만들 수 있게 한다. maven과 gradle을 선택할 수 있는데, 요즘은 gradle로 많이 넘어가는 추세. 언어는 자신이 사용 할 언어를 추가하면 된다. 듣고 있는 강의는 Java를 사용하기 때문에, Java 선택 버전은 안정화 된 버전을 사용하는 것이 좋은데, Snapshot / M1,M2가 붙어있지 않은 버전이 안정화 된 버전이라고 생각하면 된다. Project Metadata는 그룹과 아티팩트를 입력해줘야 하는데, 회사 프로젝트를 진행한다면 회사에서 ..

Box 하나만을 화면 정가운데에 정렬하고 싶을 때가 있는데 가운데로 정렬할 수 있는 방법은 있지만, 정가운데로 정렬하는 방법을 모를 수가 있다. 코드는 다음과 같다. [ HTML ] [ CSS ] body{ width: 100vw; height: 100vh; } .box{ position: relative; left: 50vw; top: 50vh; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: black; } 이렇게 하면 정가운데로 정렬이 가능하다.

Typescript를 사용하다보면, 서버에서 불러오는 데이터의 명확한 데이터 타입을 모를 경우가 있다. 어떤 다른 사이트에서 제공하는 Open API를 사용하다보면 데이터 타입을 알 수가 없기 때문이다. 그러다 보면, useState([]) 이런식으로, 빈 배열을 가진 useState 방식의 변수들을 만들어주고, return 부분에, [].map((어쩌구, 저쩌구) => {}) 뭐 이런 방식으로 렌더링을 시켜줄텐데.. 에러는 아닌데, [error] Property does not exist on type 'never' 이런 에러를 발견하곤 할 것이다. 그럴 때 해결하는 방법은 간단하다. const [test, setTest] = useState([]); 이렇게, T 타입을, any[] 타입으로 만들어주면..

[ 이전 공부 내용 ] 더보기 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 03. pages 와 static pre rendering 2022.02.15 - [web/React.js] - [ Next.js 공부하기 ] 04. Routing / CSS Module / Style JSX Style.jsx를 하다보면, 그럼 전역으로 어떤 특정 태그의 스타일을 바꾸고 싶은데 어떻게 해 그럼? 이라고 생각한 사람도 있..

[ 이전 공부 내용 ] 더보기 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 03. pages 와 static pre rendering 1. Routing - Next.js에서는, react.js 처럼, react-router-dom을 설치하거나 하는 것을 할 필요가 없다. 굉장히 좋다^^ components 폴더에, navbar.tsx 파일을 생성해주고 아래와 같이 코드를 작성하자. import Link fr..

[ 이전 공부 내용 ] 더보기 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework 1. pages - 이전 Library와 framework에서도 말했듯이, pages에 있는 index 파일명은 home이 되고, test.tsx 파일은, /test 경로를 가지게 된다. 파일의 이름이 경로명으로 설정이 된다는 것을 알 수 있다. - 또한 규칙은, typescript는 문제가 없지만, javascript는, export default는 무조건 붙여줘야만 경로 설정이 가능해진다는 것을 주의하자! 2. s..

[ 이전글 보기 ] 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 마지막 취업 전 포트폴리오에 공을 들이기 위한 준비를 한다. 바로 Next.js를 배우는 것. Next.js를 배우면서, SSR이 무엇인지, SSR의 장점이 무엇인지 이런 것들을 한 번 공부해보면서 포트폴리오에 includecoding.tistory.com 이번 글은, 라이브러리와 프레임워크의 차이점이 무엇인지를 알아보자. 1. 라이브러리란? - 개발자로서 내가 사용하는 것을 뜻한다. 라이브러리를 사용할 때에는, 내가 원할 때 언제든 어떤 방법으로든 상관없이 불러와서 사..

마지막 취업 전 포트폴리오에 공을 들이기 위한 준비를 한다. 바로 Next.js를 배우는 것. Next.js를 배우면서, SSR이 무엇인지, SSR의 장점이 무엇인지 이런 것들을 한 번 공부해보면서 포트폴리오에 적용을 해볼 것이다. 작업환경 : Mac OS 1. Next.js 프로젝트 생성하기 - 일단 터미널을 켜주고, 나는 바탕화면에 폴더를 만들 예정이기 때문에, cd desktop을 입력해서, desktop을 현재 가리키게 하고 처음부터 자바스크립트가 아닌 타입스크립트 환경에 맞춰서 공부를 했기 때문에, 타입스크립트로 만들 것이다. 밑에처럼 명령어를 입력해주자. npx create-next-app@latest --typescript 그럼 프로젝트 이름이 어떻게 되는 지를 물어보는데, 입력을 하면 된다..