예전부터 앱을 한번 만들어 보고싶었다. 머릿속으로 만들어보고 싶은 서비스도 앱이기도 했고 무엇보다 그동안 리액트를 주로 사용해 왔기 때문에 네이티브도 한번 사용해 보고싶었다. 금방 배울것 같기도 했고, 구직하는 입장에서 네이티브를 사용하는 곳에 지원할 수 없다는 것 또한 너무나 아쉬웠다

Expo-cli vs ReactNative-cli

리액트 네이티브로 앱을 만들기 위해서는 두 개중에 하나를 선택해야한다고 한다.

• expo-cli 장점

    - 개발환경 구축이 용이 (android studio(안드로이드)나 xcode(ios)를 따로 설치하지 않아도 된다고 한다. 오,,)

  • 그만큼 실제로 개발이 쉽다고 함(아직모름)

• expo-cli 단점

    - expo에서 제공하는 모듈만 사용할 수 있음

  • 그만큼 자유도가 낮음
  • ReactNative-cli에 비해 상대적으로 크기가 큼

• ReactNative-cli 장점

    - expo로는 접근하지 못하는 다양한 native 기능에 사용가능

  • 필요하면 직접 모듈 개발 가능 (개발 자유도가 높다)
  • expo에 비해 가볍다

• ReactNative-cli 단점

    - 초기 개발환경을 구축하는데 다소 시간이 걸리다.

정도라고 하는데 우선 나는 처음 사용해보기 때문에 우선은 expo-cli로 시작해보기로 결정했다.!

시작하기

1. expo-cli 설치하기

    npm install --g expo-cli

2. 프로젝트 생성하기

    expo init [파일이름]

   두 개의 과정만 터미널에 입력하면 프로젝트가 생성된다. 또는

3. 공식 문서

    npx create-expo-app [파일이름]

   찾아본 강의랑 블로그에는 첫 번째 방법으로 나와있었고, 공식문서에는 두 번째 방법으로 나와있어서 나는 그냥 두 번째 방법으로 프로젝트를 생성했다.

이후 생성된 프로젝트의 경로로 들어간 뒤

    npm start

를 입력하면 짜잔

QR코드와 함께 등장

핸드폰 화면으로 보기

개발하고 있는 화면을 핸드폰 화면으로 보고싶으면 Store에 들어가서 expo를 검색하고 expo go를 설치하면 된다. 이후 Scan QR code를 사용해 터미널에 나온 QR코드를 촬영하면

!! 원래는 변경되는 코드에 맞춰 핸드폰에 출력되는 화면도 바로 바뀌는데 가끔 reload가 안될때는 실행했던 npm start를 했던 터미널에서 r을 눌러주면 reload를 할 수 있다!

끝. 이제 강의를 따라하면서 간단한 앱도 만들어봐야지

** 우선, 만들게된 배경은 전에 신한 DS 에서 교육 과정을 진행할 때 오목 게임을 만들었던 적이 있다. 어찌저찌 팀원들이 잘 만들어줘서 만들기는 했지만 사실 오목을 판별하는 로직을 작성했던 것 빼고는 어떻게 만들었는지 잘 모르기도 했고, Firebase를 사용하다 보니 Snapshot을 사용해 Socket통신처럼 양방향 통신이 가능할 것 같다고 생각을 했다. 그래서 이후에 만들고 싶었던 서비스에 채팅 기능도 생각을 하고 있어서 경험 삼아 한번 만들어 보기로 결정했다. (굳이 오목을 만들기로 한 이유는 오목을 판별하는 로직은 한번 작성해 보기도 했고, 많은 사람들이 이미 구현해본 채팅 보다는 오목이 좀 더 재미있을것 같았다.) **

목표

우선 데이터가 변경될 때마다(방을 생성하거나, 방에 입장하거나, 돌을 놓거나 등등)유저들에게 변경된 데이터를 보여주는걸 경험하는게 가장 큰 목표였기 때문에 기능은 정말 간단하게만 정했다.

1. 닉네임으로 로그인하기
2. 방생성 및 생성된 방에 입장하기
3. 해당 방에 2명이 모두 입장하면 입장 불가
4. 방에 입장한 유저가 모두 준비완료 하면 게임시작
5. 오목을 완성하면 게임 종료

이정도...? 디자인도 이전에 만들었던 디자인 참고하면서 만들었다.

로그인

*끝. 아무것도 없다 ㅎㅎ 그냥 닉네임만 입력하면 입장가능하게 끔 만들었다. *

대신 입장한 사람마다 고유한 UID를 발급해 줘야한다고 생각했다. 이유는 닉네임이 겹칠 수 있다고 생각했기 때문에.. 그래서 Firebase Auth에 있는 익명 로그인을 사용했다. 이러면 입장한 사용자는 고유 UID를 발급받고 이걸 통해서 방에 입장하는 유저를 구분하도록 구현했다.

오른쪽이 사용자 UID

대기실

대기실에서는 현재 만들어진 방 목록을 확인할 수 있고 방의 상태를 확인할 수 있다.(대기중 or 게임중) 2명 모두 입장한 방은 더이상 입장이 불가 하도록 클릭을 비활성화 했다. 또한 비밀번호를 설정한 방 같은 경우에는 자물쇠 아이콘이 나타나고 해당 방은 비밀번호를 입력해야 입장이 가능하도록 구현함! 사실 여기까지는 크게 어려움이 없었다. 방 만들때 RoomId도 JavaScript의 getTime()함수를 사용해 간단하게 구현했다.

방만들기

게임방

방에 입장한 두 명이 모두 준비 버튼을 누르면 5초 뒤에 게임이 시작된다. 5초가 지나면 준비 버튼은 비활성화 되고, 맨처음 입장한 유저부터 돌을 놓기 시작한다. 서로 돌아가면서 돌을 놓고 오목을 완성하거나 방을 나가게 되면 보드판을 초기화하고 게임이 종료된다.

아무튼 여기서부터 조금씩 헷갈리기 시작했다. 우선 이벤트가 생길때마다 같은 화면을 보여줘야하기 때문에 내 생각보다 공통으로 관리해야하는 데이터가 더 많았다. 예를 들면 방에 입장한 유저, 레디한 유저, 현재 차례, 게임 진행여부, 놓은 돌의 위치 등등 내가 양쪽으로 데이터를 주고받아야하는 프로젝트를 처음해봐서 구조를 잘못 짠 것 일수도 있지만, 기존에 한명에게만 데이터를 처리해서 보여주면 되는 서비스보다는 개인적으로는 좀더 복잡하게 느껴졌다.. 그래도 하나씩 추가하고 삭제하고 하다보니 점점 익숙해져서 디자인은 조금 그래도 기능은 완성할 수 있었다.

후기

정말 경험만을 위해 간단하게 만들어본거라 빠진 기능도 많고 부족한 부분이 더 많지만 우선 재미있었다. 두 개의 창을 띄워놓고 테스트를 진행하는 것, 공통으로 가지고있는 데이터를 유저마다 서로 다르게 처리하는 것, 코드를 잘못 작성해 Firebase의 일일 사용량을 넘을뻔한 것 등등 엉망이지만 재미있는 경험이었다고 생각한다. 추가로 보드판과 돌을 그리기 위해서 CanvasAPI를 처음 사용해 본 것과 방에 입장과 퇴장을 처리하면서 컴포넌트의 라이프사이클에도 좀 더 익숙해질 수 있었다.

Firebase를 사용하게 된 계기

이전에 팀 프로젝트로 진행했던 오목 게임을 머릿속으로 구상하면서 이번에는 소셜 로그인을 꼭 구현해 봐야겠다고 생각했다. 한 번도 구현해 본 적이 없기도 했고, 대부분 서비스가 소셜 로그인이 구현되어 있으므로 간단하게라도 경험해 보고 싶었다! 아무튼 그렇게 방법을 찾아 구글링하던 중 Firebase를 알게 되었고,(사실 알고는 있었지만 찾아본 적은 없음) 간단한 구현할 수 있는 로그인 기능과 서버를 직접 구현하지 않아도 되는 서버리스 환경이라는 말에 Firebase를 선택하게 되었다. 추가로 이전에 토이 프로젝트로 만들었던 My-Todo 서비스에 로그인 기능과 Firebase Store를 적용하면 좋을 것 같았다. (서버랑 데이터베이스는 따로 배포하지 않아서 로그인과 저장하기가 안 됐음)

제 1장 로그인

로그인 기능은 구글링과 공식 문서를 찾아보며 쉽게 구현할 수 있었다. 구현은 금방 했지만, 구글 로그인을 구현하던 중 COOP 에러를 만나게 되었는데 이것 때문에 시간을 꽤 오래 썼다. 로그인은 되는데 콘솔 창에 자꾸 빨간색으로 에러가 나오니까 마음이 굉장히 찝찝해서 이틀 정도 찾아봤는데 결국 해결 못해서 문의함 받은 답변은 이전에 작성한 글이 있어서 링크를 걸어 놓겠습니당. 기가 막힌 디자인,, 괜찮아,, 테스트 용이니까,, 어쨌든 성공

COOP에러 포스트: https://velog.io/@b_d_o_o/파이어베이스-구글-로그인-COOP 공식 문서: https://firebase.google.com/docs/auth?hl=ko

2장 Firebase 스토어

로그인 기능을 구현할 때와 마찬가지로 구글링과 공식 문서를 보면서 구현했는데 그동안 oracle과 MySql만 사용해 봤지 NoSql이라는 문서 중심의 데이터베이스는 사용해 본 적이 없어서 처음에는 약간 어지러웠다,, collection?? docs?? 머릿속은 물음표로 한가득;; 노가다로 하나씩 추가하면서 콘솔에 찍어보다 보니 조금씩 이해할 수 있었고, 기존에 My_Todo 서비스에 적용하기 위해 기존에 사용했던 데이터 구조와 비슷하게 컬렉션 구조를 설계해 봤다.

├── users  - collection (유저 목록)
│   ├── uid - doc (회원가입한 유저의 uid)
│       ├── all_todo_list - collection (날짜별 할일 목록)
│           ├── date - doc (저장된 날짜)
│                ├── todo_list <Array> - field (해당 날짜의 할일 목록)
│                    ├── todo_title <map-string> - field (제목)
│                    ├── todo_id <map-number> - field (번호)
│                    └── todo_checked <map-boolean> - field (체크)

처음 작성해 보는 거라 잘 작성한 건지는 모르겠지만 내가 원하는 대로 데이터를 불러오고 추가, 수정할 수 있도록 나름대로 고심해서 작성했음

잘 들어갔으니까 됐어,,,

3장 적용 및 후기

기존의 토이 프로젝트에 맞춰서 테스트해서 그런지 Firebase로 바꾸는 건 어렵지 않게 했다. 그것보다는 redux-persist 추가하고 github page로 배포했던걸 vercel로 변경하는 과정에서 약간의 이슈들이 있었지만 나름 성공적인 적용기 였다고 생각한다. 이후로는 카카오 로그인과 가능하다면 네이버 로그인도 추가해 볼 예정이다. 매번 새로운 걸 시도하더라도 프로젝트 처음부터 적용했지, 기존의 프로젝트에 적용한 건 처음인 것 같다. 하면서 가장 많이 들었던 생각은 클린코드의 중요성,,,나야 처음부터 나 혼자 코드를 작성했으니까 나름대로 쉽게 바꿀 수 있었지, 남이 바꾸려고 했으면 그냥 처음부터 작성하는 게 더 빨랐을 것 같다는 생각도 든다. 앞으로는 코드 작성도 네이밍도 좀 더 신경 써야 해야겠다,,

바뀐 링크 : https://bdw-my-todo.vercel.app/

2022년 9월 처음 프로그래밍 공부를 시작하게 되었다. 물론 그때 하고 있던 일도 있었고, 처음부터 개발자의 꿈을 가지고 시작한 건 아니었기에, 퇴근하고 알고리즘 문제를 풀며 문법을 익히는 정도로만 가볍게 시작했다. 일을 하면서도 6개월간 매일 한 문제 이상 문제를 풀었으니, 생각보다 무거웠을지도…. 아무튼 문제를 푸는 게 재미있기도 했고, 입출력과 관련된 간단한 문제들부터 실제 코딩테스트에 나오는 문제들까지 풀며 나름 성장했다는 생각에 자신감도 생기고 개발자로 도전해 보고 싶다고 생각하게 되었고, 작년 1월 DX 알고리즘 특강과 신한 DS 금융 SW 아카데미를 시작으로 벌써 1년이라는 시간이 지났다….

삼성 DX 알고리즘

그렇게 2023년 첫 번째 도전으로 삼성 DX에서 진행하는 알고리즘 특강을 신청하게 되었다. 원래는 SDS 특강을 신청하고 싶었는데 어째서인지 자격 요건이 대학교를 졸업한 지 6개월 미만까지로 바뀌어 지원하지 못하고 DX에 지원하게 되었다. DX도 원래는 학과와 관련 없었다고 했던 거 같은데 갑자기 컴퓨터 공학 전공생들로 요건이 바뀌었다. 속상함을 뒤로 사전문제 풀이라도 진행하고자 지원했다. 테스트는 2문제를 며칠 안으로 풀어서(며칠인지 정확히 기억이 안 남) 제출하면 되는데 두 문제를 모두 풀어서 제출했고, 결과는….

두둥.. 자격요건과 달리 합격 (공학 계열이라서 그럴 수도)

총 2개월간 진행되었다. SWEA(SW Expert Academy)사이트를 통해 한 달 동안에는 주어진 문제를 풀어 제출하고, 다음달에는 매일 새로운 문제와 프로님들의 문제 해설을 하는 방식으로 진행 되었던것 같다. 중간중간 코드 배틀이라는 것도 있었고, 강의도 함께 진행되었다. 큐, 스택 등 자료구조도 직접 구현해보고 처음으로 연결리스트라는 것도 배우게 되었다.(처음에 연결리스트가 제일 이해하는데 어려웠음,,) 막바지에는 문제가 너무 어렵기도 했고, 신한 DS 교육 과정하고 날짜가 겹쳐 1주일 정도는 참여하지 못했지만 짧은 기간 많은 경험을 할 수 있었다.

신한 DS 금융 SW 아카데미

친구가 보내준 공고를 보고 지원하게 되었고 면접을 통해 선발되었다. 신한 DS 교육 말고 다른 교육 과정도 신청했었는데 오프라인 교육을 받고 싶기도 했고, 프론트엔드에 관심이 있었지만 백엔드도 경험해 보고 싶었기 때문에 풀스택 과정인 신한 DS를 선택하게 되었다. (사실 면접 때 쪽지 시험 같은 걸 봤는데 너무 못 봐서 떨어진 줄 알고 다른 곳 준비하고 있었음) 아무튼 그렇게 나의 두 번째 교육이 시작되었다.

시작은 데이터베이스 교육으로 산뜻하게(?)

과정의 처음은 데이터베이스 교육으로 mysql과 oracle을 사용했고, SQL이라는 것도 저 때 처음 접해봐서 어지러움의 연속이었다. 스키마? 테이블? select??? 무슨 소리인지 하나도 모르겠고…. 강사님은 이번 기회에 SQLD도 따면 좋겠다고 하셨는데 자신 없어서 신청하지 않았다. (결국 수료하고 땀)

첫 번째 팀 프로젝트

다음으로 프론트엔드 교육 js,html,css,react를 배웠다. 리액트를 제외하고는 정말 조금이지만 사용해 본 적 있었기 때문에 덜 어지러운 상태로 교육을 받았다. 처음으로 네이버랑 카카오톡 API도 써보고 사실 굉장히 재미있었다 ㅋ.ㅋ 이때 처음 팀 프로젝트를 해본 듯 아래는 우리 팀의 첫 홈페이지….

위에 나름 드롭다운 메뉴도 있고 슬라이드도 있는데 초상권 보호를 위해….어설프지만 맨날 혼자만 하다가 같이하니까 너무 재미있었다. 사용해 보고 싶었던 리액트도 써보고!!

두 번째 팀 프로젝트

백엔드 언어로 java를 사용했는데 spring과 spring boot 둘 다 사용해 봤다. 함께 jsp도 경험해봤고, 이때 두 번째 팀 프로젝트로 오목 게임을 만들었다. 소켓 통신으로 채팅 기능도 넣어보고 두 개의 환경에서 오목 게임을 진행하도록 구현했다.

아쉬운 점은 과정을 제대로 기록하지 않기도 했고 깃허브도 제대로 사용할 줄 몰랐기 때문에 사진 몇 장 빼고는 남은 흔적이 없다... 열심히 만들었는데. ㅜㅜ 그래도 양방향 통신이라는 것도 알게 되었고 팀원들과 페어 프로그래밍도 경험했다. (조만간 혼자 다시 만들어볼 예정)

최종 프로젝트

그동안 배웠던 리액트와 스프링 부트를 사용해 최종 프로젝트를 진행했다. 팀원들과 기획부터 개발 배포까지 모든 과정을 경험했다. 이때 팀별로 신한 DS에서 멘토님들도 오셔서 함께 회의도 하고 상담도 하고 개인적으로 제일 재미있었던 순간이었다. 물론 프로젝트를 진행하는 과정이 순탄하지는 않았지만, 그 과정도 재미있었달까…. 나만 재밌었던 거 같긴 하지만 아무튼 그렇게 마지막 발표와 함께 수료하게 되었다…!

최종 프로젝트 https://github.com/BaeDongWoo/clink_web

사실 교육 첫날 후회하긴 했다. 왜 why??

버스 -> 분당선-> 2호선 약 편도 2시간의 거리;;

이후

수료의 기쁨을 맞이하며 약 3주간 침대와 물아일체가 되었다…. 그동안 모자랐던 잠과 못 만났던 친구들을 만나며 짧은 행복을 즐겼다.

즐거운 휴식을 뒤로 본격적인 취업을 위해 포트폴리오도 만들고 공고도 찾아보며 지원했지만, 서류의 벽에 막혀 많은 탈락을 경험했다…. ㅜㅜ 사실 공고에 나와 있는 우대 사항만 보더라도 아직 많이 부족하다는 걸 느낄 수 있었고, 혼자서 토이 프로젝트라도 진행하며 공부하기로 했다. 우선 back to the basic 리액트 강의 기초부터 들었고, 토이 프로젝트로 투두리스트 사이트와 반응형 포트폴리오 사이트를 만들었다. 혼자서 진행하다 보니 기획했던 것과 다르게 만들어지기는 했지만 내가 구현하고자 했던 것들을 하나씩 구현하는 과정이 재미있었다.

굉장한 프로젝트들은 아니지만 나름 혼자서 열심히 만들었기에,,, 링크를 달아봅니다.. 투두리스트 : https://github.com/BaeDongWoo/ToDo-List 사이트링크: https://bdw-my-todo.vercel.app/ 포트폴리오 : https://bdw-portfolio.vercel.app/ 사이트링크 : https://bdw-portfolio.vercel.app/

이렇게 나의 2023년이 끝이 났다…. 뭔가 더 있었던 거 같은데 기억이 잘 안 남

2024년

올해의 가장 큰 목표는 취업하기!@ 얼른 취업해서 더 많은 걸 배우고 싶다. 특히 개인적으로는 스타트업 문화를 경험해 보고 싶다. 얼마 전 봤던 공고가 있었는데 지원서를 작성하는 도중 채용 공고가 조기 종료되었다..ㅜㅡㅜ AIoT 기반의 온도 관리 서비스를 제공하는 회사인데 막연하게 나도 좋은 서비스를 만들고 싶다. 라고, 생각했던 좋은 서비스의 예시 같았달까…. 거기에 더불어 사내 문화도 정말 좋아 보였다@! 혹시 다음번에 채용 공고가 나온다면 꼭 지원할 수 있도록 하고, 다른 좋은 기업들도 많으니, 상반기에는 반드시 취업하는 게 목표다.

정처기 따기 교육 과정을 수료하고 1주일 남짓 공부하고 실기 시험을 봤는데 아쉽게(?)도 떨어지게 되었다. 이번에는 조금 여유를 가지고 천천히 준비해서 반드시 정보처리기사 실기를 취득하려고 한다.!

이상 나의 2023년 회고록과 2024년 간단한 목표였다. 천천히 나누어 적었어야 했는데 글을 잘 못 쓰기도 하고 미루다 보니 글이 너무 길어졌다. 사실 기술 블로그로 시작했는데 뭔가 잘 안 쓰게 된달까….기억보단 기록이라는 생각으로 올해는 좀 더 열심히 써야겠다. 그리고 이런 회고록도 종종 쓰고 싶다.(이런게 더 재밋음) 이외에도 코테도 다시 시작했고, 최종 프로젝트 리팩토링과 토이 프로젝트 업데이트 등 아직 하고 싶은 게 많다. 비전공자로 서류 통과도 힘든 현실이지만 포기하고 싶진 않고 이미 너무 멀리 와버렸기에 열심히 하는 수밖에...

그럼 2024년도 화이팅!! ٩(๑•̀o•́๑)و

firebase를 사용해 보게 된 배경부터 말해보자면 그동안 로그인 및 회원가입 기능을 구현할 때 한 번도 소셜 로그인을 구현해 본 적이 없어, 한번 구현해 보고 싶어서 찾아보게 되었다. 그중 google, github, Facebook 등 다양한 소셜 로그인을 쉽게 구현할 수 있는 firebase를 선택하게 되었다. 또한, 프론트엔드 개발자를 희망하는 입장에서 서버리스 환경으로 구현할 수 있다는 점도 매력적으로 다가왔고, 기존에 토이프로젝트로 진행했던 투두리스트 사이트에도 적용하면 좋을것 같아 사용해보기로 했다. 아무튼…. 구글링과 유튜브, firebase 공식 문서 등을 찾아보며 테스트하던 중….

결론보깅

Cross-Origin-Opener-Policy policy would block the window.closed call 라는 에러와 마주하게 되었다. 물론 팝업창도 정상적으로 나오고 로그인 시 해당 데이터도 정상적으로 받아 올 수 있었지만, 콘솔 창에 나오는 빨간색 두 줄이 눈에 거슬려 해결해 보기로 했다. (이러지 말았어야 했다,,)

이전에 프로젝트를 진행하면서 CORS 관련해서는 경험한 적이 있었는데 COOP는 처음 경험했기 때문에 일단 구글링을 통해 어떤 에러인지 검색을 해보았다.

간단하게 CORS(Cross-Origin Resource Sharing)와 COOP(Cross-Origin Opener Policy) 모두 보안 정책과 관련된 메커니즘이고, 이번에 만난 COOP는 웹 페이지가 다른 출처(origin)에서 열린 경우 보안 문제를 예방하기 위한 정책이라고 한다. 자세한 내용은 https://velog.io/@hoho3419/COOP-%EC%99%80-CORS를 통해 읽어보면 좋을 것 같다.

아무튼 해결 방법을 찾아 다시 구글링했지만 나와 같은 에러와 만난 사람들만 있었을 뿐 정확한 해결한 사람은 찾을 수 없었고 결국 하나씩 찾아 시도해 보기로 했다.

시도한 방법 메타 태그 추가

<meta
  http-equiv="Cross-Origin-Opener-Policy"
  content="unsafe-none"
/>

위에 태그는 모든 origin(출처)과 상관없이 opener를 참조할 수 있도록 한다. 보안상으로 권장하지 않는다지만 로컬에서 테스트를 위해 해당 태그를 추가해 보았다. 하지만 결과는 실패….

2. 프로토콜 변경 로컬호스트에서는 http 프로토콜을 사용하는데 구글 팝업창은 https 프로토콜이기에 혹시 로컬의 프로토콜을 https로 변경하면 될까 해서 OpenSSL이라는 자체 서명 방법을 사용했다. 역시 실패 …. 참고 https://uiyoji-journal.tistory.com/89

3.firebase 호스팅 로컬호스트가 문제인가 싶어 firebase에 호스팅도 해보며 테스트했지만, 실패...

이외에도 도메인 설정, 포트 변경 등등 자잘하게 테스트했지만 역시나 실패했다.

그렇게 모든 방법에 실패하고 깃허브 로그인을 구현하는데 이때는 또 에러 없이 정상적으로 작동하길래 firebase에 문의했다.

결론

답변을 요약하자면 Google Provider를 사용 시 해당 경고가 표시되고 있으며 다른 provider에서는 해당 경고가 표시되지 않는다. signInWithPopUp을 통한 로그인 기능은 문제없이 사용할 수 있다. firebase는 해당 오류를 인지하고 있으며 적극적으로 해결하기 위해 노력하고 있다.

ㅠㅠ 해결하지 못한 건 아쉽지만 그래도 이유를 알 수 있어서 다행이었달까,,, 물론 조금 어지럽긴 했지만, 나름 문의도 해보고 좋은 경험이 되었다. 하지만 같은 문제에 어지러움을 느끼고 있을 분들을 위해 도움이 되고자 글을 남겨본다,,,

혹시 해결하신 분이 있으면 댓글 부탁드립니다,

토이 프로젝트로 캘린더를 활용한 투두 리스트를 만들게 되었다. 내가 생각한 모습으로 구현하기 위해 캘린더를 직접 구현하기로 했다. 내가 생각한 캘린더는 기존에 저장했던 일정이 있으면 해당하는 날짜에 미리보기로 보여주고 캘린더의 날짜를 선택하면 해당하는 날짜에 일정을 보여주고 변경할 수 있도록 구현하는 것이었다.

캘린더의 날짜를 선택하고 해당 날짜의 일정을 리스트로 보여주는 부분까지는 구현하는데 크게 어려움은 없었지만 캘린더에 미리보기 리스트를 구현하면서 문제가 발생했다.

띠용??

리스트가 있는 날짜를 선택하면 출력이 이상해진다... 한참을 헤매다 알게된 사실... 기존의 코드를 작성할 때 div태그에 onClick이벤트를 등록하고 해당 날짜에 등록한 일정이 있으면 div태그 안쪽에서 ul,li 태그를 사용해 리스트를 그려준다. 이때 div 태그의 onClick 이벤트가 ul,li 태그에도 전파된다...

여기서 문제는 onClick이벤트를 실행할 때 선택한 셀의 날짜를 가져오기 위해서 innerHTML을 사용했는데 일정이 없다면 div태그 밖에 없기 때문에 상관이 없지만 일정이 있으면 리스트 태그가 생기기 때문에 값이 제대로 나오지 않았다. 사실 문제해결은 정말 간단하게 이벤트가 발생할때 파라미터로 i값을 넘기면서 해결했지만 덕분에 이벤트 전파라는 것도 버블링과 캡처링 등도 함께 공부할 수 있어서 좋은(?) 삽질이었다고 한다...

완성

구조 분해 할당(destructuring)? 구조 분해 할당이란 구조화된 배열이나 객체를 개별적인 변수에 할당하는 것을 말한다. 객체나 배열에 저장된 전체가 아닌 일부만 필요할 때 사용하는 문법이다.

배열에서의 구조 분해 할당

_ *저장된 배열에서 구조 분해 할당 *_

let arr = ['apple', 'banana', 'grape'];
let [a, b, c] = arr;
console.log(a); //apple
console.log(b); //banana
console.log(c); //grape

과일 이름이 담긴 배열을 구조 분해 할당을 통해 각각 요소는 a,b,c 변수에 할당된다.

• 쉼표를 사용해 요소를 건너뛰고 할당할 수 있다.

  let arr = ['apple', 'banana', 'grape'];
  let [a,,b] = arr;
  console.log(a); //apple
  console.log(b); //grape

• 배열 할당과 동시에 구조 분해*

  let [a, b, c] =  ['apple', 'banana', 'grape'];
  console.log(a); //apple
  console.log(b); //banana
  console.log(c); //grape

  위와 같이 미리 선언되어 있는 배열이아닌 배열 할당과 동시에 구조 분해를 할 수 있다.
• 또한 기본값 설정도 가능하다* 요소가 할당되지 않았을때 할당할 기본 값도 설정할 수 있다.

  let [a, b='strawberry', c] =  ['apple',, 'grape'];
  console.log(a); //apple
  console.log(b); //strawberry
  console.log(c); //grape

• 스프레드 연산자 활용* 스프레드 연산자를 활용해 남은 요소들을 묶어 새로운 배열을 만들 수 있다.

  let { userName, ...C } = user;
  let arr = ['apple', 'banana', 'grape'];
  let [a, ...b] = arr;
  console.log(a); //apple
  console.log(b); //['banana','grape']

  apple을 담고 있는 a라는 변수와 banana와 grape를 담은 b라는 배열

  객체에서의 구조 분해 할당

• 저장된 객체의 구조 분해 할당* 배열과 마찬가지로 저장된 객체를 통해 구조 분해 할당을 진행할 수 있다.

  let user = {
   userName: 'dongwoo',
   age: 28,
   skill: 'js',
  };
  

let { userName, age, skill } = user; console.log(userName); //dongwoo console.log(age); //28 console.log(skill); //js

주의 해야 할 점은 배열에서는 배열의 인덱스가 키 값이지만
객체에서는 프로퍼티 키를 키값으로 사용하기 때문에 할당하고자 하는 변수의 이름을 프로퍼티 키와 같은 이름을 사용해야 한다는 점이다.
다른 이름으로 사용하고자 할때는 아래와 같은 방법으로 저장이 가능하다
```js
let user = {
  userName: 'dongwoo',
  age: 28,
  skill: 'js',
};

let { userName: NAME, age: AGE, skill: SKILL } = user;
console.log(NAME); //dongwoo
console.log(AGE); //28
console.log(SKILL); //js

객체 할당과 동시에 구조 분해 배열과 마찬가지로 객체를 선언함과 동시에 구조 분해를 진행할 수 있다.

let { userName, age, skill } = {
  userName: 'dongwoo',
  age: 28,
  skill: 'js',
};
console.log(userName); //dongwoo
console.log(age); //28
console.log(skill); //js

또한 프로퍼티가 없는 경우 기본 값을 설정할 수 있다.

let {userName,age,skill = 'java'} = {
  userName: 'dongwoo',
  age: 28,
};
console.log(userName); //dongwoo
console.log(age); //28
console.log(skill); //java

스프레드 연산자 활용 스프레드 연산자를 활용해 나머지 프로퍼티를 묶어 새로운 객체를 만들 수 있다.

let user = {
  userName: 'dongwoo',
  age: 28,
  skill: 'js',
};
let { userName, ...ageSkill } = user;
console.log(userName); //dongwoo
console.log(ageSkill); //{ age: 28, skill: 'js' }

dongwoo를 담고있는 userName과 ageSkill이라는 객체

구조 분해 할당을 사용하면 코드의 길이를 줄이고 배열이나 객체를 쉽게 변수에 저장할 수 있다

호이스팅(Hoisting)?

JavaScript 엔진이 코드를 실행하기 전에 함수안에 변수 및 함수 선언을 최상단으로 끌어 올리는 것을 말함 실제 코드를 끌어 올리는 것은 아니고 사용하고자하는 변수 및 함수를 미리 선언만 하는것

변수의 호이스팅

변수를 해당 스코프의 최상단으로 끌어올리는 현상이며, 선언만 할뿐 할당되지 않는다.

함수의 호이스팅

함수 선언을 스코프의 최상단으로 끌어올리는 현상으로 함수 선언문과 함수 표현식이 다르게 동작한다.

함수 선언문에서의 호이스팅

함수 표현식에서의 호이스팅

이처럼 함수 선언문의 경우 호이스팅 과정에서 함수 자체가 메모리에 올라가지만 함수 표현식에서는 변수를 먼저 선언하고 할당하는 방식으로 호이스팅이 일어난다.

추가

let과 const

let과 const도 호이스팅이 일어난다. 하지만 위의 var대신 let과 const를 사용하면 정의되지 않았다는 오류가 발생한다. 왜그럴까 ??

이유는 자바스크립트에서 변수를 처리할때 크게 3단계에 거쳐 처리를 한다. 1.선언 ----변수를 생성하고 변수를 등록 2.초기화 ----등록된 변수를 undefined로 초기화 3.할당 ----undefined로 초기화된 변수에 실제값을 할당

var의 경우 호이스팅 과정에서 선언과 초기화가 함께 일어나지만 let과 const의 경우 호이스팅 과정에서 선언 단계만 이루어지기 때문이다.

let,const 는 ES6(스크립트언어의 표준,규격)가 등장하면서 함께 등장한 변수 선언 방식 var는 ES6 등장이전 사용하던 변수 선언 방식

차이점

Scope 범위

let

function hello(flag) {
  if (flag) {
    let text = 'hello';
  }
  console.log(text);
}
hello(true);

text is not defined 로 text가 정의 되지 않았다는 오류를 확인 할 수 있다.

var

function hello(flag) {
  if (flag) {
    var text = 'hello';
  }
  console.log(text);
}
hello(true);

hello가 출력되는것을 확인 할 수 있다.

이유는 스코프의 범위 때문인데 let과 const의 경우 블록 스코프로 {} 블록 내에서 정의한 변수의 경우 블록 안에서만 사용할 수 있지만 var의 경우 함수 스코프로 블록 내에서 정의한 변수라도 함수 범위 내에서 사용할 수 있다.

초기화

let

function hello(flag) {
  console.log(text);
  if (flag) {
    let text = 'hello';
  }
}
hello(true);

var

function hello(flag) {
  console.log(text);
  if (flag) {
    var text = 'hello';
  }
}
hello(true);

간단하게 설명하자면 JavaScript에서 변수를 선언할 때 선언, 초기화, 할당의 과정을 거친다. var의 경우 호이스팅 과정에서 변수의 선언, 초기화까지 진행하기 때문에 undefined를 출력하고 let과 const의 경우 호이스팅 과정에서 선언만 진행되기 때문에 참조 오류가 발생한다.

코딩 시작..

두둥 . . . 대학교 4학년 졸업작품을 만들 때 아두이노를 사용했는데 그때 처음 코딩을 접하게 되었다. 물론 나의 전공은 의료공학으로 나름 공대생이기 때문에 C언어 수업을 들은 적은 있다. 1학년 때 딱 한 번... 무튼 오래전 이기도 하고(핑계-1) 군대도 다녀오기 전이었기 때문에(핑계-2) 당시에는 큰 관심 없이 배워서 그런지 기억이 나지 않았다. 그래도 서보모터만 온·오프 하면되는거라 어찌어찌 검색해가며 완성해서 졸업을 했는데 졸업하고 나니까 이상하게 학구열이 생겨서 좀 더 깊게 배우고 싶어졌다. 졸업작품을 만들기 위해 조금씩 공부하면서 흥미롭게 공부하기도 했었고, 마침 주변 친구 중에서도 컴퓨터 공학을 전공한 친구들이 있었기 때문에 이참에 한 번 배워보기로 결심하게 되었다.

벨로그 시작..

사실 처음 개발 공부를 시작하고 벌써(?) 약 1년이라는 시간이 지났다. 그간 나름대로 많은 일들이 있었는데 지금쯤 드는 생각이 미리미리 정리를 조금 해둘걸…. 하는 생각을 하게 되었다. 그래도 이제라도 시작했으니, 회고는 기억나는 대로 하기로 하고 앞으로 생길 수많은 문제도 함께 정리를 좀 해나가 볼까 한다. 화이팅// ٩(๑•̀o•́๑)و