Hello World

1. 친구 검색 바로 업데이트하기

부모 컴포넌트(FindFriends.js)에서 검색할 아이디를 입력하면 props로 넘겨서

자식 컴포넌트(FriendProfile.js)가 바뀌어서 검색 결과를 보여주도록 의도했다.

그런데 처음 검색할 때는 제대로 출력이 되지만 두번째로 검색을 할 때는 FriendProfile.js가 바뀌지 않는 것이다.

FindFriends.js에서 검색한 아이디를 상태로 관리하기 때문에

예상대로라면 FriendProfile.js의 props 값이 바뀌므로 출력되는 내용이 바뀌어야하는데 그렇지 않았다.

라이프 사이클 함수를 이용하면 해결될까 싶어서 FriendProfile.js를 함수형 컴포넌트에서 클래스형 컴포넌트로 바꿔보기도 했으나 아무 변화가 없었다.

관련 자료를 찾아보다가 뜻밖의 해결책을 발견했다.

https://www.py4u.net/discuss/976613

나에게 도움이 된 답변은 Answer #6으로, key값을 추가하면 제대로 작동한다는 것이다.

그리고 이 방법대로 했더니, 정말 잘 작동되는 것이다!

리액트에서의 key값의 의미를 좀 더 찾아봐야겠다.

그리고 중첩 삼항 연산자를 사용할 부분이 생겨서 관련 자료를 찾아보았다.

https://nm-it-diary.tistory.com/38

삼항 연산자는 JAVA와 JS의 문법이 같은 듯 하다.

코드 수정 이후 검색을 한번 하고 바로 이어서 다른 아이디를 검색하는 것이 가능해졌다.

그리고 검색 결과가 없을 때 메세지를 출력하도록 수정했다.

2. 로그아웃 시 웰컴 화면으로 이동하기

redux를 이용하여 로그인 사용자 상태를 관리하는 것으로 변경되어서

로그아웃 시 redux로 관리하는 상태를 초기화해야 웰컴 화면으로 이동하게 되었다.

redux 모듈에 초기값으로 상태를 변경하는 액션 생성 함수 및 액션을 추가하고

useDispatch를 이용해서 해당 액션 생성 함수를 실행시켰다.

redux 모듈인 user.js에서 관련 부분만 나타내면 이렇다.

//Actions
const RESET_USER = 'user/RESET_USER';

const initialState = {
    email: '',
    id: '',
    name: '',
    is_loaded: false,
}

//Action Creators
export const resetUser = () => {
    return {type: RESET_USER};
}

//Reducer
export default function reducer(state = initialState, action = {}){
    switch(action.type){
        //do reducer stuff
        case 'user/RESET_USER': {
            return initialState;
        }
        default:
            return state;
    }
}

useDispatch를 이용해서 resetUser 액션 생성 함수를 실행하는 부분이다.

import { useDispatch } from 'react-redux';

const Main = (props) => {
    const dispatch = useDispatch();
    
    const logout = () => {
        let popup = window.confirm('로그아웃 하시겠습니까?');
        if (popup) {    //'예'를 선택했을 때
            userSignOut();  //Firebase Authentication 로그아웃
            dispatch(resetUser());  //redux 유저 정보 초기화
            history.push('/'); //웰컴 화면으로 이동
        }
    }
    ...
}

1. 화면 레이아웃 잡기

웹페이지의 레이아웃을 잡기 위해 Figma로 간단히 프로토타입을 그려보았다.

레이아웃은 크게 상단바, 사이드바, 본문 영역으로 나뉜다.

• 상단바 왼쪽에는 사이트 이름(미정), 오른쪽에는 탭 메뉴가 있다.
• 사이드바에는 사용자 프로필과 친구 목록이 나오도록 하여 친구 이름을 클릭했을 때 해당 사용자와 채팅하는 화면으로 넘어가는 것을 생각했다.
• 상단바 메뉴를 클릭했을 때 클릭한 메뉴에 따라 본문 영역의 내용이 바뀌도록 한다.

프로토타입을 바탕으로 친구 검색 화면, 채팅 화면 레이아웃을 구현했다.

우선은 기능 구현을 위해 각 영역만 잡고 디테일한 CSS는 나중에 수정할 것이다.

2. 친구 검색하기

채팅을 할 친구를 추가하면 사이드바 친구 목록에 추가될 것이고, 그 친구에게 채팅을 보낼 수 있다.

따라서 아이디를 이용해서 다른 사용자를 검색하는 기능을 구현했다.

사용자 정보는 Firestore에 저장되어 있으므로 forEach문으로 조회한다.

    const friendId = props.friendId;
    const [isLoaded, setLoaded] = React.useState(false);
    const [friendName, setFriendName] = React.useState('');

    //firebase firestore에서 해당 유저 검색
    const findUser = () => {
        firestore.collection('users').get().then((docs) => {
            docs.forEach((doc) => {
                if (doc.data().id == friendId) {
                    setFriendName(doc.data().name);
                    setLoaded(true);
                }
            });
            setLoaded(true);
        })
    }

상위 컴포넌트에서 props로 받아온 아이디를 검색하는 코드이다.

해당 아이디와 일치하는 사용자가 있으면 화면에 나타난다.

현재는 테스트 편의성을 위해 자신의 아이디도 검색 가능하도록 했다.

3. 사용자 정보 Redux로 관리하기

로그인 이후부터는 로그인한 사용자 정보가 컴포넌트 곳곳에서 사용될 것인데,

이를 위해서는 전역 상태 관리가 필요하다고 느꼈다.

이것을 위해 Redux(리덕스)를 이용하여 로그인한 사용자 정보를 관리하도록 구조를 변경했다.

configStore.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import user from './modules/user';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const middlewares = [thunk];

const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({user});
const store = createStore(rootReducer, enhancer);

export default store;

user.js

import {firestore} from '../../services/firebase';

const user_db = firestore.collection('users');

//Actions
const GET_USER = 'user/GET_USER';
const IS_LOADED = 'user/IS_LOADED';

const initialState = {
    email: '',
    id: '',
    name: '',
    is_loaded: false,
}

//Action Creators
export const loadUser = (email, id, name) => {
    return {type: GET_USER, data: {email:email, id:id, name:name}};
}

export const isLoaded = (loaded) => {
    return {type: IS_LOADED, loaded};
}

//DB에서 사용자 정보 읽어오는 함수
export const getUserFB = (email) => {
    console.log('액션 생성 : DB에서 유저 정보 읽어오기');
    return function (dispatch){
        user_db.doc(email).get().then((info) => {
            const id = info.get('id');
            const name = info.get('name');
            dispatch(loadUser(email, id, name));    //액션 발생시키기
            dispatch(isLoaded(true));
        })
    }
}

//Reducer
export default function reducer(state = initialState, action = {}){
    switch(action.type){
        //do reducer stuff
        case 'user/GET_USER': {
            return {email: action.data.email, id: action.data.id,
                name: action.data.name};
        }
        case 'user/LOADED': {
            return {...state, is_loaded: action.loaded};
        }
        default:
            return state;
    }
}

getUserFB가 Firestore에서 사용자 정보를 가져오는 부분이고

loadUser이 사용자 정보 상태를 업데이트 하는 액션을 생성하는 함수이다.

Reducer에서 상태 변경을 반영한다.

index.js에 Provider로 store를 주입한다.

ReactDOM.render(
  <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

App.js에서 mapStateToProps와 mapDispatchToProps를 작성해서 상태를 만들고 Redux의 함수를 연결했다.

//스토어가 가진 상태값을 props로 받아오기 위한 함수
const mapStateToProps = (state) => {
  return {
    user_email: state.user.email,
    user_id: state.user.id,
    user_name: state.user.name,
    is_loaded: state.user.is_loaded,
  };
}

//상태 값을 변화시키기 위한 액션 생성 함수를 props로 받아오기 위한 함수
const mapDispatchToProps = (dispatch) => {
  return {
    load: (email) => {
      dispatch(getUserFB(email));
    },
  }
}

Profile.js에서 사이드바에 이름과 아이디가 출력되도록 useSelector을 이용했다.

import { useSelector, useDispatch } from 'react-redux';

function Profile(props) {
    const id = useSelector(state => state.user.id);
    const name = useSelector(state => state.user.name);

    return(
        <ProfileConatiner>
            <ProfileImg/>
            <h3>{name}</h3>
            <p>@{id}</p>
        </ProfileConatiner>
    )
};

직접 코드를 작성해보니 Redux에 대한 개념이 굉장히 헷갈렸지만

다행히도 몇시간 고민하다가 제대로 이해할 수 있었다.

프로젝트 첫번째 날, 회원가입과 로그인 기능을 구현했다.
사용한 기술은 다음과 같다.

• 회원가입, 로그인 인증 - Firebase Authentication
• 유효성 검사 - Formik, Yup 라이브러리
• 사용자 정보 저장 - Firebase Firestore

웹페이지에 처음 접속하면 로그인과 회원가입 버튼을 볼 수 있다.

회원가입

회원가입은 이름, 이메일, 아이디, 비밀번호를 입력하여 진행한다.
아직 이메일, 아이디 중복 체크와 비밀번호 확인 기능은 구현하지 않았다.
Firebase Authentication을 이용해서 인증을 하고, Firestore에 사용자 정보를 저장하는걸 구현하는게 우선이기 때문!

그래도 유효성 검사는 미리 해두는게 좋을 것 같아서
리액트에서의 유효성 검사에 대해 찾아보다가 Formik 라이브러리와 Yup 라이브러리를 이용한 사례를 찾았다.

라이브러리를 사용하지 않고 유효성 검사를 구현하려면 코드가 굉장히 길어지고
각 폼의 양식마다 입력한 값을 관리하기가 쉽지 않다고 한다.
이것을 편하게 할 수 있도록 Formik 라이브러리가 제공되며
Yup을 이용해 각 필드의 유효성 검사 스키마를 쉽게 작성할 수 있었다.

내가 참고한 포스팅 링크 : https://velog.io/@roh160308/%EB%A6%AC%EC%95%A1%ED%8A%B8React-Formik-Yup

이런 식으로 유효성 검사에 어긋나는 값을 입력한 경우, input 아래에 자동으로 메세지가 출력된다.
이름 유효성 검사에 대한 코드만 간단히 작성하자면 다음과 같다.

<Formik initialValues={{ name: '', email: '', id:'', password: ''}}
	validationSchema={
    	Yup.object({ name: Yup.string()
        .max(10, '이름은 10글자 이하로 작성해주세요.')
        .required('이름을 입력해주세요.'), })}
        onSubmit = {(values, { setSubmitting }) => {
        	//모든 유효성 검사를 통과했을 때
        }}>
        {formik => (
        	<form onSubmit={formik.handleSubmit}>
            	<Input id="name" type="text" placeholder="이름"
                	{...formik.getFieldProps('name')} />
                    {formik.touched.name && formik.errors.name ? ( <div>{formik.errors.name}</div> ) : null}
                <SignUpBtn type="submit">가입하기</SignUpBtn>
            </form>
        )}
 </Formik>

Formik 태그 안에 폼 양식과 유효성 검사 스키마를 작성했다.
Yup 라이브러리에서 max로 최대 글자수 제한을, required로 작성 여부 확인을 할 수 있다.
아주 간단하게 코드 작성이 가능해서 유용했다!

로그인

회원가입을 완료하면 Firestore에 사용자 정보를 등록하고 나서
로그인 화면으로 이동하게 되고 이메일과 비밀번호를 입력하여 로그인할 수 있다.

사용자 계정 정보는 Firebase Authentication을 이용했고 로그인을 할 때 현재 세션에서 인증 상태를 유지하도록 했다.
참고한 공식 문서 : https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ko

로그인에 성공하면 alert가 뜨고 메인 화면으로 이동한다.

로그인 상태를 현재 세션동안 유지되도록 하는 것은 어렵지 않았는데
App.js에서 로그인 상태를 파악하기 위해 이것저것 시도하느라 시간이 꽤 걸렸다.
해결한 방법은 Firebase auth의 onAuthStateChanged 메소드를 이용하는 것이었다.

 componentDidMount() {
 	auth().onAuthStateChanged((user) => {
    	if(user) { //로그인한 상태일 때
        	console.log('로그인한 이메일 : ' + user.email);
            this.setState({email: user.email});
        } else { //로그인 안한 상태일 때
        	console.log('로그인 안된 상태');
        }
    });
 }

리액트 라이프 사이클 함수 중 첫번째 렌더링을 마친 후에 실행되는 componentDidMount에서
onAuthStateChanged를 이용하여 로그인 여부를 파악해서 로그인이 되어있으면 state를 변경하여 리렌더링한다.
관련 내용을 찾다가 react-redux-firebase라는 패키지가 있는 것을 알게 되었는데
추후에 redux도 사용할 예정이라 해당 패키지에 대해서 좀 더 조사해봐야겠다.

지난 달에 리액트 강의를 듣긴 했으나 직접 코드를 작성하는 것은 처음이라 기억이 가물가물한 부분도 많았고
새로운 라이브러리를 사용하니까 사용법을 익히는데 시간도 좀 걸렸다.
하지만 역시 눈으로 보는 것에 비해 실제로 코드를 작성하는 것이 학습 효과가 더 뛰어난 것 같다.
프로젝트 첫날이지만 많은 것을 복습하고 배울 수 있었다!👍

방학동안 웹 개발 공부를 많이 못한거 같아서 강의로 들었던 리액트를 기반으로 한 프로젝트를 진행해보려고 한다.

나는 메신저로 카카오톡과 슬랙을 이용하고 있는데 이런 메신저를 웹으로 구현하면 어떨까 싶어서

프로젝트 주제를 웹 메신저로 정했다.

웹 메신저를 구현할 때 제공할 기능과 사용할 기술을 적어보았다.

1. 회원가입, 로그인, 로그아웃

• Firebase Authentication의 이메일 인증 방법 사용
• Firebase Firestore에 사용자 정보 저장

2. 프로필 설정

• 이름은 Firestore에 수정 반영, 프로필 이미지는 Firebase Storage에 저장할 것

3. 친구 검색 및 추가

• 아이디로 친구 검색, 추가
• 추가한 친구 목록 조회

4. 채팅방 입장 및 채팅 전송

• 친구 목록에서 채팅을 시작할 친구 선택
• 개설된 채팅방은 메인 화면에 출력
• 채팅 내역은 Firebase Realtime Database에 저장하여 실시간 동기화가 가능하도록 함

기본적으로 제공할 기능은 위와 같고 만약 위의 기능을 모두 구현했다면

단체 톡방, 채팅 내역 개별 삭제, 커뮤니티 기능 등 확장할 수 있는 기능이 굉장히 많으므로

다양한 기능을 구현하면서 실력을 쌓고 여러 기술들을 활용해볼 수 있을 것이다.

우선은 앱 개발 프로젝트에서 사용해본 경험이 있기 때문에 익숙한 Firebase를 주로 사용할 것이고

리액트의 상태 관리와 비동기 처리를 다루는 실력을 많이 키울 수 있을 것으로 기대한다.

이번 2학기는 취준 겸 프로젝트를 하면서 공부하는걸로~

리액트 프로젝트를 하기 위해 프로젝트를 만들고 Firebase를 다운받았는데

firebaseConfig 설정을 하다보니 다음과 같은 에러가 발생했다.

Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')

내가 작성한 코드 부분 :

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
	//config
};

firebase.initializeApp(firebaseConfig);

const firestore = firebase.firestore();  //firestore DB 연결

export {firestore};

리액트 강의를 들으며 작성했던 코드와 동일하게 작성한거라 오류가 날 부분이 없다고 생각했는데

해당 오류를 검색해보니 스택 오버플로우에서 불과 3일 전에 올라온 글을 찾을 수 있었다.

https://stackoverflow.com/questions/68946446/how-do-i-fix-a-firebase-9-0-import-error-attempted-import-error-firebase-app

최근에 파이어베이스 9버전이 나왔고 이전 버전과 사용법이 달라졌다고 한다.

그렇다면 이전 버전을 이용하기 위해서는 반드시 다운그레이드를 해야하는가? 아니라고 한다!

이전 버전에서 firebase/app, firebase/auth, firebase/firestore 패키지에 있던 것을

firebase/compat/app처럼 compat를 붙이면 사용 가능하다고 한다.

설치한 버전을 바꾸고 싶다면 다음과 같이 할 수 있는데

yarn upgrade firebase@8.8.1

버전을 바꾼 후에는 반드시 다시 실행하는걸 잊지 말자...

yarn start 다시 안해놓고 왜 적용이 안되지?! 하며 고민하고 있었음😅

성남산업진흥원 주관 ICT 기업 인턴 프로그램에 합격하고

7월 마지막 주에는 신입사원 기본역량교육이 있었다.

교육을 받은지 한달이나 지난 시점이지만 활동 내용과 당시에 느꼈던 점을 기록해보겠다.

첫번째 교육은 의사소통역량 교육이었다!

교육은 줌을 이용해 실시간으로 진행되었고 ICT 인턴 프로그램의 첫 활동이라 긴장이 되는 상태로 줌에 입장했다.

3가지 키워드로 자기소개하기

강의가 시작된지 얼마 안돼서 각자 자신을 3가지 키워드를 이용하여 소개하는 시간을 가졌다.

이름, 학교, 전공 등을 말하는 뻔한 자기소개가 아니라

키워드를 이용해서 소개를 하니 각자의 개성이 묻어나오는 듯 했다.

구글 슬라이드를 이용해서 각자 페이지에 작성한 내용을 바탕으로 발표했는데

나는 스스로를 [1. 다양한 경험을 추구하는 사람 / 2. 몰입을 즐기는 사람 / 3. 어쩌다 보니 컴공] 이라는 키워드로 소개했다.

그렇게 적은 이유는,

1. 몇 년간 블로그를 운영하면서 새로운 맛집, 카페 등을 자주 방문했었고

서포터즈와 같은 다양한 대외활동에 참여하면서 전공이 아닌 분야에 대한 경험도 쌓았기 때문

2. 한번 컴퓨터 앞에 앉았다 하면 6시간 이상은 거뜬히 개발에 몰입을 하고 그 과정을 즐기기 때문

3. 중,고등학생 때부터 막연하게 프로그래머가 되기 위해 컴공에 가야지! 라고 생각했는데

막상 컴공에 오고 처음으로 프로그래밍 공부를 해보니 생각보다 적성에 잘 맞아서 어느덧 졸업반이 되었기 때문이었다.

키워드 자기소개 준비 시간이 길진 않아서 생각나는대로 바로 작성했지만

나중에 취업을 위한 자기소개서를 작성할 때 이런 식으로 나에 대한 키워드를 떠올려보는 것도 좋을 것 같다는 생각이 들었다.

팀 PR

자기소개를 마친 후에는 팀을 이루어서 팀 PR 자료를 만들고 소개하는 시간을 가졌다.

이제 막 처음 만난 팀원들과 PR 자료를 만들려고 하니 어색하긴 했지만

팀 이름을 정한 이유, 이 프로그램에 참여한 이유, 우리가 지킬 약속, 깃허브 아이디 등을 적으며 PR 자료를 완성했다.

열정 뿜뿜했던 우리 세자매 팀🔥🔥🔥

DISC 성격유형 검사

DISC 검사를 통해 자신의 소통, 행동 유형과 강점을 발견하고 효과적인 타인과의 상호작용을 위해서는 어떻게 해야하는지 알아보았다.

DISC 검사 결과는 D형(주도형), I형(사교형), S형(안정형), C형(신중형)으로 나뉘는데 나는 그 중에서 D형이 나왔다.

D형을 한마디로 나타내자면 "내 사전에 불가능이란 없다" 이라고 할 수 있고

자아가 강하고 목표 지향적이며, 도전, 목적 달성, 발전 가능한 기회 등에 의해 동기부여를 받는 유형이라고 한다.

타인을 몰아붙이거나 고압적으로 요구하는 것을 지양하고 타인의 제안과 의견을 경청하는 자세를 가져야 원활한 소통을 할 수 있다고 한다.

검사 결과로 알 수 있던 나의 성격의 강점을 잘 활용하되, 약점은 보완하도록 주의해야겠다.

소통에 실패했던 사람 파악해보기

마지막으로 지금까지 소통했던 사람 중 소통이 어려웠던 상황과 나와 맞지 않았던 점을 생각해보고 그 사람의 DISC 예상 유형을 적어보는 시간이 있었다.

그 사람의 유형을 예상하며 어떤 점에서 나와 달랐는지 파악해보고 왜 소통이 어려웠는지 그 사람 입장에서도 생각해보게 되었다.

나에 대해 소개하는 것이 어렵게만 느껴졌는데 키워드를 이용하며 소개를 해보니

자기소개가 마냥 어려운 것은 아니구나 라는 생각이 들었고

DISC 성격유형 검사로 의사소통 면에서의 나의 강점과 약점을 파악할 수 있는 시간을 가져서 좋았다.

어느 덧 개강날(9월 1일)이 얼마 남지 않은 시점에서
내가 이번 방학동안 공부한 내용들을 회고하며 정리해보는 시간을 갖기로 했다.
세 달 분량의 공부 내용을 적다보니 포스팅 길이가 매우 매우 길어질 예정!!

💙6월

1. 깃허브 1일 1커밋 시작

6월 11일에 종강을 하고 나서, 학기 중에 바빠서 못했던 것들을 하나씩 하자는 생각으로 의지를 불태웠다.
일단 꾸준히 개발 공부를 하는 습관을 갖기 위해 깃허브 1일 1커밋을 하기로 했다.
물론 의미 없는 커밋은 No! 🙅‍♀️
하루에 최소 1시간이라도 공부를 하는 시간을 가지도록 스스로의 목표를 세웠다.

그렇게 6월 12일부터 어제(8월 27일)까지 채운 잔디! (흔히 깃허브에 커밋하는걸 잔디 심는다고 표현한다더라)

이번 여름방학은 지금까지 내가 보낸 방학 중 가장 많은 공부를 했다고 확실하게 말할 수 있다.
뭐랄까 작년까지 게임도 이미 할만큼 많이 했고 유튜브 보며 빈둥대는 시간도 충분히 많았기 때문에
막학기를 앞둔 방학부터는 열심히 공부하고자 했다.

꾸준히 하는걸 어려워하는 나였지만
올해는 일기도 작년 12월부터 지금까지 하루도 빠지지 않고 적었고
방학부터 꾸준히 코딩 공부를 하며 잔디를 채워나가고 있어서 발전한 느낌이다.

이전과는 다른 의지, 꾸준함, 고민의 깊이 등
여러모로 올해가 인생의 전환점이 되는 해라는 생각이 들기도 했다.

2. 예전 프로젝트 깃허브 올리기

진작부터 깃허브 관리를 했으면 좋았을텐데 올해 3월에서야 깃허브를 처음 사용해본 나~
컴공을 다니면서 매 학기마다 여러 과목의 텀프로젝트를 진행했었다.
그 중에서 코드를 작성해서 개발했던 프로젝트 몇 개를 깃허브에 올렸다.

JSP 웹 프로젝트 : https://github.com/askges20/StardewValleyFanPage
유니티3D 게임 프로젝트 : https://github.com/askges20/ChickenRun
자바 GUI 프로젝트 : https://github.com/askges20/CafeSystem
//2학년 웹프로그래밍 과목 텀프로 반응형 웹 제작 프젝을 했는데 코드가 안남아있더라... 아쉬운 부분~

이외에도 SIC 어셈블러 만들기, 데이터베이스 PL/SQL 프로젝트,
데이터마이닝, 소프트웨어공학, 내장형시스템 등 여러 텀프로젝트가 있었지만 올리기 애매해서 패스
이렇게 되돌아보니 컴공 4년동안 다니면서 이것저것 많이 배우긴 했다.

3. 웹개발 로드맵 읽고 관련 지식들 찾아보기

컴공에서 배운 여러 과목 중 내가 가장 흥미있던 것은 웹 개발이었고
그 중에서도 프론트엔드가 흥미로워서 FE 개발자가 되고자 했다.

학교에서 배운 것은 HTML, CSS, JSP 정도밖에 없는 상태에서
내가 무엇을 공부해야할지 방향을 정하기 위해 로드맵을 찾아봤다.

https://www.youtube.com/watch?v=kjSZ7JKVdbQ

유튜브 썸네일만 봐도 공부해야할 기술 스택이 한두개가 아니라는 것을 알 수 있다...!!!
정말 학교에서 배운 것만으로는 취업할 수 없다는 얘기가 사실이었다.
나는 정말정말 극히 일부만 아는 상태였으니까.

웹개발 공부 시작이 막막하긴 했으나 이번 방학 때 공부를 조금 해서
로드맵에서 내가 한번이라도 다뤄본 (공부한) 기술들은
React, Redux, SCSS, Typescript, Bootstrap, Spring boot, MySQL, Firebase, GraphQL 정도가 있겠다.
HTML, CSS, Javascript 찐찐 기초만 알던 방학 시작에 비해서는 이것저것 많이 알게 된듯 하다.

이외에도 SPA, 서버 개발 언어 종류 등 웹개발 관련 지식들을 구글링해서 찾아보기도 했다.

4. 스파르타코딩클럽 앱개발 종합반 수강

한이음에서 프로젝트 참가자들에게 다양한 지원을 해주는데 그 중에서 하나가 블렌디드러닝 수강권 제공이었다.

스파르타코딩클럽에 있는 강의들 중 앱개발 종합반을 선택한 이유는
리액트 네이티브가 JS 기반이라 추후 웹개발 시 필요한 JS에 익숙해질 수 있을 것 같았고
현재 한이음 프로젝트는 안드로이드 스튜디오로 개발하고 있는데
안드로이드와 iOS 모두 지원되는 크로스 플랫폼 앱을 만드는건 어떤 느낌일지 경험해보고 싶었다.

그리고 음... 6월에 수강 가능했던 웹개발 강의 목차를 보니 기초적인 내용을 다뤄서
이미 아는 내용이 많기 때문에 7월에 다른 웹개발 강의를 듣기로 했었다ㅎㅎ

그렇게 VSCode로 리액트 네이티브 공부하면서 목표했던 바와 같이 JS와도 익숙해지고
인터넷에 공개된 각종 오픈 소스 라이브러리를 활용하는 것의 유용함을 많이 느꼈다.
이미 작성된 코드를 활용하고 응용하는 것도 개발 실력을 키우는 것이라는 생각이 들었다.
덕분에 지금은 영어로 된 공식 문서에 대한 거부감이 전에 비해 많이 줄어든 듯.

추가로 앱 빌드와 배포 방법도 알게 되었으니 혹시 모른다. 내가 나중에 앱 출시를 하게 될지!😎

5. 패스트캠퍼스 강의 듣기

인터넷에서 개발과 관련하여 이것저것 검색해보고, 스파르타코딩클럽 사이트를 자주 왔다갔다 했더니
빅-데이터에 의해 내 컴퓨터에 뜨는 광고가 하나씩 코딩과 관련된 것들로 바뀌기 시작했다ㅋㅋ
프론트엔드 공부를 할건데 인강 하나정도 끊어서 공부하는 것도 괜찮겠다 싶어서
패스트캠퍼스에서 프론트엔드 패키지 강의를 결제했다.

스타벅스 클론코딩 예시를 따라하며 이런식으로 웹 레이아웃을 구현하는구나~를 알게 됐고
정적 웹사이트 배포가 가능한 Netlify도 처음 사용해보았다.
그리고 강의에서 VSCode 단축키와 유용한 확장 프로그램을 많이 알려줘서 좋았다. 개발 생산성이 한층 높아짐!

강의가 백과사전 형식이라 내가 듣고 싶은것만 골라 들으면 되는데
나중에 Next.js랑 Svelte 영상을 시청해볼까 생각 중이다.

6. 백준 알고리즘 문제 풀기

코딩테스트 공부를 오랜만에 다시 시작했다. 백준 사이트에 있는 그리디 알고리즘, 동적 계획법, DFS/BFS 문제를 풀었다.
1학기에 소마 지원했다가 2차 코테를 스스로 생각했을 때도 너무 못풀었는데
알고리즘 유형별로 공부하다 보니 그때 당연히 떨어질 수밖에 없던 것 같다...
문제를 풀면 풀수록 나의 무지함을 깨닫는건 어쩔 수 없나보다.

6~7월에 한창 코딩테스트 공부하다가 지금은 쉬고 있었는데 2학기 개강하면 다시 꾸준히 문제 풀어야겠다.

7. 정보처리기사 실기 공부

지난 3월 7일에 본 1회 필기 시험을 합격하고 나서
캡스톤과 각종 프로젝트가 휘몰아치던 1학기가 끝나고 2회 실기 시험을 보기로 했다.
정처기 실기 공부는 시험 3주 전부터 매일 조금씩 공부했고 수제비 카페를 자주 방문했다.

약술형을 잘 쓸 자신이 없어서 수제비에 올라온 약술형 뽀개기 자료를 n회독 했다.
특히 보안 관련 단원에서 처음 듣는 용어가 매우 많았기 때문에 시험 1주전부터 보안 단원을 집중해서 봤다.

💙7월

1. 정보처리기사 실기 시험

7월 10일에 정처기 실기를 보러 갔다. 고사장은 야탑에 있는 성남금융고등학교였다. 가까워서 좋았음ㅎㅎ

시험이 생각보다 많이 쉽게 나왔다. 프로그래밍, SQL 문제 비중이 높아서 전공자인 나로서는 개이득이었고
걱정했던 약술형이 단 한문제 나왔는데 데이터베이스 트랜잭션의 원자성을 설명하는 것이었다.
지난 학기에 데이터베이스 프로그래밍을 수강했던 나에겐 너무 익숙한 개념~!

어찌보면 약술형 뽀개기를 그렇게 외웠던게 소용이 없어서 아쉽기도 했지만
아무튼 8월 20일에 결과가 나왔고 87점으로 가볍게 실기 시험 합격했다. 정처기 끝~
수첩형 자격증 신청했는데 얼른 도착했으면 좋겠다. 두근두근😊

2. 마음이 앱 개발 (한이음 프로젝트)

지난 5월부터 개발을 시작했는데 학기 중엔 각자 바빠서 제대로 개발을 못하고
이번 방학 7~8월에 집중적으로 개발했다.
게시판, 테스트, 챗봇 상담, 영상 시청 등 기능을 하나씩 구현하고 직접 앱을 이용해보니 뿌듯했다.
개발 일지도 꾸준히 남겼는데 슥 훑어보니 스스로 방학 때 열심히 개발했구나~ 하는 생각이 든다.

그리고 Firebase Authentication, Realtime Database, Storage 그리고 Google Dialogflow 등
외부 API를 가져다가 사용하는 방법을 알게 돼서 한층 실력이 늘은 것 같다.

앱 개발 프로젝트를 진행하고 있었기에 방학동안 꾸준히 코딩 공부를 할 수 있던 것 같다는 생각도 들었다.
개인 프로젝트는 내 마음대로 일정을 바꿀 수 있어서 자칫 흐지부지 되기 쉬운데
팀프로젝트는 팀원들과 의견을 조율하고 일정을 맞추다보니 꾸준히 하게 되었다.

개발하다 막히는 부분이 있으면 톡방에 공유하면서 같이 해결책을 고민해보고
각자 역할 분담을 해서 차곡차곡 쌓다보니 어느 새 앱이 거의 완성되어있고
프로젝트 진행하면서 팀워크의 중요성과 협업의 재미를 느꼈다.

6월 말에 있던 오프라인 미팅 때 오랜만에 팀원들 만나서 재밌었는데 코시국이라 대면 회의를 거의 못하는게 아쉽다.

3. 스파르타코딩클럽 프론트엔드의 꽃, 리액트 수강

앱개발 종합반 수강을 마치고 바로 리액트 강의 수강을 시작했다.
리액트 네이티브로 이미 JSX 문법을 배웠기 때문에 리액트도 금방 적응했고
라이프 사이클과 상태 관리, 라우팅, Redux, Firebase Firestore, AWS S3 호스팅 등을 배웠다.

주어진 강의 시청 기간은 5주인데 나는 3주만에 완강했다. 리액트가 어떤 녀석인지 너무 궁금했기 때문에!
배운 내용을 활용해서 웹 프로젝트를 해보면 좋을텐데 아직은 시작하지 못한 상태이다.
지금은 강의에서 배운 내용 Notion에 정리한거 다시 보며 복습하고 있다.

4. 성남산업진흥원 ICT 인턴 프로그램 신입사원 기본역량교육

방학동안 대외활동 지원할게 있는지 찾아봤고 성남산업진흥원에서 주관하는 ICT 교육 프로그램이 있었다.
내가 살면서 본 면접이라고는 고등학교 동아리 면접 1번, 서포터즈 면접 2번밖에 없어서
어떤 식으로 면접 준비를 해야할지 막막했다.
그래서 유튜브에 있는 면접 관련 영상을 이것저것 시청했고 이후로 취준 관련 영상들을 종종 시청하게 되었다!

7월 말엔 신입사원 기본역량교육(의사소통역량, 문제해결역량, 대인관계역량, 팀워크역량, 비즈니스매너)이 있었다.
교육은 실시간으로 4일간, 각 교육마다 4시간동안 진행됐다. 캠 키고 몇 시간동안 있는거 체력 소모가 은근 심함ㅎㅎ
첫날엔 많이 긴장했는데 발표도 여러번 하다보니 며칠 사이에 익숙해졌다.
킹시국이지만 줌을 이용해서 처음 만난 사람들과 소통하며 의사소통능력을 키울 수 있는 좋은 기회였다는 생각이 든다.

그리고 의사소통역량 교육에서 진행한 DISC 검사에서 D형(주도형)이 나왔다.
어렸을 땐 소심해서 남들 의견에 따르기만 했던거 같은데
살다보니 점차 내 의견을 당당하게 주장할 수 있는 자신감? 능력?이 생긴 듯 하다.🤔

💙8월

1. 성남산업진흥원 ICT 인턴 프로그램 부트캠프

8월 한달동안 부트캠프가 진행되었다.
개발 분야 부트캠프는 백엔드와 IT 실무 체험이 있었는데
나는 프론트엔드에 관심이 있고 여러 IT 실무 경험과 지식을 쌓는게 좋겠다고 생각해서 후자를 선택했다.

부트캠프 세션은 비대면으로, 2주에 한번 있었다.
세션 시간에 멘토님이 강의를 하시고 과제 피드백을 해주시고
세션 외에는 강의 자료를 보며 과제를 수행하면 된다.

부트캠프에서 다루는 내용은 거의 AWS(Amazon Web Services)에 관련된 것이었다.
VPC, EC2, RDS, ELB, Cloudwatch, Lambda, API Gateway 등의 기능을 다뤄보았다.
나 혼자서 공부할 땐 전혀 다룰 일이 없었고 공부할 엄두조차 내지 못한 AWS인데
이번 한달간 부트캠프 과제를 수행하면서 많이 배웠다. 배운 내용은 다 Notion에 정리해뒀음!

학교에서 네트워크 관련 과목을 거의 안들어서 네트워크에 대한 지식이 거의 없는 상태였는데
EC2 웹서버를 여러번 만들다보니 자연스럽게 네트워크 개념들을 공부하게 되었다.

그 외에도 wordpress 사용법, Jmeter을 이용한 성능테스트, AWS calculator을 이용한 비용산정 방법을 공부했다.
실시간으로 참여하는 시간이 적어서 한달동안 진행된 부트캠프지만 부담이 별로 없었고
멘토님께 과제 또는 실무에 대해 궁금한 점을 질문으로 남길 수 있어서 좋았다.

2. 마음이 앱 개발 마무리 및 한이음 공모전 서류 작성

멘토님께서 한이음 공모전 접수 마감일이 8월 30일이라 개발을 8월말까지는 거의 마무리해야한다고 말씀하셨는데
다행히도! 7월~8월초에 열심히 개발을 해서 계획했던 기능 구현은 완료했고, 앱에 들어갈 이미지도 다 넣었고
지금은 계속 테스트를 하면서 버그를 찾고 픽스하고 있다.

8월 중순부터 한이음 공모전 제출 서류인 개발보고서, 제작설계서를 작성했다.
개인적으로 나는 개발보다 개발 산출물을 작성하는게 너무 어렵다...
작성해야할 항목이 꽤 많아서 팀원 다들 고생하여 작성 완료했고 26일에 접수 완료! 좋은 결과 있으면 좋겠다.

3. 코딩 관련 유튜브 구독, 댓글 읽기

음 이건 공부라기보단 새로 생긴 취미인데 유튜브에서 코딩 관련 영상들을 찾아보는 것이다.
노마드 코더뿐만 아니라 외국 영상들도 많이 보고 있다.
아직 외국 영상은 프로그래머 관련 밈 정도만 보고 있는데 이런 밈에 웃을 수 있는 나, 제법 개발자같아요👩‍💻

그런 영상에는 전세계의 프로그래머분들이 바글바글 모여서 댓글을 작성해놔서
하나하나 읽으면서 영어 독해 공부도 되고 재밌다ㅋㅋ
나중에 개발자가 된다면 나도 외국인인 척 영어로 댓글 적어야지 LOL

4. 자바스크립트 문법 책 정독

최근에 영풍문고에서 프로그래밍 관련 서적들을 구경했다.
예전엔 서점에 가면 그냥 한번 슥 둘러보는게 끝이었는데
예전보다 아는게 많아지니까 흥미로운 책들이 많이 보여서 서점에 서서 3시간동안 여러 책을 봤다.

그중에서 반응형 웹과 자바스크립트 문법 책을 샀고
방학이 끝나기 전에 막판 스퍼트로 자바스크립트 책을 완독하려고 한다!
26일부터 읽기 시작했으니까 31일까지 6일동안 다 읽는게 목표ㅎㅎ
리액트 강의를 들으면서 JS를 다루긴 했지만 이렇게 책을 정독하는건 처음이라 몰랐던걸 많이 배우고 있다.

💙회고를 마치며

포스팅이 길어질 것은 예상했지만, 정말 길다. 이 글을 읽는 사람이 있을까 싶다.

요약하자면 내가 이번 여름방학동안 한 것은

• 6월 : 깃허브 1일 1커밋 습관 형성 / 웹개발 지식들 찾아보기 / 리액트 네이티브 강의 수강 / 프론트엔드 강의 듣기 / 백준 알고리즘 문제 풀기 / 정보처리기사 실기 공부
• 7월 : 정보처리기사 실기 시험 / 앱 개발 / 리액트 강의 수강 / ICT 프로그램 신입사원 기본역량교육
• 8월 : ICT 프로그램 부트캠프 (AWS) / 앱 개발 마무리 및 공모전 서류 작성 / 자바스크립트 문법 책 정독

이렇게 정리할 수 있겠다.
이번 방학때 공부를 열심히 다양하게 하긴 했지만 아직 갈 길이 멀다.

개강하면 반응형 웹 책 읽기를 시작해서 15일만에 끝낼 것이고
9월 2~3주에는 ICT 프로그램에서 자소서, 면접 특강이 있기 때문에 한창 바쁠 것 같다.
이번 학기는 교양 3과목만 듣고 나머지 시간은 취준과 개인 공부에 투자할 생각이다.

마지막으로 이 캡쳐 사진은 투두메이트라는 앱인데 친구가 알려줘서 2주 전부터 시작했다.
투두리스트를 작성하다보니 자연스럽게 주간 계획도 세우게 되고,
체크 표시를 하기 위해 미리 세워둔 계획을 최대한 지키려고 공부를 하게 된다.
8월 초에 번아웃 와서 해이해졌다가 다시 정신 붙들게 해준 앱! 앞으로도 꾸준히 쓸 것이다.


방학을 마무리하며 두달 반동안 쉬지 않고 공부한 나 자신에게 박수를 보낸다👏👏👏

앱에서 게시판이라는 커뮤니티 기능을 제공해서 글을 작성하고 댓글로 소통할 수 있긴 하지만

어딘가 정적이라는 느낌이 들어서 해결 방법을 여러가지 생각해보았고

그 결과 알림 기능을 추가하는걸로 결정했다.

알림을 추가하는 경우는 3가지로 생각했고, 각 알림을 클릭했을 때 특정 화면으로 넘어가게 설계했다.

1. 회원가입 완료 알림 -> 클릭 시 이용안내 페이지로 이동

2. 작성한 글 새로운 댓글 알림 -> 클릭 시 해당 글 내용 페이지로 이동

3. 마음 온도 60점 이상 달성 시 게시판 기능 해제 알림 -> 클릭 시 게시판으로 이동

메인 화면 상단바 오른쪽에 알림 아이콘을 추가했다.

읽지 않은 알림이 있으면 사진에 나온 것처럼 빨간색으로,

모든 알림을 읽었으면 회색으로 나온다. (물론 아이콘 모양도 바뀜)

알림 목록 페이지에서 각 알림 이미지(추후 수정 예정)와 알림 제목, 내용, 날짜, 읽음 여부가 출력된다.

댓글 알림을 클릭하면 해당 게시글 페이지로 이동해서 어떤 글에 달린건지 알 수 있다.

맨 아래에 있는 마음 온도 60점 달성 알림을 클릭하면 게시판으로 이동한다.

알림 기능 만드는 것 자체는 어렵지 않아서 2~3시간만에 후다닥 만들었다.

다만 자잘한 오류가 있는 것 같아서 계속 테스트하고 해결해가는 중이다...