본문 바로가기
스파르타코딩클럽 리액트심화반 05주차 꼬리스타그램🐈 https://my-community-99787.firebaseapp.com/ React App my-community-99787.firebaseapp.com src/pages/ MyPage와 Signup 페이지에서 닉네임 Validation => clear MyPage.js 구현하기 (email, displayName, profile) => clear!! PostList에서 댓글 수 미리 로드하기 => clear! src/components/ Header UI 이쁘게 Post 수정하기/삭제하기/공유하기 src/elements/ Like 좋아요 버튼 활성화 Spinner 만들기 (Material UI 이용) src/redux/ image.js 이미지 리사이즈, 크롭 기능 만들기 user.js 이미지 업로.. 2021. 8. 2.
스파르타코딩클럽 리액트심화반 04주차 후기! 우여곡절 끝에 4주차 강의도 끝냈다!!! 이번엔 좀 시간이 오래 들었는데, 내일배움카드로 왕초보시작반(웹개발종합반)을 듣는 분들을 대상으로 하는 스몰프로젝트에 미니튜터로 참석하면서 좀 정신이 그쪽에 가 있었다ㅠ 하지만 너무 재미있었지 이번 주차엔 아 이거 넘 하고싶다 하던걸 거의 다 구현했다. 의사코드로 가짜 데이터들만 넣어놨던 알림 탭도 진짜 댓글이 작성되면 실시간으로 쌓이도록 구현했고, Material-UI를 사용해서 알람 뱃지도 구현했다 알람뱃지는 내가 직접 css로 작성해서 만들어놓은 상태였는데, Material-ui를 사용하니 뱃지가 사라질때 애니메이션까지 덤으로 나타나서 진짜 뭔가 제대로 된 느낌이었다. 튜터님은 Material-ui의 아이콘을 사용해서 알람탭과 로그인 로그아웃 등의 버튼을 아.. 2021. 7. 30.
스파르타코딩클럽 리액트 심화반 3주차 후기 뷰가 거의 바뀌지 않으니 뭐가 달라졌나 싶을 수도 있지만 기능적으로는 많은 걸 구현했다. 우선 알림 (Notification.js)를 만들어서, 내 게시물에 새로운 댓글이 달리거나 하면 알림이 생기고 그 개수만큼 뱃지 형태로 숫자가 디스플레이되도록 '뷰만' 구성했다. 아직 댓글 기능과 알림 기능이 제대로 구현된 상태는 아님. 그리고 후에 댓글 기능을 제대로 구현할 것을 염두해 두고, 게시물 수정하기 버튼(포스트 날짜 옆에 있는 수정 아이콘 클릭!)을 클릭해서 들어갔을때, 이 게시물에 댓글이 이미 달린 상태라면 사진은 변경할 수 없도록 disabled 속성을 주었다. "이 버튼을 눌러 일상을 공유하세요" 부분이 게시물에 댓글이 달렸을 때는 "댓글이 달린 사진은 수정할 수 없어요"라고 나오고, 클릭해도 이미.. 2021. 7. 21.
스파르타코딩클럽 리액트 심화반 2주차 후기 리액트 심화반 2주차! 어느정도 앱의 형태가 잡혔다!! 커밋할 체인지들도 너무 많았음ㅎㅎ 이번 주차에 내가 바꾼 것들! Post의 내용을 좀 더 인스타그램스럽게 바꿔보았다. 예를 들면 스크린샷에 보이는 댓글란의 배치! 원형의 사용자 프로필 이미지는 댓글의 내용이 길어질 경우 사용자의 이름 바로 옆에 배치될 수 있도록, flex-start를 적용했고, 사용자의displayName은 댓글 내용과 같은 라인에 배치되되, 약간의 공백과 굵은 글씨로 구별이 될 수 있도록 했다. 또 moment 모듈의 locale/ko를 사용해 댓글과 게시물의 작성 시점을 'SNS스럽게' n시간 전, n일 전으로 렌더링했다. 파이어베이스의 인증 함수를 이용해서 로그인,가입,로그아웃을 구체화시켰고, 로그인 상태에서만 나타나야 할 플.. 2021. 7. 16.
스파르타코딩클럽 제1회 스파르톤 생존일지 01. 혼자서 집에서 하는 코딩이 집과 침대만 오고가다보니 나태해지는 것 같아 스파르타코딩클럽에서 진행하는 스파르톤에 참여했다! 게더라는 재미있는 사이트를 이용해서 라이브로 사람들과 소통하면서 협업하는 느낌(사실 각자 자기 할 일 하는거지만)을 받으니까 뭔가 스타트업에서 줌채팅으로 일하는 느낌이잖앟ㅎ 넘 재미있어요 9시부터 9시간 동안 진행할 예정이라 1시간마다 생존일지를 올리려구요 화이팅!! ps. 꼬리가 자꾸 화면으로 들어와서 조원분들의 예쁨을 받았다. 나는 코로 꼬리 털이 다 들어왔다....ㅂㄷㅂㄷ PM 09:00 코로나 시국에 실업급여 받으면서 쉬려니 사람들이랑 대화하는 것도 오랜만인 느낌ㅎㅎ 재미있다. PM 10:00 우선 지난번에 개발한 앱에 사용할 JSON 데이터를 다듬어볼 생각 PM 11:00 아.. 2021. 7. 10.
더 잘하고 싶어서, 다시 리액트부터 지금까지 5주동안 만든 앱에 여러가지 기능을 최대한 쑤셔박았는데, 몇가지의 오류가 있었다. 로그인/회원가입 기능은 구현했지만, 회원가입 후에 바로 로그인된 메인화면으로 이동되는 것을 구현하지 못했고, 로그인 기능 역시 유지 기능이 없어 매번 앱을 켤 때마다 새로 로그인을 해야 했다. 그리고 가장 큰 문제는.... 로그인과 회원가입을 구현하는데에는 성공했지만, 로그인을 해서 즐길만한 추가적인 컨텐츠가 전혀 없다는 것. 애초에 기존에 블로그를 운영하면서 수집한 고양이사료 (그것도 건사료에만 한한...)를 json으로 예쁘게 뿌려주는 것이 전부인 앱을 하나 만들었다고 현업에서 이걸 제대로 써먹을 수 있을리가 없잖...ㅠㅠㅠ 마침 앱개발종합반 튜터님과 1:1 상담시간을 스파르타에서 마련해주셔서, 좀 더 깊은 얘.. 2021. 7. 9.
비전공자인 내가 5주만에 앱을..? 사료맛집데이터베이스 :: 사맛디 테스트 영상 스파르타코딩클럽 앱개발 종합반 듣고, 사료 분석 블로그 글 쓰면서 수집해둔 자료로 사료 정보 앱을 만들어보았습니다. 광고 게재와 앱스토어 배포까지가 강의의 끝이지만 그 부분은 아직 내놓을만한 수준이 못되는 것 같아 복습기간 동안 탄탄하게 기본기 다져서 내놓아볼까 합니다ㅎㅎ 2021. 6. 28.
스파르타코딩클럽 앱개발종합반 아직도 수료하지 않은 이유 영어가 안되면 시원스쿨(광고아님) 코딩이 안되면 스파르타(광고아님) 제일 관심 있고 다른 곳에서 강의를 찾기 어려웠던 앱개발 강의를 찾아 다니다 결국 찾게 된 스파르타 코딩클럽, 사실상 코딩 강의 시장이 말 그대로 '시장'이라면 스파르타는 그 시장 입구에서 만난 첫 가게였다. 근데 그거 아세요 전통시장 가면 입구에 있는 가게는 물건도 좋아보이고 아주머니도 친절하신데 왠지 시장 안으로 더 들어가보면 더 맛있고 저렴한 알짜배기가 있을거같다는 생각이 들어 웬만한 데는 다 들러보는거지. 그리고 결국엔 아 아까 거기가 되게 잘되는 이유가 있었구나 하고 입구에서 장을 다 보게 되는 그런 흔한 경험 있잖아요... 나만 있나 여튼 나한테는 스파르타 코딩클럽이 그런 곳이었는데, 말 그대로 앱 개발에 필요한 것들을 꽉꽉 .. 2021. 6. 19.
개발일지04. 서버리스 앱을 만들기 위해 개발을 배우기 전에는 사실 체감을 못하고 있었는데 개발을 시작하고 보니 진짜 구글/페이스북/마이크로소프트는 그저 빛이다... 오늘 알게 된 파이어베이스도 구글의 작품!! 어떻게 보면 구글드라이브랑 같은 개념일 수도 있지만, 단순한 코드만으로 데이터베이스(JSON 형식)를 관리하고. 불러오고, 삭제하는 등의 로직이 너무 깔끔하다 내가 앱 개발을 위해 준비해둔 자료들도 파이어베이스에 새 프로젝프로 올려두면 좋을 것 같다. 꼬리를 키우게 된 것만으로 이렇게나 삶이 변했다. 좋은 사료 먹이고 싶단 마음이 이렇게 본격적으로 직업까지 바꾸다니ㅋㅋㅋㅋ 암튼 스파르타코딩클럽 진짜 알짜배기강의다 물론 다른 곳에서 이론적인 개념을 배우고 스파르타 강의를 들으면 좀 더 수월할 수 있겠지만(내가 그렇다...) 진짜 떠먹여주는.. 2021. 5. 28.
개발일지03. 여러 화면(컴포넌트)을 만들고 상호작용 구현 슬랙에서 4주차 5주차 내용에 대한 질문이 자주 올라오길래 다들 이렇게 진도가 빠른가 하고 있었는데 알고보니 그 분들은 전 기수 교육생 분들이었고 복습기간이신 것...ㅋㅋㅋ 어쩌다보니 0주차에 4주차 교육을 받고 있는 것이예요... 근데 진짜 뭐든 다 알려주고 싶은데 일단 무조건 알려주셔야 한다고 생각하시는 것들만 추린거라 진도사우르스(이미지의 공룡)를 한참 제쳐놓고 달리고 있다. 1주차에 완강하겠는걸?!?! 계속 배우다보니 지금 배우고 있는 것들에 내 고양이사료 데이터를 입력만 해도 이미 괜찮은 앱이 될 것 같다 근데 이번 주차에서 배우고 있는 useEffect 와 useState는 조금 어려워서 복습할 때 이부분을 중점적으로 봐야할 것 같다. 내 공부 스타일은 일단 달리고 나서 뒤돌아보고 여전히 부족.. 2021. 5. 27.
개발일지02. 스파르타코딩클럽 가성비 미쳤다리.. 일하고 있던 레스토랑이 어려워지고, 자진퇴사를 하면서 제일 먼저 생각난 것은 코딩을 이 기회에 배워보자였는데 막상 코딩이란 것을 접하고, 여러가지 인터넷강의를 들으면서 음 그래 재미는 있는데 이걸 어디다 쓰지..? 하는 생각이 머리를 떠나지 않았다. 그것도 3월1일부터 지금까지..ㅎ 머신러닝으로 타이타닉의 승객들의 생존률을 구하고 당뇨병 환자들의 의료 데이터를 보고 당뇨를 진단하고 LOL 프로게이머들의 초반 10분간 스코어(킬 수, 드래곤, 헤럴드, 골드 등등)를 보고 누가 이길지 예측하고 붓꽃 데이터로 꽃받침과 꽃잎의 생김새를 관찰한 결과를 토대로 붓꽃의 종(학명)을 분류 예측하고, 재미는 있는데... 이걸 어디다 활용할지 너무 난감했다. 그래서 상대적으로 활용성이 좋은 추천시스템도 나름 공부를 해보았.. 2021. 5. 26.
개발일지01. 자바스크립트는 웹 요소를 움직이는 데에만 사용한다? 응 아니야❤ 프로그래밍의 시작은 언제나 Hello World!를 출력해보는 것으로 시작한다. console.log('Hello World!') 웹개발을 듣기 전부터 하나의 웹페이지를 만들 때 주로 사용되는 세 요소가 html (웹페이지의 기본뼈대) css (웹페이지의 꾸밈담당) js (웹페이지의 동적요소 담당) 이렇게 세가지라는 것은 알고 있었지만, 파이썬에서 장고가 풀 스택 웹사이트 개발을 지원하듯이, 자바에도 node.js와 React와 같은 강력한 라이브러리들이 생김으로써 이전에 자바가 가지고 있던 영역보다 훨씬 넓은 스펙트럼을 가지게 된 것으로 보인다. 그래서 예전에 배워두고 파이썬 뒤로 잠시 제쳐뒀던 자바스크립트에 대한 기존 지식을 끌어올리고, 앱 개발을 할 수 있는 기본 토대를 다시 다져보도록 했다. 지금.. 2021. 5. 25.

티스토리툴바