Just Do IT!

정보처리기사 필기를 보고 왔다.원래 우리 과 졸업 요건에 있기는 한데, 나는 토익으로 조건을 채웠기에 사실 별로 쓸 일은 없긴 했다. 그렇지만, 계속되는 취업 준비(...)와 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에는 꼭 생각해..

취업 준비를 하면서, 포토폴리오에 대한 고민이 깊어졌다. 원래 있던 노션 포토폴리오가 있는데, 이력서를 갈아엎고 수정하는 과정에서 방치되었다. 그래서 종종 포토폴리오를 요구하는 회사는 지원하지 못했었는데, next.js 공부도 할 겸 개인 프로젝트로 포토폴리오를 만들어보기로 했다. (tmi, 이렇게 블로그에 적어놓으면 미래의 내가 찔려서라도 만들 것 같았다...) 그래서 잊어버리지 않기 위해 초기 세팅에 대한 글을 적어본다. 1. Next.js 설치하기 npx create-next-app@latest [projectName] react로 프로젝트 세팅할 때와 비슷하지만 다른 명령어이다. projectName은 본인이 원하는 이름으로 작성하면 끝. 2. 이어지는 질문들 대답하기 2-1. Would you ..

문제 설명 원래 프로그래머의 기본 소양은 팔굽혀펴기를 단 한 개도 할 수 없는 것이라고 하지만 인범이는 3대 500을 넘기는 몇 안되는 프로그래머 중 한 명이다. 인범이는 BOJ에서 틀린 제출을 할 때마다 턱걸이를 5회 하는 기적의 운동 루틴을 통해 뇌와 근육을 동시에 단련한다. 근육을 단련할 때 식단이 정말로 중요하다는 것을 아는 인범이는 탄수화물이 많은 밥이나 빵 따위의 아침 식사를 대신해 단백질이 많은 계란찜을 해먹는다. 계란찜을 먹기 위해서는 계란을 깨야 하는데, 인범이는 힘이 너무 넘치는 나머지 부엌의 대리석을 이용해 계란을 깨면 늘 껍데기가 산산조각나 뒷처리가 너무 어렵게 되곤 한다. 어떻게 하면 계란을 조심스럽게 깰 수 있을까 고민하던 인범이에게 유현이는 굉장히 좋은 해결책을 알려주었다. 바..

tailwind CSS란? 맞춤형 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크이다. 공식 홈페이지: https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 모든 HTML 파일, JavaScript 구성 요소 등에서 클래스 이름을 검색하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하여 작동하기 때문에 빠른 코드 작..

인프런에서 nextjs 무료 강의가 있어서 듣고 있다. 프로젝트 생성하고 vscode에서 열어서 파일들을 살펴보고 있는데, 아무것도 안하고 에러가 났다. main.ts 파일을 열어보니, 이러한 에러가 나왔다. 그래서 바로 해결하기 위해 구글링을 했고, 해결할 수 있었다. 문제 원인 OS 별로 줄바꿈을 하는 방식이 다르기 때문에 발생하는 문제이다. 줄바꿈 방식에는 CR, LF, CRLF 방식이 존재한다. CR : Carrige Return / LF : Line Feed(LF)의 약자이다. 줄바꿈할 때 커서를 아랫줄로 이동시켜주는 것이 LF, 왼쪽 끝단으로 이동시켜 주는 것이 CR이다. Linux 기반의 OS는 LF를 default로 사용하고, Window OS에서는 CR, 그리고 CRLF를 default ..

완전 탐색이란? 브루트-포스 알고리즘이라고 불리는데, 그냥 모든 경우를 탐색해보는 알고리즘이다. 정말 하나부터 열까지 모든 경우를 탐색하기 때문에 정확성 100%지만, 속도는 느리다는 단점이 있다. 그래서 데이터가 매우 적을 때만 사용 가능하다. 완전 탐색을 활용하는 방법 반복/조건문 활용 순열(Permutation) : n개의 원소 중 r개의 원소를 중복 허용 없이 나열 재귀 호출 BFS, DFS 활용 비트마스크 : 2진수 표현 기법 활용 완전 탐색 활용 - 단순 반복/조건문 활용 단순하게 모든 방법을 찾는 방법 (예) 자물쇠 암호를 찾는 경우 (모든 경우의 수 계산) 완전 탐색 활용 - 순열 순열은 임의의 수열이 있을 때, 그것을 다른 순서로 연산하는 방법이다. (순서가 중요) 같은 데이터지만, 그 ..