티스토리

안녕하세요

검색하기

블로그 홈

안녕하세요

sakuraop.tistory.com/m

sakuraop 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

[비전공자 SSAFY 11기 면접 대상자 선정] 후 8일까지의 이야기 (SSAFY 면접 준비) 목차 본론으로 들어가기에 앞서 나의 배경 싸피 11기 온라인 모집 설명회 SW 적성진단(사전 테스트) 에세이 제출 면접 대상자 선정 면접 준비를 어떻게 했는지 설명에 앞서 그래서 구체적으로 어떤 준비를 했는가 본격 면접 준비 계획 면접 준비 1일~2일 (면접 전략 설계) 면접 준비 3일~4일 (너 자신을 알라) 면접 준비 5일~6일 (감점 당하지 말아야 한다.) 면접 준비 7일~면접 당일(9일차까지) 면접 당일 TIP. 면접관의 '의도'를 '눈치껏' 파악해야 한다. 어느 회사를 가더라도 보편적으로 질문할 수 있는 필수 질문 목록 마지막으로 제가 준비했던 면접 질문 목록입니다. 제가 준비했던 PT 면접 키워드 목록입니다. 합격 1. 본론으로 들어가기에 앞서 '우연히' 이 글을 읽게 된, (검색 유입이 거의.. 공감수 2 댓글수 2 2023. 12. 21.
프로그래머스 JS 점 찍기 (반지름 d의 원에 k마다 존재하는 좌표 수) 점 찍기 (*) 문제 보기 문제 조건 // 1. x축으로 a*k, y축으로 b*k 마다 점 찍기 // 2. 원점과 거리가 d를 넘으면 점 찍지 않음 문제 풀이 첫번째 (실패) function solution(k, d) { // const coordinate = Array(d + 1) // .fill() // .map(() => Array(d + 1).fill(0)); let count = 0; for (let i = 0; i 공감수 0 댓글수 5 2023. 12. 17.
프로그래머스 JS 미로 탈출 (BFS 최단거리 찾기) 미로 탈출 (120) 문제 보기 문제 조건 // 1x1 칸, 격자 미로 // 통로 "O" 또는 벽 "X" // 탈출구 "E" 는 레버 "L" 로 열 수 있음 // 최대한 빨리 나가기 // S : 시작 지점 // E : 출구 // L : 레버 // O : 통로 // X : 벽 // 탈출 못하면 -1 // 레버 찾아 열기 // > 탈출구 찾아 열기 문제 풀이 // 지도 내 target 좌표를 반환 function getTargetPos(maps, n, m, target) { for (let i = 0; i < maps.length; i++) { for (let j = 0; j < maps[0].length; j++) { if (isInGrid(i, j, n, m) && maps[i][j] === target.. 공감수 0 댓글수 0 2023. 12. 17.
프로그래머스 JS 테이블 해시 (bitwise XOR 연산) 테이블 해시 함수 (60) 문제 보기 문제 조건 // 정수타입 컬럼 // 2차원 행렬 // 열은 컬럼, 행은 튜플 // 첫번쨰 컬럼은 기본키로, 모든 튜플에 대해 그 값이 중복되지 않도록 보장 됨. //정해진 방법에 따라 튜플을 정렬하면 {4, 2, 9}, {2, 2, 6}, {1, 5, 10}, {3, 8, 3} 이 됩니다. // bitwise XOR // 비트단위 XOR 연산은 두 개의 숫자를 비교하여 각 자릿수별로 다를 때만 1을 반환하고, // 같을 때는 0을 반환하는 연산입니다. 예를 들어, 두 비트가 같으면 결과는 0이 되고, 다르면 1이 됩니다. // 배열길이 2500, 원소 길이 500 문제 풀이 function solution(data, col, row_begin, row_end) { /.. 공감수 0 댓글수 0 2023. 12. 15.
프로그래머스 JS 숫자 카드 나누기 (나누어 떨어지는 수) 숫자 카드 나누기 (45) 문제 보기 A의 모든 숫자를 나눌 수 있고, B의 모든 숫자들 중 하나도 나눌 수 없는 양의 정수 a B의 모든 숫자를 나눌 수 있고, A의 모든 숫자들 중 하나도 나눌 수 없는 양의 정수 a 를 만족하는 수 중 가장 큰 a를 찾고, 없다면 0을 반환하시오 문제 풀이 // 나누어 떨어지는 수들을 찾기 const getDivisors = (number) => { const divisors = []; for (let i = 2; i { const results = []; for (let divisor of divisors) { if (cardsA.every((card) => card % divisor === 0) && cardsB.every((card) => card % divis.. 공감수 0 댓글수 0 2023. 12. 14.
프로그래머스 JS 시소 짝꿍 (해시 맵) 시소 짝꿍 (30) 문제 보기 탑승한 사람의 무게와 시소 축과 좌석 간의 거리의 곱이 양쪽 다 같다면 시소 짝꿍이라고 할 수 있습니다. 사람들의 몸무게 목록 weights이 주어질 때, 시소 짝꿍이 몇 쌍 존재하는지 구하여 return 하도록 solution 함수를 완성해주세요. 문제 풀이 function solution(weights) { weights.sort((a, b) => a - b); const weightCounts = {}; const units = [1, 2 / 3, 2 / 4, 3 / 4]; let count = 0; for (let weight of weights) { for (let unit of units) { if (weightCounts[weight * unit]) { coun.. 공감수 0 댓글수 0 2023. 12. 12.
프로그래머스 JS 마법의 엘리베이터 (덧셈 올림) 마법의 엘리베이터(*) 문제 보기 -1, +1, -10, +10, -100, +100 등과 같이 절댓값이 10c (c ≥ 0 인 정수) 형태인 정수들이 적힌 버튼 엘리베이터가 위치해 있는 층과 버튼의 값을 더한 결과가 0보다 작으면 엘리베이터는 움직이지 않습니다. 0층으로 가기 위해 최소한으로 버튼 누르는 횟수는? 문제 풀이 n의 자릿수를 가장 빠르게 0으로 만드는 방법은? 올려주는 경우에는 다음 자릿수가 +1이 된다. n=1일 경우 1~5의 경우에는 내려주는게 빠르다. 6보다 큰 경우에는 올려주는게 빠르다. 그런데 올라가는 것이 다음 자릿수들에 영향을 줄 때를 생각해야 한다. 99인 경우 1의 자리를 1 올려주었지만 10의 자리와 100의 자리가 함께 영향을 받았다. 올려줄 경우에는 자릿수 변경에 신경.. 공감수 0 댓글수 0 2023. 12. 11.
프로그래머스 JS 호텔 대실 (겹치는 시간대) 호텔 대실 (20) 문제 보기 문제 조건 목표: 대실이 가장 많을 때 몇 개의 방이 예약되어 있는지를 구해야 한다. 최소한의 객실만 사용한다. 한 번 사용한 객실은 퇴실 시간을 기준으로 10분 청소시간이 필요하다. 문제 풀이 1. 3600개의 0을 지닌 배열을 만든다. 2. [시작시간, 퇴실시간 + 10]을 구한다. 3. for문으로 (시작시간)~(퇴실시간+10) 구간의 요소에 +1 해준다. 4. 최대 값을 Math.max()로 찾는다. 코드 function getMinute(time) { const [hour, min] = time.split(":"); return hour * 60 + Number(min); } function solution(book_time) { const timeTable = A.. 공감수 0 댓글수 0 2023. 12. 10.
프로그래머스 JS 무인도 여행 (BFS, 이웃된 값 합산) 무인도 여행 (25) 문제 보기 문제 조건 // X는 바다 // 숫자는 식량 // 상하좌우 연결되면 하나의 섬 // 섬 별로 숫자의 합을 오름차순으로 반환 // 방문할 섬 없으면 -1 반환 문제 풀이 function solution(maps) { maps = maps.map((map) => map.split("")); // 이차원 배열로 만들기 const row = maps.length; const column = maps[0].length; const directions = [ [-1, 0], [1, 0], [0, -1], [0, 1], ]; const answer = []; const queue = []; for (let i = 0; i < row; i++) { for (let j = 0; j < c.. 공감수 1 댓글수 0 2023. 12. 9.
PCCP 기출 문제 2번 석유 시추 (js) 석유 시추 (180) 문제 보러 가기 문제 조건 세로길이가 n 가로길이가 m인 격자 석유는 여러 덩어리 수직으로 단 하나만 뚫을 수 있을 때 많은 석유를 뽑을 수 있는 시추관의 위치 찾기 시추관이 석유 덩어리의 일부를 지나면 해당 덩어리에 속한 모든 석유를 뽑을 수 있습니다. 문제 풀이(1) 효율성 실패 function solution(land) { const n = land[0].length; // 세로 n const m = land.length; // 가로 m const tries = Array(n).fill(0); let count = 0; for (let j = 0; j < n; j++) { const currentLand = JSON.parse(JSON.stringify(land)); for (.. 공감수 0 댓글수 2 2023. 12. 9.
PCCP 기출 문제 1번 붕대 감기 (js) PCCP 기출 문제 (25) 1번 문제 보러가기 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 조건 확인 // 붕대감기 // t초 동안 붕대를 감으면서 1초마다 x만큼의 체력을 회복 // t초 연속으로 붕대를 감는 데 성공한다면 y만큼의 체력을 추가로 회복 // 붕대 감기 연속 성공 // 시전시간만큼 연속으로 성공하면 (1+추가 회복량)만큼 회복 // 공격 // 기술을 쓰는 도중 몬스터에게 공격을 당하면 기술이 취소 // 공격을 당하는 순간에는 체력을 회복할 수 없습니다 // 연속 성공 시간이 0으로 초기화 // 체력 // 최대 체력 // 현재 체력.. 공감수 0 댓글수 0 2023. 12. 7.
2020 KAKAO BLIND RECRUITMENT 문자열 압축 (js) 문자열 압축 (40) 문제 보기 문제 이해 조건으로 필요하다고 생각되는 부분만 정리하면 다음과 같다. - 문자열에서 같은 값이 연속해서 나타나는 문자를, 그 문자의 개수와 반복되는 값으로 표현한다. - 문자가 반복되지 않아 한번만 나타난 경우에 숫자 1은 생략한다. - 문자열을 1개 이상의 단위로 잘라서 압축하여 더 짧은 문자열로 표현할 수 있는지 방법 찾는다. 문제 풀이 - 1부터 s.length / 2 단위로 자른 결과를 모두 구하고 - 가장 짧은 결과를 반환한다. 요구사항 자체는 간단하기 때문에 이렇게만 생각했다. 1개 단위를 2a2b와 같은 형태로 만들 수 있다면, n개 단위는 slice를 이용해서 구현하면 되는 문제가 되겠구나 싶었기 때문에 우선은 1개 단위를 2a2b와 같은 형태로 만들었다. .. 공감수 0 댓글수 0 2023. 11. 27.
2020 KAKAO BLIND RECRUITMENT 괄호 변환 (js) 괄호 변환(30) 문제 보기 문제 이해 솔직히 문제를 해결하기 전까지 "뒤집고붙이고떼고다시하고..." 뭔 말을 하는건지 당최 이해를 못했습니다. 그냥 시키는 대로 코드를 작성하고, 결과를 재귀 형태로 만들었더니 통과할 수 있었습니다. 따라서 시키는 대로 코드를 작성한 과정을 풀이로 적어보겠습니다. 문제 풀이 1. 입력이 빈 문자열인 경우, 빈 문자열을 반환합니다. // 1. 입력이 빈 문자열인 경우, 빈 문자열을 반환합니다. if (p === "") { return ""; } 2. 문자열 w를 두 "균형잡힌 괄호 문자열" u, v로 분리합니다. 단, u는 "균형잡힌 괄호 문자열"로 더 이상 분리할 수 없어야 하며, v는 빈 문자열이 될 수 있습니다. // 2. 문자열 w를 두 "균형잡힌 괄호 문자열" u.. 공감수 0 댓글수 2 2023. 11. 25.
숫자 변환하기 (DFS, DP) 숫자 변환하기 문제 보기 문제 풀이 1 (실패) DFS 첫 번째로 DFS(깊이 우선 탐색)를 이용하여 재귀적인 방식으로 문제를 해결하려 했습니다. 비효율적인 방법이라는 것은 인지하고 있지만, 일단 구현하기 위해서 시도한 방법입니다. y를 만들 수 있는 가능한 모든 경우의 수를 저장하고, 그 중에서 가장 작은 값을 찾아 반환하기로 했습니다. 그러나 이 방식은 n=1 y=1,000,000인 경우만 생각해보아도 경우의 수가 너무 많습니다. 결과는 예상대로 스택 오버플로우 에러가 발생합니다. 이미 계산된 값인 경우에는 종료시켜주기 위해서 Map 객체로 값을 메모하기도 했지만 어림도 없었습니다. function solution(x, y, n) { let result = []; const bfs = (num, co.. 공감수 0 댓글수 0 2023. 11. 24.
[알고리즘] 투포인터, 슬라이딩 윈도우 (연속된 부분 수열의 합 js) 투 포인터(Two Pointers) 정렬된 배열에서 시작와 끝을 가리키는 두 개의 포인터를 이용하여 부분 배열을 탐색할 때 활용된다. https://school.programmers.co.kr/learn/courses/30/lessons/178870 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 비내림차순으로 정렬된 수열이 주어질 때, 다음 조건을 만족하는 부분 수열을 찾으려고 합니다. 기존 수열에서 임의의 두 인덱스의 원소와 그 사이의 원소를 모두 포함하는 부분 수열이어야 합니다. 부분 수열의 합은 k입니다. 합이 k인 부분 수열이 여러 개인 경우 길이.. 공감수 0 댓글수 0 2023. 11. 23.
Jotai를 프로젝트에 적용해보며 느낀점 1. Jotai Atom의 핵심은 Atomic이다. Jotai는 useContext에서 발생하는 리렌더링 문제를 해결하기 위해 개발되었다. => 여기서 리렌더링 문제란 하나의 상태라도 변경이 되면 context가 선언된 컴포넌트의 하위 모든 컴포넌트가 리렌더링 된다. 예를 들면 다음과 같다. import React, { createContext, useContext, useState } from 'react'; const MyContext = createContext(); // 1. 부모 컴포넌트에서 context를 생성 const ParentComponent = () => { const [count, setCount] = useState(0); return ( ); }; // 2. 자식1 컴포넌트에서 .. 공감수 0 댓글수 0 2023. 11. 20.
프로그래머스 JS 깊이/너비 우선 탐색(DFS/BFS) [4/7] 단어 변환(lv3) 문제 보기 (25) 문제 풀이 고려해야할 문제의 조건은 세가지다. 한번에 한개의 알파벳 변경 가능 words에 존재하는 단어로만 변환 가능 중복되는 단어 없음 목표는 words 배열의 길이만큼 변환 시도를 했을 때, 변환할 수 없다면 0을 반환하고, 변환이 가능하다면 최소 변환 횟수를 구하는 것이다. solution("hit", "cog", ["hot", "dot", "dog", "lot", "log", "cig"]); 1. words 배열의 길이만큼 변환 시도를 한다. words.forEach((word, index) => { }); 2. 단어 변환이 가능한지 확인한다. 하나의 알파벳만이 다르면 변환이 가능하기 때문에 몇 개의 알파벳이 일치하는지 확인하면 된다. words.forEa.. 공감수 0 댓글수 0 2023. 11. 19.
프로그래머스 JS 스택/큐 [6/6] 기능개발 Level 2 문제보기 (20) 요구사항에서 말해주는 그대로 따라서 차근차근 구현하면 됩니다. 그래서 그런지 다른 사람과 풀이가 99% 똑같았다. 풀이 순서 1. for문을 이용하여 프로세스 각각에 speeds 만큼 더해줍니다. progresses[i] += speeds[i] 2. 연달아 배포한 갯수를 카운트합니다. let completedCount = 0 - while을 이용하여 progresses[0]이 100이상이 아닐 때까지 배열에서 shift()로 제외하고 completedCount+1 하는 과정을 반복합니다. - 배포한 프로세스의 수를 결과 배열에 추가합니다. function solution(progresses, speeds) { const result = []; // 개발진행 사항이.. 공감수 0 댓글수 0 2023. 11. 17.
오.코.분: pmndrs/jotai/examples todos 폴더 오.코.분 목표: 트렌드를 만들어 내는 pmndrs의 jotai sample을(쉬운것부터) 분석하고 블로그 프로젝트에 jotai 상태관리를 도입해보자. 새로 학습한 내용 atom 선언시 콜백 함수의 인자로 오는 get 이용 방법 배열의 요소로 atom을 직접 생성하여, 외부에서 해당 배열의 요소(atom)를 useAtom으로 선언할 수 있다. 해당 요소는 배열의 요소와 동일한 참조값을 지닌다. React-Spring 라이브러리를 활용해서 애니메이션을 만들어 봐야겠다. 동일한 참조값을 지닌 요소를 remove의 인자로 전달하여 삭제하는 방식을 배웠다. 참조값에 대한 개념이 확장됐다. 오픈 소스 코드 분석 대상 pmndrs/jotai 레포지토리의 examples todoes 폴더 https://github... 공감수 0 댓글수 0 2023. 11. 16.
오.코.분: vercel/next-lean SEO 폴더 오.코.분 목표: 트렌드를 만들어 내는 Vercel의 코드를 (쉬운것부터) 분석하고 내 코드 스타일을 개선하자. 새로 학습한 내용 Next.js Head 태그로 SEO 성능 높이기 onChange 이벤트 내에서 라이브러리 dynamic import Modal은 dynamic import로 코드 스플리팅하여 초기 렌더링 속도 향상 SyntaxHighlighter와 react-modal 이라는 라이브러리를 써 봐야겠다. Next.js 13 이전 버전에서는 getServerSideProps로 데이터를 페칭한다. 오픈 소스 코드 분석 대상 vercel/next-learn 레포지토리의 SEO 폴더 https://github.com/vercel/next-learn/tree/main/seo 1. Next.js는 페이.. 공감수 0 댓글수 0 2023. 11. 15.
자바스크립트 프론트엔드 지식 자바스크립트란 HTML, CSS와 함께 사용되어 웹을 동적으로 만들고 상호작용할 수 있도록 하는 언어 웹 브라우저에서 해석되는 인터프리터 언어 객체기반의 스크립트 언어 싱글 스레드 언어로 blocking이 발생 이벤트 기반으로 사용자와 상호작용 비동기 작업을 통해 서버와 통신 스크립트 언어란 소스 코드를 *컴파일 하지 않고 실행할 수 있는 프로그래밍 언어 컴파일 과정이 없어 프로그램을 실행시켜야 오류를 알 수 있다. 프로그램을 실행할 때마다 매번 같은 코드를 번역해야 하기 때문에 컴파일 언어에 비해 프로그램의 실행 속도가 느리다 *컴파일이란 기계가 이해할 수 있는 2진 데이터로 변경하는 작업으로, 그 결과 실행 파일이 만들어진다. 컴파일 언어란 한 번 컴파일을 하면 이후로는 기계어를 읽어들이기 때문에 실.. 공감수 0 댓글수 0 2023. 11. 11.
Jotai 적용에 앞서 Jotai 알아보기 0. Jotai는 조타이가 아니라 일본어로 상태를 의미하는 状態(죠-타이) 영문 표기로는 Jotai이지만 실제 영어로 표기해야하는 발음은 Jaw-tai 가 맞겠다. 1. Jotai는 어떠한 상태관리 라이브러리인가요 jotai는 useState + useContext를 개선한 recoil과 비교되는 라이브러리라 생각하면 된다. jotai는 내부적으로 context API를 이용하면서도 context의 불필요한 리렌더링을 방지한다. 리덕스에 비해 보일러 플레이트 코드가 적고 사용이 간편하다. atomic 한 구조에 잘 어울린다. bottom-up 상태관리를 한다. (부모에서 atom 정의하고, 자식이 받아온 atom을 set) 번들 크기가 작다. 매우 가볍다. useAtom에서 사용되는 atom은 가비지 컬.. 공감수 0 댓글수 0 2023. 11. 6.
Imgur 서버에 업로드가 안되는 문제 403 Forbidden 마주한 문제: Imgur 서버에 이미지 업로드가 갑자기 안 될 때의 디버깅 과정 코드를 수정하며 건드리지도 않은 로직이 갑자기 수행이 안 될 때, 제 경우에는 이미지 업로드 시 403 에러가 나타나며 갑자기 작동하지 않게 된 상황에서 디버깅하는 과정을 정리합니다. 1. 문제 발견: 갑자기 이미지 업로드가 작동하지 않음 프로젝트를 진행하던 중, 이미지 업로드가 안되는 문제가 발생했습니다. 이미지 업로드 로직은 모듈화하여 수정한 적이 없기 때문에 로직 외의 영역에서 원인을 파악해야 했습니다. 2. 원인 찾기(1): Imgur API App 재발급 해보기 'Forbidden' 오류는 요청을 받았으나 거절당했다는 의미이기 때문에, 새롭게 imgur app을 발급부터 해보았습니다. callback url은 이전에.. 공감수 0 댓글수 0 2023. 11. 5.
next-auth로 Role-based access control 구현: 회원별 권한 분기 개선 기존: 특정 Email인 유저라면 해당 권한을 수행하거라. 기존에는 회원별 권한 분기를 구분하는 방법이 단순했습니다. 유저의 email로 구분지었죠. adminEmailList에 포함되는 경우에는 admin 권한을 수행할 수 있고, testerEmailList에 포함되는 경우에는 tester 권한을 수행하는 방식이었습니다. 하지만 이러한 방식은 확장성도 떨어지며, 만일 tester가 1억명으로 늘어난다면? 1억개의 요소를 지닌 배열에서 Email이 포함되어 있는지를 뒤져봐야 하는 문제가 생깁니다. 수정이나 삭제를 하려고 해도 index를 찾고, 해당 index를 삭제하는 등 불필요한 작업들이 추가됩니다. 그렇다면 유저에 role을 추가하면 되지 않을까? 이를 개선하기 위해 사실은 처음부터 Role-bas.. 공감수 0 댓글수 0 2023. 11. 4.
댓글에 답글(대댓글) 구현하기 답글 구현 결과 GIF Depth controlled GIF 목차 1. 기존의 一자 댓글 형태 2. 댓글에 답글이 달리는 목표 형태 3. 어떻게 구현할까? 4-1. 목표대로 구현하기 위해 조건을 정리해보면 4-2. (Option) 페이지네이션 적용하려면 클라이언트 컴포넌트로 구현 5. 구현 방법 설명 6. 실제 사용한 코드 (주석 등등은 간소화 됨) 7. Depth를 활용해서 계단처럼 만들려면 1. 기존의 一 자 댓글 형태 기존에는 댓글을 저장할 때 parentPostId를 comment에 함께 저장했습니다. postId에 해당하는 댓글을 요청하여 시간순서로 댓글을 나열하기만 합니다. [ { _id: new ObjectId("653fca0cc5e5048246973a3c"), parentId: 3, // .. 공감수 0 댓글수 0 2023. 10. 30.
ReactQuill + highlight.js(코드 블록)로 게시물의 코드 영역 구분하기 https://sakuraop.tistory.com/614 에서 이어집니다. ( 안 봐도 상관 없습니다. 이미 quill은 만들고 나서 highlight 적용 방법을 찾는 것이기 때문에... ) 목차 1. highlight.js 설치 2. ReactQuill 에 highlight.js 적용 3. Custom Toolbar에 적용 1. highlight.js 설치하기 블로그 게시물의 본문에는 코드도 올라갈 것이기 때문에 일반 글과 코드 영역을 구분해야겠죠. highlight.js 를 설치하고 ReactQuill에 적용시켜 보겠습니다. 코드를 감지하여 아래와 같이 코드를 읽기 쉽도록 도와주는 라이브러입니다. https://www.npmjs.com/package/highlight.js?activeTab=rea.. 공감수 0 댓글수 0 2023. 10. 20.
imgur 이미지 URL 업로드 + ReactQuill에서 URL로 이미지 저장하기 목차 1. imgur 회원가입 및 로그인 2. imgur APP 등록하기 3. input으로 이미지파일 선택하기 4. imgur에 이미지 파일 업로드 POST 요청 보내기 ++ 어??? 나는 요청이 안되는데요? 5. ReactQuill 에 ref 속성 주입하기 6. ReactQuill에 URL 로 이미지 삽입하기 1. imgur 회원가입 및 로그인 https://imgur.com/ 위 링크로 이동하여 회원가입을 하고 로그인도 해줍니다. 2. imgur APP 등록하기 https://api.imgur.com/oauth2/addclient 로그인 하고 위 링크로 이동한 뒤에 이런 식으로 작성해주면 APP을 생성할 수 있습니다. https://imgur.com/account/settings/apps APP을 .. 공감수 0 댓글수 0 2023. 10. 17.
eslint error 10가지 원인과 해결 방법 목차 1. 수정할 error 목록 2. 수정 내용 1. import/named 원인: 리팩토링 과정에서 type의 경로가 잘못 지정되었다. 해결: 경로를 올바르게 수정. 2. import/order 원인: 규칙에 따라 order가 재정렬 된 모양이 error 조건과 다른 듯 하다. 해결: NavHead 위로 Inter와 ReactNode 객체를 이동시킨다. 3. react/no-danger 원인: 태그에 존재하는 위험한 속성이니 조심해야한다. JS 스크립트를 삽입하는 XSS 공격에 노출될 수 있다. 해결: 1. 규칙을 warning하지 않도록 바꾼다. 2. 해당 라인을 무시하도록 한다. 4. react/jsx-no-useless-fragment 원인: 불필요한 fragment가 존재한다. child를 하.. 공감수 0 댓글수 0 2023. 10. 15.
eslint import/order 적용 방법 목차 0. 적용 결과 1. 적용 방법 2. config, package.json 코드 예시 0. 적용 결과 적용 전 import Image from "next/image"; import styles from "./PostItem.module.scss"; import EditPostButton from "@/components/buttons/EditPostButton/EditPostButton"; import { sanitize } from "dompurify"; import DeletePostButton from "@/components/buttons/DeletePostButton/DeletePostButton"; import Comment from "../Comment/Comment"; import {.. 공감수 0 댓글수 0 2023. 10. 14.
티스토리 Loading 컴포넌트 커스텀 훅을 이용하여 구현하는 방법 구현 목표는 티스토리 컴포넌트 로딩 결과 미리보기 구현 단계 요약 1. 데이터를 불러 오는 중이라면 "로딩"을 렌더링한다. 2. 데이터가 있다면 "있음"을 렌더링한다. 3. 데이터가 없다면 "없음"을 렌더링한다. 구현 방법 1. 로딩 화면을 보여주는 컴포넌트를 만든다. const Spin = () => { return ( 로딩중입니다. ); }; export default Spin; 티스토리처럼 로딩 빙글이가 돌아가고, 아래에는 로딩중이라는 메시지를 읽을 수 있도록 했다. 2. 로딩 상태를 조절할 useLoading 커스텀 훅을 만든다. // useLoading.tsx import React, { useState, useEffect } from "react"; const useLoading = () =>.. 공감수 0 댓글수 0 2023. 10. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.