코테를 3일 연속으로 보는 중...이다....너무..힘들지만.,.연휴 때..쉬면 되니까..버티고 있다..

 

네이버는 토요일 일요일 고르라고 해서 어제 카카오를 봐야해서 일요일로 골랐다.

시간은 카카오 12:30~, 네이버는 10:00~12:00로 겹치지 않았지만 하루에 2개를 보면 힘들까봐...

 

결론을 말하자면 아쉬웠다??라고 해야하나 

왜 항상 아쉬운지 모르겠다 ㅋㅋ.. 사실 테스트를 보고 만족스럽다라는 생각을 한 적이 없는 거 같긴하다..

문제를 다 풀어도 컨벤션이나 그런 것을 걱정하니..

 

근데 문제는!! 문제를 못 풀었다

마지막 문제를 못 풀었다!!!!!!!!!악!!!!!!!!!!!!!

 

일단 너무 방심을 했다. 문제를 다 읽어봤어야하는데, 어제 문제가 쉽게 나왔다고하여, 당연히 쉬울 줄 알고, 코드의 질에 집착했다.

 

함수를 나누고, 변수명을 계속 고민했다.

 

이게 개인 IDE에 복붙이 안되는 시스템이라, 깔끔하게 짜기 더더욱 어려워서 시간을 많이 낭비했다.

 

특히 2번 같은 경우, 메모리 낭비 안하겠다고, 좀 돌아돌아 푼 것 같다.

 

또 함수 하나에 한 역할만 시키겠다고 함수를 분리하느라 정말... 시간을... 쭉쭉 풀면 20분이면 풀거 50분 넘게 걸린 것 같다.. IDE와 Lint의 소중함을 뼈저리게 느꼈다.

 

마지막 문제는 풀다가 내가 만든 알고리즘의 허점을 발견하고, 5분 정도 멘탈이 나갔다..

덕분에 내가 만든 알고리즘도 제대로 구현을 하지 못했다!!! ㅋㅋㅋㅋ 수정해야하나 말아야하나 고민을 하다가..

 

끝나고 지금 복기하는데, 내가 짠 알고리즘으로 하면 안될 것 같다는 느낌이 확실히! 든다!! 반례가 머리 속에서 계속 떠오른다..

 

아 근데 다음부터는 시간은 없고, 내 알고리즘이 틀린걸 알게 되면, 일단 끝까지 짜야할지, 아니면 포기를 하고 짧은 시간이라도 새로운 방향을 모색해야할지 모르겠다... 

 

하...근데 좀 아쉽다... 3번 문제 시간이 있었으면 풀었으려나... 

 

네이버 계열이 클린 코드 지향한다고 해서, 코드 깔끔하게 짠다고 시간 낭비한게 흠인 것 같다.

물론 내가 잘해서 그런 클린 코드가 툭 툭 나올 정도의 실력이었다면, 시간을 허비하지 않았겠지..

 

실력을 더 기르고, 구조를 짜고, 변수 명 예쁘게 짓는 연습 좀 해야겠다.

 

이번에 산 함수형 자바스크립트 책 읽으면서 공부 좀 해봐야겠다.

 

다음에는 빠르게 짜서, 어려운 문제 풀 시간을 벌어야겠다.

 

 

그리고 항상 느끼는 것이지만, 알고리즘 문제 풀 때, 함수형으로 짜면 보기도 편하고, 짜기 꽤 괜찮은 것 같아, 계속 연습해봐야겠다.

 

조금 아쉽긴한데, 어제와 비교하여 난이도가 어려운 편인 것 같으니 2솔까지 구제를 해주기를 빌어야겠다..

 

그리고 3번도 테케 몇 개는 돌아가는 것 같으니...........ㄸㄹㄹ...

 

일단 이제 좀 쉬어야겠다....학교+동아리+부캠+취준...

쉰다고 유튜브를 보거나 게임을 한지도 너무 오래된 것 같다... 확실히 바쁘니까 인생의 우선순위에서 낮은 거부터 정리하는구나 싶다.

 

결과가 어떻게 될지는 이번 달 나 자신 너무 수고 많았고, 연휴동안 재충전해서 남은 올해도 열심히 달려야겠다!!

반응형

한 줄로 요약하자면, 생각보다 어려웠고, 생각보다 쉬웠다.

 

물론 나는 그렇게 잘 보지 못한 것 같다. 생각보다 쉬웠기 때문에...상대적으로 못 봤을 것이라 생각한다.

 

시험은 필기 + 실기 테스트였다.

필기는 15분 정도 진행했고, 실기는 4시간 45분 정도? 진행했다.

15분이라는 정보를 듣고 그렇게 어렵게 나오진 않겠다해서 준비를 안했는데, 다행히 예상대로 어렵게 안나와서 풀 수는 있었다!

 

일단 실기 테스트 복기를 해보자면, 초반에 너무 바보 같은 짓을 했다.

 

API를 가져와야하는데, 나는 node를 사용하면 안되는 줄 알고 JS만으로 처리하려고 했다. 처음에는 https request로 해결하려하다가, POST까지는 되는데, GET에서 계속 안되길래, 관리자 분께 Node 사용 가능한지 여쭈어봤고, 사용 가능하다고 하셔서, 익숙한 npm init을 하고 미션을 그제서야 제대로 시작할 수 있었다...

 

그리고 node 모듈에서 axios를 사용하였는데, axios에 헤더를 사용하는 것은 처음이라, 익숙치 않아 하라는대로 해도 오류가 생기길래, 바로 fetch api로 방향을 변경하여 해결할 수 있었다. 다행히 여기서는 정상 작동했다.

 

여기서 거의 2시간 잡아먹었다...

 

그리고 이 다음도 문제였는데, 서버에 720개 정도의 요청을 동기적으로 보내야했다...하...

처음해보는 것이라, 어떻게할까 고민을 많이했다. 콜백 함수로 재귀적으로 함수를 넣으면 스택이 터질 것 같아서 ( 근데 지금 생각해보면 720개면 안터질거같기도...) then이나 async를 사용하려했는데, then으로 자기 자신과 같은 함수를 호출하는 법이 생각이 나지 않아, async await으로 b라는 인자를 받아, 다시 b라는 인자를 자기 자신의 파라미터로 넣어주는 방식을 사용했다.

 

while(조건문){

b = await 함수(인자들 , b)

}

 

이렇게 해서 해결했지만... 당연히 이건 똥 같은 코드다...진짜 경험의 부족인 것 같다.....이런 경험을 해본 적이 없으니..생각보다 막막했다.

그리고 요즘 슬럼프가 온건지 뭔지 모르겠는데, 구글링을 잘 안하는 것 같다. 구글링도 좀 해야하는데, 막히면 멍하니 혼자서 해결하려고 다양한 시도만 하는 것 같다....학교 다닐 때, 과제를 스스로 해결하려고, 구글링 안하고, 남의 코드 안보는 습관 때문에 그런  것 같다... 그 때는 혼자서 생각해서 다 해결하긴 했는데... 급할 때, 막히면 빠르게 찾아보는 연습도 해야겠다. 

 

그래도 하면서 JS에 대해서 색다른 경험을 하게 되고, 내 부족한 점을 알 수 있었던 좋은 시간이었다.

api 가져올 때, 헤더를 사용하는 것과, axios, http request, fetch 에 대해서 좀 더 구체적으로 공부해봐야겠고, 같은 요청을 동기적 그리고 연속적으로 하는 방법도 공부해봐야겠다.

 

사족이지만, 파이썬으로 하면 api 가져오는 것과, 비동기, 이 모든 문제가 쉽게 해결된다... 시험 끝나고 주변 사람들에게 물어보니, 이런 고민을 안했고, 모두 파이썬으로 코테를 봤다고 한다....ㅠㅠㅠ 어쩐지 작년 재작년 카카오 코테 본 사람 거의 3분의 2가 파이썬으로 진행했다는데, 이유를 알 것 같다... 하 ㅠㅠ 2시간 아낄 수 있었는데... 왜 파이썬 생각을 못했을까... 그래도 JS 경험을 쌓을 수 있었으니 먼 미래에는 더 도움이 되지 않을까 싶다라고 믿어야지ㅠㅠ

 

 

그리고 필기 테스트는 쉽게 나왔는데, 가끔 헷갈리는 개념이 있었고, SQL은 내가 진짜 다 까먹었구나 혹은 모르는구나를 깨닳았다. 백앤드 공부하면서 SQL도 다시 한번 공부해봐야겠다. 

 

그리고 제일 화나는건 respone 400 !!!!!!!! 통신이 성공적이면 200번대지 왜 나는 400번대가 통신이 성공적이라고 생각했을까!!!!! 심지어 문제 풀면서 error 404는 page fault니까 400번대가 오류겠지~~라고 생각하면서 왜 혼자 생각이 너무 깊어져서, 이상한 망상을 하다가 400이 통신 성공시 보내는 http 상태 코드라고 했다ㅠㅜㅡㅎ루ㅠ뤃ㅁ 정말 바보같다.. 300이 리다이렉팅, 200이 성공, 400이 실패!!! 절대 안까먹겠다 진짜!! 이제!!! 헷갈리지도 않고1!!

 

진짜 요즘 힘들어서 컨디션도 최악이고, 나름 슬럼프? 였는데, 그래도 5시간 넘게 집중해서 코테를 본 내 자신이 대견하지만, 너무 많이 아쉽긴하다.. 파이썬으로 풀 껄... 아니 좀 미리 공부해둘껄... 솔직히 미리 공부하는 건 현실적으로 힘들다고 생각하지만, 요즘 JS에 대한 쓸데없는 고집이 있어서, JS로 어떻게든 풀어내겠다!! 이러다가 시간을 날린게 조금 아쉽다!!  하지만 다음에도 JS로 도전할거고, 그때는 코테를 보고 뿌듯하게 잘 풀었네! 나 성장했네 라는 생각을 가질 수 있었으면 좋겠다!!

 

 

반응형

라인 코딩테스트를 운 좋게 통과해서 필기 테스트를 봤다. 

 

시험은 필기 테스트로 진행되었다.

 

필기 테스트는 전공 지식을 많이 물어본다고 하여 예전에 star을 해둔 어떤 분이 정리해 두었던 깃허브 정리글을 한번 보고, 필요한 부분을 좀 더 공부하고 들어갔다.

 

놀라운 것은 다른 기업에 합격한 친구한테 필기 테스트를 어떻게 준비했냐고 물어보니, 내가 star해둔 글을 보고 들어가서 도움을 받았다고 해서 내가 "내가 star을 해둔게 있다고?"하고 후다닥 달려가니 있었다. 

 

어렴풋이 나중에 공부해야지 하고 1-2년 전쯤에 star을 눌러놨는데, 진짜로 보게될 줄은 몰랐다...과거의 나...칭찬해...

 

 

도움이 많이 된 깃허브

github.com/WooVictory/Ready-For-Tech-Interview

 

WooVictory/Ready-For-Tech-Interview

💻 신입 개발자로서 준비를 하기 위해 지식을 정리하는 공간 👨‍💻. Contribute to WooVictory/Ready-For-Tech-Interview development by creating an account on GitHub.

github.com

 

오랫만에 전공 복습하니 기억 새록새록 나면서, 플젝을 몇 번 진행하다보니, 전공 공부가 다 쓸모가 있다는 것을 새삼 느끼게 되었다.

 

하지만 플젝을 먼저 진행하고, 전공 과목 수업을 들었으면, 진짜 빡집중하고, 교수님께 많은 질문 드릴 수 있었을 것이라는 생각이 들었고,

'왜 나는 웹 개발을 늦게 시작했을까'라는 후회도 많이 남았다 ㅠㅠ

 

문제의 구체적인 내용은 규정에 걸릴까봐 못 말하겠고, 범위는 정말 중요한 전공 과목은 다 나왔다.

 

운영체제, 네트워크, 컴퓨터구조, 데이터베이스, 알고리즘, git, 소프트웨어공학, 객체지향 등등...

운영체제하고 네트워크 부분이 많이 나왔고, 수도 코드를 읽고 결과를 예측하는 문제도 나왔다.

 

예상했던 것보다 깊게 물어봤고, 암기보다는 이해를 원하는 것 같았다.

그리고 시간이 너무 부족했...다...

 

읽고 애매모호하다고 느낀 것이 많았고, 코드도 익숙한 문법이 아니라 해석하는데 애를 먹었다.

 

하지만 차분히 풀었으면 다 풀었을 수 있었을 것 같은데, 괜히 말려서,,, 좀 못 풀었다 ㅠㅠ

 

마음을 비우고 풀어야 긴장하지 않고 잘 풀텐데, 뭔가 갑자기 라인을 꼭 가고 싶다는 마음이 생기고, 그러니까 긴장하고 조급해져서 제 실력 발휘를 못한 것 같아서 너무 슬프다... 어제 잠도 못 자고ㅠㅠ

 

그래도 정말 좋은 경험이었다. 오랜만에 시험 전날에 전공 공부하는 기분이었고, 전공 과목들을 복습하면서 다시 많은 것을 배웠다!

특히 네트워크 쪽, 웹 개발하면서 얻은 경험과 결합해서 보니 새롭게 보였다!!! 이래서 CS 지식이 중요하다하는구나 싶더라

 

다음에는 미리미리 네트워크나 운영체제 같이 중요한 과목은 공부를 좀 해놔야겠다.

반응형

오늘 라인 채용 코딩 테스트를 봤다.

 

네이버, 라인 계열은 클린 코드를 중요시한다고 하여, 그나마 클린 코드나 컨벤션을 잘 아는 JS를 모두 이용해서 문제를 풀어봤다.

 

난이도는 적당한 정도였던 것 같다.

 

1,2,3 번 문제는 구현의 난이도가 낮았지만, 알고리즘적으로 생각할 점이 있었는데, 그렇게 어렵진 않아서 함수를 분리하고, 깔끔하게 짜도록 노력했다.

 

하지만 아쉬운 점은 함수형으로 코드를 짰는데, 커링 혹은 합성 함수 쓰는 법, 고차 함수 이용법 (reduce나 map, forEach 같은?)을 좀 더 잘 숙지했다면, 코드를 더 빠르고, 예쁘게 짤 수 있었을 것이라는 후회가 든다. 좀 더 연습해야겠다.

 

4,5,6번은 알고리즘적으로 어렵다기보단 조금 까다로운 구현 문제였다.

 

4번 문제를 풀다가, 예외 사항을 처리하고, 복잡한 구현을 하다가, 중간에 어딘가에서 오류가 나서 포기할까 고민을 많이했는데, 다행히 5분 정도 더 고민하다가 코드를 조금 수정하니 잘 돌아갔다.

어제 같은 경우도 그렇고 평소에 코테를 볼 때, 꼬이면 포기하는 경향이 있었는데, 포기하지말자!!

 

그리고 코드를 함수형으로 분리하고, 컨벤션을 지키고, 주석을 달면서 짜니 확실히 중간에 꼬이거나 오류가 발생하더라도 문제가 잘 풀리는 것 같다.

 

설계를 하고 코드를 깔끔히 짜는 것이 조금 돌아가는 것 같이 보여도, 결국엔 제일 빠른 길이라는 걸 알게 되었다.

 

 

마지막 남은 1시간 동안 5번 문제를 붙잡았는데, 집중력이 떨어지고, 의욕이 떨어지니 빠르게 못 풀어서 중간에 끝나게 되었다. 

기능들을 다 구현하고 테스트하고, 로직에 따라 넣어주기만 하면 되는데 너무 아쉬웠다 ㅠㅠ

 

다음부터는 끝까지 집중해서 빡세게 코딩을 해야겠다.

 

어제 아쉬웠던 점을 보완해서 코테를 봤는데, 어제보다는 좀 더 만족스러웠다.

 

확실히 구현 부분에서 아직 JS는 익숙하지 않아서 좀 더 연습해봐야겠다.

 

그리고 node를 사용해서 테스트 코드를 돌리는 것이 훨씬 빠르고, 관리하기도 쉽다는 것을 알아냈다.

 

그리고 함수형으로 코드를 분리해서 짜면, 함수 하나하나를 테스트할 수 있어서 코드를 짜기에 정말 좋은 것 같다.

 

좀 더 연습하고, 익숙해져서 다음엔 자연스럽고 빠르게 짜서 모든 문제를 풀 수 있도록 노력해봐야겠다!!

 

그리고 어려운 문제를 빠르게 푸는 것도 중요하지만, 쉬운 문제도 빠르게 풀어보자!!!

반응형

성장했음을 느꼈지만, 그와 동시에 아쉬움이 정말 많이 남는 코딩테스트였다....

 

결과부터 말하자면 1,2,4번은 풀었고, 3번은 효율성에서 걸렸다....

 

그리고 5번은 문제는 풀긴 했는데, 테스트케이스 몇 개가 돌아가지 않아, 어디가 잘못 되었는지 찾다가, 5분 전부터 서버 먹통으로 제출이 안되서 결국 제출은 했으나 잘 돌아가는지는 모르겠다... 아마 안 돌아갈 것이라 생각이 든다..

 

좀 더 빨리 풀었으면 풀 수 있었을텐데....

 

이번 코테를 보고 느낀 점은 , 코테 난이도가 쉬워진? 건지는 모르겠는데, 이제는 풀만하다!라는 것이다.

 

알고리즘 문제를 반 년 정도 잘 안 풀었는데, 속도가 너무 느려진 것 같다.

 

내 주언어가 C++에서 JS로 간다는 것을 느낄 수 있었던 코테였다. 문제를 보자마자 JS로 풀 수 있는 방법들이 떠올랐다. 심지어 C++로 문제를 풀 때 "!==" 를 사용해서 에러가 났다 ㅋㅋ;;;;ㅜㅜ

 

하지만 요즘 JS를 주언어로 개발 및 공부를 하고 코딩테스트도 JS로 풀다보니, 원래 풀던 C++이 아닌, JS로 풀기 시작해서, 뭔가 실력이 어중간한 지점에 있는 것 같다. C++은 안쓴지 오래되서 실력이 퇴화되었고, JS는 그렇게 오래쓰지는 않아서 잘 하지는 못하는?? 두 언어에서 필요한 부분만 떼와서 코딩하고 싶다..ㅠㅠ

 

1번,2번,3번은 여유가 있어서 JS로 풀다가, 4번은 시간이 촉박하여 C++로 풀고, 5번은 JS로 풀다가 결국 못 풀었다..

 

3.5솔이긴한데.. 아마 떨어지지 않을까 싶다.. 문제가 전반적으로 쉬웠던 것 같다....

근데 요즘 느끼는 것은 문제가 쉬워지는 걸까, 아니면 내가 잘해지는 걸까?라는 생각이 들기도 하지만, 쉬웠던 것 같다...

 

이번에 많이 느낀 것은, 알고리즘 공부를 많이 쉬어서 그런지 속도가 많이 느려진 것 같다...

 

하지만 느낀 점이 왜 그런지는 모르겠지만, 알고리즘 공부를 안했지만, 오히려 좀 더 문제 요구사항이 잘 보이고, 문제가 잘 풀리는 느낌이다.

예전엔 빠르게 빠르게 코딩하며 문제를 풀었지만, 지식적으로 막히는 부분이 많았다면,

 

지금은 어떻게 풀어야할지는 보인다..

 

하지만 실제 구현에서 많이 막혔다.. 예전엔 잘 했었는데...

 

일단 막힌 부분이 

 

1(3). 이분 탐색 구현... 오랜만에 하니까 너무 헷갈려서 여기서 시간을 많이 잡아먹었다....ㅠㅠ ㅠㅠㅠㅠㅠㅠㅠ 내 아까운 문제...효율성 통과를 못해서 너무 슬프다 ㅠㅠㅠㅠ 진짜 이거 때문에 효율성 테스트 통과를 못한 것이 너무 화가 난다.... 푸는 방식은 맞았건만......아....ㅠㅠㅠㅠ이 부분 너무 아쉬운 것 같다.

 

2(1). 정규 표현식

JS 정규 표현식을 자주 쓰는 연습을 해야겠다. 많이 아쉬운 건 그냥 반복문으로 기호 찾기하면 되는데, 굳이 정규표현식 한번 써보겠다고 정규표현식 공부하느라 30분을 날린 나란 바보...ㅠㅠ 평소에 정규 표현식을 많이 써봤으면 여기서 시간을 많이 단축할 수 있었을 것 같다.

 

3(5). 코드는 말끔하게!

예전에 알고리즘 문제를 풀 때, 의식의 흐름 순으로 그냥 순차적으로 위에서 아래로 코드를 작성했었다.

이렇게 코딩을 하면 확실히 빠르긴 하나, 만약 중간에 막히거나, 잘못된 방향으로 왔을 때 되돌리기가 너무 어려웠다...

그런데 이번에 함수를 분리하며 깔끔하게 짜니, 중간에 막혀도 다시 차근차근 읽어보며 막힌 부분을 해결할 수 있었던 것 같다.

 

마음이 좀 급해도 차분하게 정리하고 깔끔하게 짜는 연습을 해야겠다. 일단 함수로 분리하는 연습이 잘 되어있지 않으니 그런 것 같은데, 연습을 좀 더 해야겠다.

 

4(2). 요구 사항 좀 제발 잘 읽자!!!

문제를 풀 때, 마음이 너무 급해서 코드 먼저 짜느라, 잘못된 방향으로 가고 있다는 것을 알게 되었다...뒤늦게 알게 되어서 다시 짤까, 아니면 그냥 이 위에다가 얹을까? 고민을 하다가 시간을 여기서 또 잡아먹었다 ㅠㅠㅠ 결국 그냥 얹는 방향으로 가긴 했지만, 요구 사항을 잘 읽었으면 더 깔끔한 코드를 작성할 수 있었을 거란 아쉬움이 든다.

 

5. 코드를 좀 더 빠르게 짜는 연습!

 

사실 3번하고 4번하고 모순되는 말이긴한데, 요즘 슬럼프?가 온건지 의욕이 너무 없어서 멍하니 앉아있는 것 같다. 멍하니 앉아서 어떻게 짤까...하는 순간들이 너무 많이 늘었는데, 다시 되돌아가더라도, 빠르게 짜는 연습을 해야겠다.

물론 너무 설계도 안하고 생각도 안해서 이상한 방향으로 가는 것은 문제겠지만, 고민하느라 시간 낭비하는 것보단, 빨리 짜고, 코드가 더럽거나 조금 잘못된 방향으로 갔다면 리팩토링 하는게 더 좋은 방법인 것 같다.

 

고민만 하다가는 아무것도 못하니까!!!!

 

 

반응형

자바스크립트에서는 set을 구조분해할당으로 배열로 바꿀 수 있다.

 

set을 배열로 바꿈으로 쉽게 중복을 제거할 수 있는데,

 

예를 들면

 

let a = new Set([1,2,3,1])

let b = [...a]

 

이렇게 하면, 쉽게 중복(예제에서는 1)이 제거된 배열을 구할 수 있다.

 

하지만 타입스크립트에서는 

 

'Set<any>' 형식이 배열 형식 또는 문자열 형식이 아닙니다.

 

라는 오류가 발생한다.

 

구조분해할당은 원래 배열이나 객체, 문자열을 해체하는 것이기 때문에, set은 해당이 안되는 것 같다.

javascript는 유연하여 set도 구조분해할당해주지만, 엄밀하게 타입을 정하는 typescript에서는 오류를 띄운다.

 

따라서 이 문제를 해결하기 위해서는 

 

Array.from(집합) 을 사용해주면 된다.

위의 예제를 예를 들면

 

let a = new Set([1,2,3,1])

let b = [Array.from(a)]

 

이렇게 해결해주면 된다.

set을 문자열로 형변환을 해주기 때문에 문제가 발생하지 않는다.

 

 

반응형

Error: Could not find a valid build in the '/Users/이름/폴더/폴더이름/.next' directory! Try building your app with 'next build' before starting the server.

 

오류 스크린 샷

next dev나 next start 명령어를 쳤을 때, 실행이 안될 경우 문제 해결 방법이다.

 

문제 해결 방법은 간단하다.

 

next build 명령어를 입력 후, next dev를 하면 된다.

 

어려운 문제는 아니고, 먼저 빌드를 해놓아야 실행가능한다고 한다.

 

사실 오류 창만 잘 읽으면 해결할 문제이다.

 

요즘 프레임워크나 라이브러리는 친절해서 오류 문구만 잘 읽어도 50프로 이상은 잘 해결되는 것 같다.

반응형

웹을 만들다보면, onFocus, onBlur, onClick을 태그에 옵션에 주어 많이 사용한다.

 

이 옵션들을 사용할 때 문제가 발생했는데, 순서의 문제가 발생했다.

 

나 같은 경우, 검색창을 만드는데, 검색창을 클릭, 즉 Focus를 넣었을 때, 추천 검색어가 밑에 주르륵 뜨도록 하고 싶었다.

그리고 검색창에 Focus가 사라졌거나, 추천 검색어를 클릭했을때, 추천 검색어 창이 사라지도록 하고 싶었다.

 

검색창에 Focus가 사라졌을때는, 검색창이라는 input 박스 이외에 다른 곳을 클릭했을때를 말한다.

 

이런 처리는 onBlur을 사용하여 해결할 수 있다.

onFocusOut이라는 옵션도 있지만, 이 옵션은 styled component에서 작동을 하지 않길래 onBlur을 사용했다...나중에 원인을 알아봐야하겠지만..

 

어쨌든 이럴때 문제가 있었다.

onBlur이 onClick보다 먼저 작동하는 것이다.

 

무슨 말이냐면, 추천 검색어를 클릭하려고 하는 순간, 검색창에서 Focus는 사라지고, 추천 검색어 창이 사라져서 클릭이 안되는 것이다!!

 

이 문제를 해결하기 위해, onBlur에 함수에 시간 지연을 넣어서 해결할까, 아니면 boolean 변수를 추가할까 고민을 했는데,

 

더 나은 방법이 있었다.

 

바로  onMouseDown이라는 옵션을 사용하는 것!

 

마우스 클릭을 했을때! 그러니까 마우스 버튼을 눌렀을때 작동하는 옵션인데,

이 옵션은 다행히 onBlur보다 먼저 작동하여 내가 겪는 문제를 해결할 수 있었다.

 

 

반응형

+ Recent posts