홈 에서의 코드를 보면 전체를 감싸는 main이 이렇게 적혀있다.검색 페이지에서 코드를 보면 전체를 감싸는 main이 이렇게 적혀있다.스타일링 코드 뿐만이 아니라. 페이지를 둘러보니이런 방식으로 구현되는 형태가 많았다.여러 페이지들을 제작하면서 반복적인 형태가 만들어지

서버 컴포넌트 와 클라이언트 컴포넌트

software development life cycle sdlc 소프트웨어를 계획, 개발, 시험, 배포 요구사항 분석 -> 설계-> 구현 -> 테스트 모델 build & fix : 만들고 고치고 prototype : 최소한의 요구사항 분석후 프로토타입 제작 waterfall : 요구사항분석 -> 설계 -> 구현 -> 운용이 순차적으로 진행 sp...

현재 html 페이지 코드를 집어넣은 상태라서 각 페이지의 코드가 상당히 길어져있는데, 이를 컴포넌트별로 나눠서 구현을 하고자 한다.app 폴더 내부에 componenets폴더를 생성하고 각 페이지들이 사용하는 컴포넌트들 만들어서 import 하는 방식으로 코드를 작성

Link 와 useRouter

next.js 13 버전에서는 app 폴더 내부의 page.tsx가 메인 페이지로 접속했을때 보여주게 되는 화면이다.물론 메인 페이지 내부에서 /search 경로 페이지로 이동한다면 이런 식으로 파일을 만들면된다.같은 방법으로 /restaurant 경로를 만들고 싶다면

13 버전에서 12버전보다 매우 많은 변화가 있었다.따라서 이 변화를 알아보면서, next.js 13버전을 사용해서 프로젝트를 만들어보자.공식 페이지를 들어가면 설치 커멘드를 찾아볼수 있다.next 최신 버전으로 설치할겁니다. 라는 뜻으로, 입력하면프로젝트 이름tail

취준생과 면접관이 생각하는 것은 다르다. ?? 뭐가 다를까? 채용에서 기본조건, 우대조건의 해석이 다르다. 취준생이 자신의 매력 포인트 어필을 못함(또는 못알아챔) 처음부터 끝까지 만들어본 경험 학원에서 진행한 프로젝트 - 다양한 환경 속에서 문제를 찾을수 있을까? 소프트 웨어 - 한번 개발하면 바뀔일이 거의 없는 hardware와는 다르게, 하루...

회원가입/로그인 구현하기 0) 프로젝트 세팅 express 를 활용해서,jwt를 활용한 유저 인증 구현 > npm install express typeorm mysql reflect-metadata cors dotenv > npm install -D @types

commerce 프로젝트 뜯어보기 https://github.com/vercel/commerce 의 커머스 사이트 리포지 토리를 참고 typescript로 되어있고 Turbo 로 mono repo를 관리하고 있으며 4개의 extension을 recommendation으로 정해두었고 yarn build를 먼저 해야지 yarn start로 실행해볼수 있다. ...

이전시간에 만든 express + TypeORM + S3 로 구성한 백엔드를 react에서 글 작성 요청을 보내보자.yarn create next-app (앱이름) --ts앞서 만들었던 모델 entity와 동일하게 Post 데이터에 대한 타입을 만들어준다.src/typ

이번에는 aws s3를 사용해서 데이터베이스 서버에 파일을 업로드 할수 있는 기능을 추가한다.

Express 와 TypeORM을 함께 활용한다. AWS 의 RDS를 통해서 DB서버를 구축한다.

타입스크립트 next앱을 만들기 위해서는 아래 명령어를 입력하면 된다. yarn create next-app (앱이름) --ts기존과 다른 점은 getStaticProps\~~ 등을 지정해야한다는 것getStateProps, getStaticPaths, getServe

이전에 사용했던 서버 파일을 사용해서 유저인증을 구현한다.

redux toolkit 을 ts를 사용하여 구현해본다.

타입스크립트는 기본적인 문법은 자바스크립트와 비슷하지만, 기존의 자바스크립트와 다르게 타입을 지정하면서 변수/함수를 선언한다는 특징을 가지고 있다.타입을 지정하면,타입의 차이에 따른 서비스의 오작동 방지개발 과정에서의 정확한 코드 작성 (타입에 맞춰서 작성하지 않으면

next.js

the React Framework for Productionnext.js 페이지를 들어가면 제일 먼저 보이는 문구이다. 프로덕션을 위한 리액트 프레임워크리액트 - 사용자 인터페이스를 만들기 위한 javaScript 라이브러리그러면 next.js는 프로덕션을 위한 ja

미세먼지 api를 활용해서 서비스를 만드는 과제를 제출한 다음에 강사님께서 직접 해설 파일을 공유해주셨다. 이를 분석하면서 어떤식으로 서비스를 구현했는지 보기로 했다.어떤 기능을 만들기 위해서 일련의 작업을 진행해야하는지 파악하는것이 최우선단일 지역에 해당하는 미세먼지