Дневник разработчицы

Не видела в статьях про Джанго+Реакт такого решения, но я подцепила шаблоны и статику из Реакта так: 1. Реакт приложение развернуто в директории frontend внутри джанга-проекта. 2. Реакт создан с помощью create-react-app, поэтому готовые файлы собираются в папку build. 3. В settings проекта Джанги прописала:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
            os.path.join(BASE_DIR), 'frontend/build'
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Добавила директорию 'frontend/build'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

Аналогично добавила путь до статики. Во view указала путь до шаблона (полный) 'frontend/build/index.html' Локально полет нормальный. Если что-то пойдет не так - напишу.

Через JS открываю для себя Python. Признаю, что я облажалась. Я тут внезапно для себя открыла, что в Python есть функции map(), filter(), reduce() https://book.pythontips.com/en/latest/map_filter.html Просто я о них не знала (на самом деле про map у меня даже в конспекте есть) ими никогда не пользовалась. Ну да, когда начинаешь учиться и что-то сложно понять, оно просто не запоминается. Зачем использовать какие-то непонятные функции, когда есть циклы?) А вот в JS уже это было как-то понятно, плюс была некоторая практика на этих функциях. Мне стыдно. Но ура, теперь, надеюсь, я буду ими пользоваться.

Кстати, друзья. Почему-то очень как-то мимо прошла тема про деструктуризацию словарей и списков в Python. В отличие от этого в js эта тема была рассмотрена подробнее (spread и rest). Не могу найти толковых статей по поводу этой фишки на Python, но увидела я интересные примеры в видео https://youtu.be/HrGg6KTJwhA. Также нашла не очень понятную статью https://codecamp.ru/blog/python-list-destructuring-aka-packing-and-unpacking/, где только про списки. Все мы помним любимые

*args и **kwargs

но что это значит? https://pythonz.net/references/named/argymenty-vyzova/ они "собирают" в себя все аргументы, превышающие заданный набор. На самом деле так собирать и разбирать можно не только в рамках аргументов функций, но и просто разбирать списки:

tasks = ['todo1', 'todo2', 'todo3', 'todo4']  # создадим список задач
first, second, *later = tasks  # заберем первую и вторую, остальные отложим
first будет 'todo1'
second будет 'todo2'
later заберет в себя оставшийся список ['todo3', 'todo4']

Допустим нам пришли еще задачки:
new_tasks = ['todo5', 'todo6']

Их можно собрать, разложив два списка:
all_tasks = [*later, *new_tasks]
Получим список ['todo3', 'todo4', 'todo5', 'todo6']

Аналогичная история со словарями, но работает через . Собираются они не так. Если разложить keys = [*dict], то в keys получаем ключи словаря.

person = {"name": "Olga", "age": 15, "weight": 55}
other_params = {'eye_color': 'brown', 'father': 'David'}
all_data = {**person, **other_params}

В all_data будет {'name': 'Olga', 'age': 15, 'weight': 55, 'eye_color': 'brown', 'father': 'David'}

В JS если что это работает через ...array или ...object. Если есть что добавить - пишите.

Пару часов убила на регулярку, чтобы завернуть обработку урлов на React. Хотя мне кажется, что Джанга сама могла бы отрулить это все, но я была в этом не уверена. В итоге получилось так:

re_path(r'^(?!api\/.*|favicon\.ico|admin\/.*|static\/.*|media\/.*).*', index_view, name='index'),

Костыльно, но все же удалось задеплоиться. После плясок с бубном над токенами джанги, очень боялась, что в итоге ничего не заработает. Но, все завелось как надо. Делюсь кодом на js для подключения к api: https://pastebin.com/QCXb8BV3 Что тут нужно учитывать? Функция getCookie тянет нужный нам токен getCookie('csrftoken') Для всех запросов, кроме get, он нужен. Иначе, джанга вернет ошибку. Дальше, используя fetch (строка 43) с методом PATCH в заголовок передаем наш токен. Будет нам счастье. Один важный момент. Токен в куке будет только тогда, когда Джанга его установит. Соответственно при запуске фронтенда через React, ничего не получится. И для этого... Рррр, много писать. Добавлю по запросам, если кому-то нужно. Я всю эту механику подсмотрела, когда проходила этот курс https://youtu.be/f1R_bykXHGE Сразу скажу, что данный курс нифига не дал понимания как вообще че делать с этим Реактом. Сидела, повторяла, но нифига не поняла что там происходит. Чтобы понять js, мне понадобилось прогнать отдельный курс по js.

Стейты-фигейты. Раньше я думала, что может быть сложного - сделать одну кнопочку. Сегодня я сделала загрузку одного списка и 3 чекбокса. Это было не очень приятно. Надеюсь, дальше будет проще.

Повторила базовую структуру для React-приложения, предложенную в курсе, для своего проекта. Задолбалась создавать папочки. Спасибо Django за то, что базовая структура генерится автоматически.

День инфры. Обновила версию платформы. Одно приложение совершенно спокойно обновилось. Со вторым пришлось плясать с бубном. Все попытки просто обновиться были бесполезны. Пришлось создавать еще одно окружение с новой платформой, а потом опять же свапать. Так прошло удачно. Почему я сразу этого не сделала, когда меняла зону? СТРАШНО!) Правда, страшно. (⊙_⊙;)

Что проще перенести: 1 инстанс с бд или 2 сервисных? Сервисные, конечно, особенно на Elastic Beanstalk. Эта штука позволяет создать рядом новое окружение, поднять на нем нужную версию приложения и просто плавно переключить url с одного окружения на другое. Вжух - и легким движением руки приложение переходит на другой инстанс. Заодно решила попробовать spot-запрос на инстансы. Надо только на всякий случай поднять второй инстанс, чтобы был резервный. Но для начала послежу как пойдут расходы в бюджете. Что неожиданно, но приятно, так как я внесла сервисные инстансы в ту же подсеть, что моя бд, они автоматом получили к ней доступ без указания security group. Очевидно, наверное, что так и должно было случится, но я далека от понимания инфраструктуры, поэтому для меня это было внезапно. Надо будет допройти курс по AWS. И кстати, включила логи в CloudWatch. Оказывается, это можно сделать, поставив 1 галочку в настройках. Больше не надо скачивать логи, хехей! Все больше радуюсь возможностям AWS. Правда, пока разберешься с их документацией и настройками, все волосы можно себе оборвать, плюс еще влететь на много денег.

Очередная тру-стори про AWS. Помните, я писала, что ограничила доступ к бд? Привет счета за внутрисетевой перегон данных, так как база данных и инстансы находятся в одном регионе, но в разных зонах. Сижу, разбираюсь как это исправить.

Верни мне... верни мне... верни мне мой друг, и снова верни мне...

const WithRestoService = () => (Wrapped) => {
    return (props) => {
        return (
            <RestoServiceContext.Consumer>
                {
                    (RestoService) => {
                        return <Wrapped {...props} RestoService={RestoService}/>
                    }
                }
            </RestoServiceContext.Consumer>
        )
    };
};

Навеяло https://youtu.be/4TsqlT0rfJI Компонент высшего порядка. HOC - один из паттернов JS. Если что - текущий пример из курса) PS. Я все еще не могу добить курс по JS, я уже отложила AWS и фигачу только JS. Осталось 16 лекций.

Python vs JS. Сделать первую букву заглавной. Python - все просто, функция str.capitalize(), плюс еще есть str.title(), которая делает все первые буквы в словах заглавными. https://pythonz.net/references/named/str.capitalize/ JS. Не, я так не умею, я могу только str.toUpperCase(). Делай сама... Ну ок:

str[0].toUpperCase() + str.slice(1)

Блин, js, ну ты же язык для создания интерфейсов... Почему? ¯\(°_o)/¯

Python VS JS. Функция reduce. В Python https://pythonz.net/references/named/reduce/ В JS https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Смысл функции в том, что она последовательно пройдет по всем элементам массива и на каждой итерации будет выполнять заданное действие с текущим элементом и результатом с предыдущей итерации. Питонисты не рекомендуют пользоваться этим методом, так как читабельность кода - наше все. И я за, лучше уж цикл написать, так проще и понятнее. Но JS - гангстер, он не боится грязи. Я применила эту функцию для поиска максимального id из списка со словарями.

const data = [
    {id: 1, label: 'Going to learn React'},
    {id: 2, label: 'That is so good'},
    {id: 3, label: 'I need a break...'},
    {id: 4, label: "That's good"}
]

const max_id = data.reduce((max, current) => current.id > (max.id ? max.id : 0)? current.id : max.id)

Как будет это выглядеть в Python:

data = [
    {"id": 1, "label": 'Going to learn React'},
    {"id": 2, "label": 'That is so good'},
    {"id": 3, "label": 'I need a break...'},
    {"id": 4, "label": "That's good"}
]
max_id = 0
for item in data:
    if item['id'] > max_id:
        max_id = item['id']

или короче, но менее читабельно вот так:

max_id = max([item['id'] for item in data])

На самом деле если присмотреться к коду JS, то можно увидеть, что я в функцию передаю другую неназванную функцию, сократив написание в виде стрелочной функции () => {}, убираю тело, условия возврата записываю в виде тернарного оператора (правда ? если да : иначе), в котором пишу еще одно условие в виде тернарного оператора, чтобы обойти ситуацию, когда в первой итерации у меня ничего нет в переменной max (подставляю 0).

max.id ? max.id : 0

Так вот, я грущу от JS из-за таких конструкций. Если для того, чтобы объяснить что делает 1 строчка кода, нужно рассказывать 5 минут, то это нечитаемая строчка кода. Иногда от лектора курса JS слышу: "Давайте запишем это красиво", и дальше он сокращает код, делая из 5 строчек одну, но менее читабельную. Так вот, такое "красиво" не значит хорошо или умно. Вот придерживаться code style - это красиво. В остальном, чем проще, тем понятнее.

Когда я училась в школе, у меня не было дома интернета, компьютер был еще с Windows 95, 1.5 ГБ памяти у жесткого диска, а еще я пользовалась дискетами. О программистах я думала как о совсем непонятных людях и грезила журналистикой. Писала статьи и таскала их на дискетах в местную редакцию. Я жила в маленьком провинциальном городе. История моей учебы довольно раздолбайская. Изначально я поступила на очку на специальность по дорожным машинам, бросила, так как не понимала зачем оно мне. Потом филфак, журналистика - заочка, вечерка. Короче, я так ничего и не окончила. А потом в 22 года я случайно попала в IT как менеджер. И так до 31 года я руководила - фрилансерами, проектами, командами, отделами. Всему уже училась в процессе. Книжки, курсы, статьи, коллеги. Я немного жалею, что не знала и не понимала еще в школе, что такое программирование и как я могу в нем реализоваться. Я искренне восторгаюсь программистами, кто начал еще в детстве постигать это ремесло. Однако, сейчас у меня есть все возможности, чтобы изучать программирование и при этом осознавать каждый свой шаг, так как есть большой опыт управления проектами. Я не просто пишу код, я понимаю зачем он нужен и что на самом деле я от него хочу. А также у меня есть офигенное рабочее место. Хоть это и материальное, но как же классно, иметь удобный стол, стул, монитор, хороший пк для работы. Но все это мелочи по сравнению с кайфом от невероятного потока новой информации, возможностей и результатов реализации своих идей. Когда я делаю то, что задумала, и оно получается.

https://www.youtube.com/watch?v=EiKK04Ht8QI&ab_channel=JomaTech М - мотивация. У этого же товарища есть забавные видео - программирование в стиле аниме. П - прокрастинация)

Не могу не поделиться базовыми принципами ООП

Ребята с табами, я с вами, но вот какой оказался конфуз)

Вот так кодишь себе тихонечко и даже не догадываешься, что используешь пробелы, а не табы, пока вдруг не пойдешь настраивать eslint. Никогда бы не подумала, что это вообще имеет хоть какое-либо значение, кроме холиваров. Если что, для python есть PEP https://www.python.org/dev/peps/pep-0008/#tabs-or-spaces Pycharm сам все делает по-красоте, вам даже думать не надо. Он просто по умолчанию ставит пробелы. Я свято верила, что использую табы, пока не начала тыкать в код и не обнаружила, что на самом деле там пробелы. Осталось решить вопрос с js, сколько пробелов ставить? 2 или 4?) https://learn.javascript.ru/coding-style#otstupy 2 выглядит лаконичнее, учитывая многослойность кода на js. Зато 4 пробела читабельнее, на мой взгляд. Оставлю 4. Пока искала ответы на свои вопросы, нашла статью на хабре https://habr.com/ru/company/mailru/blog/331696/ Зато я сегодня узнала о том, где находятся настройки code style в ide. Для Pycharm также можно скормить конфиг eslint, если очень надо.

Табы или пробелы?