전체 글177 1. Tailwind CSS 개념 및 초기 설정 Tailwind CSS Tailwind CSS는 클래스 기반의 CSS 프레임워크로, HTML 파일, JavaScript 컴포넌트 및 기타 템플릿 요소에 클래스를 적용하여 스타일을 지정합니다. 이후 빌드 과정을 통해 사용된 클래스들을 기반으로 최적화된 CSS 를 생성하여 재사용 가능하고 일관된 디자인을 쉽게 구현할 수 있습니다.설치 // tailwindcss 설치npm install -D tailwindcss// tailwind.config.js 파일 프로젝트의 루트 디렉토리에 생성npx tailwindcss initconfig 파일 설정 // tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { // tailwin.. 2024. 4. 25. Git Commit 메시지 제대로 작성하기 Git Commit Message Convention 커밋 메시지를 작성할 때 사용자 간 원활한 소통을 위해 일관된 형식 커밋 메시지 형식 제목 type: Subject 본문 body 꼬리말 footer 기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. Commit Type type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 fix : 버그 수정 docs : 문서 내용 변경 style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등 refactor : 코드 리팩토링 test : 테스트 코드 작성 chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등 Subject (제목) 제목은 50글자 이내로 작성한다. 첫글자는 .. 2024. 4. 24. [JS] 코딩테스트 문제 : 섬나라 아일랜드 [DFS] 문제 : 섬나라 아일랜드(DFS 활용) 문제 설명 N*N 의 섬나라 아일랜드의 지도가 격자판의 정보로 주어집니다. 각 섬은 1로 표시되어 상하좌우와 대각선으로 연결되어 있으며, 0은 바다입니다. 섬나라 아일랜드에 몇 개의 섬이 있는지 구하는 프로그램을 작성하세요. 1 1 0 0 0 1 0 0 1 1 0 1 1 0 0 1 0 0 0 0 0 0 0 0 1 0 1 1 1 1 0 1 1 0 0 1 0 0 0 1 0 0 1 0 1 0 1 0 0 만약 위와 같다면 ▣ 입력설명 첫 번째 줄에 자연수 N(3= 0 && X < board.length) { // 이동할 좌표에이어진 섬이 있는 경우 이동한 위치좌표를 기준으로 추가 탐색을 위해 함수를 재귀적으로 호출 if (board[Y][X] === 1) { console.. 2024. 4. 23. [JS] 코딩 테스트 문제 : 송아지 찾기 [BFS : 상태트리탐색] 문제 : 송아지 찾기(BFS : 상태트리탐색) 문제 설명 현수는 송아지를 잃어버렸다. 다행히 송아지에는 위치추적기가 달려 있다. 현수의 위치와 송아지의 위치가 수직선상의 좌표 점으로 주어지면 현수는 현재 위치에서 송아지의 위치까지 다음과 같은 방법으로 이동한다. 송아지는 움직이지 않고 제자리에 있다. 현수는 스카이 콩콩을 타고 가는데 한 번의 점프로 앞으로 1, 뒤로 1, 앞으로 5를 이동할 수 있다. 최소 몇 번의 점프로 현수가 송아지의 위치까지 갈 수 있는지 구하는 프로그램을 작성하세요. ▣ 입력설명 첫 번째 줄에 현수의 위치 S와 송아지의 위치 E가 주어진다. 직선의 좌표 점은 1부터 10,000 까지이다. ▣ 출력설명 점프의 최소횟수를 구한다. 답은 1이상입니다. ▣ 입력예제 1 5 14 ▣ 출력.. 2024. 4. 23. [JS] 코딩 테스트 문제 : 이진트리 넓이 우선 탐색 [BFS] 문제 : 이진트리 넓이 우선 탐색(BFS) 문제 설명 아래 그림과 같은 이진트리를 넓이 우선 탐색해보세요. 넓이 우선 탐색 : 1 2 3 4 5 6 7 넓이 우선 탐색 (BFS) 설명 트리나 그래프를 순회할 때 레벨 순서대로 탐색하는 알고리즘입니다. BFS를 구현할 때는 큐(queue)를 사용하여 각 노드를 탐색 순서대로 저장하고 처리합니다. 상태 트리 탐색, 최단 거리 계산 등에 활용 할 수 있다. 내코드 function solution() { let answer = ""; // 탐색한 노드들의 순서를 문자열로 저장할 정답 변수 // 너비 우선 탐색을 처리할 재귀함수 // num : 현재 레벨의 가장 낮은 수를 의미하는 인자 // lever : 현재 트리에서 탐색할 노드의 레벨을 의미하는 인자 func.. 2024. 4. 5. [JS] 코딩 테스트 문제 : 미로탐색 [DFS] 문제 : 미로탐색(DFS) 문제 설명 7*7 격자판 미로를 탈출하는 경로의 가지수를 출력하는 프로그램을 작성하세요. 출발점은 격자의 (1, 1) 좌표이고, 탈출 도착점은 (7, 7)좌표이다. 격자판의 1은 벽이고, 0은 통로이다. 격자판의 움직임은 상하좌우로만 움직인다. 미로가 다음과 같다면 출발 0 0 0 0 0 0 0 1 1 1 1 1 0 0 0 0 1 0 0 0 1 1 0 1 0 1 1 1 1 0 0 0 0 1 1 1 0 1 1 0 0 1 0 0 0 0 0 도착 위의 지도에서 출발점에서 도착점까지 갈 수 있는 방법의 수는 8가지이다. ▣ 입력설명 7*7 격자판의 정보가 주어집니다. ▣ 출력설명 첫 번째 줄에 경로의 가지수를 출력한다. ▣ 입력예제 1 0 0 0 0 0 0 0 0 1 1 1 1 1 0.. 2024. 4. 2. [JS] 코딩 테스트 문제 : 경로 탐색 [인접리스트] 문제 : 경로 탐색(인접리스트) 문제 설명 방향그래프가 주어지면 1번 정점에서 N번 정점으로 가는 모든 경로의 가지 수를 출력하는 프로그램을 작성하세요. 아래 그래프에서 1번 정점에서 5번 정점으로 가는 가지 수는 1 2 3 4 5 1 2 5 1 3 4 2 5 1 3 4 5 1 4 2 5 1 4 5 총 6 가지입니다. ▣ 입력설명 첫째 줄에는 정점의 수 N(1 listArr[s].push(e)); console.log(listArr); // 재귀함수 DFS // current : 현재 노드 번호 1부터 시작하므로 1이 기본값 // chkArr : 현재까지 방문한 노드 순서대로 저장한 배열 시작값은 1 이므로 [1] 이 기본값 function DFS(current = 1, chkArr = [1]) { if.. 2024. 3. 22. [JS] 코딩 테스트 문제 : 경로 탐색 [인접행렬] 문제 : 경로 탐색(인접행렬) 문제 설명 방향그래프가 주어지면 1번 정점에서 N번 정점으로 가는 모든 경로의 가지 수를 출력하는 프로그램을 작성하세요. 아래 그래프에서 1번 정점에서 5번 정점으로 가는 가지 수는 1 2 3 4 5 1 2 5 1 3 4 2 5 1 3 4 5 1 4 2 5 1 4 5 총 6 가지입니다. ▣ 입력설명 첫째 줄에는 정점의 수 N(1 (graph[s][e] = 1)); console.log(graph); // 재귀함수 DFS // current : 현재 노드 번호 1부터 시작하므로 1이 기본값 // chkArr : 현재까지 방문한 노드 순서대로 저장한 배열 시작값은 1 이므로 [1] 이 기본값 function DFS(current = 1, chkArr = [1]) { // n 번.. 2024. 3. 19. [next 14 공식문서 부시기] 4.2 Client Components Client Components Client Components를 사용하면 요청 시 클라이언트에 렌더링할 수 있는 상호작용이 가능한 UI를 작성할 수 있습니다. Next.js에서 클라이언트 렌더링은 선택사항입니다. 즉, React가 클라이언트에서 렌더링해야 하는 Components 를 명시적으로 결정("use Client" 지시문 사용)해야 합니다. 장점 Client Components는 상태(state), 효과(effect) 및 이벤트 리스너(event listeners)를 사용할 수 있습니다. 즉, 사용자에게 즉각적인 피드백을 제공하고 상호작용을통해 UI를 업데이트할 수 있습니다. 사용 Client Components 를 사용하려면 파일 상단, import 문 위에 React "use client" .. 2024. 2. 29. [JS] 코딩 테스트 문제 : 수열 추측하기 [순열, 이항계수, 파스칼 삼각형] 문제 : 수열 추측하기 [순열, 이항계수, 파스칼 삼각형] 문제 설명 가장 윗줄에 1부터 N까지의 숫자가 한 개씩 적혀 있다. 그리고 둘째 줄부터 차례대로 파스칼의 삼각형처럼 위의 두개를 더한 값이 저장되게 된다. 예를 들어 N이 4 이고 가장 윗 줄에 3 1 2 4 가 있다고 했을 때, 다음과 같은 삼각형이 그려진다. 3 1 2 4 4 3 6 7 9 16 N과 가장 밑에 있는 숫자가 주어져 있을 때 가장 윗줄에 있는 숫자를 구하는 프로그램을 작성하시오. 단, 답이 여러가지가 나오는 경우에는 사전순으로 가장 앞에 오는 것을 출력하여야 한다. ▣ 입력설명 첫째 줄에 두개의 정수 N(1≤N≤10)과 F가 주어진다. N은 가장 윗줄에 있는 숫자의 개수를 의 미하며 F는 가장 밑에 줄에 있는 수로 1,000,0.. 2024. 2. 28. [next 14 공식문서 부시기] 4.1 Server Components Server Components React Server Components 를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI를 작성할 수 있습니다. Next.js에서는 streaming 과 partial rendering을 활성화하기 위해 렌더링 작업이 경로 세그먼트별로 추가로 분할됩니다. 기본적으로 Next.js는 Server Components를 사용합니다. 필요할 때 Client Components 사용을 선택할 수 있습니다. 서버 렌더링의 이점 Data Fetching: Server Components 를 사용하면 서버 데이터 소스에 더 가까운 서버에서 데이터 요청을 수행할 수 있습니다 . 이를 통해 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 수행해야 하는 요청.. 2024. 2. 24. [next 14 공식문서 부시기] 3.2 Server Actions 활용 Server Actions 과 데이터 변경 Server Actions 은 서버에서 실행되는 비동기 함수입니다. Server componnents 나 Client Components 에서 form 제출 및 데이터 변경을 처리하는 데 사용할 수 있습니다. React use server 지시어를 비동기 함수 상단에 지시문을 배치하여 함수를 Server Actions 으로 표시하거나 별도의 파일 상단에 배치하여 해당 파일의 모든 export 를 Server Actions 으로 사용할 수 있다. Server Actions은 Next.js caching 과 revalidation 아키텍처와 통합됩니다. Server Actions이 호출될 때 Next.js는 single server roundtrip으로 업데이트된 .. 2024. 2. 16. 이전 1 2 3 4 5 ··· 15 다음
