안녕 나는 수연이

🕊️🕊️Dentbird 많관부🕊️🕊️ https://www.dentbird.com/ Free Dental CAD for Digital Dentistry on the Web | Dentbird Dentbird is the only free AI dental CAD on the web. No installation is needed. With a fully-automated software, streamline your digital dentistry workflow. dentbird.com 이번주는 뭔가 짧게 느껴졌다. 반차와 연차를 한 번에 사용해서 그런건지... 일찍 출근하시는 희경님과 송주님이 안보인다 했더니 미국 가는 날이었다....!! 그리고 어제 태근님이 보내주신 성격 테스트 나는 인(p)이 나..

가장 마지막으로 작업했던 Slider! 기존 랜딩페이지에서는 라이브러리를 사용했는데 난 라이브러리를 커스텀해서 사용하는 게 더 복잡하다고 생각했다! Slider 구현 도오전 1. 오른쪽 화살표를 누르면 다음 슬라이드로 넘어가고 왼쪽 화살표를 누르면 이전 슬라이드로 넘어간다 2. 첫 번째 슬라이드에서 왼쪽 화살표는 비활성화 되어야하고 마지막 슬라이드에서 오른쪽 화살표는 비활성화 되어야한다. 3. 아래 동그라미를 누르면 해당 슬라이드로 이동해야한다. 일단 ui를 구현하고 화살표에 onClick 이벤트를 넣었다. 여기서 currentSlide는 상태이고 초기값은 0이다. 첫 번째 슬라이드의 index가 0이기 때문에 초기 값을 0으로 설정했다. 더이상 넘길 슬라이드가 없을 때 next 버튼을 비활성화 하기 위..

새로운 도메인으로 랜딩페이지를 배포한 후, 이것저것 수정 작업을 하고있다. b2b landingPage에 faq라는 페이지가 있다. 처음엔 질문-응답-질문-응답 이런 느낌이었는데 카테고리를 생성해서 카테고리를 클릭하면 질의응답이 보이도록 기획과 디자인을 변경했다. 백오피스에서 카테고리를 생성하면 그 카테고리가 title이 되고 title을 클릭하면 드롭다운에 퀘스쳔과 엔서가 들어있다-!! 생각해보니까 백오피스를 연동(?)하는 작업은 또 처음 해보는 것 같다. 연동이라고 하기엔 랜딩페이지에서도 api를 호출해서 사용하지만..? 백오피스에서의 작업물이 랜딩페이지에 잘~ 반영이 되도록 해야한다. b2b LandingPage의 Have a question인데, 아직 공식 배포가 되지 않았기 때문에 요로코롬 일부..

b2b LandingPage의 UI 구현이 막바지를 향해 달려가고 있다~+~+~+~+ 어제는 book a demo Page의 UI 구현과 api 연동 작업을 진행했다. 디자인 시스템을 사용하지 않고 체크박스를 어떻게 구현할까 엄청 많이 고민을 했는데 mui를 사용하는 게 가장 좋을 것 같았다. https://mui.com/material-ui/react-checkbox/ input 태그의 type을 checkbox로 지정하는 방법도 있는데 이 경우 커스텀이 쉽지 않다. 이렇게 mui에서 제공하는 FormGroup과 FormControlLabel을 사용하여 피그마와 동일한 체크 박스를 만들었다.! mui에서 제공하는? Checkbox의 Props가 있는데 여기서 id 값이 가장 중요하다. id 값이 없을 ..

▪️▪️▪️ LandingPage는 새 단장 중 ▪️▪️▪️ 그리고 B2B LandingPage가 생겼다! 준일님께서 B2B Page를 디자인해주셨는데 까망 배경색이 너무 예쁜것 같다. 이제 UI 구현 정도는 빠르게 쇼쇼쇽 할 수 있다. ㅋㅋㅎㅎ LandingPage는 tailwind CSS를 사용하고 있는데 styled-component 보다 반응형 스타일 적용이 편한 것 같다. 무엇보다 style 파일을 따로 만들지 않아도 된다는 게 좋았다..! B2B Header에는 드롭다운 메뉴가 있다. 같은 드롭다운이지만 데스크탑/모바일 버전에 따라 다르게 코드를 작성해야한다. ▫️▫️▫️데스크탑▫️▫️▫️ 1) 상위 메뉴 mouseOver 시에 하위 메뉴가 나타나고, 하위 메뉴까지 mouseOver 상태가 유..

지난주 금요일 클라우드 팀 회식 혜화역에서 연극 '리미트'를 봤다. 진웅님 기다리면서 뚜벅이 팀끼리 찰칵 티켓 발권하는 거 슬쩍 찍고 있는데 깜짝아 티켓 받고 퀴즈노스 가는 길 음식이 너무 늦게 나오는 바람에 극장 가면서 먹는 팀원들... 쏘큩 정말 예쁘고... 멋있고.... 진웅님이 그렇게 가고싶어 했던 bhc 맛쵸킹 처음 먹어보는데 굉장히 맛있었다! 내리기 전에 사진 찍었는데 시형님이 또 모자이크 할거냐고 하셔서 이번엔 안했다. ㅋㅋ 집 도착하면 인증샷 보내기로 했는데 어진님이 한 숨 자고 일어나서 그런지 대답을 해줬다...!!1! 원래 어진님 대답 잘 안해주는뎀........................ // i18 → Internationalization의 축약형으로 첫 알파벳인 i와 마지막 알파..

🐶Data dog? https://www.datadoghq.com/ Cloud Monitoring as a Service | Datadog See metrics from all of your apps, tools & services in one place with Datadog's cloud monitoring as a service solution. Try it for free. www.datadoghq.com 🥭로그 및 수집 관리🥭 실시간 로그 수집 및 모니터링 구축 에이전트에서 로그 수집 활성화 → 로그 전송 로그 수집 - 무제한 적인 로깅 https://docs.datadoghq.com/logs/guide/getting-started-lwl/ 인제스트 수집된 모든 로그는 인제스트를 거친다. 인제스..

업데이트 된 디자인 시스템 작업을 진행했다.🍒 checkBox와 RadioButton에 hoverd 속성이 없는 디자인을 추가해야한다. 그래서 boolean으로 타입을 지정했다. hovered의 기본 값을 true로 설정하고 props으로 받았다. 그리고 삼항연산자로 hovered가 false일 때 크기를 변경해주었다. 스토리북에 추가하고 전에 만들었던 grey900 Button과 함께 v1.1.3으로 배포했다.🍊 ⚡️ Redux(리덕스)란? Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다! Redux의 기본 개념 : 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의..

Diaglogue 모바일 버전을 끝내고 TypeScript 학습을 시작했다! 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있으며 개발자 구인 시 우대사항 기술로도 자주 언급되고 있다고 한다. 그럼 당연히 학습을 해야지-! * 타입스크립트 * 높은 수준의 코드 탐색과 디버깅 타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의..

제 3자 정보 제공 동의 Dialogue 작업을 진행하고 있다. 데스크탑ver을 마무리하고 모바일ver을 시작했다 ! 어떤 기능을 구현해야하는지, 어떤 코드가 필요한지 피그마잼에 정리했다. 어진님이 추천해주신 방법인데 아주 좋은것 같다. 뭔가 어진님은 쌤이라고 불러야할것 같다. 그만큼 설명도 잘 해주시고 정말 도움이 되는 조언?을 많이 해주신다. 감솨링⭐️ 모바일은 이렇게 귀엽다. 데스크탑에서는 styledcomponent를 모바일에서는 tailwind를 사용한다. 예전에 tailwind를 공부했었는데 styledcomponent를 계속 사용해서 그런지 잘 기억이 나지 않았다. https://tailwindcss.com/ 정리가 엄청 잘 되어 있어서 어려운건 딱히 없었다! 하나하나 찾아보는 게 귀찮아서 ..