Skip to content
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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions packages/example/src/1week/URL/addQuery/__submit__/minsoo-web.test.ts
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',
)
})
})
65 changes: 65 additions & 0 deletions packages/example/src/1week/URL/addQuery/__submit__/minsoo-web.ts
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 = (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export const splitHashPart = (
export const getHashParts = (

면 어떨까용? split은 Array.split메소드랑 비슷한 네이밍이라 Array를 리턴하는 함수로 오해 받을 수 있을 거 같아요

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 좋네요..! 동의합니다. 반영해볼게요!

Copy link
Member Author

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 반영해봤습니다!!

Copy link

@minsour minsour Aug 5, 2023

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 같은것도 좋아보입니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const { hash, nonHash } = getHashParts("https://naver.com")
const { hash, nonHash } = parseHashParts("https://naver.com")
const { hash, nonHash } = decodeHashParts("https://naver.com")

ㅜㅜ 네이밍만 봐서는 저는 다 좋아보여서,, 챗지피티한테 물어봤는데 이렇게 답해주더라구요

image

파싱은 해시만 뜯어내는 역할이 아니라, 다른 작업도 해줘야 할 것 같고,
디코드는 인코딩된 애를 디코딩해주는 역할도 포함인 것 같아서
지금 제 함수 역할은 단순히 # 뒤의 문자열부터 뜯어내는 역할이라, get이 조금 더 명확한 것 같은데 민수님 의견도 궁금합니다!

Copy link

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도 포함된 걸로 볼 수 있었겠네요. ☺️

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞습니다! 민수님이 짚어주신 부분이 저도 공감되어서 고민해봤는데 get이 지금은 제일 무난해보입니다..! 좋은 의견 감사해요!

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 해쉬가 있다면, 유지해야 함
  • 기존 쿼리가 있다면, 유지해야 함
  • 기존 쿼리와 추가하려는 쿼리의 key가 동일하다면, 기존 쿼리가 대체됨

위와 같은 요구사항이라면 set이라는 이름을 쓰면 어떨까요? 뭔가 set이 더 어울리는 것 같아요
addQuery라면 queryParam을 배열로 사용하는 경우로 오해받을 수도 있을 거 같아보여서요

Suggested change
/**
* 출제자: 예진님 (yejineee)
* URL의 쿼리스트링 관련 유틸 함수를 계산 최대한 이용하여 만들기
*
* - 해쉬가 있다면, 유지해야
* - 기존 쿼리가 있다면, 유지해야
* - 기존 쿼리와 추가하려는 쿼리의 key가 동일하다면, 기존 쿼리가 대체됨
*/
export const addQuery = (
originURL: string,
key: string,
value: string | number,
) => {
/**
* 출제자: 예진님 (yejineee)
* URL의 쿼리스트링 관련 유틸 함수를 계산 최대한 이용하여 만들기
*
* - 해쉬가 있다면, 유지해야
* - 기존 쿼리가 있다면, 유지해야
* - 기존 쿼리와 추가하려는 쿼리의 key가 동일하다면, 기존 쿼리가 대체됨
*/
export const setQuery = (
originURL: string,
key: string,
value: string | number,
) => {

Copy link
Member Author

Choose a reason for hiding this comment

The 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
}