- 전체보기(125)
- React(26)
- JavaScript(15)
- nextjs(14)
- 리액트(10)
- node.js(7)
- ec2(6)
- CSS(6)
- html(4)
- typescript(4)
- S3(3)
- react router(3)
- redux(3)
- localstorage(2)
- CS(2)
- 정규식(2)
- cloudfront(2)
- regex(2)
- Koa(2)
- aws(2)
- 연산자(2)
- virtual DOM(2)
- Amplify(2)
- JSX(2)
- cors(2)
- web(2)
- mysql(2)
- NestJS(2)
- axios(2)
- redux-toolkit(2)
- XMLHTTPRequest(1)
- url(1)
- 인프라(1)
- jsconfig.json(1)
- react rendering(1)
- Switch/Case(1)
- createObjectURL(1)
- CodingTest(1)
- navigate(1)
- text editor library(1)
- render props(1)
- sessionStorage(1)
- server component(1)
- useEffect(1)
- call/apply/bind(1)
- ajax(1)
- full screen(1)
- client component(1)
- Flex(1)
- nested repository(1)
- tailwind(1)
- Life Ciycle(1)
- lite(1)
- Backend(1)
- 영단어(1)
- HOCs(1)
- query(1)
- outline(1)
- 자바스크립트(1)
- 공부방법(1)
- Nginx(1)
- JWT(1)
- mongodb(1)
- github action(1)
- question(1)
- github actions(1)
- async/await(1)
- open-color(1)
- key(1)
- Jotai(1)
- 암묵적 타입변환(1)
- State(1)
- useRef(1)
- 리팩토링(1)
- 개발이야기(1)
- hook(1)
- Context API(1)
- border(1)
- opacity(1)
- form(1)
- Fetch(1)
- spa(1)
- BE(1)
- Vercel(1)
- useLocation(1)
- withCredentials(1)
- Java(1)
- cookie(1)
- express(1)
- next.js(1)
- 변수(1)
- Props(1)
- useNavigate(1)
- event handling(1)
- closure(1)
- Quill(1)
- Web API(1)
- authentication(1)
- stateful logic sharing(1)
- prefetch(1)
- git(1)
- react-quill(1)
- React.memo(1)
- heroku(1)
- param(1)
- decodeURIComponent(1)
- back end(1)
- promise(1)
- Content-Type(1)
- link(1)
- npm(1)
- header(1)
- ReactDOM(1)
- CRA(1)
- ui design(1)
- next-auth(1)
- react router dom(1)
- browser(1)
- Cache(1)
- 컴포넌트(1)
- 정보(1)
Context API를 사용하여 목록 갱신 함수로 삭제,수정,등록 이후 새로고침없이 목록 업데이트
전체 코드는 다음 레포지터리에서 구경할 수 있습니다.https://github.com/BrightJun96/wanted-pre-onboarding-challenge-fe-27종혁님께서 진행하시는 11월 원티드 프리온보딩 사전과제(TO DO APP)를 진행했어요
로그인 인증 검사를 페이지 진입 이전에 검사하기
종혁님께서 주최하시는 11월 원티드 프리온보딩 사전과제(TO DO App)를 리팩토링하고 있습니다.모든 코드는 다음에서 확인하실 수 있어요.https://github.com/BrightJun96/wanted-pre-onboarding-challenge-fe-2
useEffect 콜백함수를 async 함수로 사용하면 안되는 이유가 뭘까요?
리액트를 사용하면서 useEffect는 거의 필수적으로 사용되고 비동기 함수를 함께 사용하게 되는데요. useEffect와 비동기 함수(async) 관계에 대해서 살펴보려고 합니다. useEffect 콜백함수를 async 함수로 사용하면 안되는 이유? useE
리액트 오픈 소스 분석하며 SPA(Single Page Application)직접 만들어보기, createRoot와 root.render()
SPA, 직접 만들어보자! 그런데..어디서부터 시작하지? React와 Vue 같은 SPA 라이브러리를 직접 구현해보려 합니다. 이를 통해 React의 내부 구조를 깊이 이해하고, 실제 개발에서 더 잘 활용할 수 있을 것 같다는 생각이 들었습니다. 하지만 막상 시작하
리액트 프로젝트 index.html에 왜 script 태그가 없을까요?🤔
리액트를 더 자세히 이해하고 싶어 리액트와 비슷하게 SPA를 만들어보려고 하고 있습니다.만들고자 하니 무엇부터 시작해야할지 감이 안 잡혔는데요.우선 CRA를 통해 생성한 리액트를 프로젝트를 살펴보면서 프로젝트가 시작되는 ENTRY POINT부터 찾아봤어요!SPA 동작방
Nextjs에서 SSR을 지원하지 않는 라이브러리를 불러오면 왜 에러가 발생할까?(힌트: pre-rendering과 브라우저 API)
nextjs 프로젝트에서 @toast-ui/react-editor라는 에디터를 사용하고 있습니다. 하지만 페이지에서 에디터 컴포넌트를 불러오면 다음과 같이 에러를 뱉어내고 있어요.왜 이런 현상이 발생할까요?아래는 에러 로그와 에디터 컴포넌트,컴포넌트를 불러오는 페이지
해당 페이지에 아직 안들어갔는데 왜 prefetch가 되죠?[nextjs]
프로젝트 메인 페이지에 들어갔을 때, 네트워크 탭을 보니 아직 접속하지 않은 여러 페이지들에 대한 prefetch 요청이 있는 것을 확인했다. 강력새로고침을 하고 캐시를 제거했음에도 위와 같이 요청이 간다.아래 페이지들에 대하여 요청이 가고 있다. 아래 페이지들은 아직
서버 컴포넌트(server component)와 클라이언트 컴포넌트(client component) 차이[nextjs 14 version]
Next.js 14의 App Router에서는 서버 컴포넌트가 도입되어 클라이언트 컴포넌트와 구분하여 사용할 수 있게 되었다. 그렇다면 서버 컴포넌트와 클라이언트 컴포넌트는 각각 무엇이며, 어떤 상황에서 사용하는 것이 적절할까? 이 글은 Next.js 14의 A
왜 react말고 nextjs를 사용해야하나?
요즘 대부분 서비스를 확인해보면 프론트엔드 프레임워크로 nextjs를 대부분 사용하고 있는 것을 확인할 수 있다. nextjs 이전에는 react를 사용했었는데 왜 nextjs가 부상하게 되었을까? react 리액트는 SPA(Single Page Applicatio
배포한 뒤에 왜 다른 경로에 페이지들이 안 나올까?(with nextjs,aws ec2,nginx)
nextjs 프로젝트를 ec2에 배포하였고 nginx를 웹 서버로 사용하였다.여러 페이지를 구성하였고 이미지 파일들을 프로젝트 최상단 public 디렉터리에 생성하여 관리하였다.로컬에서는 페이지들이 잘 나타났는데 배포 후 확인해보면 왠걸 메인페이지를 제외한 페이지는 다
nextjs 배포(aws ec2=>도메인 연결 => 자동 배포 설정)
신규 프로젝트를 구상중이고 개발 들어가기전에 서버 셋팅부터 하려고 한다.프론트는 nextjs로 구성하고 백엔드는 spring boot,DB는 postgresql을 사용할 예정이다.프론트부터 개발 환경 셋팅을 해보려한다.이전에 aws amplify를 통해 배포를 하였지만
github actions를 통한 리액트 프로젝트 자동배포(react ,s3 ,cloudfront)
회사에서 프론트엔드 프로젝트는 리액트나 nextjs 프로젝트로 진행하고 있는데 항상 백엔드 개발자분들이 자동배포 구성을 해주셨다. 백엔드 개발자분들이 aws 관련해서 rdb,ec2,s3 등 셋팅을 해주시고 계셔서 자연스럽게 그렇게 된 것 같다. 하지만 찾아보니
전역으로 ref 공유하는 방법(with Jotai and without useRef)
하나의 페이지가 여러 컴포넌트로 나누어져있을 때, 여러 컴포넌트 중 특정 컴포넌트를 참조해야하는 경우가 있다면 어떻게 해야할까?요구사항은 다음과 같다.특정 컴포넌트들이 특정 영역에서 position이 sticky 방식으로 움직이다가 특정 영역에 들어서면 sticky가
nextjs 파일,이미지 다운로드(S3 등 버킷에서 권한 허용없이 URL에 fetch로 접근하는법 feat.Cors 막기)
이미지 버킷 URL로부터 파일 다운로드 프로젝트 중 첨부파일을 다운로드하는 기능을 개발을 하고 있다. 프로젝트할 때마다 대부분 있는 기능이어서 보통 개발할 때, 이미지 버킷 URL에서 fetch를 해와서 a 태그 download 기능을 이용해 다운로드하게 한다.
URL에 있는 한글을 가져오면 깨지는 이유?
사진과 같이 url path에 있는 짤스라는 값을 가져오려고 하는데 왠걸 위 검정색으로 표기한 것처럼 짤스라는 한글이 요상한 문자로 인코딩되서 나타났다.콘솔로도 찍어보면%EC%A7%A4%EC%8A%A4위와 같이 나타난다.nextjs에서 위http://local
nextjs,next-auth 구글 로그인(google login) 에러 해결{next-auth5 버전에 따른 셋팅 설정)
현재 진행하고 있는 사이드 프로젝트에서 nextjs 이용해서 풀스택으로 개발하고 있다.next-auth를 활용하여 구글 소셜 로그인을 이용하고 있는데 공식문서를 참조하여 셋팅을 해보아도 계속해서 다음과 같이 에러가 발생하였다.app-index.js:35 ClientFe
aws amplify에서 환경변수 로드하는 법(with nextjs)
nextjs 프로젝트를 aws amplify에 배포를 했다.db 연결 정보를 .env 파일에서 로드하여 가져오고 있다.amplify는 깃헙 레포지터리를 기준으로 하여 빌드하여 배포하는데 env파일은 깃헙에 올리지 않았기 때문에 amplify 에서 환경변수를 따로 설정해
nextjs14 배포 에러 (aws amplify 배포)
이번에는 aws amplify를 통해 배포를 해보았다.이번에도 역시 서버 컴포넌트를 사용하는 페이지에서 에러가 발생했다.해당 서버 컴포넌트에서는 prisma에서 rds에 연결하여 데이터를 sql을 통해 가져오고 있다.클라우드 와치에서 에러를 확인해보니 다음과 같았다.주
nextjs14 배포 vercel 에러 [Application error: a server-side exception has occurred (see the server logs for more information).]
nextjs 프로젝트를 vercel을 통해 배포했다.nextjs 에서 풀스택으로 개발하여 따로 백엔드는 없고 prisma와 aws rds(mysql)을 활용하였다.특정 페이지는 prisma를 통해 sql문을 통해 db 데이터를 불러오는데 로컬에서는 해당 데이터가 잘 불
nextjs14 layout.tsx 파일에서는 state가 변경됬을 때, 리렌더링이 안된다?
app/layout.tsxnextjs14 규칙으로써 app 루트 내부 layout 파일은 필수적으로 존재해야하며 모든 페이지에서 나타나도록 설정되어있다.때문에 모든 페이지에 공통적으로 나타나야하거나 적용되야하는 부분이 있다면 위 layout.tsx에서 정의해주면 된다.