재능은 꽃 피우는 것, 센스는 갈고닦는 것
·
Dev/고민
오이카와식 공부법우선 제목을 보고 '오...'라는 생각이 들었다면 오이카와식 공부법이 뭐일지 찾아보지 마세요.웃음이 먼저 나왔다면 그냥 모른척해주세요.재능은 타고난 것일까?보통은 타고난 능력을 재능이라고 하곤 한다.그러면 반대로 재능은 타고났으니 재능이 없는 것 같다고 느껴지면 시작점이 낮은 것일까?그럴 수 있다. 하지만 '시작점이 낮다' 혹은 '성장 속도가 느리다'는 걸로 가능과 불가능을 나눌 수 있을까? 그건 아니다. 물론 투자한 시간과 노력 대비 효율을 따진다면 가성비는 조금 떨어질 수 있다. 그렇지만 재능이 없다고 느낀다해서 그걸 핑계 삼아 합리화 시키는 행동은 좋지 않다고 생각한다.(분야에 따라서, 타고난 정도에 따라서 당연히 재능의 영향이 매우 클 수도 있다는 걸 안다. 하지만 여기서 본인이 ..
[Next.js] 게시물 삭제 기능 구현하기 - 서버에 요청 보내는 방식 (Ajax, query string, URL parameter)
·
프론트엔드/Next.js
게시물 삭제 기능 구현하기4주차에 수정 기능까지 만들어보았으니 이제 삭제 기능을 구현할 차례이다.게시물 리스트에서 각 게시물마다 삭제 버튼을 만들어야 하는데, 그걸 위해 list/page.js 파일을 통째로 클라이언트 컴포넌트로 만들어버리면 효율성이 떨어지기에, 게시물 목록만 우선 따로 분리해서 클라이언트 컴포넌트로 만들어준다.컴포넌트를 분리했으면 ListItem에 DB에서 받아온 데이터를 props로 넘겨준다. 이때, props 전달하는 방법 외에 ListItem 내에서 useEffect를 사용하여 DB의 데이터를 가져오는 방법도 있다. 하지만 useEffect 안의 코드는 html 로드가 완료된 후에 실행되기 때문에 검색엔진 노출에 불리하다는 단점이 있다. 따라서 컴포넌트 구조가 너무 복잡한 경우가 ..
[백준/Python] #2667 : 단지번호붙이기 - 그래프 알고리즘
·
알고리즘/백준 풀이
https://www.acmicpc.net/problem/2667 딱 봤을 때 DFS 혹은 BFS로 풀면 되는 문제인 것을 알 수 있다. 나는 시작점에서 가까운 노드부터 차례대로 그래프의 모든 노드를 탐색하는 BFS를 이용해 풀이하였다.  💡 접근 핵심시작 지점에서부터 상하좌우를 살피며 집이 있으면 방문, 동시에 집의 개수를 센다.연결된 집을 모두 세면 하나의 단지 카운팅이 끝나게 되므로, 다음 집이 있는 위치를 다시 시작점으로 하여 단지 내 집의 수를 센다. 이전에 방문한 단지의 집들은 모두 방문처리가 되어있으므로 그래프를 순회하며 다음 1이 오는 좌표부터 다시 너비우선탐색을 진행하면 된다.그래프 알고리즘의 일반적인 유형에 가까운 만큼 bfs 함수를 작성하는 것은 크게 어렵지 않았으나, 고민이 되었던..
[Next.js] Next.js Server Actions
·
프론트엔드/Next.js
13.4 버전 이상부터는 서버 API 기능을 page.js 안에 클라이언트 컴포넌트와 함께 작성하여 처리할 수 있게 되었다.글을 작성하는 기능을 구현한다고 할 때, 다음과 같이 코드를 작성할 수 있다.import { connectDB } from "@/utils/database";export default async function Write() { async function handleSubmit(formData) { "use server" const db = (await connectDB).db('forum') await db.collection('post_test').insertOne({title: formData.get('title')}) revalidatePath('/wr..
[Next.js] Next.js Middleware / 미들웨어, 어떨 때 사용할까?
·
프론트엔드/Next.js
Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.ㅡ Next.js 공식문서 한마디로 미들웨어란 요청이 들어왔을 때 해당 요청에 대해 응답을 보내기 전 무언가를 수행할 수 있게 해주는 중간자같은 역할을 한다고 볼 수 있다. 애플리케이션의 성능과 보안성, 사용자 경험을 강화하고자 할 때 사용되는데, 일반적으로 다음과 같은 경우에서 효과적으로 쓰인다 :특정 페이지로..
[Next.js] 다크모드 기능 구현하기
·
프론트엔드/Next.js
회원가입, 글 작성하기, 댓글 달기 등등 기본적인 기능들은 이제 다 구현을 해보았으니 다크모드 기능을 한 번 구현해보려 한다. state를 통해 다크모드인지 라이트모드인지를 관리하면 된다는 것은 누구나 쉽게 떠올릴 수 있을 것이다. 리액트 사용자였다면 특히 여기서 자연스럽게 useState를 생각하게 될텐데, useState 사용 시 새로고침 시 상태가 초기화되기 때문에 다크모드의 상태를 관리하기에는 적절하지 않다.상태 데이터를 DB에 저장할 수도 있지만 간단하게 브라우저의 저장공간에 저장해보자. 1. localStorage에 저장하기localStorage.setItem("저장할 이름", "값"); // 저장하기localStorage.getItem("저장할 이름"); // 가져오기localStorage...
해안해
개화