롱롱의 일기장
0%

작성일 Edited on Disqus:

😱 문제발생

오늘 배운 내용을 간단히 정리하며 TIL을 작성하고 Github에 push하려고 하는데 다음과 같은 오류가 발생했다.

Git Error

갑자기 이게 무슨 오류지? 혹시 내가 원격 저장소에서 무슨 작업을 했었나? 생각하며 git pull을 하고 다시 git push를 해도 실패.. 이외에도 여러가지 방법으로 해결을 시도했지만 전부 실패했다.

😊 문제해결

다시한번 log를 살펴보다가 remote: fatal error in commit_refs를 발견하고 구글링을 해보았더니…

Github의 서버오류로 정상적으로 작동하지 않았던것!

생각보다 너무 허무했지만 앞으로는 같은 문제를 겪어도 당황하지 않을 수 있을것 같다.
추가적으로 https://www.githubstatus.com를 통해 GitHub site status를 확인 할 수 있다고 하니 앞으로 참고해야겠다.

참고

작성일 Edited on Disqus:

원티드 프리온보딩 프론트엔드 인턴십

들어가며

원티드 프리온보딩 프론트엔드 인턴십의 2주차가 지나갔다. 저번주도 마찬가지였지만 이번주도 너무 빠르게 지나가 버렸다.

저번주에는 인턴십 기간 동안의 협업 과정에 대한 틀을 만들어야 해서 힘들었다면, 이번 주에는 새로 주어진 과제를 수행하는 것 부터 시작해야 했기 때문에 고민해 볼 부분도 더 많았고 어려웠다.특히 이번 주에는 커리어코칭도 같이 시작되어 이에대한 과제도 추가되어 더 바쁘게 흘러간 것 같다.

이번 주는 개인적으로 아쉬운 점 보다 좋았던 점이 많았던 일주일이였던것 같아 만족스럽다. 그렇다고 해도 아쉬운 점이 없던 것은 아니니 이 부분들에 대해 얘기해보고자 한다.

원티드 프리온보딩 프론트엔드 인턴십 2주차 과제

2023.05.02 - 과제 발표

화요일 5시 React Hook의 심층 활용을 주제로 한 세션이 끝나고 과제의 내용이 발표되었다. 기업과제라 자세한 내용은 서술하기 어렵지만 간단히 정리해 캐싱에 중점을 둔 검색창의 검색어 추천기능 구현을 각자 수행하고, 저번주처럼 팀 별 Best Pratice를 만들고 제출하는 과제였다.

저번주와는 다르게 일단 각자가 과제를 수행하고 그 후에 Best Pratice에 대한 의견을 나누어야 하기에 시간이 너무 촉박할 것 같았다.
시간을 절약하기 위해 일단은 목요일 오전까지 최대한 빠르게 각자 과제를 수행하고, 그 과정에서 중요하게 여겼던 점이나 중요할 것 같은 부분들을 적어 오기로 했다.

2023.05.02 ~ 2023.05.04 - 개인 과제 수행

과제를 수행하면서 가장 중요한 부분이 캐싱이었다. 캐싱이 어떤 것인지는 알고 있었지만 캐싱 기능을 제공하는 라이브러리들을(react-query, apollo-client) 사용만 해보았지, 실제로 캐싱 기능이 어떻게 구현되어 있는지 몰랐기에 먼저 캐싱에 대한 고민을 해보았다.

캐싱을 구현하기 위해서는 fetch해온 data를 저장할 저장소가 필요했고 사용할 수 있는 저장소에는 로컬스토리지, 세션스토리지, 캐시스토리지 등 다양한 저장소가 존재했다. 이름에서부터 캐시스토리지가 가장 적합할 것 같았고, 실제로도 캐싱 기능 구현에 캐시스토리지를 많이 활용한다 하니 캐시스토리지를 사용해야겠다 생각했었다.

그런데 과제의 사용가능한 기술에 필수는 아니지만 Redux가 존재했고, 개인적으로 Redux의 멘탈 모델은 알고있지만 많이 사용해보지 못해 익숙하지 않았고 더욱이 RTK는 사용해본적이 없었기에 Redux를 사용해보며 학습하는 것도 좋겠다라는 생각이 들었다. 또한 아직까지도 Redux를 사용하는 기업이 많기에 Redux 코드에 대한 이해도를 높이는 부수효과를 기대하고 Redux를 사용해보기로 결심했다.

더 자세한 구현사항들은 github를 통해 확인 가능하다.

2023.05.04 - 개인 과제 수행 후 회의

그렇게 각자가 과제를 수행한 후 목요일 낮에 모여 첫 회의를 진행했다.
한 사람 씩 자기가 수행한 과제의 주요 부분들에 대한 설명을 하며 왜 그런 방식을 택했는지, 어떤 방법이 더 좋은 방법인지에 대한 의견을 나누었다. (ex. 캐싱을 위한 저장소로 어떤 것을 사용했는지 - 로컬스토리지, 캐시스토리지 etc.)

그렇게 각 기능들에 대한 Best Practice를 정하고 난 후, 모두가 모여서 코드를 작성하기로 했다. 기능 구현의 난이도는 저번보다 높았지만, 코드의 양 자체는 그렇게 많지 않았기 때문이다. 처음에는 상의된 Best Practice에 가장 가깝게 구현한 사람이 코드를 작성하고 있었는데, 중간에 한 팀원분께서 Live Share를 사용해 보자고 의견을 내주셔서 같이 코드를 작성할 수 있었다.

2023.05.04 ~ 2023.05.05 - 버그 픽스 및 DOCS 작업

같이 모여서 Best Practice대로 코드를 작성하고 난 후, 실제로 결과물이 잘 동작하는지 확인하던 중 오류가 발생했다. 방향키를 이용해 추천 검색어를 오가는 동작에서, 처음 방향키를 눌렀을 때 포커스가 2번 움직였다… 목요일 거의 밤이 다 되어서 발견한 오류였는데, 다들 낮부터 밤까지 너무 오랜 시간을 집중했던지라 쉽게 해결하지 못했고 다음날까지 고민해보기로 했다.

그런데 금요일 새벽 4시경 정도 한 팀원분이 오류의 원인을 찾아 그 해결법을 공유해주셨다. 결론적으로 한글의 Composition이 오류의 원인이였는데 작년에 이미 같은 오류를 겪고 해결했던 적이 있음에도 불구하고 떠올리지 못했다는게 반성해야겠다고 생각했다. 또 한번 기록의 중요성에 대해 느꼈고, 새벽까지 해결하지 못한 문제에 대해 탐구하는 팀원분의 자세를 보고 나도 더 몰입하는 자세를 가져야겠다고 다짐했다.

그 후 금요일 인턴십 세션이 끝난 후 다시 모여 오류 수정에 대한 얘기를 나누고 README.md를 작성하는 시간을 가졌다. 이번에는 많은 팀원분들이 미리 과제를 수행하면서 고민했던 점이나 트러블 슈팅에 관한 부분들을 미리 적어오셔서 더 알찬 README.md를 완성 할 수 있었다.

자세한 내용에 대해서는 README.md에서 살펴 볼 수 있다.

KPT

이번 주 역시 많은 것을 생각해 볼 수 있어 좋았다. 특히 평소 그 원리를 알지 못하고 라이브러리를 이용해 구현하던 캐싱에 대해 자세히 알 수 있었고, 개발자로서 성장하기 위해 어떠한 자세를 가져야 할 지 다시 한 번 생각해 보았던 개인적으로 보람찬 일주일이 된 것 같다.

Keep

  • 이번 주 역시 만족스러운 README.md 및 기록을 남길 수 있었다! 특히 저번주보다 팀원분들이 적극적으로 참여해 주셨는데, 조금 더 친밀해져서 였을까? 남은 기간동안 더 돈독한 사이가 되어 팀명대로 보람찬 3조가 되면 좋겠다.

  • Live Share 기능을 사용해 같이 코드를 작성해보니 시간을 효율적으로 사용 할 수 있었고, 화면 공유보다 더 코드를 잘 이해할 수 있었던 것 같다. 다음 협업에서도 이 기능을 잘 사용해야겠다.

Problem

  • 알고 있던 문제였음에도 스스로 해결하지 못한 점이 너무 아쉽다. 해결했다고 해서 대충 머릿속에 남기는 것이 아니라 꼭 기록을 통해 새겨놔야 겠다고 느꼈다. 기록하는것이 귀찮기는 하지만 내 스스로의 성장에 도움이 되는것이니 만큼 성실히 기록해보자!

Try

  • 더 열심히 하자! - 이번 기업 과제의 경우 멘토님께서 보통 7시간 정도 기한을 주는 과제라고 하셨었는데 과연 내가 7시간안에 합격할 정도의 결과물을 만들어 낼 수 있었을까 생각해보면 아니라고 답할 수 밖에 없을 것 같다. 아직은 많이 부족한 만큼 더 열심히 생각하고 공부해 실력을 늘려봐야지!

작성일 Edited on Disqus:

😂 들어가며

코딩테스트 대비를 위해 프로그래머스의 Lv.2 괄호 회전하기를 푸는 중이었다. 전형적인 스택 자료구조를 이용하는 문제라 비슷한 유형의 문제를 풀어본 경험이 있어서 수월하게 코드를 작성하고 채점을 하는데 TypeError: doubledS.splice is not a function의 오류가 발생했다. string에는 splice 메서드가 없는데 배열과 착각했던 것이다.

그래서 splice를 slice로 바꾸어 주었는데, 이번에는 테스트를 통과하지 못한 문항이 존재했다. 아무리 생각해도 알고리즘 상 틀린 부분이 없는데 왜 그러는거지 생각하다가 자른 문자열을 console.log를 이용해 확인해 보았더니 내가 원하던 형태로 잘리지가 않아 있었다. 내가 원했던 형태는 문자열을 index로 부터 length만큼 자르는거였는데, String.slice()의 2번째 인자는 length가 아니라 indexEnd였기 때문이다.

결국 Array.splice()와 비슷한 기능을 하는 String의 메서드가 뭐였는지 기억이 나지 않아 검색을 통해 내가 원했던 메서드는 String.substr() 임을 알고 수정해 문제를 해결했다.

평소 배열 자료구조만을 거의 활용하다 보니 문자열의 메서드들에 대해서 잊어버린 것 같다. 문자열을 다루는 문제들도 자주 나오는데 또 잊어버리면 안되니 이번 기회에 정리해보자고 결심했다.

나의 괄호 회전하기 풀이 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function solution(s) {
	const pair = {
		'(': ')',
		'[': ']',
		'{': '}',
	};

	const getIsCorrectArray = (string) => {
		const stack = [];
		for (let i = 0; i < string.length; i++) {
			if (stack.length === 0) stack.push(string[i]);
			else if (string[i] === pair[stack[stack.length - 1]]) stack.pop();
			else stack.push(string[i]);
		}
		return stack.length === 0;
	};

	const doubledS = s + s;
	let correctString = 0;
	for (let i = 0; i < s.length; i++) {
		if (getIsCorrectArray(doubledS.splice(i, s.length))) correctString++;
	}

	return correctString;
}

문자열 자르기

자바스크립트에서 문자열을 자르기 위해서는 substr(), substring(), slice() 메서드를 사용하면 된다. 세 가지의 함수 중 상황에 맞는 적절한 함수를 사용하면 되는데 각 메서드에 대해 알아보자.

substr(): 특정 index에서 원하는 길이만큼 잘라서 문자열로 리턴

문법

1
str.substr(start[, length])

매개변수

  • start

    • 추출하고자 하는 문자들의 시작위치입니다. 만약 음수가 주어진다면, 문자열총길이 + start의 값으로 취급합니다. 예를 들면, start에 -3을 설정하면, 자동적으로 문자열총길이 - 3으로 설정하게 됩니다.

  • length

    • 옵션값. 추출할 문자들의 총 숫자.

substring(): 시작 index에서 끝 index전까지 문자열 잘라서 리턴

문법

1
str.substring(indexStart[, indexEnd])

매개변수

  • indexStart

    • 반환문자열의 시작 인덱스

  • indexEnd

    • 옵션. 반환문자열의 마지막 인덱스 (포함하지 않음.)

특징

  • 만약 indexEnd 가 생략된 경우, substring() 문자열의 끝까지 모든 문자를 추출
  • 만약 indexStart 가 indexEnd와 같을 경우, substring() 빈 문자열을 반환
  • 만약 indexStart 가 indexEnd보다 큰 경우, substring() 메서드는 마치 두 개의 인자를 바꾼 듯 작동

slice(): substring과 비슷하지만 살짝 다른 메서드

문법

1
str.slice(beginIndex[, endIndex])

매개변수

  • beginIndex

    • 반환문자열의 시작 인덱스

  • endIndex

    • 옵션. 반환문자열의 마지막 인덱스 (포함하지 않음.)

특징

  • 인자로 음수가 전달되었을 때, substring()은 빈 문자열을 리턴하지만 slice()는 음수 Index를 적용하여 문자열을 잘라줌.

😅 없어질 메서드??

substr() 메서드에 대해 정확히 알아보기 위해 MDN에 검색을 하는 중에 다음과 같은 경고가 달려있었다.

경고: 엄밀히 말해서 String.prototype.substr() 메서드가 더 이상 사용되지 않는, 즉 “웹 표준에서 제거된” 건 아닙니다. 그러나 substr()이 포함된 ECMA-262 표준의 부록 B는 다음과 같이 명시하고 있습니다.> … 본 부록이 포함한 모든 언어 기능과 행동은 하나 이상의 바람직하지 않은 특징을 갖고 있으며 사용처가 없어질 경우 명세에서 제거될 것입니다. …

아니 그러면 length로 자르기 위해서는 어떻게 하라는거지? 생각했는데 str.slice()나 str.substr()의 메서드의 인자를 잘 이해하고 맞추어서 사용해야 하는 것 같다. 그래도 기본적으로 원하는 length만큼 자르기 위해선 str.slice(beginIndex, beginIndex + length)로 하면 될 것 같다.(사실 이번 문제도 이렇게 하면 됐을텐데 시야가 너무 좁았던것 같다. 더 많은 문제를 풀어보면 괜찮아지려나..?)

참고