728x90 Compose Web5 Div에 background image 사용하기 웹에서 만약 background image를 사용하려면 background-image: url(http://..../); CSS에서 이런 식으로 지정해 줍니다 Compose web에서도 div에 bacckground Image를 사용할 수 있습니다. backgroundImage("https://images.unsplash.com/photo-1519810755548-39cd217da494?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80") 그러면 이런 식으로 사용하면 되나? 싶어서 해봤지만 이미지가 로딩이 되지 않고, 그저 검은 화면이 뜨게 됩니다. 이유는 해당 코드에서 url을 따.. 2023. 2. 8. compose web live reload 시키기 Compose Web에서는 live Reload 기능을 지원을 하지 않는 줄 알고, 계속 껐다 켰다 삽질을 했었지만 사실은 가능합니다. 그것도 아주 간단하게 실행문 뒤에 --continue만 붙여주면 변경에 따라 화면을 다시 구성해 줍니다. ./gradlew jsBrowserDevelopmentRun --continuous 2023. 2. 8. Compose For Web에서 실행 종료하기 Compose for Web 버전을 사용할 때 코드를 수정하고 일을 마치면 실행을 종료해야 합니다. 하지만 항상 그냥 종료를 하기에는 조급 아쉽다는 생각이 듭니다. 그렇기에 터미널 창에서 종료하는 법을 정리해 보겠습니다. 종료 명령어는 Terminal 창에서 실행되기 때문에 linux에서 실행 종료를 의미하는 명령어인 ctrl + c를 누르면 프로세스가 종료됩니다. 2023. 2. 8. Compose Web gradle error - org.nodejs:node:14.17.0. rootProject.plugins.withType { rootProject.the().nodeVersion = "16.0.0" } IntelliJ에서 Compose Web 프로젝트를 생성 후 실행하려는데 아래와 같은 오류가 발생합니다. 아마도 해당 오류는 MacOS를 사용할 때 발생하는 것 같습니다. 해당 오류를 해결하기 위해 web수준의 build.gradle에 repositories에 아래와 같은 코드를 입력해 주면 됩니다. rootProject.plugins.withType { rootProject.the().nodeVersion = "16.0.0" } 그 이후 sync를 해주면 문제가 해결되는 것을 확인할 수 있습니다. https://youtrack.jetbrains.com/issue/KT-49.. 2023. 2. 8. Kotlin Compose로 Web 프로젝트 만들기 - IntelliJ 먼저 프로젝트를 생성해 줍니다. 이후에 Kotlin Multioplatform으로 왼쪽 바를 클릭한 이후 Compose Web Application uses Kotlin 1.6.10을 클릭하여 Web 용 프로젝트를 생성합니다. 저는 Compose MPP Module로 생성하였습니다. 그러면 이런 식으로 프로젝트를 생성할 수 있습니다. 여기 메인 함수에 예시 코드가 있습니다. 해당 코드는 Compose이지만 org.jetbrains.compose.web.css 와 dom 등 웹을 개발할 때 사용하는 컴포넌트들을 사용할 수 있도록 세팅이 되어있는 것을 확인할 수 있습니다. 해당 코드를 해석한다면 버튼을 클릭하면 count에 1을 더하거나 1을 뺄 수 있고 아래 Text에 숫자가 띄워지는 것을 알 수 있습니다.. 2023. 2. 8. 이전 1 다음 728x90
