안녕 나는 수연이

🕊️🕊️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 상태가 유..

🐶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 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의..

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

toy project로 진행하던 랜딩 페이지 배포...! Dialogue 작업을 시작했다! 3Dme Cloud Client New의 service 브랜치에서 내가 작업할 브랜치를 생성했다! 어진님이 알려주신 방법대로 작업을 진행하기 전 노트에 정리를 했다! 이렇게 정리하면서 코드를 짜니까 훨씬 수월하게 작업할 수 있었다-!! 총 3개의 Dialogue를 만들었는데 기존 약관 동의 여부에 따라 각각 다른 약관을 보여줘야 한다. 만약 terms만 동의했다면 privacy를, 둘다 동의하지 않았다면 terms, privacy 모두 띄워야 한다. 이럴 경우에는 당연히? if 문을 사용해야 한다! 처음엔 각각의 다이얼로그에 id 값을 부여해서 일치하는 경우에 띄우려고 했는데 그냥 간단하게 if문을 사용하는 게 좋..

🔎Variable (변수) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 Managed Language: 메모리 관리를 언어상에서 알아서 해주는 언어 JavaScript = managed language (매니지드 언어) 개발자 ⇒ 직접 메모리 제어 불가 할당: 변수에 값을 저장 참조: 변수에 저장된 값을 읽음 선언: 변수명을 자바스크립트 엔진에 알림 Scope(스코프): 변수에 접근할 수 있는 범위 전역변수: 함수 외부에서 선언되어 프로그램 전체에서 접근 가능한 변수 지역변수: 함수 {함수 내부에서 선언된 변수}로 특정 지역에서만 사용 가능한 변수 → 함수 외부에서 접근 불가능. 함수가 실행되면 만들어지고 종료되면 소멸하는 변수 함수 레벨 스코프..