Just Do IT!

작년 8월 쯤부터, 올해 6월까지 근 1년 가까이 진행했던 사이드 프로젝트가 끝내 미완성으로 마무리되었다.각자의 사정이 있고 나의 사정도 있었기에 좋게 마무리 지었지만, 그래도 너무 아쉬워서 프로젝트 회고글을 써보려고 한다.       Quiz Up 프로젝트의 시작 시작은 한 사이드 프로젝트 모집글이었다.캠퍼스픽에서 모집글을 보고 마침 아무것도 안하고 있던 나는 냅다 댓글을 남겼다. 그렇게 총 1명의 디자이너, 2명의 프론트엔드 개발자, 2명의 백엔드 개발자가 모였다.첫 회의날 백엔드 개발자 한 분이 나가시면서 4명이 되었지만 기획은 쭉쭉 잘 진행되어갔다.각자 하고 싶은 프로젝트를 이야기하고 투표를 통해 정해진게 바로 'Quiz up'이었다. CS면접을 준비하는데 어려움을 겪는 개발자 취준생들을 위한 프..

사이드 프로젝트 중, 주소 찾기를 구현해야 해서 찾아보니까 카카오 우편번호 서비스 API가 있었다. https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 위의 사이트로 들어가보면 자세하게 guide가 나와있다.직접 API를 연동하는 대신, react-daum-postcode라는 라이브러리를 이용해서 편하게 구현했다.https://www.npmjs.com/package/react-daum-postcode react-daum-postcodeDaum Postcode s..

카카오 주소 찾기 api를 사용해서 주소찾기 form을 만드는데, 이런 오류가 났다. 콘솔에 제대로 data가 들어오는게 찍히는데, 문제는 removechild가 되지 않는다는 것이었다.해결방법은 의외로 쉬웠다.     오류난 코드 {isOpen && ( )} 이렇게 버튼을 클릭한 경우에만 DaumPostcode가 실행되도록 해주었는데 계속 오류가 났다.     해결한 코드 {isOpen && ( )} 이렇게 div로 DaumPostcode를 감싸주니 간단하게 해결되었다.       참고한 글들https://velog.io/@hamham/%EC%B9%B4%EC%B9%B4%EC%98%A4-API-%EC%A3%BC%EC%86%8C-%EC..

작년에 내일배움캠프를 수료하고 꽤나 많은 일들이 있었다.우선 가장 큰 일은, 내가 개발자라는 직업을 본격적으로 준비하게 되었다는 점. 42서울 라피신 과정을 진행할 때까지만 해도 개발자는 나에게 가깝고도 먼 이야기였다.복수전공을 하면서 언젠간 '개발'을 업으로 삼겠구나, 하는 생각은 있었지만 전혀 준비를 하지 않았기 때문이다.그래서 전공자들보다 조금 뒤늦게 개발 공부를 시작하고 그 계기가 내일배움캠프가 되었다. https://daydream-sy.tistory.com/288 2023년 회고나는 2023년을 잘 보냈을까? 어느덧 2024년이 된 지 벌써 4일이나 지났다. 원래 회고는 마지막날 하는 거라지만, 블로그에서는 조금 늦었다. 2023년은 바쁘기도 했고 느긋하기도 했던 해였던 것 같다daydream..

프로젝트를 하던 와중에, 이런 에러가 발생했다. 구글링해보니 useEffect 관련 오류라서 오류 해결한 걸 남겨보려고 한다.  useState() 는 비동기로 상태값을 변경하기 때문에 렌더링 시점에서 상태가 개발자의 의도대로 업데이트 되지 않은 상태일 수도 있다. 그래서 나는 useEffect를 이용해 특정 값이 바뀔때마다 무적권 해당 콜백함수가 실행되도록 하게 했는데, 그렇게 하다보니 저 에러가 발생한 것이었다. 무한 루프의 warning... 이걸 해결하는 방법은 두 가지가 있다. 1. useEffect 안으로 해당 무한 렌더링 되는 함수를 아예 집어 넣기2. useCallback 함수를 이용해서 특정 값이 변화하지 않을 때는 이전 값을 재활용해서 쓰도록 하기  이 두 가지가 있는데, 나는 첫 번째..

정보처리기사 필기를 보고 왔다.원래 우리 과 졸업 요건에 있기는 한데, 나는 토익으로 조건을 채웠기에 사실 별로 쓸 일은 없긴 했다. 그렇지만, 계속되는 취업 준비(...)와 CS 지식 까먹음 이슈로 인해뭐라도 하자 싶어서 필기를 준비하게 되었다. 접수는 한 달 전에 했지만 공부한 건...일주일....ㅋㅋㅋ이었다.가채점 결과 합격이긴 했지만, 결과가 나오면 글을 좀 수정하는 걸로 하고 내가 공부했던 방법을 기록하려 한다. +)무난히 합격했다!        1. 유튜브 강의 보기 이전에 정처기 하려고 샀던 수제비 책이 있지만 너무 길기 때문에 보지 않았다(?)대신에, 유튜브에 있는 요약 강의를 봤는데 그게 정말 도움이 많이 되었다. https://www.youtube.com/watch?v=JhKOsZuMD..

요즘 next.js로 정적 블로그 만들기 관련 글들을 살펴보다가 공통적으로 나오는 contentlayer에 대해 알게 되었다. next.js 13버전에서 사용했던 것 같은데, next.js14에서도 적용할 수가 있었다. 아직 블로그 글을 작성하지 않아서 모르는데, 추후에 확실히 적용되는지 볼 예정이다. 우선, Next.js의 getStaticPaths 함수에 대해 알아야 한다. getStaticPaths? 정적 생성(static generation)을 위한 경로를 동적으로 설정하는 메서드이다. 이 함수는 next.js 에서 동적 경로를 사용하는 페이지에 사용된다. getStaticPaths 함수는 비동기 함수로 작성이 되고, 경로 데이터를 동적으로 생성하는 로직을 구현해야 한다. 이 함수의 반환 값은 객..

nextjs 공부 겸 알고리즘 전용 블로그를 만들어보고자 프로젝트를 하고 있는데, link 코드를 작성하다가 오류가 나서 기록해본다. import Link from "next/link"; import navlinks from "../data/navlinks"; const Nav = () => { return ( {navlinks.map((nav) => ( {nav.title} ))} ); }; export default Nav; 위의 코드가 그 코드인데, npm run dev를 하고 연 순간 오류가 발생했다. 이런 오류였는데, 처음에는 뭐가 뭔지 몰라 당황했는데 직역해보니 간단했다. a태그를 지우거나 Link에 legacyBehavior를 넣어주라는 것이었다. 그래서 공식 문서를 조금 찾아보니, next..

문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호 성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 각 질문은 1가지 지표로 성..

사이드 프로젝트에서 tooltip에 대해 알게 되었다.뭐인지 알고 있기는 했지만 실제로 구현해본 적이 없기도 하고 css로만 구현하는 것 같아서 뭔가 헷갈리기도 했다.아무튼 나는 나중으로 미루고(?) 있었는데 메인 페이지 UI 구현하면서 실제로 구현해봤다.물론 다른 프론트엔드 개발자 분이 구현하신 tooltip 파일을 보고 만든 것이다. 그런데 여러 페이지마다 쓰이고 있어서 모든 폴더마다 새로 만들게 아니라 custom hook으로 만들어 쓰는게 더 효율적일 것 같아서 다른 분의 코드를 토대로 구현했다.          tooltip이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다.       useTooltip 코드 tooltip에는 꼭 생각해..