개발일기

문제를 보고 그 어떤 방법도 떠오르지 않았음을 알림,,, 이 문제의 핵심은 split이라고 생각한다. 하지만 split의 s도 생각나지 않았다. 구글링을 했고, 기억하기 위해 기록해 둔다. 문제 풀이 function solution(myString) { const splits = myString.split("x") console.log(splits) // Expected output: ["o", "oo", "o", "", "o", ""] const answer = splits.map((item)=>{ return item.length }) console.log(answer) // Expected output: [1, 2, 1, 0, 1, 0] return answer } solution("oxooxoxx..

개요 역시 새로운 기술을 사용해서 프로젝트를 만들때는 TodoList만한게 없는거 같다. 그래서 공부중인 Next.Js를 사용하면서 처음 사용해보는 SWR도 같이 써보려고 한다. 프로젝트를 생성하고 기본적인 것들을 이것저것 만들어 봤을 때에는 react와는 그렇게 다르지 않았다. 하지만 폴더구조를 잡는게 쉽지 않았고 nextJs에 대한 정보가 그렇게 많지 않았던 것 같다. 나의 이해력의 문제일 수도 있다. 아무튼 구현했던 것들을 기록하려고 한다. 폴더구조 먼저 pages 폴더 안에 custom App을 생성해 주었다. Custom _app의 장점은 전역적인 레이아웃, 상태 관리, 데이터 가져오기, 라우팅 설정, 스타일링 및 테마 관리 등을 단일한 곳에서 처리할 수 있다. 또한 _app은 페이지가 렌더링되..

개발환경 NextJs Axios json-server 1. 문제 json-server의 포트 번호를 그대로 입력하면 문제가 없지만 env설정 후 사용하면 에러가 나옴 2. 해결 방법 변수명 앞에 NEXT_PUBLIC 사용 NEXT_PUBLIC_URL="http://localhost"

1. 배열 구조분해할당 1-1 배열 요소에 접근하는 방법 const array = ["사과","바나나",'오렌지'] const apple = array[0] const banana = array[1] const orange = array[2] console.log(apple,banana,orange) // Expected output: 사과 바나나 오렌지 1-2 배열 요소에 구조분해할당으로 접근하는 방법 const array = ["사과","바나나",'오렌지'] const [apple,banana,orange] = array ; console.log(apple,banana,orange) // Expected output: 사과 바나나 오렌지 ※ 주의할 점 배열은 요소의 인덱스값에 따라(?) 구조분해할당을..

1. for of 배열의 요소를 반복한다. array = ["apple","banana",'orange'] for (const iterator of array) { console.log(iterator) } //Expected output : //apple //banana //orange 2. for in 배열의 인덱스를 반복한다. array = ["apple","banana",'orange'] for (const key of array) { console.log(key) } //Expected output : //0 //1 //2 3. for of, for in 객체 실행해 보기 object = {name:"Jhon", age:21, city : 'Busan'} for (const iterator of..

1. 폴더 생성 yarn create next-app 1. What is your project named? my-app (프로젝트 이름 정하기) 2. Would you like to use TypeScript? No / Yes (타입스크립트 사용 여부) 3. Would you like to use ESLint? No / Yes (틀린것에 대한 힌트 받기) 4. Would you like to use Tailwind CSS? No / Yes (Tailwind CSS 사용 여부) 5. Would you like to use `src/` directory? No / Yes (src 디렉토리 폴더 사용 여부) 6. Would you like to use App Router? (recommended) No / ..

1. CSR 대표 React 가 CSR(Client-Side-Rendering) 이다. CSR은 클라이언트(프론트)에서 화면을 구성한다. 2. 동작방식 1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다. 2. 서버는 빈 HTML 문서를 전달한다. 3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다. (이 때 유저는 빈 화면을 보게된다.) 4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다. 3. 장점 초기 로드만 완료되면 이후 렌더링이 빠르다. 서버에 요청할 것이 거의 없어 서버 부담이 적다. (data 필요할 때만 요청) 4. 단점 SEO에 좋지 않다. (초기 HTML 파일이 비어있기 때문에 봇이 데..

1. useEffect 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 컴포넌트가 mount(화면에 첫 렌더링),update(다시 렌더링),unmount(화면에서 사라질때) 됐을때, 특정 작업을 처리할 수 있다. 2.useEffect 사용 예제 1 import React, { useEffect, useState } from "react"; const App = () => { const [count, setCount] = useState(0); const [name, setName] = useState(""); const handleCountUpdate = () => { setCount(count + 1); }; //렌더링마다 매번 실행됨 - 렌더..