전체 글

프론트엔드 개발, 컴퓨터공학 전공 공부를 기록하고 있습니다😉
·경험들
개요2025년 3월 20일 목요일 15시. 역사적인 순간이었다. 내 인생 첫 기술 면접이었고.. 내 인생에서 최고로 망한 면접이었다. 히히히힣히히히히히히힛! 어제 면접을 보는 동안도, 집에 돌아오는 동안 내내 너무 부끄러웠고.. 면접 끝나고 엄마한테 전화해서 고라니처럼 구어어엉 댔더니 엄마가 괜찮다고 정 안 되겠으면 같이 감자튀김집이나 차리자고 했다. (아마 내가 요리를 못해서 다른 거 아니고 감자튀김인 듯) 제법 도움이 되는 위로였다. 그리고 나의 인생 첫 실전면접을 응원해 주던 주변인들에게 이야기를 하니 다들 한 번씩 유감을 표하며 면까몰(면접은 까보기 전까지는 모른다)이라고 위로해 줬다. 사실 이건 마음만 고맙고 도움은 안 됐다. 나는 대답을 너무 못 해서 떨어졌을 거라고 확신하기 때문에..ㅋㅋㅋ ..
개요이분 탐색을 학습하면서 다음과 같은 코드를 짰다.function bs(target) { let start = 0; let end = numbers.length - 1; while (start target) { end = mid - 1; } else { start = mid + 1; } } return 0;} 이 코드에서는 while 루프 안에서 let mid = ... 와 같이 mid 변수를 선언하고 있는데, 문득 저렇게 해서는 안 되지 않을까? 하는 생각이 들었다. 저렇게 반복문 안에 변수 선언문이 들어가 있을 때, 어떤 일이 일어날까?let 키워드자바스크립트의 let 키워드는 블록 스코프를 가진다. 이 말인 즉슨, 코드 블록(if, for, while 등) ..
·CS
서론주소창에 www.naver.com을 쳐서 들어가면 아래와 같이 네이버 홈페이지가 보인다.  이 포스팅에서는 주소창에 URL을 쳐서 들어갔을 때 어떤 과정을 통해 해당 사이트가 우리에게 보이는 것인지 알아보려고 한다.결론부터 말하자면 이 과정은 아주 간단하다. 네이버의 웹서버에 너네 홈페이지 띄우고 싶은데 필요한 재료 좀 보내줘~ 하면 네이버 웹서버가 OK 하고 홈페이지를 띄우는 데에 필요한 재료를 보내 준다. 그러면 이 재료를 브라우저가 열심히 조리해서 띄워준다. 그러면 우리는 이제 네이버 웹사이트를 볼 수 있게 되는 것이다. 그럼 먼저, 네이버의 웹서버에 요청을 하는 과정을 알아보자.1. DNS 서버로 IP 주소 알아내기네이버의 웹 서버에 너네 홈페이지 재료 줘~! 하고 요청을 보내는 것이 바로 H..
·Web
개요남에게 폐 끼치는 게 정말 싫다. 하지만 살다 보면 그럴 일이 참 많은데, 내가 지금부터 작성할 실수(?) 또한 그런 일이었다.바로바로 서버에 초당 10,000건의 API 요청을 보내서 서버를 터뜨려버리기!많은 실수들이 중첩되어서 생긴 문제였지만, 이번 포스팅에서는 useEffect 실수 부분만을 살펴보며 React의 useEffect란 무엇이며 어떨 때 호출되는지에 대해 알아보자.* 참고로 해당 글은 독자가 useEffect를 아주 간단하게는 알고 있다는 전제 하에 작성되었다.상황Socket.IO를 이용해 실시간으로 둘 중 하나의 옵션을 골라 베팅할 수 있는 실시간 베팅 서비스를 구현하며 생긴 일이다. 컴포넌트가 쉴새없이 리렌더링 된다. 하지만 해당 페이지에서 useEffect를 사용해 Socket..
·경험들
2024년, 올 하반기를 함께한 부스트캠프가 지난 주 수료식을 마지막으로 끝났다.마냥 후련하고 속 시원할 줄 알았는데 정이 많이 들었는지 슬픈 마음이 더 큰 것 같고.. 일주일간 공허했다. 아침에 일어나서 출석체크를 하고 데일리 스크럼을 해야할 것 같은데? 이제 늦잠을 자도 아무 상관이 없다는 게 마냥 기쁘지 않았다. 반년간 매일 붙어있던 연인과 헤어진다면 이런 느낌이지 않을까 싶다. ㅋㅋ하지만 일주일이 지난 지금은 슬퍼하지 않고 잘 보내주고(?) 멋진 시작을 해보고 싶은 마음이 생겼다. 하지만 난 구질구질하니까 곱게 떠나보내줄 순 없어. 잔뜩 추억하고 보내줄 거다. 그래서 이 글을 쓰게 되었다. 네부캠에서 배운 것을 한 단어로 축약하자면 '나'라고 표현하고 싶다. 네부캠은 단순히 내 개발 실력을 향상시..
·Git
들어가며Github에서는 커밋 메세지에 이슈 번호를 언급하면 해당 커밋이 이슈와 자동으로 링크 된다.하지만 매번 커밋 메세지 뒤에 이슈 번호를 추가하는 것은 번거롭고 실수가 발생할 수도 있다. 일단 나부터가 프로젝트를 시작하고 단 두 번째 커밋에 이슈 번호를 링크하지 않아 아래와 같이 불편한 그림이 생겼다. (심지어 띄어쓰기 간격도 틀렸다.)직전에 커밋 메세지에 이슈 번호를 적어두어야지! 하고 야심차게 다짐 했어도 돌아서면 바로 까먹게 되는 게 보통의 사람 아닐까? 나만 그런 거라면 상당히 유감이지만 다행히도 나같은 사람이 많은지 이런 과정을 자동화 할 수 있는 방법이 몇 가지 있다. 알아보자.브랜치 생성 규칙내가 지금부터 소개할 방법은 브랜치명에 이슈 번호가 기재되어 있다는 전제 하에 적용 가능하다. ..
·경험들
벌써 3주차라니시간이 정말 빠르다. 이제 챌린지가 1주일밖에 남지 않았다니.이제야 막 적응이 되어서 하루하루가 힘들지 않고 즐겁던 참인데 너무 섭섭하다..하지만 아쉬움보다는 챌린지를 곧 떠나보낸다는 사실에 대한 섭섭함이 더 큰 걸 보면, 내가 챌린지에 진심으로 잘 임해왔구나 하는 게 느껴져서 한편으로는 기쁘기도 하다. 이번주에는 특히나 달라진 것도, 얻어가는 것도 많았기에 하나하나 정리해보려고 한다.크게 달라진 내 학습 정리지난주까지의 학습 정리지난주까지의 내 학습 정리는 이랬다.학습 내용, 과제 해결 과정, 해결 중에 새로 알게된 점, 학습 메모 정도로 내용을 구성했다.그런데 이렇게 써두고 다시 안 보게 되는 문제가 있었다. 긴 줄글이 한 페이지에 줄줄줄줄 있으니 들여다보기가 왠지 부담스러웠고, 학습 ..
들어가기 전에객체 리터럴에 의한 객체 생성 방식객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 그도 그럴게 매우 직관적이고 간편하다. 아래의 코드를 보자.const person1 = { name: 'jeong', introduce() { return 'hi, my name is jeong' }}이걸 보고 person1 이 이름이 jeong이고 자기를 소개할 수 있다는 것을 모른다? 그것은 코드 실력과 무관한 문해력의 영역이 아닐까 싶다.하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 수작업으로 아래와 같은 개고생을 해줘야한다.const person1 =..