1. 리액트 프로젝트 생성 및 쓸데없는 파일 제거 2. 파이어베이스 프로젝트 생성 3. 파이어베이스 라이브러리 설치 4. 파이어베이스 설정 5. env 파일 설정 6. Router, Auth, EditProfile, Profile, Home 파일 생성 및 설정 - Router.js - Auth.js - EditProfile.js - Profile.js - Home.js 7. 훅스(Hooks) -> 함수 컴포넌트는 상태 관리를 위해 훅스를 사용한다. - 훅스를 위한 useState 함수의 역할 훅스를 사용하려면 useState 함수를 사용하면 된다. 이 함수는 인자로 [상태, 상태 관리 함수 이름]와 같은 형태의 배열을 입력 받는데, 입력 받은 상태와 상태 관리 함수를 짝지어 준다. 대충 [변수명, 변수값..

1. 리액트는 간편하지만, 지켜야할 규약이 좀 있다. 또한, 리액트 관련 라이브러리에 대한 정보를 살펴봐야 할 필요가 있을 것 같다. 2. 리액트에서는 함수나 클래스를 통틀어서 컴포넌트라고 부르는 것 같다. 함수형 컴포넌트, 클래스형 컴포넌트라고 부르는 걸로 보니. 3. State는 동적 변수를 정의하기 위한 약속인데, 이를 사용하기 위해서는 클래스형 컴포넌트를 사용해야 하며, React.Component를 상속받아야 한다. 그리고 state를 사용하기 위한 약속이 있는데 이는 아래와 같다. state = { 변수명: 변수 타입에 따른 값, } 4. 리액트에서 클래스 내부에 함수를 선언할 때는, const나 function을 붙이지 않는다. 형식에 맞춰서 알고리즘을 작성하고 render를 통해서 필요에 ..

라이브러리 설치 목록 axios react-router-dom prop-types gh-pages https://kwongeneral.github.io/0907_React_Movie/ Kwonputer React : Movie kwongeneral.github.io State 책 : 스테이트는 동적 데이터를 다룰 때 사용한다. 동적 데이터란 말 그대로 변경될 가능성이 있는 데이터를 말한다. Props는 이런 데이터들을 다루지 못한다. State는 좀 익숙한게, SwiftUI로 앱을 만들 때, 동적 데이터는 전역변수로 State로 선언했었기 때문이다. State로 선언하지 않으면 앱이 빌드될 때, 메모리에 미리 올라가서 값 변경이 이뤄지지 않았다. Swift는 그런 구조였다. 생각해보면, Text 입력값을..

환경 설정 1. 리액트 생성 2. package.json 파일 수정 package.json에서 scripts 키 값을 수정한다. scripts에 있는 명령어는 start, build, test, eject인데, 이 중에서 test와 eject는 사용하지 않을 예정이니까 삭제한다. 3. npm start (로컬 개발서버 열기) 4. public & src 파일 훝어보기 - favicon.ico : 웹페이지를 열었을 때, 최 상단 탭에 표시되는 아이콘 - index.html : 예제 템플릿 - logo.svg logo192.png logo512.png : 아이콘 - robots.txt : 크롤링 허용 비허용 설정하는 파일로 보임. - manifest.json : 웹페이지 기본값 설정으로 보임. 아이콘 및 제..

1. 니꼴라스 영화 평점 웹사이트 탐방 2. 책을 통해 얻어야 할 점. 무엇보다 가장 큰 것은 리액트에 대한 어색함이 옅어지는 것이 중요하다. 책은 정말 기초에 대해서만 다루는 것 같다. 내가 만들 페이지는 1. 메인(홈) 페이지 2. 로딩 페이지 3. 상세 페이지 4. About 페이지 그리고 5. GitHub를 통한 배포

주말 동안에는 환경설정만 하려고 한다. 1. Node.js 설치 (LTS) https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Node.js 설치 확인 npm은 node package manager의 약어이다. 3. NPX 설치 npx는 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지이다. 4. React Developer Tools 설치 (Chrom 확장 프로그램) 5. 니꼴라스 영화평점 웹사이트 https://nomadcoders.github.io/movie_app_2019/#/ Movie App nomadcoders.g..

보호되어 있는 글입니다.

버그 수정하고 2버전으로 검토를 올렸다. 이제 대기하면 끝이다~~!! 오늘 앱 들어가봤는데, 광고도 테스트광고로 뜨는걸로 봐서는 광고 뜨는대로 앱출시 등록하면 될 것 같다. 후.. 길었다!! 다음에는 앱 개발한거 정리해서 올려야겠다... 오늘은 너무 피곤해...

지금 막 배포하고 씻고 누워서 앱한번 들어가봤는데.. 아이고.. 상대방 프로필보는거 텍스트 지우는거 깜빡해서 기본값이 그대로보이네ㅋㅋㅋ 내일 3초컷으로 고치고 다시 버전배포해야겠다. 첫 출시다.. 아주 설레는고만ㅎㅎ 2주동안 열심히했다! -----오후9시 34분----- 문제는 다 고쳤는데, 좋아요를 클릭하면 -가된다던지 댓글이 바로바로 안달리고 딜레이가걸리는 문제점을 발견했다. 아직 디버깅을 안해서 모르겠는데, 아마도 통신결과에따라서 뷰를 그리기때문에 그게 엉켜서 위의 결과가 일어나는것같다. 좋아요는 서버에서 수신을 받기전에 재클릭이되서 오류가나는것같고.. 우선은 서버의 수신을 기다리는게아니라, 사용자의 이벤트는 바로바로 뷰에 그리고, api로 서버에 보내놓고 쓰레드에서 이벤트 요청에 대한 값만 처리하..

1. Google AdMob 등록 2. manifests 3. Adv 초기화 var adv_view : AdView MobileAds.initialize( this ) { } adv_view = findViewById(R.id.login_adv) val adv_request = AdRequest.Builder().build() adv_view.loadAd(adv_request) 4. Layout

1. 설정탭 만들어서 푸시알림 동의 비동의 설정 2. 회원가입 들어가기 전에 이용약관 동의 페이지개발 (미정 - 개인정보를 활용하는 기능이 없어서 약관이 필요 없을듯, 인증받는것도 없으니..) 3. 상대 프로필 클릭 시, 상대방 마이페이지 확인 4. 프로필 이미지 비율 설정 5. 게시글 조회는 7개로 끊어서 무한 스크롤. 마지막 인덱스 위치로 스크롤시, 프로그레스바 띄우고 추가 아이템 생성 6. 하단바 위에 광고배너넣기 이외에는 자잘한 버그 수정

1. App Build Gradle plugins { id 'com.google.gms.google-services' } dependencies { implementation 'com.google.firebase:firebase-analytics-ktx' implementation 'com.google.firebase:firebase-messaging-ktx:22.0.0' implementation 'com.google.firebase:firebase-analytics' implementation platform('com.google.firebase:firebase-bom:28.0.1' } 2. Project Build Gradle dependencies { classpath 'com.google.gms..

1. Kotlin : BoardUpdateActivity class BoardUpdateActivity : AppCompatActivity() { // 값 전달 변수 var share_access_token:String? = null var share_username:String? = null var share_nickname:String? = null var share_password:String? = null var share_profile:String? = null var share_user_type:String? = null var share_message:String? = null // 게시글 변수 var share_board_id:String? = null var share_board_titl..

1. Kotlin : MypageProfileUpdateActivity class MypageProfileUpdateActivity : AppCompatActivity(), AdapterView.OnItemSelectedListener { // 값 전달 변수 var share_access_token = "" var share_username = "" var share_nickname = "" var share_password = "" var share_profile = "" var share_user_type = "" var share_message = "" // 전역변수 var temp_select_mbti:String = "" var mbti_count = 1 var app_file_path: Str..

1. Signup Activity class SignupActivity : AppCompatActivity(), AdapterView.OnItemSelectedListener { var temp_select_mbti:String = "" var temp_username:String = "" var temp_password:String = "" var temp_password_check:String = "" var temp_nickname:String = "" var username_count = 0 var password_count = 0 var mbti_count = 0 var nickname_count = 0 @SuppressLint("ClickableViewAccessibility") overrid..

1. Write Fragment class WriteFragment : Fragment(), AdapterView.OnItemSelectedListener { // 값 전달 변수 var share_access_token = "" var share_username = "" var share_nickname = "" var share_profile = "" var share_user_type = "" var share_message = "" var temp_board_type:String = "daily" companion object{ fun newInstance() : WriteFragment { return WriteFragment() } } override fun onCreate(savedInstan..

1. 내정보 수정 2. 최다 좋아요수 게시글 선정 (미정) 3. 내가 쓴 게시글 확인 4. MBTI 변경 시, 게시글 다시 그리기 (미정) 현재 무한스크롤 게시판에서 각 MBTI마다 그 유저들의 게시글만 불러오게 설정해뒀는데, 이러면 MBTI 게시판이랑겹쳐서 그냥 뺄까 생각중이이다. 오히려 MBTI 게시판에서 각 MBTI들 글만 보이게하는게 좋을 것 같다. 마이페이지도 문제인데.. 공지사항이나 문의같은 기능들을 마이페이지로 옮기고... 내 게시글은 스크롤뷰하나 만들어서 7개씩 끊어서 밑으로 내릴때마다 갱신되게하는것도 괜찮을 것 같다. 프로그레스바도 만들어야하는데, 한번 라이브러리 알아봐야겠다. 직접 디자인하는것보다 라이브러리쓰는게 나을 것 같다. 푸시알림은 게시글에 좋아요 변동이 있을때마다 알림이 가게하..

오늘은 안드로이드의 뷰만 작성되어 있는 것들을, 리사이클러뷰로 변경하고 서버에서 데이터를 읽어오는대로 화면을 그리게 만들었다. 1. Board Adapter class BoardAdapter constructor(var context:Context, var items:ArrayList): RecyclerView.Adapter() { // 토큰 확인 val app_file_path = context.getExternalFilesDir(null).toString() val token_file = File("$app_file_path/token.token") val access_token = token_file.readText() val conn = Connect().connect(access_token) v..

디자인을 살짝살짝 변경했다. 영어랑 한글 짬뽕보다는 그냥 전부 다 한글로 바꾸는게 좋을 것 같았다. 색깔 가독성이 좀 떨어져서 변경했다.

1. JWT - model class JwtModel(models.Model): class Meta: verbose_name = "토큰" verbose_name_plural = "토큰 목록" jwt_user_id = models.ForeignKey(MobileUserModel(), on_delete=models.CASCADE, related_name="jwt_user_id", verbose_name='토큰 소유자', null=True) access_token = models.TextField(null=False, blank=True, verbose_name="접근 토큰") access_token_time = models.CharField(max_length=100, null=False, blank=Tru..

1. StartApp - accountapp - boardapi - certapi - chatapi - commonapi - infoapi - jwtapi - likeapi - showapp 2. Board (게시판) - model class BoardModel(models.Model): class Meta: verbose_name = "게시판" verbose_name_plural = "게시판 목록" board_user_id = models.ForeignKey(MobileUserModel(), on_delete=models.CASCADE, null=True, blank=True, related_name="board_user_id", verbose_name='글 소유자') board_username = m..

당분간 설명하는 글 보다는 완성본 스샷 위주로 올릴려고 한다. 설명할 시간에 조금이라도 더 개발하는게 맞는 것 같다. 전체적인 디자인이나 구조는 다 잡힌 것 같다. 세세한 아이콘이나 색상은 추후에 좀 더 손볼 생각이다. 일단 기능을 만들어야 하니까, 생각을 해보자. 큰 틀로 봤을 때, 회원가입, 로그인, 메인홈, 무한스크롤 게시판, 일반 게시판, 내정보 이정도가 나뉠 수 있을 것 같다. 아이디 및 비밀번호 찾기는 애초에 인증이 없으니까 불가능하니 빼야겠다. 세부 항목으로 들어가서 생각을 해보자. 1. 회원가입 - 아이디, 닉네임, 비밀번호 입력 받아서 저장해야함. - 아이디, 닉네임은 중복 체크를 해야함. - 비밀번호와 비밀번호 체크가 일치한지 확인해야함. 2. 로그인 - 아이디, 비밀번호를 받는데, 비..

오늘은 메인화면에 넣을 기능을 생각해야한다. 공지사항. 이벤트. 자주묻는질문. 문의. 광고. 인기있는 게시글. 등등 많이 있는데 고민이다. 일단 이게 구글플레이스토어에 통과가 되는지 모르겠지만, 회원가입 시에, 아이디 비밀번호 닉네임 MBTI만 받으려고한다. 완전 익명으로 돌아가는 앱을 만들어보고싶다. 아이디 비밀번호 닉네임도 정규식을 정말 단순하게해서 가볍게 계정을 생성할 수 있게 하고싶다. 아이디 2자이상. 20자 미만. 영어 숫자만. 비밀번호 2자이상. 20자 미만. 전부 다 가능. 닉네임 2자이상. 특수문자제외 전부 다 가능. 사실 그냥 내가 꼴리는대로 만들고싶다ㅋㅋㅋㅋ 일적으로 개발하는거는 상당히 디테일적으로 사용자 정보를 받아와야한다. BM에 이용해야해서. 근데 그냥 막무가내로 만들어버릴거다...

개발 끝내고 상용화를 하기 전까지는 비공개로 글을 적으려고한다. 내가 개발하려는 앱은 MBTI 커뮤니티 앱이다. 얼마 전에 여자친구랑 같이 MBTI 검사를 해봤는데 생각보다 정확해서 놀랐었다. 그리고 같은 MBTI들끼리 소통하는 앱을 만들면 재밌겠다는 생각이 들어서, 개인프로젝트로 개발해보려고한다. 일단은, 통신은 빼고 디자인과 구조를 전체적으로 잡아놓고나서 기능 개발에 들어가려고한다. 색깔은 파랑과 보라색을 베이스로 잡을거다. 커뮤니티니까 전체적으로 화이트톤인데 파랑과 보라를 적절히 섞어서 만들어보려고한다. 앱 이름이 문제인데.. 아직은 딱 떠오르는게 없으니까 대충 Popochap으로 가려고한다. 얼마전에 친구한테 포테이토칩 달라고 얘기하는거 포포찹으로 잘못얘기했는데, 그거 기억나니까 포포찹 으로가야겠..

커뮤니티 앱인데, 일단은 만들어봐야겠다. 재밌겠다ㅋㅋㅋㅋㅋㅋㅋ 출근중인데 벌써 퇴근하고싶네ㅋㅋㅋㅋㅋ

오늘은 페이지를 완성하는 날이다. 리액트랑 뷰를 빨리 해보고싶어서 허겁지겁 끝낸 기분이다. 텍스트 애니메이션은 Animated text fill을 사용하려고한다. 생각해둔 과정이 있다. 1. 이미지를 텍스트로 저장해둘 Model 2. id 값을 받으면 그에 해당하는 TEXT값을 돌려주는 API 3. Ajax를 통해 TEXT 값 가져와서 웹에 반영하기. 1. Model, View 생성 from django.db import models # Create your models here. class TextModel(models.Model): class Meta: verbose_name = "이미지 텍스트" verbose_name_plural = "이미지 텍스트 목록" text = models.TextField..

배경은 검정색. 글자 흰색. 텍스트가 변할때 어떤식으로 변해야할까. 갑자기 변하면 이상할것같다. 애니메이션효과를 컨테이너에 줄까? 천천히 사라지게. 태그안에 pre타입으로 글을 넣을지, 줄마다 배열을 만들어서 관리할지.. 어떤게 더 좋을까? 데이터는 ajax가 아니라 websocket으로 가져와야할까? ajax는 계속 api를 찔러야하는데.. 찌르는 주기가 10초 간격정도 될것같은데 어떤 통신방법으로 해야할지 좀더 고민해봐야겠다. 개인적으로 아직은 소켓보다는 ajax가 더 제어하기가 편하다. 하지만 웹소켓으로 하는게 더 효율적이면 이참에 더 확실하게 알아봐둬야겠다. 모바일환경이 문제인데, 모바일은 가로스크롤을 줘야할것같다. 이미지가아니라 텍스트라서 길이단축이 어려울 것 같다. 폰트사이즈 정도만 손볼것같다..

여행을 끝내고 집에 돌아왔다. 돌아오고나서 저번에 미리 리스트로 적어둔, 텍스트 애니메이션 효과들을 테스트해보는 웹을 만들었다. - Matrix digital rain (animated version) - Pseudo 3D Text - 3D Text Effect – Mouseover - Animated text fill - Glitchy Text (study of The Verge) 내가 원하는 느낌에 가까운건 Pseudo 3D Text, Animated text fill 이 2개인 것 같다. 오늘은 여러 효과들을 테스트해본 것에 만족해야겠다. 너무 피곤해서 벌써부터 기진맥진이다ㅋㅋㅋ 그래도, 공부해야 할 부분에 대해서는 또 생겼다. 여러 효과들이 HTML Dog과 SCSS로 이루어진 예제가 많았는데, ..

퇴근이다! 집으로 가면서 개발할거 사전조사를 해야겠다. 우선 이미지를 숫자 형태로 바꿔주는 사이트를 검색해야겠다. 1. 이미지를 텍스트로 변환 - ascll generator - https://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20 Text to ASCII Art Generator (TAAG) patorjk.com - https://ascgendotnet.jmsoftware.co.uk/ Home | Ascgen 2 ascgendotnet.jmsoftware.co.uk 2. 이미지 구하기 - 지브리 스튜디오 https://www.ghibli.jp/ スタジオジブリ｜STUDIO GHIBLI 株式会社スタジオジブリの公式サイトです..

자..! 퇴근 했으니까 열심히 개발을 해보자! 어제인가? 말했던건데 영화 필름 효과를 내는 웹페이지를 개발해보고 싶다고 했었다. 지브리 스튜디오에서 캡쳐사진들을 무료로 제공하고있으니까 그거를 활용해서 만들어봐야겠다. 대충 생각한건 이렇다. 1. 픽사베이에서 영화필름으로 쓰기 적절한 이미지를 다운 2. 지브리 스튜디오에서 쓸만한 이미지들 다운로드 3. JQuery의 BxSlider를 활용한 스왑애니메이션 넣기. 이정도만 해도 충분할 것 같다. 사실 BxSlider를 안사용해봤는데, 출근하면서 검색해보니까 사용법이 어렵지 않아서 금방 할 것 같다. 오히려 뭔가 크기조절이랑 여백조절이 더 빡셀것같은 느낌이있다. 대충 구상을 생각해뒀는데, 대충 이런느낌이다. 그냥 그림판으로 대충.. 휘적거렸다. 하얀색 박스에는..