728x90 반응형 Front-End30 Typescript 디버그 세팅!(tsconfig.json + vite + vscode) 일단... 갑자기 이걸 들고 온 이유는 반드시 이걸 배워야겠다는 생각이 들어서이다. 물론 스프링도 들을 거긴 한데... 그전에, 지금 죽어가고 있는 FlowForge를 살려낼 희망을 여기서 찾았기 때문이다. redux 가지고 react앱 개발하는 건 좋은 아이디어다. redux를 대체 어떻게 이용해 먹어야 하는지 도대체 알 수가 없다는 생각이 들기 전까지는. 일단 당장 코드가 언제 어떻게 쓰이는지 바로바로 직관적으로 이해할 수 없는 코드가 많기도 하고, action이랑 같이 있으니까 더욱 환장할 것 같았다. 지금은 되지도 않는 거에 투자하는 것 보다는 나중에 돌아오는 게 낫겠다 싶어 스프링을 들으면서 힐링하고 있었다. 역시 Java! 하고 있는데 문득 생각이 드는 게, Typescript를 쓰면 특유의 .. 2024. 2. 28. [반응형] CSS 간단한 가변 요소 크기 단위 정리 요즘에는 프런트엔드의 기본기(HTML, CSS, JS)를 한번 전부 다져두었다. 간단한 건 클론코딩을 하고 조금 만져보는 것으로도 꽤나 경험이 되는 것 같다. 물론 프로젝트도 진행하고 있지만. 이번 주 안에는 최소한의 기능을 넣은 앱을 배포해보고 싶다. 어차피 남아도는 게 시간이라. 각설하고, 그래도 지금은 CSS쪽을 더 파고 싶었다. 일단 적어도 앱을 출시하기 위해서는 보이는 것, 적당히 모던해 보이는 게 필수라고 생각했기 때문이다. 물론 "반응형" CSS를 공부하는 건 다른 맥락에 있을 수도 있겠지만, 대충 그런 느낌이라는 것만 알아두면 된다. 도서관에서 책을 빌려서 지속적으로 보고 있는데, 빌린 책이라서 기록을 더 해두고 싶은 것도 있는 것 같다. 웹페이지 디자인을 기획할 때 간단하게 쓸 수 있는 .. 2023. 12. 28. CSS margin padding 해도 안 사라지는 공백 (inline-block) 혹시 CSS 코딩을 하다고 대체 왜 존재하는 건지 모를 망할 공백을 본 적이 있는가? margin, padding을 0으로 만들어도, 도저히 줄일 수 없는 무언가. 내가 겪었던 함정은 이렇다 : #wrap { width: 90%; height: 500px; margin: 0 auto; border: 4px solid #000; } .container { width: 93.75%; height: 492px; margin: 0 auto; border: 4px solid #000; } .container div { display: inline-block; height: 100%; border: none; margin: 0; padding: 0; } .container div:nth-of-type(1) { wi.. 2023. 12. 21. CSS 고급 선택자 2 - 속성 선택자 해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다. 지난 번에는 주로 태그 자체(어떤 div, p, a 등)를 어떻게 선택하는지에 대해서 많이 적었다. 형제 선택자, 자식 선택자 등등... 해당 내용은 여기에 있다 : 지난 번 글 CSS 고급 선택자 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML passingprogram.tistory.com 이번에는 어떤 태그에 달려있는 속성을 가지고 태그를 선택하는 방법을 알아보고자 한다. 우선 아래의 자세.. 2023. 8. 13. CSS 고급 선택자 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다. 1. 하위 선택자 제일 많이 이용할 선택자들 중 하나이다. 어떤 선택자의 하위에 존재하는 모든 요소에 해당 스타일을 적용한다. outside section 아직 온라인 예약 신청이... (p inside section) 가족실... (p inside div inside section) 2. 자식 선택자 부모요소 바로 아래에 있는 자식 요소 에게만 스타일을 적용하는 태그이다. 위의 .. 2023. 7. 28. CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정 요즘 계속 군대에 있는 누군가와 프로젝트를 하고 있다. 근데 생각해보니 내 계정도 아니라서 깃허브에도 기록이 안남는데다가 나중에 가면 내가 이러한 포트폴리오를 했다고 증명할 방법이 안 남는다는 사실을 알았다. 물론 경험은 남는다. 지금도 CSS를 다루는데 기본적인 레이아웃 짜는 방법을 어느정도 알게 되었고, React프로젝트를 할때 밑거름이 되어 줄 것이다. 하지만 역시 명시적으로 내가 뭘해왔는지 남기는 것은 좋다. 마침 오늘 개발하려는 페이지는 쉬운 페이지이다. 카카오톡의 리스트 페이지와 비슷하게, 메시지 방을 세로로 된 리스트에 띄우는 페이지이다. 웹페이지를 만드는데 제일 필요한 것이 단순하게 레이아웃의 가로정렬, 세로정렬 법이다. 지금도 똑같이 작업을 진행하고 있는지는 모르겠지만, Andriod S.. 2023. 5. 31. [군대식 클라우드 코딩 Add Feature] - 23 01 28 replit을 다루는 것이 익숙해져서 그냥 만져보고 싶은 것을 콕콕 찌르고 있다. 우선, 나는 위키를 만들어 보려고 한다. 좀 간단할 수도 있고, 전혀 간단하지 않을 수도 있는데... 음 일단 구현해보고 싶은 아이디어가 있으니까 만들어보는 게 좋을 듯하다. 그렇게 삽질하다 보면 일단 실력이 늘겠지... 그렇게 옛날옛적 프레임워크 만지는 것도 재미나다. 이후에는 HCJ에 익숙해진 걸 바탕으로 spring이라던지 써보면 좋을 듯? (JSP / RoR을 둘 다 써본 적이 있기 때문에 어떻게 돌아갈지 기대가 됩니다.) 아무튼 새롭다... 라기보다는 처음으로 웹페이지를 단장해 보았다. bootstrap을 대충- 떡칠해 놓았다. 적어도 모던한 디자인이라도 나오게끔 하려고 한다. 1. 글 리스트 화면 containe.. 2023. 1. 28. [군대식 클라우드 코딩 TroubleShooting] - 23 01 26 이전 글 [군대식 클라우드 코딩 TroubleShooting] - 23 01 10 다음 글 [군대식 클라우드 코딩 TroubleShooting] - 23 01 26 2주간 포스팅을 안했는데, 당연히 휴가 갖다 온것도 있겠지만, 그후에 이걸 작업하느냐고 좀 늦었다. 드디어 rake가 어째서 잘못 깔렸는지 원 passingprogram.tistory.com 2주간 포스팅을 안했는데, 당연히 휴가 갖다 온것도 있겠지만, 그후에 이걸 작업하느냐고 좀 늦었다. 드디어 rake가 어째서 잘못 깔렸는지 원인을 알아냈다. 그 이유는 다름아닌 replit.nix에 있었다. { pkgs }: let pkgs = import (builtins.fetchTarball { url = "https://github.com/NixO.. 2023. 1. 26. [군대식 클라우드 코딩 TroubleShooting] - 23 01 10 다음 글 [군대식 클라우드 코딩 TroubleShooting] - 23 01 26 2주간 포스팅을 안했는데, 당연히 휴가 갖다 온것도 있겠지만, 그후에 이걸 작업하느냐고 좀 늦었다. 드디어 rake가 어째서 잘못 깔렸는지 원인을 알아냈다. 그 이유는 다름아닌 replit.nix에 있었다 passingprogram.tistory.com 이전 글 [군대식 클라우드 코딩 TroubleShooting] - 23 01 09 1. 일단 오래간만에 다시 컴백해서 살펴보고 있는데 Azure에 올리는 기능하고 Test Develeopment 환경도 문제 없어 보임 근데 Rspec이 동작을 안함. describe "canary test" do it "true to be true" do expect(true).to be t.. 2023. 1. 10. [군대식 클라우드 코딩 TroubleShooting] - 23 01 09 다음 글 [군대식 클라우드 코딩 TroubleShooting] - 23 01 10 1. 일단 rspec과 관련된 문제가 생각보다 깊다는 것을 알아냈다. 최악의 경우, 현재 rake가 깨졌으며, 그 상태로 작업을 해야하고 이러다가 잘못될 경우에는 복구할 방법이 전혀 없다는 것은 정말 passingprogram.tistory.com 이전 글 [군대식 클라우드 코딩] 2. Rails 7.0.4로 업그레이드 시도 이전 글 [군대식 클라우드 코딩] 1. Azure에 원격으로 Ruby On Rails 넣어보기 군대에 있으면 개인 PC는 개뿔 그냥 인터넷만 가능한 뚱딴지 같은 상황이 나온다. 여기서 코딩을 하기위해서는 클라우드 passingprogram.tistory.com 1. 일단 오래간만에 다시 컴백해서 살펴보.. 2023. 1. 9. 이전 1 2 3 다음 728x90 반응형
