위어드섹터 공식 블로그

최근 프로젝트를 진행하면서 Flutter iOS 앱으로 통해 사용자가 어떤 버튼을 클릭했는지 확인하기 위해 Facebook SDK 설치 후 테스트를 진행했습니다. 기업 입장에서는 사용자가 어떤 버튼을 많이 클릭했고, 어느 분야를 좋아하는지 알고 싶지만 기본 기능으로는 확인할 수 없기 때문에 Facebook SDK를 활용해서 그 방법을 적어보려고 합니다. 페이스북 SDK iOS 가이드 같은 경우 네이티브 기준이기 때문에 외부 플러그인을 사용해야 합니다. 사용자가 어떤 버튼을 클릭했는지 확인하기 위해서는 페이스북 SDK 플러그인과 페이스북 개발자 계정이 있어야 합니다. facebook_app_events 플러그인 : (https://pub.dev/packages/facebook_app_events) Meta..

Developing/App 2022. 11. 1. 16:19

프로젝트를 진행하면서 버튼에 마우스를 올리면, 최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다. 무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :) 1. 시도했던 방법 처음에 저는 아래와 같이 스타일을 주었습니다. a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다. b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다 자연스럽게 이동되도록 transition 효과도 주었습니다:) 이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover ..

Developing/프론트엔드 2022. 8. 8. 19:47

최근 진행한 프로젝트 중 React Native를 이용한 App 제작에서 OS 영역을 맡게 되었습니다. 안드로이드와 iOS 개발을 동시 진행하면서 안드로이드에서는 잘 구현되는 기능이 iOS에서는 작동이 안 되는 경우가 생겨 수시로 기능 및 스타일을 확인해야 하는 경우가 생겼습니다. Xcode로 통해 개발을 진행하고 있었지만 불현듯 스마트폰에 연결 후 실시간 연동이 가능했으면 좋겠다 라는 생각을 가지게 되었고, 확인이 가능한 기능이 존재해 개발 진행에 많은 도움이 되어 이번 게시물로 통해 공유하려고 합니다. iOS 개발 특성상 맥 기기와 애플 개발자 계정을 가지고 있어야만 가능합니다. 우선 Xcode를 사용하여 아이폰으로 실시간 연동 및 TestFlight로 통해 Test App 업로드, AppStore에..

Developing/프론트엔드 2022. 8. 8. 19:27

리액트 네이티브 기반의 프로젝트를 진행하던 중, 버튼을 화면의 제일 하단으로 배치하고 나머지 영역은 콘텐츠로 채우는 디자인을 퍼블리싱하게 되었습니다. , 태그를 최상단에 작성했을때, 이 태그와 최하단 버튼에 아래와 같이 flex : 1 을 주면 원하는 대로 스타일이 적용되었습니다. test: { flex:1, } 그런데, 태그를 최상단에 작성 후, 위와 같이 스타일을 주었으나 적용되지 않았습니다. 알고나면 쉬운 해결 방법이지만 무엇이 문제인지 모를 때는 답답한 상황입니다..! 이번 글에는 태그를 최상단에 작성했을 때, 최하단으로 버튼을 정렬하는 방법을 공유하려 합니다. 먼저, 제가 디자인 받은 시안은 아래와 같습니다. 텍스트 콘텐츠 영역이 태그로 되어있습니다. [ 시도했던 해결 방안 ] 위 문제를 겪고 ..

Developing/프론트엔드 2022. 7. 18. 19:26

이번 게시물은 JavaScript의 반복문을 이용해 삼각형을 구현 하려고 합니다. 단순해 보이면서 어려운 과정이지만 반복문의 기초와 구조를 이해함과 동시에 로직 구현에 있어 많은 동기부여를 받았고, 입사 후 첫 과제이기에 풀이 과정을 기록하려고 합니다. 구현 조건으로는 input 박스 안에 숫자를 넣고 버튼을 클릭하면 입력 숫자에 맞게 삼각형이 생성되어야 합니다. 반복문을 사용해서 구현했고, 반복문은 어떤 명령을 반복적으로 실행해야 할 때 사용되는 언어입니다. 아래 예시를 통해 확인을 해보도록 하겠습니다. for 문은 아래와 같은 순서로 진행됩니다. 가장 먼저 초기화 식인 let i = 0 이 실행되며 한 번만 실행됩니다. 초기화식이 종료되면 조건식이 실행되고 i = 0이므로 평가 결과는 true 입니다..

Developing/프론트엔드 2022. 7. 18. 19:19

진행 중인 프로젝트에서 펼쳐보기 버튼을 누르면 상세보기가 되고 생략 버튼을 누르면 생략이 되는 버튼을 컴포넌트가 추가될 때 자동으로 생성되는 것을 목표로 구현해보았습니다. 처음 시도에서는 컴포넌트를 보여주는 것을 관리하는 state를 각각 만들어서 독립적으로 관리하려고 했습니다. 하지만 그렇게 되면, 추가 버튼을 눌러서 컴포넌트를 새로 만들면 새롭게 변수를 만들어야 하는데, 변수를 자동 생성하는 게 쉽지 않았고 변수가 많아짐에 따라 코드의 가독성이 저하되고 유지 보수하는데 어려움이 있는 문제가 발생하였습니다. 이후, 컴포넌트를 보여주는 Boolean 값들을 가지는 배열을 state로 만들었습니다. 그렇게 함으로써 새롭게 컴포넌트를 만들 때, 배열에 값을 push를 해서 관리하기 용이하도록 하였습니다. 이..

Developing/프론트엔드 2022. 7. 18. 18:30

사용자 정보를 폼에서 입력받아 전송버튼을 클릭하면 입력받은 정보를 메일로 받도록 하는 작업을 진행했습니다. 이 작업을 위해 네이버의 Cloud Outbound Mailer API를 사용하였는데, 공식문서와 블로그를 참고해도 메일이 발송되지 않았습니다. 이번 글에는 Cloud Outbound Mailer API를 적용하는 방법 및 오류해결을 위해 제가 시도했던 방법을 공유해보려 합니다. 1. Cloud Outbound Mailer란? Cloud Outbound Mailer는 개인화 콘텐츠 메일을 빠르고 안정적으로 전송할 수 있는 서비스입니다. 알림, 정보, 마케팅 대량 메일을 UI를 통해서 쉽게 전송하거나 운영하고 있는 서비스에 연결해 전송할 수 있습니다. 또한 운영 중인 서비스에 Cloud Outboun..

Developing/백엔드 2022. 7. 8. 11:06

JavaScript 언어를 이용한 개발을 진행하다 보면 변수를 선언해 로직을 만들어 나아가야 하는 데 변수를 선언하는 방법으로 JavaScript 예약어의 키워드를 사용해 구성해야 합니다. 저 또한 키워드를 선택이 아닌 필수로 사용하지만 정확한 의미를 모르는 채 사용하고 있어서 검색을 통해 정확한 의미를 배우고자 기록하게 되었습니다. 그동안 변수를 선언하기 위해 var 키워드를 사용해 선언 했지만 많은 문제점이 발생했었습니다. 협업을 통한 개발을 하다 보면 여러 명이 작성한 코드를 토대로 개발을 진행하게 되는데 특정 오류가 발생이 되면 코드 전체를 확인해야 하거나 해당 영역을 작성한 개발자에게 물어봐야 하는 상황이 생기게 되었습니다. 오늘 게시물은 키워드의 종류와 차이를 공부하고자 하며 아래의 예시를 통..

Developing/프론트엔드 2022. 7. 5. 11:45