내가 어떻게 응답을 보내주고 있는지를 먼저 확인해봐야 한다. 어떤식으로 응답을 보냈고, 어떤 오류를 마주했었는지를 적어보려 한다.

1) 첫번째 시도

요청 코드 >

const handleGetUserInfo = () => {
        console.log(accessToken);
        axios.get(`${REACT_APP_API_URL}/user`,
            {
                headers: {
                    "Content-Type": "application/json",
                    authorization: `Bearer ${accessToken}`,
                }
            }).then((result) => {
                console.log(result.data.data.userInfo);
            })

    }

응답 결과 > 요청헤더에 accessToken은 문제없이 들어가는걸 확인해볼 수 있는데, 어째서인지 cookie값이 인식되지 않는다.

서버 반응 > 둘다 undefined로 나온다.

사실 원래대로라면 콘솔에 accessToken이 찍혀있어야하는데(refreshToken만 없는거니까!) 여기서 undefined가 나온 이유는 console.log(req.header.authorization);로 콘솔을 확인 했기 때문이다....console.log(req.headers.authorization);로 확인하도록! 오타 주의~

바보갓은 나에모습,, 흑

어쨌든 첫번째 시도는 refreshToken이 들어오지 않고 있다.

2) 두번째 시도

요청 코드 > refreshToken을 읽어오지 못한다는 것은 https 연결에서 withCredentials 조건이 제대로 설정되지 않았기 때문이다. 그래서 해당 조건을 만족하는 코드를 한줄 추가해줬다. axios 공식문서를 확인해보니 get요청을 보낼 때 url다음으로 오게 되는 값은 config로 처리해준다. 해당 config에서도 Credential를 사용해 cross-site Access-Control 요청을 보내도록하면 cookie에 들어있는 refreshToken을 불러올 수 있게 되는 것이다.

// `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default

const handleGetUserInfo = () => {
        console.log(accessToken);
        axios.get(`${REACT_APP_API_URL}/user`,
            {
                "Content-Type": "application/json",
                authorization: `Bearer ${accessToken}`,
          //refreshToken을 위해서 필요한 설정!!
                withCredentials: true

            }).then((result) => {
                console.log(result.data.data.userInfo);
            })

    }

응답 결과 > refreshToken이 쿠키에 잘 들어가 요청을 보내주고 있는 것을 확인할 수 있다. 하지만 어째서인지 accessToken은 인식하고 있지 못하는 상황 ㅠ

서버 반응 > 서버의 콘솔에서도 refreshToken은 있는데, accessToken은 undefined로 보여주고 있다.

3) 최종 요청 성공

요청 코드 > 마찬가지로 axios요청 공식문서에 기재되어 있는 걸 참고해보았다. 알고보니 헤더설정은 따로 커스텀한 헤더를 넣게될 경우 config안에서도 headers라는 키값으로 가지고 있어야 했다.

// `headers` are custom headers to be sent
headers: {'X-Requested-With': 'XMLHttpRequest'},

헤더설정을 해주고, withCredentials는 따로 config안에 담은채로 요청을 보낸다.

 const handleGetUserInfo = () => {
        axios.get(`${REACT_APP_API_URL}/user`,
            {
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${accessToken}`,
                },
                withCredentials: true
            }

        ).then((result) => {
            console.log(result.data.data.userInfo);
        })

    }

서버 반응 > 서버에서 토큰을 두개 전부 다 성공적으로 읽는 것을 확인할 수 있다.

응답결과> 마찬가지로 authorization 헤더값에 accessToken이 들어가있고 cookie에도 refreshToken이 잘 담겨진 채로 요청을 보내고 있는 걸 확인할 수 있다.

axios를 사용하는데 어째서인지 토큰값을 인지하지 못하고 있는 상황이라면 네트워크 탭에서 request headers와 서버에서 받아오는 값들을 자세히 비교해보면서, 헤더설정과 config설정을 주의깊게 확인하여 보내도록 하자!!

redux-persist로 먼저 새로고침하더라도 redux의 상태들이 초기화되지 않도록 하는 과정을 먼저 거쳐야 한다.

npm으로 설치하기

npm install redux-persist

rootReducer.js

import { combineReducers } from "redux";
import loginSlice from './loginSlice';
import userInfoSlice from './userInfoSlice';
import modalSlice from './modalSlice';
import boardSlice from './boardSlice';

const rootReducer = combineReducers({
    login: loginSlice,
    userInfo: userInfoSlice,
    modal: modalSlice,
})

export default rootReducer;

store.js

import { configureStore } from '@reduxjs/toolkit'
import {
    persistReducer,
    PERSIST,
    PURGE
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import rootReducer from '../reducers/rootReducer'
import logger from 'redux-logger';

const persistConfig = {
    key: 'root',
    version: 1,
    storage,//localStorage에 저장해 store를 관리
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
  //미들웨어 작성시 에러 주의
        getDefaultMiddleware(
            {
                serializableCheck: {
                    ignoredActions: [PERSIST, PURGE],
                },
            }
        ).concat(logger)

})

export default store;

주의: 발생할 수 있는 에러 when using a middleware builder function, an array of middleware must be returned => 에러가 발생했던 코드

middleware: (getDefaultMiddleware) => {
          /*에러나는 코드*/
          getDefaultMiddleware().concat(logger);
        getDefaultMiddleware(
            {
                serializableCheck: {
                    ignoredActions: [PERSIST, PURGE],
                },
            }
        )
}

이처럼 애초에 middleware는 콜백함수 형태로 작성해야하는데 그게 아니라 함수를 실행?하는 것처럼 작성하여서 자꾸 에러를 뿜어내며 리액트를 렌더조차 못하고 있었던 것이었다. 따라서 한번만 getDefaultMiddleware를 써서 불러오도록 해야한다.

index.js

import App from './App';
import store from './store/store'
import { persistStore } from 'redux-persist';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react';


const root = ReactDOM.createRoot(document.getElementById('root'));

export let persistor = persistStore(store);
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </BrowserRouter>

);

이렇게 설정해둘 경우 새로고침하면 더이상 store의 state들이 초기화되지 않는다.

2) 로그아웃시 유저 정보 삭제하기

유저정보를 삭제하기 위해서는 store를 purge하는 작업을 거쳐야 한다. persistConfig에서 localStorage에 저장한 state들을 전부 초기화 시켜주기 위해서 필요한 과정이다.

공식문서에서는 다음과 같이 extraReducers를 사용해 적용하라고 한다. 리덕스 툴킷 사용 공식문서

import { PURGE } from "redux-persist";

...
extraReducers: (builder) => {
    builder.addCase(PURGE, (state) => {
        customEntityAdapter.removeAll(state);
    });
}

이를 적용해 logout이 실행되는 시점에서 만들어둔 extraReducer로 store에 접근 가능하도록 해야한다.

loginSlice.js

export const loginSlice = createSlice({
    name: actionName,
    initialState,
    reducers: {
        login: (state, action) => {
            state.isLogin = true;
            state.accessToken = action.payload;
        },
        logout: (state) => {
            state.isLogin = false;
        }
    },
  //초기화하고 싶은 state가 있는 slice마다 아래를 추가해야한다.
    extraReducers: (builder) => {
        builder.addCase(PURGE, () => initialState);
    }
})

로그인 상태를 관리하는 loginSlice.js말고, userSlice.js같은 리듀서가 또 있다면 해당 리듀서에서도 추가하여 initialState로 초기화시킬 수 있도록 한다. extraReducers를 추가해주지 않으면 state를 초기화시키지 못하고 있는 것을 볼 수 있을 것이다.

로그아웃이 실행되는 컴포넌트.js

import { persistor } from '../../index';

cons LogoutComponent = () => {
  //초기화 하는 함수
  const purge = async () => {
        await persistor.purge();
    }
}
return (
 <NavButton onClick={async () => {
                            await handleLogout()
                            await setTimeout(() => purge(), 200)
                        }}>Logout</NavButton>

)

onClick 이벤트가 발생했을 때 먼저 로그아웃 관리하는 함수를 전부 완료한 후에 purge()를 진행하도록 비동기처리했다. purge()함수를 만들어 처리하는 것에 대한 힌트는 redux-persist github 이슈: purge() doesn't work에 대한 답변중 하나를 참고했다.

주의할점:로그아웃 함수(handleLogout)가 실행되기 전에 purge()해버리지 않도록 비동기처리와 setTimeout()처리를 함으로써 로그아웃 처리를 완료 후에 초기화하도록 해야한다. 초기화가 먼저 실행되버리면 로그아웃할 유저에 대한 정보가 먼저 사라져 버릴수도 있는 위험을 방지하기 위해서이다.

마지막으로 localStorage나 redux의 store가 잘 초기화되는지 확인만 해보면 된다.

3) localStorage 초기화 확인

: 크롬브라우저에서 개발자도구를 켜 application탭을 누르면 확인 가능하다.

로그인 시 localStorage의 상태

로그아웃 시 localStorage의 상태

4) Redux store 초기화 확인

이건 확인할 수 있는 방법이 여러가지가 있다. getDefaultMiddleware().concat(logger)로 찍히는 콘솔에서 직접 state를 확인해도 되고,

(action을 기준으로 상태값이 어떻게 달라지는지 확인 가능)

마찬가지로 크롬 개발자도구에서 redux 확장프로그램을 설치해 redux 상태 변화를 확인해 볼수도 있다.

두 방법으로 확인한 결과 모두 로그아웃시 상태값을 잘 초기화하는 것을 확인할 수 있다.

이 상대경로를 제대로 설정해주지 않으면 나처럼 이미지 태그의 alt값만 떠있고 도통 이미지는 보이지 않는 슬픈 일이 일어날 수 있다.

//파일 - src/assets/images.js
export const loadingImg = {
  //절대경로로 찾아오는 경우임
    loading: "./images/loading.png"
}

이미지를 관리하고 꺼내쓰던 방법은 src/assets/images.js라는 파일에서 객체를 만들어 해당 객체에서 각 이미지 별로 키값을 부여해 public에서 이미지 src를 찾아오도록했다.

이미지를 불러오는 특정 Component.js
import { loadingImg } from '../../assets/images';
...

return (
  <img src={loadingImg.loading} alt={`loading`} />
)

하지만!!!! 위의 코드처럼 썼을때 처음 https://domain.com 홈에서 해당 이미지에 접근할 때는 문제가 없다가, 다른 페이지 (예시: https://domain.com/post/id=sth)에서 똑같은 이미지에 접근하려고 하면 이미지가 깨져서 로딩되는 것이었다.

그래서 개발자도구를 열어 문제가 생긴 이미지의 src를 어떻게 인식하고 있는지를 확인해봤다.

불러오고 있는 src가 https://localhost:3000/images/loading.png가 되어야지 이미지를 제대로 불러올 수 있는데, 절대경로로 "./images/loading.png"불러왔기 때문에 도메인의 경로가 바뀌는 순간 이미지를 못찾아오는 듯해보였다.

이미지 로딩 실험

// src/assets/images.js
export const loadingImg = {
  //절대경로로 찾아오는 경우임
    loading: "./images/loading.png"
}

//Component.js
import { loadingImg } from '../../assets/images';
import loading from '../../assets/loading.png';

//case1
<img src={loadingImg.loading} alt={`loading`} />
//case2
<img src='/images/loading.png' alt={`loading`} />
//case3
<img src={loading} alt={`loading2`} />

case2, 3은 모두 정상적으로 이미지를 불러오는 것을 확인할 수 있었다.

개발자 도구를 열어 이미지의 자세한 src를 확인해보면 case2는 상대경로로 바로 이미지를 불러온 것이고,

case3는 직접 png파일이 저장되었는 절대경로로 찾아들어간 것이다.

하지만 case3같은 경우 만약 다른 컴포넌트에서 해당 이미지를 접근하려 한다면 또다시 깨진 이미지를 마주하게 될 가능성이 있다.

case1은 처음부터 이미지가 깨져서 나온다. 아무리 images.js파일에서 이미지가 들어있는 절대경로로 src를 주어도 메인 주소가 바뀌면 해당 이미지를 불러오질 못하기 때문에 문제가 생긴다.

해결방안

나의 경우에는 이미지를 관리하는 src/assets/images.js파일 속 경로를 전부 상대경로로 변경해주었다.

// src/assets/images.js
export const loadingImg = {
  //상대경로로 찾아오기
    loading: "/images/loading.png"
}

위처럼 할 경우 어떤 컴포넌트에서든 loadingImg를 import해서 접근할때마다 문제없이 이미지를 불러올 수 있다. 위의 방법말고도 이미지를 불러올때는 public/images 경로에 이미지를 넣어두고 상대경로로 import해오는 것을 강력추천한다.

이와 같은 문제를 겪은 스택오버플로우 질문자에게 감사를 표하면서,,,

https://www.w3schools.com/html/html_filepaths.asp 를 참고하여 더이상 같은 일들이 생기지 않게 파일 경로에 대해 알아두고 넘어간다... 상대경로를 반드시 사용하자!!

추가) 이미지를 상대경로로 import할 경우

이미지가 public/images에 있을 때 이미지를 아래와 같이 불러오고자 한다면,

//error
import logo from "/images/logo.png";
      <img src={logo} alt="Bepol Logo" />

이러한 import 에러를 마주할 수 있다.

ERROR in ./src/components/Header.jsx 8:0-36
Module not found: Error: You attempted to import /images/logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

자세히 읽어보면, import는 같은 src 폴더 안에만 있는 것들을 상대경로로 불러올 수 있다고 말해주고 있다.

//good
//import 없애고 바로 src에서 상대경로로 연결
   <img src="/images/logo.png" alt="Bepol Logo" />

이처럼 public/images에 있는 이미지들은 상대경로로 불러오고자 한다면 import할 필요 없이 바로 src에 연결해주면 된다.

Geolocation API 사용

먼저 현재 위치를 받아오기 위해서는 Geolocation API를 사용해야 한다. 참고로 geoLocation API는 https에서만 사용가능하기 때문에 현재 개발 환경이 https인지 확인하고 사용해야 한다. Geolocation API 사용 공식문서

getCurrentPosition() 함수를 이용해 현재 위치를 좌표로 가져올 수 있다. 함수의 첫번째 인자로는 콜백함수를 넣어 위치를 받아올 경우 콜백함수로 받아온 위치를 조작할 수 있다. 하지만 첫번째 콜백 호출이 실패할 경우 함수의 두번째 인자를 호출하기 때문에 오류 콜백을 두번째 인자로 둘 수 있다.

const doSomethingSuccess = (position) => {
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
}
const doSomethingError = (error) => {
  ...
}
navigator.geolocation.getCurrentPosition(doSomethingSuccess, doSomethingError);

에러 메세지를 사용자에게 보여주고 싶다면 에러 코드에 따라 달리 표시 할 수도 있다. GeolocationPositionError 공식문서 GeolocationPositionError.code를 사용해 에러 코드별로 메세지를 정해줄 수도 있다.

카카오 지도 API 이용하기

카카오 API 사용을 위한 초기 설정

카카오api 사용 안내 문서 먼저 카카오 디벨로퍼스에 가입하고 위의 링크에서 안내되어 있는대로 따라하면 된다.

위의 과정대로 하고 나면 api 요청에 필요한 rest API 키를 받을 수 있다. 이를 외부로 노출하지 않고 사용하기 위해서는 클라이언트에 .env파일을 만들어 준다.

.env파일을 만들어 REACT_APP_KAKAO_API_KEY=키값 이런식으로 작성해주고 해당 값이 필요할 때는 process.env.REACT_APP_KAKAO_API_KEY로 값을 불러와 사용하면 된다. .gitignore파일에 .env라고 적음으로써 깃에 실수로 .env파일을 올리는 걸 방지한다. 보다 자세한 단계별 설명은 API key 보안 유지하는 방법 링크를 참고해보면서 설정하면된다.

주의 : api키의 변수명은 반드시 REACT_APP_으로 시작해야한다.(상세 에러 상황은 아래의 에러해결 참고)

좌표를 동 단위로 변환

이제 geolocation으로 받아온 x,y좌표를 kakao api로 요청을 보내 행정구역 정보로 받아오고 그 중 동 단위의 정보만 저장할 것이다. 카카오 지도 api 공식문서: 좌표로 행정구역 정보 받아오기

요청해주는 함수는 공식문서에서 요구하는대로 headers에 rest api 키를 넣어서 보내준다.

/* 카카오지도 API로 현재 유저 좌표를 동단위로 변환 */
    const alterAddress = (position) => {
        let x = position.coords.longitude;
        let y = position.coords.latitude;
        if (x && y) {
            axios.get(
                `https://dapi.kakao.com/v2/local/geo/coord2regioncode.json?x=${x}&y=${y}`,
                { headers: { Authorization: `KakaoAK ${process.env.KAKAO_REST_API_KEY}` } }
            ).then((result) => {
              //법정동 기준으로 동단위의 값을 가져온다
                let location = result.documents[0].region_3depth_name;

            })
        }
    }

에러 발생 및 해결

위처럼 요청을 보내자 에러가 생겼다.

침착하게 어떤 에러가 났는지를 살펴 보자.

해당 함수를 실행시키고 어떤 값을 받아오는지 개발자도구 네트워크 탭을 확인해보았다. response payload에는

{"errorType":"AccessDeniedError","message":"wrong appKey(undefined) format"}

위와같이 잘못된 api key때문에 접근이 거절되었다는 에러메세지를 보내주고 있었다.

이에 따라 request요청을 살펴보니 headers에 넣어둔 api 키값을 가져오지 못하고 있었다

{ headers: { Authorization: `KakaoAK ${process.env.KAKAO_REST_API_KEY}` 

요청 헤더 속 Authorization이 undefined로 제대로 들어가지 못하고 있었다.

process.env.KAKAO_REST_API_KEY를 인식하지 못하고 있었다. 알고보니 React 앱에서는 .env 파일에서 변수값을 사용하려면 REACT_APP_로 시작하는 변수명을 사용해야 한다. 저렇게 만든 이유는 같은 이름일 경우 실수로 키값이 노출될 수도 있기 때문에 일부러 지정해두었다고 한다.(env파일사용 공식문서) .env파일을 수정하고 나면 돌아가고 있던 react앱을 ctrl+c 로 종료시킨 후 다시 npm start해줘야 한다.

다시 앱을 실행해주면,,,

response.payload에 제대로 정보를 받아오는 것을 볼 수 있다!!!

이제 이것을 개발자가 원하는 대로 데이터를 뽑아 사용하면 된다.

안전하게 merge하기 위해서는 여러 에러들을 거쳐가야 한다. 매번 같은 에러를 만날 때마다 머리를 싸맸는데 그중에 한가지 방법을 기록해두고자 한다.

1) 로컬과 원격 repo 버전 맞추기

현재 내 로컬에서 아직 git add나 git commit되지 않은 변경사항이 있다면, git pull upstream branch 나 git pull origin branch 둘 다 되지 않을 것이다. 이럴 땐 working tree에 남아있는 수정사항들이 있는지 먼저 확인해보고 있다면 전부 add 처리를 해줘야 한다. 그런 다음에 git pull을 시도했을 때, 순탄히 되지 않을 가능성이 높다.

따라서 이런 에러를 마주하고 싶지 않다면 반드시 로컬 저장 후 커밋 -> push -> 내 원격 레포 -> 내 원격 레포와 업스트림 레포를 fetch & merge로 최신화하기 이러한 순서로 진행하길 바란다.

2) git push가 되지 않을 때

나의 repository가 이미 업스트림에 맞게 최신화 되어있기 때문에 브랜치가 한단계 더 앞에 있어 현재 내 로컬브랜치와 출발점이 맞지 않아 push가 되지 않는 상황이 생긴다.

이럴 경우 뜨는 에러는

warning: Pulling without specifying how to reconcile divergent branches is
discouraged. You can squelch this message by running one of the following
commands sometime before your next pull:

  git config pull.rebase false  # merge (the default strategy)
  git config pull.rebase true   # rebase
  git config pull.ff only       # fast-forward only

You can replace "git config" with "git config --global" to set a default
preference for all repositories. You can also pass --rebase, --no-rebase,
or --ff-only on the command line to override the configured default per
invocation.

이러하다. 친절하게 깃에서 알려주는 대로 git config pull.rebase true이런 명령문으로 에러를 해결해 볼수도 있겠지만, config 설정을 해두면 원치 않을 경우에도 위의 설정이 적용되어 나중에 불편한 상황이 올 수도 있다.

그렇다면 지금 할 수 있는 선택은 내 로컬에서 새로운 브랜치를 만들고, 그곳에서 rebase를 해준다음, 원래 머지하려했던 나의 로컬 브랜치로 merge하는 법이다. 이렇게 진행하면 새로운 브랜치에 최신화된 코드를 내 로컬로 가져와서 나의 다른 로컬 브랜치랑 합치는 작업을 해볼 수 있다. 다른 브랜치를 새로 만든 이유는 혹시 모를 손실을 막기 위해 따로 브랜치를 파서 진행한다.

1) 새로운 브랜치 만들기

git checkout -b 새로운브랜치 합치려는브랜치: 새로운 브랜치를 만들고 해당 브랜치로 변경해준다.

2) 업스트림의 원하는 브랜치를 pull받아오기(rebase)

git pull --rebase upstream 합치려는브랜치 : rebase처리해줌으로써 깃 브랜치 상태를 최신화 시켜줄 수 있다.

3) rebase 과정 중 발생할 수 있는 에러

에러가 없었으면 좋겠지만 대부분 발생할 가능성이 크다. upstream에서 누군가가 내가 작업한 파일에서 변경을 했다면, 자동으로 merge될수 없기 때문이다. 이럴 때는 vscode에서 코드를 보고 살릴 부분을 확인하고 저장 후 git add . 한 후에 git rebase --continue를 해준다. 위와 같은 과정이 한번에 해결되는 건 아니고 충돌이 나는 부분이 있을 때마다 발생한다. 따라서 발생할 때마다 수정사항 저장 git add .(vscode source control에서 staged changes로 올라갔는지 한번 확인) 하고, git rebase --continue를 진행해준다. 계속 진행하다 보면 rebase가 완료되었다는 메세지를 볼 수 있게 된다! 따라서 완료 메세지를 보기 전까지는 계속해서 위의 과정을 진행해줘야 한다.

4) rebase 완료 후 합치고자 하던 브랜치와 merge

rebase가 되었다면 이제 내가 원하는 브랜치와 merge하는 작업만 남았다. git checkout 합치려던브랜치로 브랜치를 바꿔주고, git merge --no-ff 새로만들었던브랜치를 하고 git push origin dev를 해준다.

이제 무사히 나의 로컬에 있던 파일들이 업스트림 파일들과 잘 머지 되어 합쳐진 최신 버전으로 내 원격 레포지토리에 올라가는 것을 확인할 수 있다. 그리고 나서 upstream 브랜치도 최신화시켜야 한다면, pull request를 열어 머지 작업을 해주면 된다.

항상 같은 문제가 발생하고 같은 오류 메세지를 만나다가 이번에는 제대로 해결해보자 싶어 해결 후 기록해두었다. 물론 rebase하는 것 말고 다른 좋은 방법들이 있을테니 좀 더 깃 사용법에 대해 학습해봐야겠다. 우선은 rebase로 머지를 해주고 최신화를 시켜주는 방식을 하나 익혔다. 무엇보다도 내 원격 레포를 fetch upstream으로 아무 생각없이 하지 말고!!!!! *먼저 *내 로컬의 변경사항들을 잘 저장하고 커밋해두고 push까지 한 후에!! 진행하는 것이 베스트인 것 같다. 깃으로 다시 한번 소중한 교훈을 얻어간다....ㅎ

이번 에러는 바로 그렇고 그런 근본 에러가 아니었나 싶다.

프로젝트를 상쾌한 마음으로 시작하려 하는데 npm install이나 npm start부터 안된다면? 그렇다면 터미널 창을 껐다 켜보는 것을 추천한다.

아래의 링크를 보면 나와 같은 에러를 발견한 github issue가 있다. https://github.com/AnandChowdhary/run-url/issues/1

그중에 제일 도움이 됐던 답변은 바로 아래 링크의 답변이다.

첫번째 해결책 링크

" 그냥 터미널 창을 껐다 켜보세요. "

덕분에 아무 문제 없이 문제가 해결됐다!!!

하지만 혹시나 껐다 켜도 안되는 상황이 있을 경우를 위해 두번째 해결책인 아래의 링크를 첨부한다. 두번째 해결책 링크 하지만 다수의 의견을 보면 두번째 해결책처럼 sudo npm cache clean -f을 해도 되겠지만 터미널을 재시작하는것으로 충분하다면 할필요는 없다. 그러니 반드시 먼저 껐다 켜보고 시도해보도록...

여러 이유가 있겠지만 브랜치 변경할 때 생길수도 있고, 처음 만들때 생성해둔 폴더를 중간에 지웠는데 알고보니 모듈들이 폴더를 지우고 새로 만든 폴더 경로를 찾지 못해오는거일수도 있다.그러니 반드시 새로고침을 해보도록 하자!!

프로젝트를 할때, 테스트 케이스도 전부 다 통과를 하는데?!?!? 막상 npm run start를 해보면 서버와 클라이언트가 뭔 원수를 졌는지 cannot GET/ 이런것만 띄워두거나 자꾸 콘솔창에서 undefined 만을 돌려주고 있는 야속한 상황이 생길 때가 있다.

이번 스프린트에서는 클라이언트에서 서버로 요청을 보낸 후 서버에서 github OAuth인증을 받아 accessToken을 github에서 받은 후 다시 클라이언트로 보내주는 과정을 구현했다.

여러가지 난관이 있었지만 궁극적으로 블로그에 기록할만큼의 힘듦을 선사한 오류를 기록해두고자 한다.

우선 간략하게 소셜로그인에 사용되는 OAuth인증을 살펴보면 다음과 같다.

이중에서도 4)단계와 5)단계를 진행하는 과정을 조금 더 자세히 보면,

axios.post('https://github.com/login/oauth/access_token', dataGroup,
     {
       //반드시!!!!!json 타입으로 받아오겠다고 적어둬야함, 안그러면 키 값을 읽어낼수가 없음...
       headers: { 'Accept': 'application/json' }
     })
     .then((result) => {
       console.log(result.data)
       res.status(202).send({ accessToken: result.data.access_token })
     })

Headers 안넣어서 json으로 변경이 안되었을 때, 요청 성공 시 응답 받은 값(res.data)을 확인해보면 ,

이렇게 나오는 이유는!

문자열로 인식되어서 키값으로 access_token을 가져오지 못함 data에 빈객체만이 돌려주고 있을 뿐...

그래서 header 설정을 반드시 해줘서 보내줘야 한다.

{
   //반드시!!!!!json 타입으로 받아오겠다고 적어둬야함, 
   //안그러면 키 값을 읽어낼수가 없음...
       headers: { 'Accept': 'application/json' }
     }

주석에도 반드시!!라고 적어둔것처럼 정말 중요해서 다시한번 코드로 남겨둔다. 이걸 안 적어두니까 json타입으로 받아오질 못해서 객체의 키값(예시: result.data.data.accessToken)으로 accessToken을 받아올 수 없는 것이기 때문이다.

원하는 데이터 값을 받아오고 싶다면 api문서를 잘 읽고 요구사항이 뭔지를 제대로 본 후에 요청을 보내도록 하자. 물론 깃헙 accessToken을 받아오는 과정을 설명하는 문서(https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps#2-users-are-redirected-back-to-your-site-by-github)에서는 headers에 대한 언급이 없다. parameters를 설명을 봐도 body에 담아줘야할 필수 요소들만 써져 있을 뿐이다..
혹여나 github 로그인을 소셜로그인으로 달았다가 accessToken이 없는 경우에 마주했다면 반드시 headers를 제대로 보내주고 있는지를 확인해볼 필요가 있다.

데이터를 저장하고 사용하는데는 다양한 방법이 존재한다. In-Memory방식으로 javascript에서 프로그램이 실행될때만 저장되는 방식과, 엑셀 시트나 csv파일 형태로 저장하는 방식이 있다. In-Memory 방식의 경우 프로그램이 종료되면 사용했던 데이터도 모두 사라지기 때문에 예기치 못한 상황에서 데이터를 보호하기가 어렵다. 파일을 읽는 방식으로 작동하는 경우도 데이터가 필요할 때마다 전체 파일을 읽어와야하므로 크기가 크면 작업이 버거워지는 한계가 있다.

하지만 관계형 데이터베이스를 사용할 경우 데이터가 프로그램의 수명에 의존하지 않아도 될 뿐더러, 하나의 파일에 해당하는 데이터를 한 개의 테이블로 저장하고 여러개의 테이블을 가질 수 있다.

결국 인메모리 방식이나 데이터 파일을 불러와 사용하는 방식 모두 한계가 있어 이를 보완하고자 데이터 베이스를 사용한다.데이터 베이스를 사용하는 이유를 축약하면 다음과 같다.

('데이터베이스를 지탱하는 기술' 참고)

• 필요한 데이터를 빠르게 반환 가능
• 대용량 데이터는 메모리 외에서 관리 필요 : 메모리의 크기 제한, 데이터 손실의 경우 등의 한계 극복
• 무결성 관리를 위해 필요
• 병렬성 제어 : 배타 제어(한사람이 데이터를 수정할때 다른 사람은 수정하지 못하도록 하는 제어)로 일관성을 지킴과 동시에 실용성을 높이기 위해 병렬적으로 제어 가능하도록 한다.

SQL(Structured Query Language)

관계형 데이터베이스에서 사용하는 데이터베이스 용 프로그래밍 언어로 MySQL, Oracl, SQLite 등에서 SQL 구문을 사용할 수 있다. 관계형 데이터베이스는 데이터가 구조화된 테이블로 이루어져 있다. NoSQL은 반대로 테이블을 사용하지 않는 문서 지향 데이터베이스다. SQL은 데이터가 구조화된 데이터베이스에서만 사용가능한 언어이다.

* Query? 쿼리는 '질의문'이라는 뜻으로 저장되어 있는 데이터를 필터하기 위한 질의문이다. 검색할 때 입력하는 검색어로 데이터를 필터링해주는데 이때 작성하게 되는 검색어가 일종의 쿼리라고 볼 수 있다.

SQL 주요 문법

기본적으로 데이터의 조회, 삽입, 갱신, 삭제 등을 다룰 수 있어야 한다.

SQL의 기본 문법을 작성하는데 필요한 튜토리얼은 https://www.w3schools.com/quiztest/quiztest.asp?qtest=SQL 여기서 점검해보기 좋다.

모든 sql 문법을 다 적기보다는 자주 쓰이거나 쓰다가 헷갈렸던 구문들을 몇개 정리해보려고 한다.

INSERT INTO

새로운 레코드를 테이블에 추가한다.

_ 컬럼 추가와 다른점 _ : 해당 칼럼에 ALTER TABLE 테이블명 ADD 컬럼명 쿼리문

SELECT WHERE

LIKE

Functions

• max(컬럼명)
• min(컬럼명)
• avg(컬럼명)
• count(컬럼명)
• sum(컬럼명)

  GROUP BY

  그룹별 정보를 조회해보고 싶을 때 사용한다. 반드시 집계함수, 그룹함수와 함께 사용해야 한다.

  ORDER BY

ALIAS

IN

DROP TABLE / TRUNCATE TABLE

둘 다 테이블을 제거하는 쿼리문이다. 차이가 있다면 DROP TABLE은 테이블 자체를 삭제하지만, TRUNCATE TABLE은 테이블의 구조는 남아있으나 테이블 안의 데이터를 전부 삭제한다는 차이가 있다.

스키마 디자인

앱에 필요한 테이블과 필드, 그리고 관계를 부여할 수 있다. 1:N, N:N 관계를 이해하고, 데이터베이스에서 테이블을 조작할 수 있다. Foreign Key, Primary Key에 대해 이해할 수 있다.

시간복잡도

알고리즘 문제를 풀 때 효율적인 방법을 고민하기 위해 고려해야할 조건 중 하나는 시간 복잡도이다. 시간 복잡도를 고려한다는 것은 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼만큼 걸리는지를 확인한다는 것이다. 즉, 입력값이 커짐에 따라 증가하는 시간의 비율이 최소화될 수록 효율적인 알고리즘을 구현했다고 할 수 있다.

대부분 Big-O 표기법으로 시간 복잡도를 나타낸다. Big-O 표기법은 최악의 경우를 나타내므로, 만약 연산에 최대 1시간이 걸릴경우, Big-O 표기법으로 해당 연산은 1시간짜리 시간복잡도를 가진 연산이라고 본다.

O(1)

: 입력값의 크기와 상관 없이 즉시 출력값을 알 수 있는 시간 복잡도

function algorithm(arr,idx) {
  return arr[idx];
}
// arr의 크기가 아무리 커져도 출력값을 바로 얻어낼 수 있다.
// arr의 길이가 1일때나 1000000일때나 리턴값을 얻는데는 똑같은 시간이 소요된다.

O(n)

: 입력값이 증가함에 따라 시간도 같은 비율로 증가하는 시간 복잡도 - linear complexity 입력값의 크기가 1일때 어떤 연산에 1초의 시간이 걸리고 크기가 100일 때 100초의 시간이 걸렸다면 O(n) 시간 복잡도를 가진다고 본다.

//입력값이 1 증가할 때, 실행시간은 1초씩 증가
//입력값 크기:1 -> 1초
//입력값 크기:2 -> 2초
//입력값 크기:100 -> 100초
function O_N_algorithm(n){
  for(let i=0;i<n;i++){
    //연산 시 1초의 시간이 걸림
  }
}
//입력값이 1 증가할 때, 실행시간은 2초씩 증가
//입력값 크기:1 -> 1초
//입력값 크기:2 -> 4초
//입력값 크기:100 -> 200초
function O_2N_algorithm(n){
  for(let i=0;i<2n;i++){
    //연산 시 1초의 시간이 걸림
  }
}

두번째 코드 예시의 경우 O(2n)으로 생각할 수도 있지만, 입력값의 크기가 커질 수록 계수의 의미는 크게 영향을 미치지 않기 때문에, 같은 비율로 증가한다면 모두 O(n) 시간 복잡도를 가진다고 본다.

O(logn)

: 입력값의 크기가 커질수록 logn에 비례하여 증가하는 시간 복잡도 - logarithmic complexity 이진 검색과 같이 입력값의 크기에서 특정 값을 찾을 때까지 절반씩 줄여나가는 연산을 가질 경우 O(logn)의 시간 복잡도를 가진다.

//N(입력값의 크기)을 2번 나누기 k번 실행으로 1이 될때까지 연산
//2^k = N  ->  log2N 
function binarySearch(n, arr, start, end){
  if(start>end){
    return -1;
  }
  let idx = parseInt((start+end)/2);
  if(arr[idx] === n) {
    return idx;
  }else if(arr[idx] > n) {
    //찾고자 하는 숫자가 배열의 반절의 값보다 작을 때
    return binarySearch(n, arr, start, idx-1);
  }else{
    //찾고자 하는 숫자가 배열의 반절의 값보다 클 때
    return binarySearch(n, arr, idx+1, end);
  }
}

또 다른 예제로는,

for(let i=0;i<n;i++){
  i *= k;
}
//k배수만큼 i가 증가하며 n으로 도달
//k^i === n  -> log(k) n 

O(n^2)

: 입력값의 크기가 커질수록 시간이 n의 제곱수의 비율로 증가하는 시간 복잡도 - quadratic complexity 입력값의 크기가 1일때 어떤 연산에 1초의 시간이 걸리고 크기가 5일 때 25초의 시간이 걸렸다면 O(n^2) 시간 복잡도를 가진다고 본다.

//입력값이 1 증가할 때, 실행시간은 1초씩 증가
//입력값 크기:1 -> 1*1 = 1초
//입력값 크기:2 -> 2*2 = 4초
//입력값 크기:100 -> 100*100 = 100초
function O_quadratic_algorithm(n) {
    for (let i = 0; i < n; i++) {
        for (let j = 0; j < n; j++) {
        // do something for 1 second
        }
    }
} 
//n^3씩 실행시간 증가
function another_O_quadratic_algorithm(n) {
    for (let i = 0; i < n; i++) {
        for (let j = 0; j < n; j++) {
            for (let k = 0; k < n; k++) {
            // do something for 1 second
            }
        }
    }
}

O(2n),O(3n)이 O(n)과 같은 시간 복잡도로 표기되는 것과 마찬가지로 n^2과 n^3, n^4, n^5 모두 O(n^2)로 표시한다.

O(2^n)

: 입력값의 크기가 증가함에 따라 매번 2배씩 시간이 늘어나는 시간 복잡도 - exponential complexity

//재귀로 구현하는 피보나치 수열 
//n이 100이상 넘어갈 경우 평생 결과값을 못받을 수도 있다.
function fibonacci(n) {
    if (n <= 1) {
        return 1;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

시간복잡도의 빠른 순서대로 비교를 하자면 : O(1) < O(logn) < O(n) < O(n^2) < O(2^n)

또는 이미 상용되고 있는 다른 프로젝트에 추가적으로 내가 원하는 기능을 구현해보고 싶을 때, 원본 프로젝트를 건들이지 않고 만들수 있는 기능이 필요하기도 하다.

이를 해결하기 위해 (각자 다른 버전의 코드를 관리해주기 위해...등) 알아야하는 개념이 git branch다.

선행되어야 하는 지식들

• github과 git의 관계
• repository - local과 remote의 차이

Branch 기능 장점

• 한 소스코드로 동시에 다양한 작업 가능: 작업별로 소스코드를 사용하고 고치기 때문에 혹시나 오류가 났을 때도 해당 작업에 대한 히스토리를 해당 branch에서 한눈에 확인할 수 있어 대처 가능하다.
• 여러 브랜치를 사용해 브랜치를 오가며 작업 가능
• 다른 브랜치에 영향을 주지 않고 독립적으로 작업 가능: 각자의 브랜치에서 작성하다가 완성이 되면 합쳐진다.

여러 브랜치를 사용한 git graph (출처: Git Beginner's Guide for Dummies)

브랜치는 그 특징에 따라 나눠지는데 대체로 해당 작업의 특징에 따라 나눠진다. 배포될 소스가 기록되는 브랜치는 통합 브랜치(Integration Branch)/ 기능 추가 및 버그 수정을 위한 브랜치는 피처 브랜치(Feature Branch, Topic Branch)로 해당 브랜치에서 작업을 완료하면 통합 브랜치에 병합하여 사용한다.

Git Branch 명령어

Git branch를 활용한 workflow

프로젝트를 진행하기에 앞서 팀원들이 각자 맡은 파트의 개발을 하기 위해서는 각각의 branch를 파서 개발을 진행해야 한다. branch를 만들고 작업하는 과정을 자세히 살펴보자.

진행할 프로젝트의 repository

프로젝트의 remote repository에서 fork를 해 나의 remote repository로 가져온다. 그런 후 코드 작업을 위해 local repository로 git clone 명령을 통해 소스코드를 가져온다.

local repository로 git clone을 해왔다면 이제 브랜치를 파는 작업을 하면 된다.

feat/login 브랜치 생성

위의 그림과 같이 remote repository에서 main, dev 브랜치만 있던 저장소를 local repository로 clone해온 후 login기능을 구현한 개발을 하기 위해 feat/login 브랜치를 새로 생성하려 한다.

feat/login-oauth 브랜치 생성

로그인 기능을 구현하다가 oauth인증을 받아 login하는 기능을 구현하고 싶을 때, 기존에 feat/login 브랜치에서 만들어둔 코드를 건드려 망가지게 할 수는 없으므로 feat/login-oauth 브랜치를 따로 만들어 준다.

feat/login 브랜치에서 merge

feat/login-oauth 브랜치에서 기능 구현이 완료되었다면 작성한 코드를 합치기 위한 과정이 필요하다. feat/login-oauth에 있었던 브랜치에서 feat/login 브랜치로 다시 git checkout feat/login 한다.

feat/login에서 feat/login-oauth 브랜치를 생성하고 merge

• feat/login 브랜치에서 따로 commit한 내역이 있는 경우 feat/login-oauth 브랜치를 합치면서 겹치는 부분은 없는지 확인 하고 merge

• feat/login 브랜치에서 따로 commit한 내역이 없을 경우

• fast-foward* 방식으로 feat/login 브랜치에서 바로 feat/login-oauth 브랜치를 merge. (위의 그림 참고)

  이 경우를 빨리 감기 merge라고 하며 feat/login-oauth 브랜치는 login 브랜치와 같은 히스토리가 들어있기 때문에, 따로 수정사항(commit)이 없었다면, feat/login의 최신상태를 feat/login-oauth가 합쳐진 상태로 빨리 감아주는 것이다.

merge한 feat/login 브랜치를 push

merge가 완료된 feat/login 브랜치는 내 remote repository로 push한다.

origin local에서 origin remote repository로 push된 feat/login 브랜치

이때 명령어는 git push origin feat/login(푸시하고자 하는 브랜치이름).

원본 프로젝트로 push한 브랜치 pull request(PR)

push된 브랜치를 원본 프로젝트에 pull request

새로운 브랜치를 파서 login 기능을 만든 후에 원래 프로젝트에 넣고 싶다면 pull request로 원본 remote repository에 pull request를 보내 코드를 해당 프로젝트를 함께하는 팀원들과 확인도 가능하다.

만약 origin local에서 작업하던 도중 project remote repository에서 수정사항이 생긴다면 작업하고 있던 origin local repository로 pull해서 변경사항을 반영하여 그걸 바탕으로 진행해야 한다.

위의 과정을 전부 종합하면, 다음과 같은 git branch workflow가 나오는 걸 확인할 수 있다.

git rebase

특정 시점으로 branch가 가리키는 곳을 변경하는 기능으로, 말그대로 branch base를 다시 정해주는 것이다. branch 통합의 개념으로 merge와 유사하나, merge와 달리 변경내역의 이력이 그대로 남아있지 않는다. 변경 로그를 더 깔끔하게 유지하고 싶을 때 사용하게 된다.

git rebase

첫번째 feat/login(검은글씨)에서 feat/login-oauth가 분기되었으나 각각의 브랜치에서 commit 내역이 생겼다. 만약 이 상황에서 git rebase feat/login feat/login-oauth를 한다면 두 브랜치를 통합하기 위해, 가장 최신 커밋인 두번째 feat/login(빨간색글씨)로 base가 옮겨지면서 feat/login-oauth 브랜치도 두번째 시점으로 branch를 통합한다.

• git rebase로 커밋 수정하기 git rebase -i HEAD~~ : HEAD(현재 브랜치 위치)에서 최근 2개까지의 commit내역을 보여준다.

• 에디터가 열린다.

• pick 커밋1(수정하려는 커밋)에서 pick을 edit으로 수정하고 :wq로 편집기를 나온다

• git commit --amend로 수정하려 했던 커밋을 편집기에서 수정한다

• 커밋 수정을 마친뒤,git rebase --continue를 하면 수정이 완료된다.

• git rebase로 커밋 통합하기 git rebase -i HEAD~~ : HEAD(현재 브랜치 위치)에서 최근 2개까지의 commit내역을 보여준다. -> 에디터가 열린다. -> pick 커밋2(수정하려는 커밋)에서 pick을 squash으로 작성하고 :wq로 저장하고 편집기를 나온다 -> 커밋 통합에 관한 설명이 화면에 보여진다. -> 통합 완료! (* git rebase는 커밋 로그는 합쳐지면서 수정되기 전 커밋 내역은 보여지지 않는다)

** +) VScode에서 git graph 보는 법** extension에서 git graph 설치

추가적으로 학습 가능한 자료

게임으로 이해하는 git branch Dangit, git! 깃 실수 연습

A+B를 while문으로 출력하라

입력받은 두 수의 더한값을 출력하는 문제인데, for문 때의 문제와 다르게 첫번째 입력값으로 테스트 케이스의 개수가 정해져 들어오지 않는다. 즉, for문 돌릴 때 필요한 범위 제한 값이 없기 때문에 언제까지 반복문을 돌려야하는지 정확한 개수가 정해져 있지 않은 경우 while문을 사용한다.

while문은 조건문이 false가 되는 순간 while문을 빠져나온다.

따라서 다음과 같이 코드를 작성했는데, 틀렸다고 나왔다.

import java.util.*;

public class Q10952 {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int result = 1;
        //result = 1 (result 초기값은 1로 설정)
        //첫번째 입력: result = 1, num1 = 1, num2 = 1   
        //두번째 입력: result = 2, num1 = 2, num2 = 3
        //세번째 입력: result = 5, num1 = 0, num2 = 0
        // -> 세번째 입력의 경우 0과 0의 입력이 들어오는 순간 while문에 들어가지 않고 while문을 빠져나와야 하는데, 두번째 입력의 result값이 5로 저장되어 있기 때문에 while문을 들어간 후 그 다음 네번째 입력 전에 while문을 빠져나온다.

        while(result != 0){
            //1
            //2
            int num1 = scan.nextInt();
            //1
            //3
            int num2 = scan.nextInt();

            //2
            //5
            result = num1 + num2;
            System.out.println(result);
        }

    }
}

위의 코드와 같이 처리할 경우 출력 결과가 마지막 0일때까지도 더한 값 0을 출력하기 때문이다. 하지만 0일때는 출력하지 않고 while문을 빠져나와야 하기 때문에 조정해줘야 한다.

public class Q10952 {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int result = 1;


        while(result != 0){
            int num1 = scan.nextInt();
            int num2 = scan.nextInt();

            result = num1 + num2;
            if(result != 0){
            //더한값이 0일때는 출력하지 않도록 조건 하나를 더 걸어준다.
                System.out.println(result);
            }
        }

    }
}

결국은 조건을 하나 더 추가하여 출력예제와 똑같이 나오도록 했다. 문제를 통과했지만 찝찝한 점은... 이렇게 if조건 하나하나 덕지덕지 붙여가며 코딩하는건 좋지 않은 것 같아 while문 안에서만 해결할 수 있는 방법이 있는지 다시 생각해봐야 했다.

백준 10951번

A + B 출력

입력의 끝이 정해져 있지 않은 채로 scanner 입력을 받아 더한 값을 출력해준다.

다음과 같은 값들이 입력값으로 들어온다. 이때까지의 더하기 값 출력하기 문제들과 다른 점은 입력값이 언제 끝날지 모른다는 것이다. EOF(End of File)는 더이상 파일에서 데이터를 읽어들일 수 없을 때로 이를 활용할 수 있다. 끝나는 지점을 명확히 알기 어려운 경우에 필요하다.

public class Main {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);
        //결과값 초기화
        int sum = 1;

        //hasNext() 함수는 scanner가 입력값을 읽어올 때, 다음으로 불러올 data가 있는지를 따져본다.
        //다음에도 값이 있다면 
        while(scan.hasNext()){
            //반복해서 다 더한 값을 출력해냄

            int a = scan.nextInt();
            int b = scan.nextInt();
            sum = a+b;
            System.out.println(sum);
        }
    }
}

scanner를 사용해 입력값을 받았다면 hasNext()함수로 그 다음으로 올 문자열을 확인해 볼 수 있다. 만약 다음에 입력값이 또 있다면 hasNext()는 true값이 되어 while문을 돌게 된다.

백준 1110번

더하기 사이클

import java.util.*;
public class Q1110 {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int originNum = scan.nextInt();


        int newNum = originNum;
        int count = 0;
        //String mixedNumString = "";
        //int mixedNumInt = 0;

        //while문 조건을 true 말고 직접 조절하려고,
        //while(mixedNumInt != originNum)으로 했는데 백준에서는 계속 틀렸다고 나온다
        //디버깅 결과는 동일하게 나옴


        while(true){
            //입력받은 수의 일의 자리수를 구함
            int digit2 = newNum % 10;
            //입력받은 수의 십의 자리수를 구함
            int digit1 = newNum / 10;

            int sum = digit1 + digit2;

            //처음에는 문자열로 바꿔서 숫자 하나씩 이어붙이는걸로 생각했다
            //숫자 -> 문자열 -> 숫자
            //과정이 복잡해짐
            // mixedNumString = Integer.toString(digit2) + Integer.toString(sum % 10);
            // mixedNumInt = Integer.parseInt(mixedNumString);


            //더 간단한 방법 - 정수에서 해결
            newNum = (digit2 * 10) + (sum % 10);
            count++;

            if(newNum == originNum){
                break;
            }
        }
        System.out.println(count);
    }
}

처음에 생각한 문제 해결 방안은 자리수 하나씩 문자열로 변환하여 이어 붙인 후 다시 정수로 변환하는 방식으로 생각했다.

하지만 십의 자리수, 일의 자리수를 다 구했다면 이 둘을 합쳐서 두자리수를 곱셈식으로 나타낼 수 있기 때문에 더 간단한 방법으로 바꿀 수 있다.

다만, while문 조건 작성에 있어 의문점이 생겼다. 처음에 작성한 코드는 아래와 같았는데 디버깅은 결과가 문제 없이 나왔었다. 하지만 백준 채점 결과에서는 계속 틀렸습니다가 나와서 아무리 생각해도 이유를 알 수가 없다...예제로 나온 입력예제 다 넣어봤는데 결과값이 일치한다.

처음에 작성했던 while문

 while(mixedNumInt != originNum){
            //입력받은 수의 일의 자리수를 구함
            int digit2 = newNum % 10;
            //입력받은 수의 십의 자리수를 구함
            int digit1 = newNum / 10;

            int sum = digit1 + digit2;


            //새로만들어진 수를 한 번 더 복사해서 사용했다
            //if 조건문 사용을 피하고 싶어서...
            mixedNumInt = (digit2 * 10) + (sum % 10);
            newNum = mixedNumInt;
            count++;

        }
        System.out.println(count);

왜 틀렸는지가 나오면 좋을텐데 채점 기준을 다시 살펴봐야겠다.

백준 2739번

구구단을 출력해라!

구구단을 출력하는 문제는 워낙 유명하고 기본중에 기본이다. 백준 알고리즘에서 나온 문제 말고도 여러가지 방식으로 다양하게 구구단을 출력해보는 문제들도 많다. 그 유명한 구구클래스도 있지 않는가~

차치하고, 가장 기본 구구단 출력 문제를 풀어보자.

반복문에서는 어느 부분이 반복되는지를 살펴보면 되는데, 위의 문제에서는 1부터 9까지 곱해주는 수가 달라지고 곱셈 문장은 계속 똑같은 형식으로 출력되고 있는 것을 볼 수 있다.

이번에 문제풀면서 큰 문제는 없었지만 어째서인지 또 컴파일 에러가 난것...

javascript를 쓰다가 java를 쓰려니까 출력문에 '작은따옴표'가 아니라 "큰따옴표"를 써야한다는 것을..까먹었던 것! 저번 level2 if문 예제 풀때도 똑같은데서 컴파일 에러났는데 이번에도 또 그래서 다시 한번 적어둔다.

백준 15552번

빠른 더하기

java의 경우 BufferedReader와 BufferedWriter를 사용하여 빠른 더하기를 구한다. 보통은 입출력을 Scanner, System.out.println으로 하는데 buffer를 사용하는 것보다 속도가 느린편이라 빠른 속도의 연산 처리를 위해서는 buffer를 활용해 계산한다. 데이터가 많아질수록 버퍼를 이용해 데이터를 처리하면 더 빠르게 처리가 가능해진다. BufferedReader와 BufferedWriter 사용법을 알아보자~!

BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

String line = br.readLine(); //줄단위로 입력값을 받음
int num = Integer.parseInt(line);  //문자열로 들어온 입력값을 정수로 형변환

따라서 입력받은 값을 한줄 단위로 인식하기 때문에, 공백단위로 입력받는 scanner와는 다르게, 입력받은 데이터를 따로 가공해줘야 한다. 그리고 강제로 타입 변환을 해서 int값으로 바꿔주어 사용 가능하다.

코드를 쓰고 제출했더니 컴파일 에러가 났다. error: cannot find symbol 에러메세지가 나타내는 건 컴파일러가 식별자를 알아볼 수 없기 때문으로 대체로 선언한 적 없는 변수를 사용하거나 범위 바깥에 있는 변수를 사용할때 이런 에러가 난다. 이번에는 BufferedReader 자체를 인식하지 못하고 있는 것 같아서보니 입출력과 관련한 패키지를 가져오지 못했기 때문에 import java.io.* 입출력 패키지를 import 해온다.

BufferedReader와 Writer를 쓸 때는 try-catch로 에러처리를 반드시 해줘야 한다. 그렇지 않으면, 또 컴파일 에러가 난다. 에러처리도 까먹지 않고 꼭..!

컴파일 에러를 다 수정하고 드디어 통과.

import java.util.*;
import java.io.*;

public class Main{
    public static void main(String[] args){
        try{
            BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
            BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

            //제일 처음 입력값으로 들어오는 테스트 케이스 수 
            int total = Integer.parseInt(br.readLine());

            //1부터 입력받은 값까지 반복문으로 더하기
            for(int i=1;i <= total;i++){
                //buffer는 문자로 값을 읽음(줄 단위)
                String s = br.readLine();
                //받은 문자열 공백 단위로 끊기 
                String arr [] = s.split(" ");
                //배열안에 저장된 값들을 모두 int로 변형시키고,
                int firstNum = Integer.parseInt(arr[0]);
                int secondNum = Integer.parseInt(arr[1]);

                //첫번째 수와 두번째 수를 모두 더한 값을 바로 bufferwrite으로 출력해준다
                bw.write(firstNum+secondNum+"\n");

            }
            //버퍼에 남아있는 값을 다 내보낸다
            bw.flush();
            //버퍼를 닫아준다
            bw.close();
        }
        //반드시 예외처리를 해줘야 한다. 안그러면 컴파일 에러가 난다.
        catch(IOException e){
        }


    }
}

백준 11021번

A + B 를 정리하여 출력하기

입력받은 테스트 케이스를 더하여 그 결과값을 출력해주는 문제이다. 대신 출력할 때,

이렇게 Case #순서가 붙어야 한다.

그리고 문제푸는 방식과 상관없이 🙀😿 자꾸 틀리는 System.out.println 출력 🙀😿

처음에 썼던 코드는 더한 값을 출력하는게 아니라 프린트문에서 더해줬다.

//결과값을 바로 더해주면 되겠지?
 System.out.println("Case #"+i+": "+ firstNum + secondNum);

//출력 예시
11
23
34
98
52

하지만 출력문에서 바로 더해줄경우 이미 문자열과 섞여서 출력이 되고 있었기 때문에 정수의 합이 아닌 정수를 문자열처럼 나란히 나열해줄 뿐이었다...

결국 정수 변수를 만들어 따로 더해주고 출력!

import java.util.*;

public class Q11021{
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);
        //테스트 케이스의 개수 T값
        int total = scan.nextInt();

        for(int i=1; i <= total; i++){
            int firstNum = scan.nextInt();
            int secondNum = scan.nextInt();
            //int sum = firstNum + secondNum;
            System.out.println("Case #"+i+": "+ firstNum + secondNum);
        }   
    }
}

이런 쉬운 것에서도 자꾸 틀리지 않도록 까먹지 말고 잘 쓰자!

백준 2438번, 2439번

별 찍기 문제로 별을 어디에 찍어주느냐에 따라 문제 유형이 다르다.

문제를 풀때 사용한 방법은 이중 for문이다. 입력 예제와 출력 예제를 보면, 정렬이 어느쪽으로 되어있는지의 차이만 있고 입력받은 N번째 줄까지 별을 찍어 출력하라는 문제다.

2438번은 2439번은

public class Q2438 {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int num = scan.nextInt();

        //입력받은 줄(N)만큼 반복
        for(int i=1;i<=num;i++){
            //매 줄마다 찍을 별의 개수만큼 반복
            for(int j=0;j<i;j++){
            //i=1이면, j=0부터 1미만으로 반복(*), 
            //i=2이면, j=0부터 2미만으로 반복(**)
            //...
                System.out.print("*");
            }
            //다음줄로 넘어가는 줄 변경
            System.out.println("");
        }


    }
}

2438번은 기본적으로 출력이 왼쪽에서부터 찍혀나오는 System.out.print이기 때문에 별의 개수만 맞춰서 for문을 작성해주면 된다.

2439번의 경우에는 출력을 했을때 생기는 공백까지도 직접 출력을 해줘야 한다.

public class Q2439 {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int num = scan.nextInt();
        //입력받은 줄 수 만큼 반복하는 첫번째 for문
        for(int i=1;i<=num;i++){
            //공백찍기
            //두번째 for문은 공백의 개수를 찍어내는 역할
            //공백은 줄이 넘어갈수록 개수가 줄어들어야 한다
            for(int j=num;j>i;j--){
                System.out.print(" ");
            }
            //별찍기
            //공백이 찍힌 후 해당 줄에 찍힐 별
            //별은 줄수에 맞춰 그 개수만큼 찍혀야 한다
            for(int k=0;k<i;k++){
                System.out.print("*");
            }
            //다음줄로 넘어감
            System.out.println();

        }
    }

위를 활용한다면 다양한 별찍기를 시도해볼 수 있다! 거꾸로 줄어드는 별찍기도 출력이 가능해진다.

import java.util.*;

public class StarPrint {
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int num = scan.nextInt();
        //입력받은 줄 수 만큼 반복하는 첫번째 for문
        for(int i=0;i<num;i++){
            //두번째 for문은 공백의 개수를 찍어내는 역할
            //공백은 줄이 넘어갈수록 개수가 줄어들어야 한다
            for(int j=num;j>i;j--){
                System.out.print("*");
            }

            System.out.println();

        }
    }
}

이번엔 if 조건문과 관련한 문제들

백준 1330번

두 수 비교하기

두가지 수를 입력받아 원하는 결과값을 if문에 따라 다르게 출력해준다. 대소비교에 따라 결과값이 달라지도록 한다.

import java.util.Scanner;

public class Main{
    public static void main(String[] args){
        Scanner sc = new Scanner(System.in);

        int a = sc.nextInt();
        int b = sc.nextInt();

        if(a < b){
            System.out.println("<");
        }else if(a > b){
            System.out.println(">");
        }else System.out.println("==");

    }
}

백준 2753번

윤년 판별하기

윤년은 4와 400으로 나눠지면서 100으로는 나눠지지 않는 4자리수의 연도이다. 이를 if 조건문으로 작성해 입력으로 들어오는 4자리 정수의 윤년 여부를 판별해줘야한다.

위의 이미지처럼 조건문을 and와 or 연산자로 전부 하나의 if문 안에 넣어줬더니, 컴파일 에러가 났다. 왜 컴파일 에러가 났나 다시 자세히 살펴보니, leap % 400 = 0이라고 작성하여 에러가 났다. 이럴 경우 등호비교를 하는 것이 아니라 값을 넣어준다는 뜻인데 그 값이 400이라는 정수로 되어있기 때문에 당연히 성립이 될리가 없다. 따라서 leap % 400 == 0으로 바꿔주면 문제없이 통과한다.

또 다른 방법으로 else if를 사용할 경우에는 다음과 같이 작성한다.

import java.util.*;

public class Main{
    public static void main(String[] args){
        Scanner sc = new Scanner(System.in);

        int leap = sc.nextInt();

        if(leap % 4 == 0 && leap % 100 != 0){
            System.out.println(1);
        }else if(leap % 400 == 0){
            System.out.println(1);
        }else {
            System.out.println(0);
        }

    }
}

이럴 경우에도 문제없이 통과된다.

백준 2884번

알람시계

문제가 길지만 요약하자면 Hour와 Minute을 입력받아 45분 전 값을 출력하는 문제이다.

이 문제를 풀때는 어떤 규칙이 있는지를 생각해보고 edge case를 생각해 if문으로 따로 조건을 걸어주었다.

1)첫번째로는 minute과 관련해 어떻게 변하는지를 따진다.

45분 이상으로 숫자가 클경우에는 45분전으로 시간을 돌리는게 어렵지 않다. 입력받은 Minute의 값에서 45분을 빼주면 되기 때문이다.

하지만 45분보다 작을경우에는 Minute값만 바꿔주어서는 안되고, Hour도 1씩 줄어야 한다. 혹여 2를 빼주는 경우도 생각을 해봤으나 최솟값인 0분에서 45분 전으로 돌린다하면 (hour-1)시 (15)분이기 때문에 -1만 해주면 된다.

0시의 경우 -1을 했을 때 -1이 아닌 23시로 변하는 것까지 조건문안에서 반영해줘야 한다.

이러한 조건을 모두 생각하고 if문을 작성한다면 다음과 같다.

/* 백준알고리즘 2884번 문제
시간과 분을 45분 전으로 설정하여 출력하기
*/
import java.util.*;

public class Main{
    public static void main(String[] args){
        Scanner scan = new Scanner(System.in);

        int hour = scan.nextInt();
        int minute = scan.nextInt();

        //minute이 45분보다 작은경우, hour에 변화가 생김
        if(minute < 45){
            //시간이 1~23일때
            if(hour != 0){
                //시간이 -1 줄어든다
                hour--;
                //60분 중에서 (45 - minute)분한 시간을 빼준다
                minute = 60 - (45 - minute);
                //옳은 출력방식
                System.out.println(hour+" "+minute);
            }
            //시간이 0일때
            else if(hour == 0){
                //23시로 바꿔줘야한다
                hour = 23;
                minute = 60 - (45 - minute);
                System.out.println(hour+" "+minute);
            }
        }else{//minute이 45분보다 클때, hour는 그대로
            minute = minute - 45;
            System.out.println(hour+" "+minute);
        }
    }
}

+) 참고로 처음 시도했을 때는 컴파일 에러가 났었다. 이유는 출력하는 문장을 잘못썼기 때문에. 오랜만에 java로 연습하니 자꾸 기본적인 문장에서 틀린다.

처음 내가 작성한 출력문은 System.out.println("%d %d", hour, minute); 문자열로써 출력하는 문장이었다. 하지만 문제에서 원하는 출력값은 정수 그대로 출력하는 것이었기 때문에 컴파일 에러가 난거 같다.

따라서 여러 시행착오를 거쳐 (System.out.println(hour, minute);를 해보기도...) 출력해야하는 값에 맞는 형식으로 System.out.println(hour+" "+minute); 출력해준다.

++) 제대로 풀었다고 생각했는데 자꾸 정답이 틀렸다고 나왔음. 왜그런가 싶어서 계속 보는데...

처음 썼던 코드 👎

if(minute < 45){
            //시간이 1~23일때
            if(hour != 0){
                //시간이 -1 줄어든다
                hour = hour - 1;
                //60분 중에서 (45 - minute)분한 시간을 빼준다
                minute = 60 - (45 - minute);
                //옳은 출력방식
                System.out.println(hour+" "+minute);
            }
            //시간이 0일때
            if(hour == 0){
                //23시로 바꿔줘야한다
                hour = 23;
                minute = 60 - (45 - minute);
                System.out.println(hour+" "+minute);
            }

hour를 나누는 조건문 if에서 if-else if문이 아니라 if-if문으로 작성을 하여 문제가 생기는 것이었다. 예를들면, hour가 1이고 minute이 30일 때, 첫번째 조건문 if(minute < 45)를 만족하여 조건문 안으로 들어온다. hour가 1이니까 그 다음 조건문 if(hour !=0)를 통과하여 hour = hour - 1; 문장을 수행한다. 그러면 hour는 0으로 값이 변하는데 여기서!!!문제가 발생한다. hour는 0으로 값이 변한 상태인데 if(hour != 0)문을 빠져나오면 그 다음 if(hour == 0)문을 만나게 된다. 그러면 의도와 다르게 if 조건문 안으로 들어가버린다.

이렇게 변수를 내가 수정하는 경우에는 해당하는 if 조건문에 잘 들어와있는지, 다른 조건문으로 들어가지는 않는지 따져봐야한다.

따라서 위의 문제를 해결하려면 else if문으로 작성해줘야한다.

git을 쓰다보면 별거 아닌거 같은데 오류가 자주 발생하여 매번 검색해야하는 경우가 많다.

최근에 git이 주 브랜치를 master가 아니라 main으로 설정해두어서 습관처럼 git push origin master로 명령어를 써서 commit을 해버리면 내가 원하지 않는 master 브랜치가 새로 생겨버린다.

그래서 git push origin main으로 commit을 하려 했더니,

Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.

이러한 오류가 떴다. 자세히 보니 원격 저장소에서 변경사항이 생겼는데 그걸 pull해준 다음에 다시 push하라는 말이었다. 알고보니 github 페이지에서 직접 readme파일을 수정하고 저장했는데 pull을 해주지 않아서 그런거였다.

그래서 git pull을 해줬더니 또 오류가 났다.

보니까 명령어를 잘못써준거였다.

다시 제대로 써주자

git pull origin main을 해주면 편집기로 넘어가서 메세지를 작성해주고 빠져나오면 된다. 편집기에서 작성할때는 i를 입력하면 원하는 메세지를 입력할 수 있다. 다 입력했으면 esc누르고 :wq (write & quit)으로 빠져나온다. 이제 정상적으로 변경된 README.md 파일이 main branch에 merge된 것을 볼 수 있다.

이제 드디어~ 원래 하려고 했던 git push origin main을 정상적으로 수행할 수 있다. (물론 git commit까지 완료한 후)

성공적으로 main 브랜치에 push 된 것을 확인할 수 있다.

가입해서 인스턴스 생성까지 참고했던 링크 단계별로 아마존에서 인스턴스를 생성하는데까지 자세하게 나와있어서 참고하여 만들면 된다.

아마존 인스턴스 생성하는 법 https://velog.io/@hotoron/AWS-%EB%AC%B4%EB%A3%8C%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9A%A9%EB%B2%95-%ED%94%84%EB%A6%AC%ED%8B%B0%EC%96%B4

참고로 나는 인스턴스 생성시 서버를 ubuntu로 설정하고 생성했다. 그래서 서버 만드는데 정보찾기가 조금 어려웠다. amazon linux로 하면 정보가 더 많으니 그걸 참고해도 좋을 것 같다.

인스턴스 생성 후 탄력적 IP 연결까지 하고 서버에 접속하기

내가 만든 서버에 접속하기 위해서는 처음 인스턴스 생성시 받은 pem키가 필요하다. 터미널에서 ssh 폴더에 접속이 안되어도 좌절하지 말자. 수많은 터미널 접속 오류가 떴지만 결국 대체 방안은 있다! Mac인 경우 finder 켜서 User/username(본인의 컴퓨터 이름) 경로에 들어가서 cmd + shift + . 이렇게 입력하면 숨겨진 폴더가 보이는데 다운로드 받은 pem 키를 User/username(본인의 컴퓨터 이름)/.ssh 폴더에 옮겨 넣어주면 된다.

만약 다운로드 폴더에 pem키가 그대로 있다면 보안을 위해 pem키는 따로 usb에 보관해두도록 하자. 만약 키를 잃어버린다면 꽤 복잡한 절차를 거쳐야한다고 하니..

우분투 서버 접속하기 https://soobarkbar.tistory.com/223

pem key의 권한을 변경해주기 위해 다음과 같은 명령어를 터미널에 작성해준다. $ chmod 600 ~/.ssh/pemKeyName.pem 권한 변경 후 다음과 같은 명령어를 입력해 서버에 접속하게 한다. ubuntu 인스턴스이기 때문에 유저이름을 ubuntu로 적어줘야한다.(아래에 서버 접속시 오류났던 부분 정리 참고!)

$ ssh -i ~/.ssh/pemKeyName.pem ubuntu@퍼블릭IP주소(ec~~.ap-northeast-2.compute.amazonaws.com)

다음과 같이 명령어를 입력해주면 내가 생성한 ubuntu 인스턴스에 접속할 수 있게 된다.

간결한 명령어로 서버 접속

저 긴 명령어($ssh -i ~~)를 입력하고 싶지 않다면 ~/.ssh/config 파일을 생성해 vi 편집기로 내용을 추가해주는 방법이 있다. 아래의 방법대로 명령어를 작성해본다면 쉽게 설정 가능하다.

인스턴스 생성시 다운받았을 때 생성된 pem 키를 user/.ssh/ 폴더에 넣어줬다면, 서버 접속하기 방법과 똑같이 pem key의 권한을 바꿔준다 $ chmod 600 ~/.ssh/pemKeyName.pem

권한 변경 후 vi 편집기로 config파일을 생성해 내용을 작성해준다. $ vi ~/.ssh/config 편집기로 들어가면 다음과 같이 내용을 작성해준다. 편집기 작성은 i를 눌러 insert 모드로 바꿔주고 다 작성하면 :wq를 써서 저장 후 빠져나온다.

Host 서비스 명
HostName 퍼블릭 탄력적IP주소
User ubuntu(선택한 인스턴스에 따라 달라짐)
IdentityFile ~/.ssh/pemKeyName.pem

위와 같이 설정했다면 $ ssh ubuntu@serviceName(config에서 Host 서비스명으로 적었던 그 서비스 명)으로 간결하게 서버에 접속이 가능해진다.

서버 접속 시 오류 났던 부분

아무래도 잘 모른채로 서버에 접속하려고 하다보니까 똑같이 따라 썼는데도 계속 오류가 나서 답답했던 경우가 있었다. 숱한 구글링 끝에 발견한 오류의 이유..! 우분투 ami인 경우에는 사용자명이 ubuntu였던 것이다. 어쩐지 분명히 pem.key 경로도 제대로 썼는데 자꾸 permission denied가 떠서 머리를 싸맸는데 생각보다 간단하게 해결 가능한 오류였다.

제대로 사용자명을 바꿔준 후 다시 입력하면 우분투 환경으로 들어가진다.

ubuntu 서버에 접속하고 난 후에는 apache를 설치하고 입력해주면 된다.

Apache 설치

apache 설치하는 법 https://trycatching.tistory.com/46

참고한 링크에 보면 자세하게 apache 업데이트된 버전을 설치할 수 있다.

현재 apache 서버 구동 상태확인 및 서버 시작, 종료에 대한 명령어 관련 링크 apache 설치 및 버전확인 할때 https://tomcabin.tistory.com/8

+) sudo systemctl status apache로 실행할 때 running 상태를 알려주는 페이지가 나왔는데 이게 편집프로그램으로 넘어간줄 모르고 너무도 당황해버렸다. 구글링을 해도 그 페이지에서 어떻게 넘어가는지를 설명안해줘서 별것도 아닌걸로 막히는거 같아서 자괴감 들고 괴로웠지만!! 보다보니 vi 편집기 페이지와 비슷해서 q를 눌렀더니 너무 간단하게 해결. 이러니 검색을 아무리 해도 안나오지..왜냐면 아무도 모를거라고 생각안하니까..하지만 나같은 초보는 이런거 하나까지 알려줘야 기본을 겨우 따라가니까 여기에라도 적어둔다.

apache에서 제공하는 index.html 화면은 다음과 같으며 서버 접속이 성공적으로 됐을 경우 보이는 화면이다.

• 0단계

• 1단계 개별 리소스와의 통신을 준수해야한다. 즉 구체적으로 자원 요청해야한다. 단순히 자원이 있다, 없다만을 판단할 수 있는 요청을 보내기보다는 어느 자리에 내가 원하는 리소스가 정확히 있는지를 물어보는 요청을 할 수 있어야 한다.

• 2단계 CRUD(Create, Read, Update, Delete)를 맞춰 적절한 HTTP 메서드를 사용할 수 있어야 한다.

  멱등성(idempotent) 서버 리소스가 변화되어 같은 작업을 실행해도 다른 결과값이 나올때는 멱등성이 없다고 판단한다. HTTP 메세지 중 POST의 경우, 예약프로그램을 예시로, 사용자가 신청서에 맞게 한번 예약을 한 경우(POST) 같은 사용자가 같은 요청을 또 보냈을 때는 다른 결과가 나오게 된다. 첫번째 예약을 했을 때는 "예약이 완료되었습니다."라는 문구의 결과가 나올 것이고 예약 현황을 가지는 리소스에는 사용자가 요청한 데이터가 쌓이게 될 것이다. 그리고 똑같이 두번째 예약을 진행할 때는 "이미 예약이 되어 있어 더이상 예약이 불가합니다."라는 결과가 나오면서 멱등성이 성립되지 않는다. 원래 서버가 가지고 있던 '예약 현황' 리소스가 변경되었기 때문에 다른 결과값이 나올 수 밖에 없는 상황이 생겼기 때문이다.

API 작성이 어렵다면 다른 API 작성 기준이 어떻게 되는지를 확인해보면 도움이 된다.

호주 정부 API 작성 가이드 https://api.gov.au/standards/national_api_standards/

구글 API 작성 가이드 https://cloud.google.com/apis/design?hl=ko

• 클라이언트-서버 아키텍처 : '2 tier architecture'로도 불리는 클라이언트-서버 아키텍쳐는 실시간으로 이용자에게 정보를 전달하기 위해 필요한 구조로서 리소스와 리소스를 사용하는 앱을 분리한다.
  

• 예시)* 서점에서 책을 구매하려 할 때,

  이용자(클라이언트) ----------- 서점 직원 (서버)
  요청: --------- --(책주문)--> ------------
  응답: --------- <--(책판매)-- ------------
  위와 같이 '책 주문'이라는 클라이언트의 요청이 발생할 때 그에 맞는 응답을 클라이언트에게 보내주는 게 서버의 역할이다.
  만약 '3 tier architecture'일 경우에는 리소스를 따로 저장해두는 데이터베이스가 존재하여 다음과 같은 구조로 통신을 주고 받는다.

  이용자(클라이언트)	-------------	서점 직원 (서버)	------------	데이터베이스
  요청: -----------	---(책주문)--->	-----------	---(책조회)-->	-----------
  응답: -----------	<---(책판매)---	-----------	<---(책정보)--	-----------
  데이터 베이스에는 앱사용에 필요한 리소스들을 따로 저장해둔다. 그렇기 때문에 서버에서 필요한 리소스를 데이터 베이스에서 찾아 클라이언트로 가져다 준다.

• HTTP를 이용한 클라이언트-서버 통신과 API 올바른 통신을 위해서는 '프로토콜'이 필요하다. 프로토콜은 일종의 규약으로 서버와 클라이언트가 주고받는 통신을 가능하게 만든다. 예를 들어 도서관에서 책을 찾을 때 필요한 기본 정보나 입력 양식 등이 정해져 있는 규약으로 가장 기본 양식을 지켜야 하는 것처럼, 서버와 클라이언트 간의 통신에서도 그러한 규약, 규칙이 필요하다. 웹 애플리케이션에서는 통신할 때 http 프로토콜을 사용한다. http 메세지를 주고 받으며 요청과 응답을 처리한다.

• 프로토콜의 종류

  프로토콜 이름	설명	계층
  HTTP	웹에서 HTML, JSON 등의 정보를 주고받는 프로토콜	7) 응용계층
  HTTPS	HTTP에서 보안이 강화된 프로토콜	7) 응용계층
  FTP	파일 전송 프로토콜	7) 응용계층
  SMTP	메일을 전송하기 위한 프로토콜	7) 응용계층
  SSH	CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜	7) 응용계층
  RDP	Windows 계열의 원격 컴퓨터에 접근하기 위한 프로토콜	7) 응용계층
  WebSocket	실시간 통신, Push 등을 지원하는 프로토콜	7) 응용계층
  TCP	HTTP,FTP 통신의 근간이 되는 프로토콜	4) 전송계층
  UDP	양방향 TCP와 다르게 단방향으로 단순하고 삐르지만 신뢰가 낮은 인터넷 프로토콜	4) 전송계층

브라우저의 작동 원리

보이지 않는 곳의 통신

• URL과 URI의 차이를 이해할 수 있다.
• IP 주소와 PORT에 대해 이해할 수 있다.
• DNS와 IP 주소의 관계를 설명할 수 있다.
• 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.

보이는 곳의 통신

• AJAX의 개념을 이해할 수 있다.
• SSR과 CSR의 차이를 이해할 수 있다.
• CORS의 개념을 이해할 수 있다.

HTTP messages의 구조

• HTTP의 동작 방식을 이해할 수 있다.
• HTTP requests와 responses를 구분할 수 있다.
• HTTP의 응답 메시지를 찾아볼 수 있다.

Chrome Network Tab

• Chrome Network Tab 사용 방법을 익히고 사용할 수 있다.
  `curl`로 네트워크 통신을 자세히 보기 위해 터미널에 다음과 같이 입력한다.  요청을 하고 나면 다음과 같은 응답을 받을 수 있다.  응답받은 body를 살펴보면 파일을 읽어오는 순서를 알 수 있는데 실제로 이대로 실행이 되는지는 chrome network tab에서 확인이 가능하다.

chrome network tab을 보면 html 파일을 먼저 읽어오고 그 다음 순서로 css, js 파일을 순차적으로 불러오는 것을 확인할 수 있다. 이처럼 크롬 네트워크 탭에서는 어떤 순서로 파일을 읽어오는지를 확인해볼 수 있다.

Promise

시작과 끝이 명확하지 않기 때문에, 작업 상태를 저장할 클래스를 새로 만들어 담아둔다. 변수를 따로 만들어 이름을 붙이고 만들기 때문에 상태관리에 더 용이하다.

callback으로 작성하면 상태를 명확하게 확인하기 어렵다(return되는 값이 따로 없다 - 함수만 호출함). 따라서 Promise로 추상화하여 간편하게 작성한다.

Promise의 상태 3가지

• pending
• fufilled
• rejected

Promise의 인자에는 'Promise 실행함수'가 온다. 실행함수 안의 첫번째 인자는 resolve함수와 reject함수가 들어간다.

const newPromise = new Promise( //promise 실행함수
  (resolve,reject) => { 
    //어떤 행동을 했을때(fulfilled) -> resolve('성공한 결과값');
    //어떤 행동을 했을 때(rejected) -> reject('실패시 에러객체');
    //아무것도 안하거나 아직 resolve가 호출되지 않은 경우 -> pending 상태
  }
 )

서비스를 잘 제공하기 위해서는 성공했을 때와 실패했을 때 모두를 컨트롤할 수 있어야 한다. 성공과 실패에 따라 해결방법이 달라야 하기 때문에 로직을 분리되어야 한다.

Promise를 사용하기 위해서는 .then을 사용해야 해당 promise값을 사용 가능하다.

const theOtherPromise = newPromise.then(); 
//이렇게 써도 theOtherPromise에는 Promise가 전달된다.
console.log(theOtherPromise + '!') 
//변수로 따로 담았다고 하더라도 내가 원하는 promise안의 값을 사용할 수 없다.

promise.then()을 사용할 경우 원하는 연산을 할 수 있다.

const anotherPromise = newPromise.then((result)=>{    
  //.then()을 사용해야 그 값을 온전히 전달받아 사용할 수 있다
  console.log(result + '!');
  return result+'!'; 
  //promise안의 resolve시 값을 그대로 사용하고 싶으면 return문을 이용해
  //.then()문 안에서 원하는 작업을 실행하여 return 해준다.
    })

하지만 Promise 바깥에 어떤 변수를 만들고 이를 return하고자 한다면 크게 문제는 없을지라도 promise를 쓰는 장점을 살릴 수 없다. 상태 변화에 따라 값이 변하고 다르게 처리하기 위해서 promise를 쓰는데 아래의 코드와 같이 쓸 경우 상태가 반영되지 않는다. callback함수와 크게 다르지 않아 promise.then()이 가져다주는 상태를 반영해주지 않는다.

let temp;
const anotherPromise = newPromise.then((result)=>{    
  //.then()을 사용해야 그 값을 온전히 전달받아 사용할 수 있다
  console.log(result + '!');
  temp = result+'!'; 
  //이렇게 사용할 경우 callback과 다를바가 없어진다
    })

3번 실습문제(basicChaining) - 동기적으로 작용하게끔 만든다. 작업을 끝내야 그 다음 .then()으로 넘어가기 때문에.

만약 arr를 따로 선언해 그 안에 결과값을 담아 return한다면?

let arr = [];
return somePromise(user1path)
.then((user1text)=>{
  //...
      })
.then((user2text)=>{
  arr.push(user1);
  arr.push(user2);
  return arr;
    })

이렇게 arr를 따로 선언해 arr.push를 쓰면 안되는 이유 : arr.push를 쓰면 상태와 상관 없이 무조건 user1과 user2를 arr.push해버린다. 데이터가 적을 때는 순서대로 넣겠지만 그렇지 않을 경우에는 장담할 수 없다. 즉 promise를 사용해 비동기로 사용하게되면 순서가 섞여서 들어올수도 있어서 안정적인가?에 대해서는 장담을 못한다(side effect 주의) .then()을 사용해 첫번째 user1 작업이 실행되고 user2 작업이 실행되도록 상태를 순서대로 조절한다. return을 promise로 돌려주는 이유도 해당 promise를 해결하고 난 다음에 작업을 실행하도록 안정적으로 운영하기 위해서이다.

4번 실습문제(promise.all) - 비동기적으로 작동/ 반복처리는 반복문 사용 처리해야할 연산이 많을 경우에는 비동기적으로 작동하여 처리하는게 속도가 더 빠르다. 배열로 .then()에 넘겨준다면 map() 함수로 처리해줄 수 있다.

5번 실습문제(async-await)

async-await은 비동기로 처리되는 자바스크립트에서 동기적으로 작동하게끔 만든다.

resolve를 다 해서 작업을 받아오기 때문에 동기적으로 사용하는 것과 비슷하다. await을 쓰는건 일부로 동기적인 작업을 하기 위함이다. 따라서 남용해서 작성하지 않도록 동기적 작업이 필요한 경우에만 사용한다. 비동기적으로 사용할 때는 순서가 지켜지지 않고 작업이 이루어지기 때문에 순서를 지켜서 작업을 해야할 때만 이를 사용하도록 한다.

await를 쓰지 않은 문장의 경우에는 await 작업이 다 끝날 때까지 기다리지 않고 비동기적으로 실행이 되기 때문에 실행되는 순서를 조정하기 위해서는 await를 사용해 동기적으로 조절해줘야 한다.

Promise.all

멀티스레드와 같은 작동을 하는 Promise.all은 작업을 더 빠르게 만든다. promise들의 반복문으로 반복적으로 써야할 작업을 한번에 처리가능하게 한다.

문제 > 단계별로 풀어보기 > 입출력과 사칙연산부터 시작!

입출력과 사칙연산

2557번

Hello World! 출력하기

가장 기본이고 코딩의 시작이 아닐까 하는 Hello World! 출력하기 가장 쉬운 문제라고 생각했는데 계속 컴파일 오류나서 당황;;

우선 java 가장 기본적으로 작성해야하는 부분을 작성해주지 않으면 컴파일 에러가 난다.

public class printHelloWorld{
    public static void main(String[] args){
    //내용 작성
    }
}

그것도 모르고 몇번 해보다가 구글 검색으로 결국 해결했다. 반드시 클래스명도 public class Main으로 해줘야한다는 것도 몇번의 컴파일 에러와 검색 끝에 알았다. 어쩐지 문제의 난이도에 비해 정답률이 너무 낮더라니...

그렇게 해서 얻어낸 정답은, 다음과 같다.

(느낌표, 클래스명 등 꼭 필요한건 빼먹지 말고 다 써야한다, 안그러면 계속 컴파일 에러난다ㅠ)

10171번

고양이를 출력하기!

예제 출력에 있는 고양이를 우선 복사 후 System.out.println('')에 한줄씩 붙여 넣는다.

escape character를 어떻게 출력하는지를 묻는 문제로 escape문자를 사용해 예제 출력처럼 온전한 고양이를 출력해야한다.

위의 탈출 시퀀스를 적용하고 나면 예제대로 출력 가능하다.

빈칸이 정확히 예제와 똑같은지 주의하도록 하자. 간단해 보이는 문제도 6번이나 틀렸기 때문에,,ㅎㅎ빈칸하나하나 찍어가면서 고치는 것보다 예제 출력을 한줄씩 그대로 가져오는게 제일 정석이다..

1000번 ~

숫자 입력받고 사칙연산 결과 출력하기

이번 문제는 입력값을 받아 그 값으로 원하는 작업을 수행한 뒤 출력하는 문제다. 지금까지 문제풀이들과 다른점은 사용자로부터 '입력'받아야 한다는 것!

입력받은 값을 사용하려면 우선 입력을 받는데 필요한 java pkg를 import 해준다.

import java.util.* 
//이렇게 쓰면 굳이 입력에 필요한 클래스뿐만 아니라 package내 다른 기능도 포함되어 있다.
import java.util.Scanner
//이럴 경우 입력받을 때 필요한 scanner 클래스만 사용가능하다

import 받은 Scanner 클래스 객체를 생성하여 사용자가 입력한 값을 받아오는 기능을 수행하도록 한다.

Scanner sc = new Scanner(System.in);
//System.in은 화면상에서 들어온 입력을 받음

생성한 클래스 객체로 scanner 객체를 사용한다.

int num1 = sc.nextInt();    //입력받을 값이 int형일 때 nextInt();
int num2 = sc.nextInt();    //그 다음 int 값을 num2에 저장하겠다는 메서드

위 순서대로 작성하고 나면 더하기, 빼기, 곱하기 모두 같은 방식으로 결과를 낼 수 있다. 더하기한 코드는 아래와 같다.

나누기 같은 경우에는 자료형을 double로 해야 나눗셈할 때 소수점자리까지 계산할 수 있다. int일 때는 정수 계산이므로 소수점으로 나눠지는 값을 구하는 나누기에 적절하지 못하다.

괄호를 씌워야지만 연산의 우선순위가 지켜지는 줄 알고 문제에서 나온 그대로 괄호를 쳐서 작성했는데 모듈러 연산(%)이 더하기나 곱셈보다 더 우선순위가 높아 굳이 괄호로 안 묶어도 같은 결과가 나온다. 대신 곱셈과 나눗셈은 우선순위가 같아 주의해야한다. 모듈러의 특징으로 1,2번 식과 3,4번 식은 어떤 입력값을 넣어도 1,2번과 3,4번의 결과값은 서로 같다.

여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의하는 것. 다양한 데이터를 유용하게 사용하기 위해서는 데이터를 분석하고 활용할 수 있어야 한다. 또한 데이터를 사용하려는 목적에 맞게 분류하고 구분지어야 필요한 곳에 적절히 활용 가능하다. 스택,트리,큐 등과 같은 방식으로 데이터를 효율적으로 다루는 자료구조가 사용된다. 많은 자료구조를 익혀둘수록 문제해결에 적합한 해결방안을 찾기 수월해진다.

자료구조가 가지는 특징 자료구조를 사용하기 적합한 상황 자료구조의 작동원리 - 직접 구현 다른 자료구조와의 차이점

Stack

데이터를 순서대로 쌓는 선형(Linear)자료구조로 가장 나중에 들어온 데이터가 가장 먼저 나갈 수 있는(Last In First Out(LIFO)/First In Last Out(FILO)) 방식으로 데이터의 입출력이 한 방향으로만 흐른다.

직접 구현해보기

뒤로가기, 앞으로 가기 동작

수도코드로 표현을 해본다면,

function browser(동작, 시작페이지){
  let 현재페이지, 다음페이지 스택, 이전페이지 스택
  if(새로운 페이지 접속시){
    현재페이지를 이전페이지 스택에 보관,
    새로운 페이지를 현재페이지로 저장
      }
  if(뒤로가기){
    현재페이지를 다음페이지 스택에 보관,
    이전페이지 스택에 있던 페이지를 불러와 현재페이지로 저장
     }
  if(앞으로 가기){
    현재페이지를 이전페이지 스택에 보관,
    다음페이지 스택 중 가장 위에 있던 페이지를 불러와 현재페이지로 저장
     }

}

실제 코드로 구현을 해보게 된다면 다음과 같다.

// actions = [A,-1,C,D,1,1,-1] , start = 'E'
//1은 앞으로 가기, -1은 뒤로 가기, 문자열은 접속한 페이지
function browser(actions, start) {
  let prev = [];    //뒤로가기에 필요한 stack
  let next = [];    //앞으로가기에 필요한 stack
  let prevTop = 0; 
  let nextTop = 0;
  let nowPage = start;

for(let i=0;i<actions.length;i++){
  //새로운 페이지로 접속할 경우 prev 스택에 원래 있던 페이지를 넣고 next 스택을 비웁니다.
  if(typeof(actions[i]) === 'string'){
    prev.push(nowPage);
    prevTop++;
    nowPage = actions[i];
    nextTop = 0;
    next = [];
  }
  // 뒤로 가기 버튼을 누를 경우 원래 있던 페이지를 next 스택에 넣고 
  //prev 스택의 top에 있는 페이지로 이동한 뒤 
  //prev 스택의 값을 pop 
  if(actions[i] === -1 && prevTop > 0){
    next.push(nowPage);
    nextTop++;
    prevTop--;
    nowPage = prev[prevTop];
    prev.pop();
  }
  //앞으로 가기 버튼을 누를 경우 원래 있던 페이지를 prev 스택에 넣고 
  //next 스택의 top에 있는 페이지로 이동한 뒤 
  //next 스택의 값을 pop
  if(actions[i] === 1 && nextTop > 0){
    prev.push(nowPage);
    prevTop++;
    nextTop--;
    nowPage = next[nextTop];
    next.pop();
  }
  //브라우저에서 뒤로 가기, 앞으로 가기 버튼이 비활성화일 경우(클릭이 되지 않을 경우)에는 스택에 push 하지 않음 (prevTop, nextTop이 0보다 작을 경우 스택에서 꺼내올 수 없음)

}
return [prev, nowPage, next]
}

Queue

데이터를 순서대로 쌓고 빼내는 선형(Linear)자료구조로 선입선출(First In First Out(FIFO)) 방식으로 데이터가 입력된 순서대로 처리할 필요가 있을 때 사용된다. 주로 데이터들을 대기시켜야 할 때 queue 사용한다.

Insert - Enqueue Remove - Dequeue Front Rear

+) 원형으로 된 queue

직접 구현해보기

프린터기에서 문서 출력

컴퓨터에서 출력 명령 -> 큐에 하나씩 쌓임 -> 큐에 들어온 문서를 가장 먼저들어온 문서부터 출력