리액트 프로젝트 시작하기

프로젝트 생성$ npx create-react-app [appname] # npm 아님 주의!  라우터 설치$ npm install react-router-dom  프리티어 설치 $ npm install --global prettier  CSS 라이브러리 설치 (styled-components)$ npm i styled-components   +) 프리티어 기본 설정 코드 (파일 위치: 프로젝트 제일 상단 (src와 동등 위치))이거 추가해도 안 되는 경우 vscode 등 auto 설정 확인해보기 // prettierrc.json{ "tabWidth": 2, "semi": true, "singleQuote": true, "trailingComma": "all", "printWidth": 150..

• format_list_bulleted TIL/FrontEnd
• · 2024. 5. 21.
• textsms

[Svelte] SvelteKit으로 웹사이트 만들기 3️⃣ vercel private repo / build access 설정

vercel로 배포 후 수정 사항을 커밋하면 바로 반영이 되나요? 잘 된다! 리포 설정을 private로 바꿔도 잘 되는지 궁금했는데 그것도 잘 되는 것 같다 일단 vercel에서 private repository에 접근해서 빌드할 수 있게 하는 법 GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea... github.com 깃허브 설정 > applica..

• format_list_bulleted TIL/FrontEnd
• · 2024. 2. 15.
• textsms

[Svelte] SvelteKit으로 웹사이트 만들기 2️⃣ vercel로 배포

프로젝트를 로컬에서 만들어서 굴리는 건 그렇다 쳐도, 포트폴리오로 사용하기 위해서는 다른 사람들이 접근할 수 있게 해야 했다. 그러기 위해서 선택한 방법이 Vercel 깃 리포지토리와 연결하면 자동으로 빌드 후 배포가 된다고 해서 시도해보았다! Vercel: Develop. Preview. Ship. For the best frontend teams Vercel's frontend cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com 먼저 vercel에 접속한 후, Git 계정으로 로그인해주었다. 그리고 Add New Project 이후 내가..

• format_list_bulleted TIL/FrontEnd
• · 2023. 8. 7.
• textsms

[Next.js] 응답 완료 시 다른 페이지로 이동하기

Next에서 너무나 자연스럽게 useNavigate를 쓰려고 했다 될리가 없다! Next에서 다른 페이지로 navigate 시키는 방법에는 Link와 Router가 있는데, 버튼 누르면 이동하는 Link식이 아니라 axios 요청이 완료되면 자동으로 이동시키게 하려고 Router를 이용했다. useNavigate와 같이 임포트 후 선언해서 사용하면 됨  // importimport { useRouter } from "next/router";// 선언const router = useRouter();axios.post(`${baseURL}/api/auth/login`, data).then((res) => { const statusCode: number = res.data.statusCode; if (re..

• format_list_bulleted TIL/FrontEnd
• · 2023. 8. 6.
• textsms

[HTML/CSS] <hr /> 입체 사건

오늘의 발견.. hr 태그는 자세히 보면 약간 입체처럼 생겼다 난 그냥 일자 선을 원했던 건데.. div { border-top: 1px solid #d7d7d7; height: 8px; margin-top: 7px; } 그래서 div로 만들고 border-top만 주었다 hr처럼 자체 여백이 없어서 height이랑 margin 등을 직접 주어야 하긴 했지만 더 얇은 느낌을 위해서는 이게 나았다!

• format_list_bulleted TIL/FrontEnd
• · 2023. 5. 17.
• textsms

[React] pathname 변경에 따라서 헤더 CSS 바꾸기

내가 하고 싶었던 것: 헤더에서 내가 선택한 부분의 CSS를 바꾸고 싶었다 처음에는 const page = window.location.pathname();을 사용해서 하려고 해보고 안돼서 [page, setPage]로 선언해서도 해보고 useLocation도 써봤는데 클릭 시점에 state를 변경하면 return부분 렌더링 시점과 맞지 않아서 한박자씩 늦게 변경됐다 아무튼 그래서 열심히 방법을 찾던 끝에 NavLink를 사용해서 완성했다. 코드는 대략 다음과 같다. (isActive ? "selected" : "")}> 📚 기초 개념 isActive는 NavLink의 고유 속성(boolean)으로 사용할 수 있는 듯 하다. pathname 관련 속성 해당 링크로 이동하는 경우 selected라는 클래스..

• format_list_bulleted TIL/FrontEnd
• · 2023. 5. 15.
• textsms