profile
프론트엔드 개발자를 목표로 계속해서 학습을 통해 성장하는 중입니다.

React-Redux + Hook을 활용해 Tab만들어보기

Codesandbox나 Codepen에서 React-Redux로 구현된 다양한 예제들이 많이 보인다. 하지만 각자만의 방식으로 작성되어있어 내 것으로 만들기에는 약간 시간이 걸렸었다. 그래서 이번에 나만의 방법으로 React-Redux와 Hook을 활용해 Tab을 구현

1일 전
·
0개의 댓글
post-thumbnail

개인 프로젝트 중 문제됬었던 React.StrictMode

개인 프로젝트 진행과정 중 하나인 Tetris를 구현하는 작업에 있었다. 테스트 과정 중 정말 골치 아픈 문제를 발생했다. 블록이 보드 밖으로 빠져나가거나, 중복된 Cell로 겹쳐져 에러를 발생하는 경우였다.블록이 점프를 하는 사례.블록의 한부분이 겹치거나 점프를 한

4일 전
·
0개의 댓글
post-thumbnail

DOM API를 활용하여 Y축 좌표 따오는 방법

혼자서 진행하는 프로젝트를 진행하면서 중첩된 Navbar를 작성해주는 중 어떻게 작성해야할지 막막하여 구글링과 다양한 시도를 하게되었다. 우선 처음 Navbar는 최상단에 위치하여야 하며, 두번째 Navbar는 css의 속성 position 의 옵션중 하나인 fixed

2021년 7월 24일
·
0개의 댓글
post-thumbnail

회원가입 중복처리 문제 해결 및 원인 해석(?)

이전에 회원가입을 할 경우 "이미 사용중인 이메일입니다." 라며 응답코드 400과 함께 Json으로 응답받는다.문제의 회원가입 로직을 다시 한번 보자이 코드에서 첫 회원가입을 시도하는 경우 다행이 정상적으로 진행된다.문제는 새로 작성된 이메일의 중복을 검사하는 로직이

2021년 7월 2일
·
0개의 댓글
post-thumbnail

JWT 인증 로그인 시스템 구현하기. B

ㅈㅅㅈ

2021년 6월 29일
·
0개의 댓글
post-thumbnail

로그인 시스템 구현하기. A

이번엔 지난 프로젝트에서 하지 못했던 아쉬운 부분들을 보강하고, 더 나은 개발자가 되기 위하여 여러 방법을 시도할 것이다. 이번엔 로그인 시스템을 구현하는데 완성은 못했지만 어떻게 실패했는지 작성하려고 한다.저번시간엔 https 프로토콜을 사용하기 위해 ssl인증까지

2021년 6월 29일
·
0개의 댓글
post-thumbnail

Not Secure 해결하기.

SSL인증서는 클라이언트와 서버간의 통신을 제 3자가 보증해주는 전자화된 문서이다.통신 내용이 공격자에게 노출되는 것을 막을 수 있음(암호화).클라이언트가 접속하려는 서버가 신뢰 할 수 있는 서버인지 판단할 수 있다.통신 내용의 악의적인 변경을 방지할 수 있다.(작성중

2021년 6월 25일
·
0개의 댓글
post-thumbnail

.gitignore 파일 생성

.gitignore는 프로젝트의 최상위 위치에 존재해야한다. '- 표준 Glob 패턴을 사용한다.슬래시(/)로 시작하면 하위 디렉터리에 적용되지 않는다.디렉토리는 슬래시(/)를 끝에 사용하는 것으로 표현한다.느낌표(!)로 시작하는 패턴의 파일은 무시하지 않는다.giti

2021년 6월 25일
·
0개의 댓글
post-thumbnail

NodeJS로 SSL 서버 생성하기

git에서 생성한 레포지토리에서 클론 해온뒤에 아래의 명령어로 package.json을 생성해준다.npm initexpress 종속성을 추가하기 위해 --save를 붙여 npm install express --save를 입력해준다. 그리고 nodemon이라는 코드를 수

2021년 6월 25일
·
0개의 댓글

뜬금없는 개인 프로젝트 시작 D-1

프로젝트 명G-Storage설명평소에 개인프로젝트 필요성에 고민하다가 게임을 너무 좋아한 나머지 어느날 확 스쳐가는 단순하면서도 혼자하기 재밌을 만한 React 기반 웹 게임 서비스를 제작할 예정.(차후 내용을 언젠간 추가할 예정)

2021년 6월 24일
·
0개의 댓글
post-thumbnail

Git 이슈 카드 양식 및 작성

Git을 활용한 협업에서 이슈카드는 정말로 중요하다 생각한다. 언제나 그렇듯 문자나 말로 서로 상황을 공유하는 것도 한계가 있으니 말이다. 그래서 이슈카드를 생성하여 기능 개발 목표나 문제를 나눌 수 있는 습관을 들여야한다. 마크다운도 배울 겸 이슈카드를 작성해보자.

2021년 6월 24일
·
0개의 댓글
post-thumbnail

코드스테이츠에서의 첫번째 팀 프로젝트

코드스테이츠의 Pre코스 HA테스트를 지나 정신이 나가 버릴 같은 난이도와 양에도 포기하지 않고 버텨왔고, 중간 여러 차례 검증 테스트를 치뤘었다. 어떻게든 달려들어 그 모든 테스트를 통과하고 드디어 배운 내용들을 기반으로 랜덤으로 편성된 4인 팀에서 프로젝트를 진행하

2021년 6월 22일
·
0개의 댓글

자바스크립트 비동기 프로그래밍 -2-

JavaScript의 비동기 처리방식 콜백(Callback) ES6에서 Promise가 표준화 되기 전까지 비동기를 처리하는 방식이었다. 프로미스

2021년 6월 15일
·
0개의 댓글

Github Git 사용법

Git는 버전 관리 시스템(VCS, Version Control System)중 가장 유명한 프로그램으로, Github는 이러한 git의 데이터를 저장하는 서버를 말한다. Github > ### GitHub 사용을 위해 필요한 기본 지식 Git 저장소(reposi

2021년 6월 15일
·
0개의 댓글
post-thumbnail

코드스테이츠를 수료하며... feat.IM26기

커리어 전환의 시작 가장 먼저 찾아본 곳은 국비지원이었다. 실력있는 강사들과 몇 개월만으로 개발자가 된다는게 정말 매력적인 제안이다. 그러나 다양한 후기들과 커리큘럼 과정을 자세히 보니 내가 정말 따라갈 지 꾸준히 공부할 수 있을지 믿지 못했었다. 공부하던 습관이 제

2021년 6월 8일
·
0개의 댓글
post-thumbnail

React-Hooks를 사용하여 검색(Search Bar) 구현하기 -2-

이번에는 검색해서 특정 단어를 입력할때 검색되는 컴포넌트를 제작하려합니다.

2021년 6월 7일
·
0개의 댓글
post-thumbnail

React-Hooks를 사용하여 필터 버튼 구현하기 -1-

React-Hooks를 활용하여 버튼 클릭시 데이터를 필터링 해주는 웹 페이지를 구현하려고합니다. 작은 미니 프로젝트로 그래픽카드 정보를 담는 페이지입니다. React App 생성하기 npx create-react-app filter-app으로 리액트 앱을 생성해

2021년 6월 7일
·
0개의 댓글
post-thumbnail

React-Hooks를 사용하여 Modal 구현해보기(작성중)

안녕하세요. 강의들은 것을 참고하여 별도의 라이브러리 없이 React-hooks로 Modal을 구현해보려고 합니다. React 환경 구성하기 가장 먼저 react 앱을 생성해줍니다. npx creaete-react-app modal-comp 생성되었으면 필요 없

2021년 5월 29일
·
0개의 댓글
post-thumbnail

CSS vh/vw를 알아보자

아이템 박스나 컨테이너 박스의 레이아웃을 지정할때 늘 생각없이 몇%, vw/vh를 써가며 조절하고했다. 컴포넌트를 생성하고, 여러 tag를 만들때마다 레이아웃 비율을 지정해줄때 %, vw/vh를 제대로 된 이해 없이 썼다가 여기저기 삐져나오기도 했고, 주 컨텐츠의 박스

2021년 5월 10일
·
0개의 댓글
post-thumbnail

CSS Flex box 사용해보기

flexbox 기본개념 메모

2021년 3월 27일
·
0개의 댓글