몽땅뚝딱 개발자

너무 오랜만에 올리는 클론코딩 근황... Vue는 정해진 hook이 있었고 강의나 실제 사용하는 곳에서도 비슷비슷한 느낌의 구조라 금방 적용할 수 있었다. 하지만 리액트는 라이프사이클을 보고... hook을 봐도 무슨 말인지 모르겠다. (Vue를 처음 공부할 때랑 똑같은 느낌.. 나중엔 나아지겠지만..!) 그래서 주변에 리액트를 사용하는 개발자들에게 물어보고 구글링도 많이 해봤는데 모두 구조를 다르게 사용하고 있었다. 고민하다가 여러가지 정보들 + Vue에서 사용하는 구조를 다 혼합해서 구조를 정리하고 페이지에 데이터 연동까지 완료했다. 1. 설정 해당 글을 참고하였다. 이 글과 동일하게 AxiosInstance를 생성하고 api를 작성했다! [Axios][업무][베트남🇻🇳] - Axios instanc..

https://reactrouter.com/en/main/utils/create-routes-from-elements createRoutesFromElements v6.4.4 createRoutesFromElements createRoutesFromElements is a helper that creates route objects from elements. It's useful if you prefer to create your routes as JSX instead of objects. import { createBrowserRouter, RouterProvider, } from "react-router-dom"; // Y reactrouter.com

처음 한 것 치곤~~ 잘했자나~~ 하지만 앞으로 개선해야 할 것들은 꽤 많아 여기에 기록해두고 하나하나 추가하려고 한다. [✓] css 개선 - 다른 사람들은 어떤 구조를 사용하고 있는지 서치 - GlobalStyles를 어떻게 더 효율적으로 입력할 수 있나, 그리고 분리할 수 있는지 고민고민 [✓] 폰트 최적화 [✓] API - 이것도 다른 사람들은 구조를 어떻게 가져가는지 봐야 함 [✓] Redux - 공부하즈아...! ^_^ [✓] 다크모드 [✓] Jest [✓] 목업 API 추가 [✓] 경로 설정

예전에 prettier랑 eslint 설정하다가 막힌 적이 있는데 당시 그냥 하지말아야지! 하고 넘어갔었고 결국 같은 오류에 직면하고야 마는데.... 역시 그때 그때 해결해두어야 한다. (이 깨달음만 54875456465번째) 출처는 모두 여기!!!!!!!! 감사합니다. React ESLint + Prettier 적용하기 React ESLint + Prettier 적용하기 React에 ESLint와 Prettier를 적용하는 방법에 대해 알아보겠습니다. 1. ESLint 설치 ESLint는 JavaScript 코드를 분석하여 문법 검사를 지원하고 런타임 이전에 오류를 찾아주.. freestrokes.tistory.com ◽ prettier npm i --save-dev --save-exact pretti..

장대하지 않은 클론코딩의 시작...! 두두둥.. (나의 목적은 단순히 리액트를 익히는 것이다.) 나름 일정관리를 위해 노션도 만들고, 회의도 간략히 했다. 너무 심각하게 일정을 짜면 오히려 안 할 것 같아서 우선 러프하게 가되 시작부터 해보자고 했다. 친구는 모델링을 시작했고 나는 프론트엔드 프로젝트 세팅을 시작했다. 그리고 친구는 다 끝났다. 너무 멋있다. 근데 나는 안 끝남... 프론트 개발은 내가 다 주도하고 결정해야했다. (왕부담ㅠ) 리액트로 개발한다는 것만으로도 쉽지 않을 것 같아서 타입스크립트까지 하면 더 힘겨워지는건 아닌지 고민했다. 근데 주변에서 그냥 타입스크립트까지 적용하라고 해서 그렇게 했다. 어차피 고통스러운건 나,, 그래도 배우는 사람도 나,, 화이팅,, ◽ react + types..

🚩 반응형 웹디자인 수업 (2021.07~2021.09) ⭐ 목적 · 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다. · 디바이스의 폭에 따라 반응형으로 동작하는 웹페이지를 만들 수 있다. · 자식, 부모 속성을 부여하여 원하는 위치에 요소를 배치할 수 있다. 🔗 URL https://hvsundev.github.io/my-portpolio/project1/index.html 혹시나 전체적으로 구현된 모습이나 소스를 보고싶은 분이 계시다면 해당 파일 다운로드 후 알집을 풀고 index.html을 크롬으로 실행하면 볼 수 있습니다! 🎨 Design 📁 tree ├─ css │ ├─ common.css ├─ img │ ├─ 이미지들.. ├─ index.html 📄 index.html 개인 기업 로그인 ..

🚩 반응형 웹디자인 수업 (2021.07~2021.09) ⭐ 목적 · 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다. · 코드 작성 순서에 따라 배치되는 엘리먼트가 아닌 지정된 위치에 고정되어야하는 엘리먼트의 경우, 부모와 자식 속성을 지정하여(position값 지정) 위치를 잡는 방법을 이해한다. · px로 고정된 폭을 잡는 것이 아니라, calc() 함수를 사용하여 디바이스의 폭에 따라 엘리먼트의 폭도 함께 조절하는 방법을 이해한다. 🔗 URL https://hvsundev.github.io/my-portpolio/project2/index.html 혹시나 전체적으로 구현된 모습이나 소스를 보고싶은 분이 계시다면 해당 파일 다운로드 후 알집을 풀고 index.html을 크롬으로 실행하면 볼 수 ..

🚩 반응형 웹디자인 수업 (2021.07~2021.09) 기본적인 코딩 후, 직접 디자인하고 코딩해보는 시간을 가졌다. 강사님이 주신 레이아웃과 텍스트를 유지한채로 해야했기 때문에.. 이미지 소스가 굉장히 풍부한 스타벅스로 해보기로 결정했다. 사실 내 일을 할 때는 이미 만들어진 화면을 받아 개발을 했던터라 레이아웃 자체를 만들어볼 일이 없었는데 이번에 내 포트폴리오를 준비하면서 디자인과 CSS도 함께 더해보며 화면을 그려보고자 했다. 상자를 나란히 나열하는 것도 어려웠던 내가.. 이렇게 해냈다. 정말 좋은 수업이다. ⭐ 목적 · 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다. · float 속성을 사용하여 적절한 위치에 를 배치할 수 있다. · float 속성 사용 후, clear: both를 이..

◽ 레이어 생성 // 새 창을 띄워 새 레이어 생성 Ctrl + Shift + N // 새 창 없이 바로 새 레이어 생성 Ctrl + Shift + Alt + N ◽ 레이어 삭제 Delete ◽ 레이어 선택 Alt + [ Alt + ] ◽ 선택된 레이어 옮기기 // 한칸 단위로 옮기기 Ctrl + [ Ctrl + ] // 가장 상단/하단으로 옮기기 Ctrl + Shift + [ Ctrl + Shift + ] ◽ 전경색/배경색 채우기 // 전경색 채우기 Alt + Del // 배경색 채우기 Ctrl + Del