Где-то подсмотрел, как программист делает резюме на на тех технологиях, по которым ищет работу. Идея показалась интересной - решил повторить.
Собственно - вот: https://github.com/linklib/resume-v2
Озадачился вопросом поиска работы джуном по js. Для реализации резюме использую:
- React
- Typescript
- Next js
- Prisma
- SQLite
- Bootstrap React
Можно было бы обойтись без next и prisma, но тогда совсем бы "бедно" вышло. Хорошо бы было и Graphql использовать, но я с ним ещё только в первом приближении разобрался, маловато будет. Остальное тоже не на высшем уровне, но и я вроде на джуна претендую, не выше.
Описывать буду "крупными мазками", заостряя внимание на те моменты, которые вызвали заметные затыки в процессе. Если будут вопросы - пишите комменты. Итак, постановка задачи.
Нужна страничка с текстовым описанием и перечень навыков с фозможностью фильтра по категориям.
1. Разворачиваем next.js с typescript.
2. Устанавливаем и инициируем prisma. Для БД выбрал SQLite: позволяет стянуть проект и запустить его без размышлений о подключении к любой другой системе.
3. Пишем схему и деплоим её в БД.
4. Посев данных: готовим файл с данными. Вот здесь сыграла злую шутку моя невнимательность. Проблема с shadows database решалась просто директивой в package.json
//Не
"prisma": {
"seed": "ts-node prisma/seed.ts"
},
//A
"prisma": {
"seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
},
5. Получение данных. Призмой забираем данные из БД с использованием SSR Next js. Так как призма позволяет не только получить данные, но итфильтровать по нужному параметру, я ошибочно пошел по пути фильтрайии на этапе получения. Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте. В итоге получился фильтр на React Hook с фильтром на этапе вывода данных.
6. Оформляем, добавляем для сео NextSeo.
Про картинки: в бд пишется путь к картинке. Сначала разместил картинки в папке images в корне, но отобразаться они категорически не хотели. Выяснилось, что единственное правилое для них место - папка public, дальше вложенность не имеет значения.
Вопросы и предложения принимаются с благодарностью.
Дима, привет!
Вижу, что уже знаешь больше и можешь что-то сделать. Это хорошо. Но есть моменты, конечно.
>> Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте.
1. Представь себе вытянуть многие сотни тысяч записей на клиент сразу.
2. Фильтрацию и сортировку сразу по нескольким полям (особенно при выборке сразу из нескольких таблиц) ты замахаешься делать на клиенте. Доволно простые для SQL задачи окажутся практически невозможными в реализации.
>> Выяснилось, что единственное правилое для них место - папка public, дальше вложенность не имеет значения.
Все верно. По соображениям безопасности JS не отдает просто так любой файл как статику. Вдруг у тебя там когфиг с паролями? Поэтому в next-js настроена отдача статики из public. Но можно и свои кастомные папки сервить. К примеру, вот здесь у меня мидлвара ресайза картинок, а так же сервинг из папок shared/ и uploads/ https://github.com/prisma-cms/nextjs-nexus/blob/43e101b9804245bd551aefbf8e067cfd808c1d0d/server/index.ts#L26-L42
Николай, привет!
>>> >> Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте.
1. Представь себе вытянуть многие сотни тысяч записей на клиент сразу.
2. Фильтрацию и сортировку сразу по нескольким полям (особенно при выборке сразу из нескольких таблиц) ты замахаешься делать на клиенте. Доволно простые для SQL задачи окажутся практически невозможными в реализации.
---
Это понятно, но для конкретного проекта - подходящее решение.
Вопрос:
Я сначала хотел запихать условие в
export async function getServerSideProps() {
const teches: Tech[] = await prisma.tech.findMany({
include: {
Category: true,
},
});
return {
props: {
initialTeches: teches,
},
};
}
Через свойство where. И как динамически это сделать на одной странице не разобрался. Была идея сделать пять страниц со своими параметрами. Хотел вынести в компонент и пропсами пробрасывать состояние выбранной категории. Но не свел все вместе с getServerSideProps().
Можешь подсказать, как было бы сделать правильно?
>> Хотел вынести в компонент и пропсами пробрасывать состояние выбранной категории. Но не свел все вместе с getServerSideProps().
Так а ты документацию официальную читал? https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}
getServerSideProps имеет аргумент - context. А из этого контексты ты можешь получить множество полезных данных, включая GET-параметры и т.п. Разве это тебе не помогает в твоем вопросе?
Николай, привет!
Спасибо, проштудирую. Я сейчас Apollo Server настроил и через Apollo Client получаю данные (ветка plusapollo), как раз стоит вопрос о переписке фильтра.
Осталось Nexus ввести и можно углубляться в детали каждой технологии.
>> Осталось Nexus ввести и можно углубляться в детали каждой технологии.
Будь готов к тому, что вот в этот момент у тебя весь твой маленький мир и порушится :) Маленький мир здесь - это твой проект.
Я пока не буду тебе детали раскрывать, сначала поломай голову сам. Интересно, во что именно ты упрешься.
Загадочно...)
Николай, вопрос: правильно понимаю, что обновить переменную, который пихаю getServerSideProps(), можно только перегрузим страницу, добавив переменную в урлу. И тогда уже через context её получить и использовать?
Все верно. На то эта функция и называется getServerSideProps(), что она срабатывает на стороне сервера. Но обрати внимание на то, что у меня везде используется другая функция: getInitialProps(). Я не буду сейчас утверждать о различиях наверняка (так как давно уже не делал подобный ресерч), но скорее всего разница в кешировании данных. То есть getInitialProps() не кешируется. То есть при каждом заходе на страницу, данные в ней запрашиваются. А вот getServerSideProps() может работать иначе (хотя это предположение и требуется перепроверить): как вариант, он может кешировать данные в билд, или не совсем динамически подгружать в режиме SPA. В общем, поизучай эти моменты более внимательно.
Спасибо! Изучаю.