분류 전체보기97 개인 코드 컨벤션 정리 - CSS 목차 styled-components폴더구조컴포넌트 기반 구조로 각 컴포넌트에 대해 별도의 스타일 파일을 생성한다.src/ components/ Button/ Button.tsx Button.styles.ts Header/ Header.tsx Header.styles.ts 네이밍 컨벤션 파일명CamelCase를 사용한다.`Button.styles.ts` 변수명PascalCase를 사용하여 styled-component를 정의한다.const PrimaryButton = styled.button` /* styles */`; 스타일 정의 순서 : 스타일 속성은 다음 순서대로 작성Positioning: position, top, right, bottom, lef.. 2024. 5. 23. eslint에서 Delete `CR`이 나오는 문제해결(개인기록) VScode에서 Delete 'CR'이 나오는 문제 해결 방법VScode에 AirBnb의 esLint를 적용하던중에 Delete CR이라는 알수없는 에러가 발생했었다.그래서 우리의 친구 GPT한테 물어보니 Window와 Unix/Linux 운영 체제 간의 줄바꿈 방식 차이로 발생하는 문제라고 한다.그래서 여러 삽질을 하면서 해결하였는데 이게 종합적으로쌓이다가 해결된거라 일단 성공했을때의 세팅을 기록해두려고 한다.일단 핵심은 endOfLine을 "auto"로 두는게 핵심이지 않을까 싶다. VSCode 설정 파일('.vscode/settings.json'){ "editor.formatOnSave": true, "editor.tabSize": 2, // 탭 크기를 2로 설정 "editor.insertSp.. 2024. 5. 23. 개인 코드 컨벤션 정리 목차 정리하기에 앞서개발자는 혼자서도 개발을 할 수도있지만 다양한 사람과 협업을 해야할 가능성이 더 높습니다.이 때 아무리 뛰어난 개발자더라도 자신만의 개발로 막 개발을 한다면 나중에 협업을 할때 다른 사람의 러닝커브가 생길 수 도 있고다른 사람과의 협업이 더 힘들어져 개발속도가 늦춰질 수 도있습니다.그래서 코드 컨벤션을 정의함으로써 한사람이 개발을 한 것처럼 그리고 다른사람이 오더라도 많은 자원이 소모하지 않게 끔 하려고 합니다.그렇기에 일단 협업도 좋지만 자기 자신도 일단 규칙을 어느정도 세우는게 중요하다 싶어서 해당 포스팅글을 작성하려고합니다. 자세하진 않더라도 조금씩 규칙을 정하면서 내용을 추가할 예정입니다! 해당 컨벤션은 완벽하지 않고 주관적인 영역과 장단점을 통해 자신만의 방법을 고른 것이므.. 2024. 5. 22. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 2 / 2 > 개인기록 reduxToolKit 사용해보기아래 사진은 src/libs폴더입니다. 이중 예제에 사용하기좋은 counter를 이용해서 redux 를 사용해보려고합니다.counter.actions.ts// baseimport { createAction } from "@reduxjs/toolkit";// defaultexport const COUNTER = "counter";export const COUNTER_SLICE_NAME = `${COUNTER}Slice`;// actionconst INCREMENT = `${COUNTER}/increment`;const DECREMENT = `${COUNTER}/decrement`;const INCREMENT_BY_AMOUNT = `${COUNTER}/incrementByAm.. 2024. 5. 22. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 1 / 2 > 개인기록 목차 상태라이브러리인 redux를 Next.js + TypeScript에서 써보자 진행과정store.ts 생성 src/libs 위치에 store.ts파일을 생성해준다. 그리고 아래 코드처럼 작성을해준다.import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";import { counterReducer } from "./features/counter";import { authReducer } from "./features/auth/slices/auth.slice";export const makeStore = () => { return configureStore({ reducer: { counter.. 2024. 5. 22. [node.js, 백준]9663 - N-Queen 목차 문제링크https://www.acmicpc.net/problem/9663문제N-Queen 문제는 크기가 N × N인 체스판 위에 퀸 N개를 서로 공격할 수 없게 놓는 문제이다.N이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오.입력첫째 줄에 N이 주어진다. (1 ≤ N 출력첫째 줄에 퀸 N개를 서로 공격할 수 없게 놓는 경우의 수를 출력한다. 주저리로직은 이해했으나 시간 초과가 일어나서 최적화하는데 애를먹었고 결국 최적화코드는 답을봐서 한번더 풀어야할 것같다. Queen을 N x N칸에 N개 배치할때 핵심은 한 줄에 하나씩 퀸이 꼭들어가야하는점을 생각해야했다.(경우의 수 줄이기) 그리고 반복문으로 해결하였는데 하나의 퀸을 배치하면 그 공격 대상에 다른 퀸이있는지 체크를 해줘서 .. 2024. 5. 21. [node.js,백준]2580 - 스도쿠 목차 문제링크https://www.acmicpc.net/problem/2580문제스도쿠는 18세기 스위스 수학자가 만든 '라틴 사각형'이랑 퍼즐에서 유래한 것으로 현재 많은 인기를 누리고 있다. 이 게임은 아래 그림과 같이 가로, 세로 각각 9개씩 총 81개의 작은 칸으로 이루어진 정사각형 판 위에서 이뤄지는데, 게임 시작 전 일부 칸에는 1부터 9까지의 숫자 중 하나가 쓰여 있다. 나머지 빈 칸을 채우는 방식은 다음과 같다.각각의 가로줄과 세로줄에는 1부터 9까지의 숫자가 한 번씩만 나타나야 한다.굵은 선으로 구분되어 있는 3x3 정사각형 안에도 1부터 9까지의 숫자가 한 번씩만 나타나야 한다.위의 예의 경우, 첫째 줄에는 1을 제외한 나머지 2부터 9까지의 숫자들이 이미 나타나 있으므로 첫째 줄 빈칸.. 2024. 5. 21. [React] useCallback 이란? 목차 useCallback 이란? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅이다. 코드import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); 매개변수와 반환값 매개변수 fn캐시하려는 함수 값. 어떤 인자도 받을 수 있고 어떤 .. 2024. 5. 20. [React] useMemo란? 목차 useMemo란 무엇인가?useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다. const cachedValue = useMemo(calculateValue, dependencies)컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수calculateValue캐시하려는 값을 계산하는 함수이다. 이때 함수는 순수함수 여야하며, 인자를 받지 않고, 반.. 2024. 5. 20. [node.js,백준]1987 - 알파벳 목차 문제링크https://www.acmicpc.net/problem/1987문제세로 𝑅$R$칸, 가로 𝐶$C$칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1$1$행 1$1$열) 에는 말이 놓여 있다.말은 상하좌우로 인접한 네 칸 중의 한 칸으로 이동할 수 있는데, 새로 이동한 칸에 적혀 있는 알파벳은 지금까지 지나온 모든 칸에 적혀 있는 알파벳과는 달라야 한다. 즉, 같은 알파벳이 적힌 칸을 두 번 지날 수 없다.좌측 상단에서 시작해서, 말이 최대한 몇 칸을 지날 수 있는지를 구하는 프로그램을 작성하시오. 말이 지나는 칸은 좌측 상단의 칸도 포함된다.입력첫째 줄에 𝑅$R$과 𝐶$C$가 빈칸을 사이에 두고 주어진다. (1≤𝑅,𝐶≤.. 2024. 5. 16. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
