-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[실습] 연습문제 week1/URL/addQuery 제출합니다 #16
base: main
Are you sure you want to change the base?
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
import { addQuery, replaceKeyValue, splitHashPart } from './minsoo-web' | ||
|
||
describe('splitHashPart', () => { | ||
it('case 1', () => { | ||
expect(splitHashPart('minsoo#foo')).toEqual({ | ||
nonHash: 'minsoo', | ||
hash: '#foo', | ||
}) | ||
}) | ||
|
||
it('case 2', () => { | ||
expect(splitHashPart('http://www.minsoo#foo')).toEqual({ | ||
nonHash: 'http://www.minsoo', | ||
hash: '#foo', | ||
}) | ||
}) | ||
|
||
it('case 3', () => { | ||
expect(splitHashPart('http://www.minsoo')).toEqual({ | ||
nonHash: 'http://www.minsoo', | ||
hash: '', | ||
}) | ||
}) | ||
|
||
it('case 4: 일반적이진 않지만, 의도치 않게 해시가 여러개 들어가있는 경우', () => { | ||
expect(splitHashPart('http://www.minsoo#foo#minsoo')).toEqual({ | ||
nonHash: 'http://www.minsoo', | ||
hash: '#foo#minsoo', | ||
}) | ||
}) | ||
}) | ||
|
||
describe('replaceKeyValue', () => { | ||
it('case 1', () => { | ||
expect(replaceKeyValue('minsoo?key=foo', 'key', 'bar')).toBe( | ||
'minsoo?key=bar', | ||
) | ||
}) | ||
|
||
it('case 2', () => { | ||
expect(replaceKeyValue('minsoo?foo=foo', 'key', 'bar')).toBe( | ||
'minsoo?foo=foo', | ||
) | ||
}) | ||
|
||
it('case 3', () => { | ||
expect(replaceKeyValue('minsoo?key=foo&key=baz', 'key', 'bar')).toBe( | ||
'minsoo?key=bar&key=bar', | ||
) | ||
}) | ||
}) | ||
|
||
describe('addQuery', () => { | ||
test('case 0: URL 형식이 굳이 아니여도 동작', () => { | ||
expect(addQuery('www.linkedin.com/?name=elon#top', 'name', 'musk')).toBe( | ||
'www.linkedin.com/?name=musk#top', | ||
) | ||
}) | ||
|
||
test('case 1', () => { | ||
expect(addQuery('https://www.linkedin.com/', 'key', 'value')).toBe( | ||
'https://www.linkedin.com/?key=value', | ||
) | ||
}) | ||
|
||
test('case 2: 기존 URL에 이미 쿼리가 있는 경우', () => { | ||
expect( | ||
addQuery('https://www.linkedin.com/?name=elon', 'key', 'value'), | ||
).toBe('https://www.linkedin.com/?name=elon&key=value') | ||
}) | ||
|
||
test('case 3: 기존 URL에 hash가 있는 경우', () => { | ||
expect( | ||
addQuery('https://www.linkedin.com/?name=elon#top', 'key', 'value'), | ||
).toBe('https://www.linkedin.com/?name=elon&key=value#top') | ||
}) | ||
|
||
test('case 4: 기존 쿼리와 추가하려는 쿼리의 key가 동일한 경우', () => { | ||
const URL = 'https://www.linkedin.com/?name=elon#top' | ||
|
||
expect(addQuery(URL, 'name', 'musk')).toBe( | ||
'https://www.linkedin.com/?name=musk#top', | ||
) | ||
|
||
expect(addQuery(URL, 'name', 'musk')).toBe( | ||
'https://www.linkedin.com/?name=musk#top', | ||
) | ||
}) | ||
|
||
test('case 5: 기존 쿼리와 추가하려는 쿼리의 key가 동일한 경우', () => { | ||
const URL = 'https://www.linkedin.com/?name=elon&name=minsoo#top' | ||
|
||
expect(addQuery(URL, 'name', 'musk')).toBe( | ||
'https://www.linkedin.com/?name=musk&name=musk#top', | ||
) | ||
|
||
expect(addQuery(URL, 'name', 'musk')).toBe( | ||
'https://www.linkedin.com/?name=musk&name=musk#top', | ||
) | ||
}) | ||
}) |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,65 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const hasIncludes = (url: string, value: string): 'YES' | 'NO' => | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
url.includes(value) ? 'YES' : 'NO' | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const splitHashPart = ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
text: string, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
): { nonHash: string; hash: string } => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const indexOfHash = text.indexOf('#') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (indexOfHash >= 0) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
nonHash: text.slice(0, indexOfHash), | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hash: text.slice(indexOfHash), | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
nonHash: text, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hash: '', | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const replaceKeyValue = ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
url: string, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
key: string, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
newValue: string | number, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const regExp = new RegExp(`${key}=([^&]*)`, 'g') | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (url.match(regExp)) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return url.replace(regExp, `${key}=${newValue}`) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return url | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
/** | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
* 출제자: 예진님 (yejineee) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
* URL의 쿼리스트링 관련 유틸 함수를 계산 을 최대한 이용하여 만들기 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
* | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
* - 해쉬가 있다면, 유지해야 함 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
* - 기존 쿼리가 있다면, 유지해야 함 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
* - 기존 쿼리와 추가하려는 쿼리의 key가 동일하다면, 기존 쿼리가 대체됨 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
*/ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const addQuery = ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
originURL: string, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
key: string, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
value: string | number, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+35
to
+48
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
위와 같은 요구사항이라면 set이라는 이름을 쓰면 어떨까요? 뭔가 set이 더 어울리는 것 같아요
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 오,, 저두 이거 약간 헷갈리는 것 같긴했는데 출제자인 예진님이 함수 이름을 정해주신거라! 예진님 의견도 궁금합니다! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const { nonHash, hash } = splitHashPart(originURL) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
let returnUrl = nonHash | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
let connector = '?' | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (hasIncludes(originURL, '?') === 'YES') { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
connector = '&' | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
returnUrl += `${connector}${key}=${value}` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (hasIncludes(originURL, `?${key}`) === 'YES') { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
returnUrl = replaceKeyValue(nonHash, key, value) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return returnUrl + hash | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
면 어떨까용? split은 Array.split메소드랑 비슷한 네이밍이라 Array를 리턴하는 함수로 오해 받을 수 있을 거 같아요
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오 좋네요..! 동의합니다. 반영해볼게요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
review: change prefix split -> get 반영해봤습니다!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hash 뿐 아니라 nonHash도 같이 return 하고 있어서, get 대신 parse나 decode 같은것도 좋아보입니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ㅜㅜ 네이밍만 봐서는 저는 다 좋아보여서,, 챗지피티한테 물어봤는데 이렇게 답해주더라구요
파싱은 해시만 뜯어내는 역할이 아니라, 다른 작업도 해줘야 할 것 같고,
디코드는 인코딩된 애를 디코딩해주는 역할도 포함인 것 같아서
지금 제 함수 역할은 단순히 # 뒤의 문자열부터 뜯어내는 역할이라, get이 조금 더 명확한 것 같은데 민수님 의견도 궁금합니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아 그러네요 parse나 decode는 hash가 아니라 url이 대상이라 좀 어색해지는군요!
그렇다면 get이 좋아보입니다ㅎㅎ
제가 걸렸던건 { hash: string; nonHash: string; } 이 객체에 hash가 있는데 그 객체 자체를 hash라고 부르니까 헷갈릴까봐서였는데,☺️
지금 다시 보니까 hashParts라고 해서 nonHash도 포함된 걸로 볼 수 있었겠네요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
맞습니다! 민수님이 짚어주신 부분이 저도 공감되어서 고민해봤는데 get이 지금은 제일 무난해보입니다..! 좋은 의견 감사해요!