티스토리

solar_system_11

검색하기

블로그 홈

solar_system_11

hotsunchip.tistory.com/m

마라턍 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

[Node.js] 서버 CI/DI 솔루션 [GitHub Actions][AWS EC2] 오늘은 Github Action을 이용하여 서버 CI/CD 파이프라인을 작성하는 법에 대해 작성해보려 한다. 들어가기 전 참고한 영상 첨부합니당 CI/CD 란?CI/CD는 소프트웨어 개발 프로세스에서 중요한 역할을 하는 두 가지 개념이며, 소프트웨어 개발의 효율성과 품질을 향상시키기 위해 자동화된 빌드, 테스트, 배포 프로세스를 구현하는 방법론이다.CI (Continuous Integration)는 새로운 코드 변경 사항이 발생할 때마다 자동으로 애플리케이션을 빌드하고 테스트하는 과정이다. 이 과정을 통해 개발자는 수동으로 빌드와 테스트를 수행할 필요 없이, 코드 변경 사항이 코드베이스에 통합될 때 자동적으로 품질 검사를 받을 수 있다. CI를 성공적으로 구현하면, 팀의 협업이 원활해지고, 코드 오류를 .. 공감수 3 댓글수 1 2025. 1. 21.
[Next.js 14] 다국어 지원 방법 / Localization / Internationalization 응용(데이터 및 태그를 포함한 변환) [i18next] 아래의 예시처럼 특정 위치에 css를 다르게 적용하고 싶거나텍스트 중간에 사용자 닉네임이나 결제 예정일 등의 데이터를 포함하여 함께 Localization, 즉 다국어 지원을 해야한다면잘 찾아오셨습니다! 들어가기 앞서, 해당 글은 이전에 작성했던 i18next를 이용한 App router 기반 Localization 방법의 응용편입니다. [Next.js 14] App router 기반 Localization / Internationalization [i18next]다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다.이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.jshotsunchip.tistory.com .. 공감수 0 댓글수 0 2024. 12. 13.
[CSS] 이미지 위에 gradient 넣기 + 틈 없애기 다음 페이지로의 자연스러운 전환이나, 이미지 스크롤러의 양 끝에 자연스럽게 이미지가 사라지는 효과를 위해 background를 gradient로 설정한 div 태그 등을 넣기도 한다. 이때, graident 컴포넌트가 생기기는 하는데 이미지 뒤에 있는 경우에는 z 값 조정 대신 position 속성을 absolute로 설정하면 해결된다.아래는 예시 코드. (나는 tailwind css 사용 중이라 아래처럼 입력했다).gradient-edge { @apply absolute inset-0 left-0 right-0 top-0 bottom-0; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.00) 25.. 공감수 0 댓글수 0 2024. 11. 22.
[Next.js 14] router.push에서 query만 변경 시 스크롤 유지하기 [Scroll Restoration] 웹사이트를 구현할 때 popup modal을 query에 값을 확인해서 해당 값이 있으면 overlay로 현재 화면 위에 뜨는 방식으로 구현했다.그런데 이렇게 구현하다 보니 팝업을 띄우는 버튼을 눌렀을 때 router.push를 이용하는데,이게 쨌든 url을 바꾸다 보니까 계속 뒤에 있는 화면 스크롤이 처음으로 올라갔다. 근데 이게 굉장히 거슬린달까...팝업을 켰다가 끄면 응당 원래 화면 위치가 보일 것을 기대하는데, 갑자기 처음으로 올라가는 것이 부자연스러웠다. 이를 해결하기 위해 scroll restoration이라는 키워드로 검색을 해보았다.스크롤 유지 기능을 검색해보았을 때, 뒤로가기를 했을 때 전 페이지의 스크롤 유지하는 방법만 발견했다. (심지어 실험적인 기능)module.exports = {.. 공감수 0 댓글수 0 2024. 11. 21.
[Github Actions] self-hosted runner 사용 중 CICD 오류 및 EC2 ssh 접속 안 됨 해결 (원인: EC2 인스턴스 CPU사용량 100%) [AWS EC2] 이번에 회사에서 웹 수정하면서 서버가 다운되는 일이 발생하여 어째저째 해결했는데,나중에 같은 일을 겪을 분들을 위해 정리해보기로 했다. 문제는 이제 클라이언트 쪽에서 새로 추가될 api를 사용하기 위해 서버 코드를 github에 업로드하면서 발생했다.지금 서버랑 클라이언트 모두 github actions을 이용해 CICD를 수행하고 있는데, 서버 쪽 CICD 과정이 덜컥 실패한 것이다.The self-hosted runner: {{name-of-runner}} lost communication with the server.Verify the machine is running and has a healthy network connection.Anything in your workflow that termi.. 공감수 0 댓글수 0 2024. 11. 21.
[Next.js 14] 프로젝트 빌드 시 발생하는 no-console 에러 해결 [ES-Lint] console.log일반적으로 JavaScript 프로그래밍 시 디버깅 목적으로 브라우저의 console.log 메서드를 자주 사용할 것이다.물론 콘솔 로그는 간편한 디버깅 도구이긴 하지만,보안 이슈가 발생할 우려가 있기에 실제로 배포되는 웹 어플리케이션에는 포함되지 않는 것이 좋다. ESLintESLint는 자바스크립트 코드에서 에러가 있는 부분에 표시를 해주는 정적 코드 분석 도구이다.일반적으로 Typescript, Prettier과 함께 웹 프로그래밍을 할 때 함께 설치되며, 코드의 퀄리티를 보장해준다.ESLint는 하나의 규칙으로 no-console 룰을 가지고 있는데,빌드(npm run build) 시 콘솔 로그가 포함되어 있을 경우 규칙 위반으로 처리하여 빌드가 정상적으로 완료되지 않는다. n.. 공감수 0 댓글수 0 2024. 6. 2.
[Next.js] 설치된 패키지 삭제 / npm uninstall // unscoped packagenpm uninstall // scoped packagenpm uninstall 더 자세한 내용은 아래의 공식 문서를 참고하자. Uninstalling packages and dependencies | npm DocsDocumentation for the npm registry, website, and command-line interfacedocs.npmjs.com 끗~ 공감수 0 댓글수 0 2024. 6. 2.
[Next.js 14] .env 파일 생성 및 환경변수 설정 [AWS Amplify] 코드를 작성하다보면,API Key나 Client Token과 같이 소스코드에 포함시키기 민감한 정보를 다뤄야 하거나개발 환경마다 다른 변수를 사용해야 할 때가 존재한다. 이럴 때 사용하는 것이 환경변수이다.기존에 Node.js에서 이 환경변수를 이용하기 위해서는 dotenv 패키지를 사용해야 했는데,Next.js에서는 별도의 패키지 없이 환경변수를 사용할 수 있다. (React도 마찬가지)살짝 주제엔 벗어나지만 혹시나 싶어, 환경변수는 빌드 파일에 포함되므로 누구나 볼 수 있다는 사실을 한번 짚고 넘어가겠다. 암튼 이번 포스팅에서는 Next.js 프로젝트에서 환경변수를 생성하고,이를 AWS Amplify로 배포할 때 적용하는 방법을 정리해보고자 한다..evn 파일 생성 및 환경변수 할당프로젝트의 바로 아.. 공감수 0 댓글수 0 2024. 5. 8.
[Next.js][React] 숫자 3자리마다 , 찍기 var n = 1234567890;String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')// "1,234,567,890" 공감수 0 댓글수 0 2024. 5. 8.
[Next.js 14] 사용자 데이터 csv로 변환 및 파일로 다운로드 웹을 개발하다보면, 웹 관리자에게 필요한 기능을 추가해야 하는 경우가 있다.이 포스팅 제목처럼 사용자 데이터를 csv 파일로 변환하고 다운로드하는 기능이 그 예시인데,이 기능은 사용자 통계를 내거나 마케팅 메일 수신을 동의한 사용자에게 메일을 일괄 전송할 때 유용하다.마케팅 팀에서 홍보 메일을 전송하기 위한 사용자 리스트를 요청했을 때,다른 추가 작업 없이 관리자 모드에서 버튼 하나만 달칵 -> (수신 동의한) 메일 리스트가 나열된 csv 파일이 다운로드 된다면엄청 편하지 않겠는가! (물론 db에서 메일 리스트를 가져와 메일 수신 동의 여부로 필터링해서 보내주는 api가 사전에 구현되어 있어야 하긴 함) 암튼 서론이 길었는데, 코드를 보자.const UserListDownloadButton = () =>.. 공감수 0 댓글수 0 2024. 5. 8.
[Next.js][PayPal] 페이팔 버튼(subscription) 연결 + 태그라인 없애기 현재 구현하고 있는 웹의 결제 기능을, 페이팔을 사용해서 구현하기로 했다.Nextjs 프로젝트에 페이팔 버튼을 넣는 건 react-paypal-js 패키지를 사용하면 쉽게 구현할 수 있다. @paypal/react-paypal-jsReact components for the PayPal JS SDK. Latest version: 8.3.0, last published: 8 days ago. Start using @paypal/react-paypal-js in your project by running `npm i @paypal/react-paypal-js`. There are 61 other projects in the npm registry using @paypal/react-pwww.npmjs.com.. 공감수 0 댓글수 1 2024. 5. 8.
[Next.js 14] Link나 a 태그 없이 외부 링크로 연결하기 Link나 a 태그 없이 웹 내부의 다른 페이지로 가기 위해서 next/navigation의 useRouter()을 이용하면 된다. const router = useRouter(); router.push('/main'); 이때 기타 옵션을 정해줄 수도 있지만 일단 넘어가고, 외부 링크로 연결하는 경우를 살펴보자. 일반적으로 Link나 a 태그의 href 속성으로 외부 링크를 입력해주면 되는데, 개발하다보면 button의 onClick에 연결해야 하는 등의 상황이 있다. 그럴 땐 window.open()을 사용하자. window.open("https://www.google.com")} /> 끗~ 공감수 0 댓글수 0 2024. 3. 24.
[Next.js 14] Custom 404 페이지 만들기 404 페이지를 만들어야 하는 이유 3가지 웹사이트를 개발할 때, 사용자가 올바르지 않은 경로로 접근했을 때도 처리해주는 것도 중요하다. 일반적으로 사용자가 이상한 경로로 접근했을 때 띄워주는 것이 404 페이지인데, 이 페이지를 직접 작성해주는 것이 좋다. 그 이유에는 크게 3가지가 있다. 보안상의 이유 404 페이지를 따로 만들지 않으면, 소스코드의 일부가 사용자에게 공개될 수 있다. 404 에러가 뜨면 해당 에러가 어디서 발생했는지 코드의 위치를 알려주는 경우가 있다. 대부분의 사용자는 대수롭지 않게 생각하겠지만 일부 사람들에 의해 악의적으로 사용될 수 있으므로, 그 가능성을 미연에 방지할 필요가 있다. 사용성 향상 웹사이트와 같은 디자인 시스템을 적용한 커스텀 404 페이지를 작성하면, 디자인과 .. 공감수 0 댓글수 1 2024. 3. 24.
[Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript] Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c.. 공감수 0 댓글수 0 2024. 3. 22.
[Next.js 14] Google SpreadSheets를 이용한 다국어 지원 서비스 자동화 및 발생한 오류 해결 방법 정리 [i18next][Javascript] 얼마 전(?)에 작성한 App router 기반 Localization 기능을 자동화하기로 했다. [Next.js 14] App router 기반 Localization / Internationalization [i18next] 다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다. 이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.j hotsunchip.tistory.com 설명 지금 자동화할 부분은 구글 스프레드시트에서 단어를 가져와서 각 나라별 json으로 변환하는 부분이다. 이런 비슷한 로직을 유니티 uiToolkit 이용해서 ui 다국어 지원을 구현할 때 파이썬으로 작성했었다. 간단하게 설명하자면 exc.. 공감수 4 댓글수 0 2024. 3. 20.
[Next.js 14] 간단하게 화면 새로고침하기 데이터가 업데이트 되거나 변경 사항을 반영해야 할 때 화면을 새로고침해야 하는 경우가 있다. 이럴 때는 아래와 같이 router.reload()를 사용하면 간단하게 화면을 새로고침할 수 있다. import {useRouter} from "next/navigation"; export default function Home() { const router = useRouter() return ( router.reload()}> 새로고침 ) } 공감수 0 댓글수 0 2024. 3. 20.
[Typescript] 변수 타입 확인 방법 [Javascript] 변수가 boolean인지, string인지, 아니면 number인지 확인하고 싶을 때가 있다. 그럴 땐 아래와 같이 string 형태로 확인하면 된다. switch (typeof variable) { case "boolean": // variable is a boolean break; case "string": // variable is a string break; case "number": // variable is a number break; default: break; } 끗~ 공감수 0 댓글수 0 2024. 3. 20.
[Next.js 14] 새 탭에서 링크 열기 [React] 태그에 target="_blank" 속성을 추가해준다. Google 도 마찬가지로 작성해주면 된다. Google rel="noopener noreferrer" 속성에 관한 설명은 아래 링크가 잘 설명하고 있어 첨부한다. 링크에 noopener noreferrer 사용하는 이유 얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓ joshua-dev-story.blogspot.com 끗~ 공감수 0 댓글수 0 2024. 3. 20.
[CSS] link / anchor 태그 비활성화 [Tailwind CSS] 일단 영상부터 보고 시작하자. 보면 알겠지만, 햄버거 메뉴를 만든다고 어째저째 숨기고 보이고 하는 것 까지는 완료했는데, 숨길 때 자연스러운 애니메이션을 위해 display:hidden 대신 투명도를 0으로 만들면서 문제가 발생하였다. 바로, 버튼이 있는 곳을 호버하거나 클릭 후 드래그 했을 때 사진처럼 링크가 뜬다는 것이다. 태그 / 태그를 눌렀을 때 아무 동작도 안하기 + 마우스 커서 디폴트로 유지하도록 코드를 수정하였는데도, 위치를 예상해서 드래그 해보면 해당 현상이 발생했다. 간단하게 css 속성을 추가하여 해결할 수 있었으며, pointer-events 속성을 바꿔주면 된다. .header-container.hamburger .nav-container > a { @apply opacity-0; .. 공감수 0 댓글수 0 2024. 3. 20.
[CSS] 아이콘 / 텍스트에 그라데이션(Gradient) 추가 [Tailwind CSS] 결론만 간단히. .gradient-text-and-icon { background: linear-gradient(91deg, #E05438 25.06%, #F41C33 62.44%, #D21FD6 94.29%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 공감수 0 댓글수 0 2024. 3. 20.
[CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS] 완전 초 간단한 회전 애니메이션 .spin-object { animation: spin 5000ms infinite linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } [CSS] icon 회전하기 / 태그 회전하기 CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-tran hotsunchip.tistory.com 위에서 설명한 아이콘 회전 + 크기.. 공감수 0 댓글수 0 2024. 3. 20.
[CSS] icon 회전하기 / <i> 태그 회전하기 [Tailwind CSS] CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; } 그리고 태그에 클래스를 추가해주면 아이콘이 45도 돌아간 것을 확인할 수 있다. 꼭 태그가 아니더라도, react icon, fontawesome, mui icon, remix icon 등의 (내부에서 태그로 렌더링 되는) 아이콘.. 공감수 0 댓글수 0 2024. 3. 20.
[Typescript] TypeError: Webpack imported module is not a function 해결 서버 쪽에서 데이터를 가져오는 api와 연결하는 메서드를 작성하고 있었는데, 위 에러가 떴다. 똑같은 형태의 다른 파일은 해당 에러가 안 뜨는데 특정 함수 두 개에만 뜨는 게 이상했지만, 어쩌겠나 해결해야지. 아래와 같이 코드를 수정하여 해결했다. 해결 전: export function getUserInfo() { // Do something } export function getUserLocale() { // Do something } 해결 후: function getUserInfo() { // Do something } function getUserLocale() { // Do something } export {getUserInfo, getUserLocale} 다른 파일은 해결 전 코드가 정상적으로.. 공감수 0 댓글수 0 2024. 3. 20.
[Next.js 14] 버튼 동시에 눌리는 현상 막기 [stopPropagation][Typescript] 웹을 디자인하다 보면 어떤 정보를 담고 있는 버튼 안에 삭제 버튼이 있는 것처럼 버튼과 버튼이 겹치는 것이 불가피할 때가 있다. 이때 눌러보면 두 버튼이 모두 작동하는데, 버튼을 눌렀을 때 하나만 동작하는 것이 일반적이니 이를 어떻게 할 수 있을지 알아보자. 핵심은 event의 stopPropagation()이다. 안에 있는 버튼에 아래와 같이 선언해주면 안쪽 버튼이 눌릴 때 바깥쪽 버튼이 안 눌리는 것을 확인할 수 있다. const onClick = (e: React.MouseEvent) => { e.stopPropagation(); // Do something } 아래는 이를 활용한 예시 코드이다. import "@/styles/components/card.css"; import React from .. 공감수 0 댓글수 0 2024. 3. 20.
[Typescript] 제네릭(Generic) 메서드 작성 제네릭(Generic)은 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용되는데, 이를 활용하면 재사용성이 높은 컴포넌트를 만들 수 있다. 일반적으로 아래와 같이 작성하며, 함수 사용 시 같이 넘겨준 모든 타입 T에 대해 동작한다. function genericFunctionName(arg: T): T { // Do something return arg; } 코드를 작성하다보면 arrow function ("=>" 이용하는) 형태로 사용해야 할 때도 있는데, 그럴 땐 아래와 같이 작성한다. const genericArrowFunctionName = (x: T) => { // Do something retrun x; }; 조금 더 확장하면 아래와 같이 제네릭 타입(인터페이스)이랑 제네릭 클래스도 작성.. 공감수 0 댓글수 0 2024. 3. 20.
[Next.js] 비교 연산자로 날짜 비교 안 될 때 [JavaScript] const d1 = new Date(2000, 2, 1);const d2 = new Date(2010, 4, 27);console.log(d1 > d2) // falseconsole.log(d1 기본적으로 위 식처럼 비교 연산자를 이용해 단순하게 Date를 비교할 수 있다.그런데 저 식이 모두 false를 반환할 때가 있는데, 그건 두 Date의 형태가 달라서 발생한다. 나는 DB에 저장된 유효 기간과 현재 시간을 비교해서 해당 요청이 유효한지를 판단하는 코드를 작성해야 했는데,이때 서버에서 받아 온 expiration 값(Date 형식)과 현재 시간을 반환하는 new Date()의 형태가 달라 앞서 언급한 문제가 발생하였다.나는 아래와 같이 받아 온 값을 형태를 맞춰 주어 해결했는데, 이 방법 말고도.. 공감수 0 댓글수 0 2024. 3. 15.
[Next.js 14][next-video] 메인 화면에 배경 영상(background video) 넣기 개발하는 웹의 메인 화면에 배경 영상을 넣어야 해서 Next.js documentation을 뜯어봤다. 여기서 Mux-video-api를 소개하고 있길래, 이걸로 비디오 넣는게 보편적인 방법이겠거니 싶어 해보았다. Optimizing: Videos | Next.js Recommendations and best practices for optimizing videos in your Next.js application. nextjs.org 위 사진처럼 굉장히 깔끔했다. (코드는 아래에 있음) next-video 패키지 설치 Embed a video player in your Next.js applications | Mux Quickly add video to your Next.js site using the.. 공감수 0 댓글수 0 2024. 3. 13.
[Next.js 14][Swiper] 스와이프 가능한 카드 리스트 만들기 (Carousel Slider) 포스팅을 너무 각 잡고 쓰려니까 오히려 안 쓰게 돼서, 아예 간단하게 작성하는 버그 해결 / 궁금한 점 해소 용 카테고리를 하나 팠다. 암튼 이 편한 카테고리의 첫 포스팅은 Swiper, 너로 정했다! 쓰고 보니 본 카테고리로 올려도 될 것 같아 격상시켰다. 렛츠고. 구현해야 하는 UI 사용자가 등록한 카드를 아래의 형태로 보여주고, 슬라이드 / 화살표 버튼을 이용하여 변경하는 UI를 작성하고자 한다. 이런 형태를 보통 Carousel Slider라고 하는데, 위의 키워드랑 Card list 등등의 키워드로 찾아본 라이브러리 중에서는 확장하기 편함 + 쓰기 쉬운 놈을 못 찾았다. React Swiper 처음부터 내 입맛대로 만드는 게 마음 편하긴 하지만, 내가 개발할 수 있는 시간은 한정되어 있어서 아래.. 공감수 0 댓글수 1 2024. 3. 13.
[Next.js 14] App router 기반 Localization / Internationalization [i18next] 다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다.이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.js 프로젝트에 다중 언어 기능을 추가하는 방법을 다루고자 한다.나라마다 중요하게 받아들이는 정보가 다르고, 익숙한 디자인도 다르므로 사실 정확하게 현지화를 한다고 하면 국가별로 따로 웹 페이지를 만들어야 한다. 하지만, 우리는 개발 리소스가 한정되어 있고 언어만 바뀌면 웹 서비스를 사용할 수 있으니 이 방법으로도 충분하다. 사실 웹 개발이 어느 정도 진행된 지금, 초반에 추가한 Localization(Internationalization라고도 하지만 앞으로의 내용에서는 Localization으로 통일하겠다) .. 공감수 8 댓글수 4 2024. 2. 24.
[Next.js 14] 프로젝트 폴더 구조 구성 및 git repository 연결 프로젝트 설치가 끝나면 아래와 같이 app, public 등등의 여러 폴더가 생성되었을 것이다.일단 '프로젝트 생성'이라는 큰 산을 하나 넘었으니 이제 개발을 시작하면 된다. 다만 일반적으로, 특히 협업을 진행하는 경우에는, github에 업로드하여 버전 관리를 진행하므로 본격적인 개발에 앞서 git repository를 연결하는 과정이 필요하다. 폴더 구조 구성그 전에 앞서 프로젝트 폴더 구조를 파악하고 시작하고자 한다. 아무런 가이드나 규칙 없이 그때그때 파일을 만들면 프로젝트의 구조도 복잡해지고, 필요한 파일을 빠르게 찾지 못해 개발의 효율성도 떨어지기 때문에, 나중에 폴더나 파일 구조가 좀 바뀌더라도 나는 먼저 틀을 잡고 가는 편이다.이제부터 내가 아래의 공식 문서와 나름대로 사용하면서 요래조래 .. 공감수 9 댓글수 1 2024. 2. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.