신나는 알고리즘 풀이 시간.
두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다.
- 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다.
- index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다.
- skip에 있는 알파벳은 제외하고 건너뜁니다.
예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 규칙대로 바꾸면 "appy"가 되며 결과는 "happy"가 됩니다.
두 문자열 s와 skip, 그리고 자연수 index가 매개변수로 주어질 때 위 규칙대로 s를 변환한 결과를 return하도록 solution 함수를 완성해주세요.
나의 답 / 오답
function solution(s, skip, index) {
let answer = "";
let alphabets = [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z",
];
const skipArray = skip.split("");
for (const skipStr of skipArray) {
let skipIndex = alphabets.findIndex((element) => element === skipStr);
alphabets.splice(skipIndex, 1);
}
const maxLength = alphabets.length;
answer = s
.split("")
.map((element) => {
let stringIndex =
alphabets.findIndex((alphabet) => alphabet === element) + index;
if (stringIndex >= maxLength) stringIndex = stringIndex - maxLength;
return alphabets[stringIndex];
})
.join("");
return answer;
}
몇 개의 케이스는 적중했으나, 몇 개의 케이스는 틀렸다.
살펴본 결과, splice를 통해 첫 알파벳을 필터링해주는 과정에서 뭔가 오류가 생겼던 듯 하다. 또한 maxLength를 처리하는 방식에서 살짝 오류가 있었던 듯 하다.
function solution(s, skip, index) {
let answer = "";
let alphabets = "abcdefghijklmnopqrstuvwxyz".split("");
// skip에 포함된 알파벳 제거
const skipArray = skip.split("");
alphabets = alphabets.filter((char) => !skipArray.includes(char));
const maxLength = alphabets.length;
answer = s
.split("")
.map((char) => {
let currentIndex = alphabets.indexOf(char);
let newIndex = (currentIndex + index) % maxLength; // 초과하는 경우도 처리
return alphabets[newIndex];
})
.join("");
return answer;
}
맞는 정답은 이렇게 쓴다 filter을 통해서 원본 배열을 필터링해주었으며, maxLength를 %를 사용하여 이전보다 깔끔하게 처리해주었다.
개인 과제 트러블 슈팅.
export const getUserProfile = async (token) => {
const response = await authApi.get("/user", {
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(response)
return response.data;
};
해당 요청에서 자꾸 404 에러가 뜨는 문제가 발생함.
원인을 찾기 위해 postman을 이용해서 여러번 시도를 해봤지만, 안 돼서 튜터님을 찾아간 결과, 명세서를 잘못 읽은 것으로... 판명되었다.
get 요청을 했어야하는데, post요청을 계속 보내고 있었어서 되지 않았다.
앞으로는 명세서를 더욱 꼼꼼하게 볼 필요가 있을 듯 하다.
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Login from "../pages/Login";
import Signup from "../pages/Signup";
import Profile from "../pages/Profile";
import Test from "../pages/Test";
import Results from "../pages/Results";
import Layout from "../styles/layout/layout";
import { useSelector } from "react-redux";
const PublicRoute = ({ element }) => {
const isLogin = useSelector((state) => state.isLogin.isLogin);
return isLogin ? <Navigate to="/" /> : element;
};
const PrivateRoute = ({ element }) => {
const isLogin = useSelector((state) => state.isLogin.isLogin);
return isLogin ? element : <Navigate to="/login" />;
};
const Router = () => {
const isLogin = useSelector((state) => state.isLogin.isLogin);
return (
<BrowserRouter>
<Routes>
<Route element={<Layout isLogin={isLogin} />}>
<Route path="/" element={<Home />} />
<Route path="/login" element={<PublicRoute element={<Login />} />} />
<Route
path="/signup"
element={<PublicRoute element={<Signup />} />}
/>
<Route
path="/profile"
element={<PrivateRoute element={<Profile />} />}
/>
<Route path="/test" element={<PrivateRoute element={<Test />} />} />
<Route
path="/result"
element={<PrivateRoute element={<Results />} />}
/>
</Route>
</Routes>
</BrowserRouter>
);
};
export default Router;
라우터 설정 중 public과 private을 나누는 데 조금 애를 먹었었다.
결론적으로 말하자면, 내 실수가 컸다.
홈화면이 제대로 안 뜨는 문제가 계속 발생했는데, 홈화면의 경우, 로그인이 되어있던 안 되어있던 무조건 표시되는 화면이었으므로, 퍼블릭, 프라이빗을 나눠줄 필요가 없었다.
그래서 홈화면을 퍼블릭 아래에 두니 로그인 된 상태로 계속 홈화면이 표시가 안 뜨는 상황이 벌어졌던 것... 그래서 홈화면은 별도의 프로텍트 라우팅을 하지 않고, 보호가 필요한 것들만 따로 나눠주었다.