profile
빢쭈운
post-thumbnail

나만의 React | NextJs BoilerPlate 만들기

갑자기 이게 생각났다.. 떼잉,,,, Data 취합 정리,,,근데 저말이 맞는것도 같다npx create-react-app npx create-next-app 쓰면 진짜 편하기는 하다.좋은거 왜안씀? 편하잖아??불필요한 모듈들이 깔려 들어온다..현재 나의 사수님 @jj

2022년 4월 21일
·
0개의 댓글
post-thumbnail

React Hooks useEffect

class형 컴포넌트로 AppHeader를 제작도중 리액트 lifeCycle을 잘몰라 hooks로 변경했던 기억이 났다.당시 코드는 아래와 같았었다.방금 리액트 라이프사이클 글을 작성해나가며 나의 무지함을 알았기에 이 글을 작성한다.당연하게도 저코드는 내가 원하는Rou

2022년 4월 18일
·
0개의 댓글
post-thumbnail

React LifeCycle

클래스형 라이프사이클을 먼저 잘 이해하고 hooks > useEffect 이해도를 높이기 위해 정리한다. React 16버젼 라이프사이클 Mounting Updating Unmounting Error Handling Mounting > Mounting 은 DO

2022년 4월 18일
·
0개의 댓글
post-thumbnail

Context API 사용

React로 개발하다보면 모든 컴포넌트에 어떤 state를 Props로 넘기고 싶은 상황이 분명 발생하게 된다.근데 전역상태관리 없이 그냥 무지성으로부모에서 자식 컴포넌트에게 전달 방식으로한다면...?벌써 아찔하다.그렇다 전역상태 api다.기본적으로 React 에서 제

2022년 3월 23일
·
0개의 댓글
post-thumbnail

Apollo 를 사용해보자 with React.js

우선 이글은 D2개발 블로그 내용에 의거하여 작성중입니다.일단 이 글을 작성하기 위해 간단한 CRUD가 가능한 TODO APP백엔드 개발과 프론트 개발을 마쳐놓은 상태입니다.궁금하면 눌러줘요 제발!진짜 뭘까 아폴로가?내가 아는 아폴로는이거였는데 말야사실 GraphQL

2022년 3월 22일
·
0개의 댓글
post-thumbnail

Mobx + MVVM PATTERN with Next.js

왜 이걸 갑자기 사용하나? 왜냐면... > 그렇다 나 취업함 (일단박수) 내가 자주 사용하던 스택과 디자인 패턴은 아래와 같다 > - React Hooks Components Redux-Thunk PC pattern 회사에서 사용하는 스택과 디자인 패턴은 >

2022년 3월 17일
·
2개의 댓글
post-thumbnail

Redux [0] 이해하기

리덕스를 사용해본 경험은 여러번 있지만?매번 사용할때마다 헷갈리는걸 잡기위해 시리즈 작성해보려한다..@벨로퍼트 님의 강의를 참조하며 작성할것임따라서 3파트로 나누게 될것미들웨어 이해하기비동기 작업을 처리하기 위한 미들웨어 사용해보기Rest API 기반 메모 앱 제작

2022년 2월 10일
·
0개의 댓글
post-thumbnail

Nomflix 리팩토링 - SSR 적용[2]

Next.js를 이용하자 getServerSideProps는 언제 실행 되는가 getServerSideProps는 서버측에만 실행되고 브라우저에서는 실행되지 않는다. 해당 페이지를 직접요청하면 getServerSideProps 요청시 실행되고 반환되는 props

2022년 2월 8일
·
0개의 댓글
post-thumbnail

Nomflix 리팩토링 - 기존 코드 분석 [1]

놈플릭스 프로젝트는Presenter / Container 디자인 패턴으로 구성되어있다.그중 Container가 class형 컴포넌트로 코드가 작성되어있었고 이를 Hooks로 변경해줄것이다.componentDidMount 를 useEffect로state 를 useStat

2022년 2월 8일
·
0개의 댓글
post-thumbnail

Nomflix 리팩토링 - 요구사항 분석[0]

넷플릭스를 클론코딩해봤었다React, JavaScript, Class 형태로 만들어서 AWS s3에 배포했었는데요거를 React, TypeScript, Hooks + Next.js를 적용시켜보자!그후 Vercel로 배포해보려한다.TMDB 를 이용하여 넷플릭스 클론코딩

2022년 2월 5일
·
0개의 댓글
post-thumbnail

NUMBLE 챌린지 [다른색깔 찾기 게임]

고마워요 넘블님덜 저에게 이런 공짜로 공부해볼 기회주셔서!!!링크를 클론코딩하여라React 사용Function Component 사용TypeScript 사용서버 배포까지 구현Context, Redux, Mobx, Recoil 등 상태관리 도구를 사용하지 않을 것조건은

2022년 2월 5일
·
0개의 댓글
post-thumbnail

HeartRing [6] 가비아 + Route 53 연결 해보기

방금 도메인을 하나 샀다http://heart-ring.shop쇼핑몰 프로젝트에 걸맞는 도메인인것같다. shop이라니.. 너무 미친듯이 빛나는데 가격도 550원 낄낄이걸 S3 정적 웹호스팅과 Route 53을 연결해보자S3 > 버킷 > 권한 > 버킷정책 > 정

2022년 2월 3일
·
0개의 댓글
post-thumbnail

HeartRing [5] AWS S3에 자동배포를 해보자

하트링 프로젝트를 Vercel이 아닌 Github Action 을 이용하여 자동배포화를 진행해보려한다.현재 하트링 프로젝트는 팀원의 레포를 내가 fork해와서 새로운 기능이나 버그를 고칠때 새로운 브랜치를 생성해 수정 혹은 기능구현후 Pull Request를 날려 마

2022년 2월 3일
·
0개의 댓글
post-thumbnail

HeartRing [4] react-helmet

HTML은 Head와 Body 로 이루어져있다.Head안에서 title태그가 존재하는데주소창 위에 홈페이지 타이틀이 보이는가??HTML의 <title> 태그는 HTML 문서의 제목을 정의하는 데 사용된다.이를 리엑트에서 쉽게 사용하게 해주는 react-helmet

2022년 1월 30일
·
1개의 댓글
post-thumbnail

NextJs 정적페이지 배포 [S3 + IAM + Github Action][3]

내 포스팅을 보고있는 개발자분들이라면,,, AWS 계정 하나씩은 있을것이라고 생각해보고 회원가입 가이드는 사뿐히 무시하겠음본인은 한번 연습해보고 한거기에 이미 버킷 및 설정이 다 되어있습니다.버킷만들기를 눌러줍니다버킷이름을 지어야하는데본인은 bbakjun-github-

2022년 1월 26일
·
0개의 댓글
post-thumbnail

NextJs 정적페이지 배포 [S3 + IAM + Github Action][2]

자자 빌드를 해봅시다. 지난 포스팅에서 정적페이지 전용 빌드 스크립트로 바꿨고 next.config.js 설정도 변경하였으니 아마 아래와 같은 결과물이 나올것이라고 예상이 됩니다.내가 원하는것은 main 브랜치에 푸쉬할때 GitHub Action 에서 자동으로 빌드하여

2022년 1월 26일
·
0개의 댓글
post-thumbnail

TypeScript 기본 타입

TS의 타입은 12가지 Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never > 아래에서 쓰이는 를 사용하여 자바스크립트에 타입을 정의하는 방식을 타입표기(Type Annotaion)이라

2022년 1월 25일
·
0개의 댓글
post-thumbnail

TypeScript는 뭘까..?

타입스크립트는 자바스크립트에 타입을 부여한 언어다.

2022년 1월 25일
·
0개의 댓글
post-thumbnail

HeartRing [3] 개발환경세팅 ESLINT + PRETTIER

HeartRing 프로젝트에도 협업을 위해 코드 규칙 통일화를 위한 코드포매팅 라이브러리 Eslint & Prettier 설정을 해보려함Eslint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포매팅 기능을 말함. Js문법중 에러가 있는 곳에 표시를 달아

2022년 1월 25일
·
0개의 댓글