웹 페이지의 이용약관 페이지라던지, 개인정보 처리방침 페이지를 만들 때가 있다. 사실 이건 React로 페이지를 만들 수고까지 할 필요는 없지만, 내 지식 선에서는 일단 React로 시작한 프로젝트였기에, html 파일을 react에서 읽어올 수 있는 방법을 찾아야

npm run build 명령어를 실행하여 빌드 된 파일을 가지고 s3에 배포까지 성공했는데, 예상치 못한 문제가 발생했다.너무 작나라하게 까발려진 느낌이라 너무 이상했는데, 다행히 이런 구조를 감출 수 있는 방법을 찾게 되었다.코드 난독화 ( Code Obfuscat

웹 페이지를 구현하던 중, 소셜 로그인을 구현하게 되었다.기존에 부트캠프에서 구현했던 카카오 소셜 로그인을 되짚어 보며 이번 프로젝트에도 적용을 했는데, 당시에는 Nav에 있던 로그인 버튼을 바로 외부 로그인 링크로 연결하여 로그인을 구현했었다. 하지만, 로그인 버튼은

프로젝트를 하면서 CRUD를 구현하던 중에,수정사항을 입력하면서 서버 쪽에 요청을 PUT 메소드로 보냈었다.그렇게 순조롭게 진행되고 있었는데, 어느 순간 서버 개발자분과 얘기를 나누다가 자신은 클라이언트 쪽에서 PATCH로 요청을 보내고 있다는 줄 알았다고 얘기를 하셨

로직을 구현하다 보면 서버에서 데이터를 받아올 일이 많다.서버에서 받아 온 데이터를 setState에 저장하고, 하위 컴포넌트에 props로 뿌려 화면으로 노출시킨다.데이터 구조에 따라 Object 안에 Array가 있고, 이런 구조들에 method를 맞춰야 하는데,처

사이트를 구축하다 보면 로그인 등 인증된 사용자만이 접근할 수 있는 페이지 등이 필요한 경우가 많다.이를 구현하기 위해서는 몇 가지의 방법이 있는데, 나는 그 중에서 usenavigate()를 이용하여 URL로의 직접 접근을 차단하였다.물론, fetch를 이용하여 데이

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/12903

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/12928

링크 : https://programmers.co.kr/learn/courses/30/lessons/68644(최초 생각) reduce함수를 사용, 모든 경우의 수를 다 뽑아본 다음에 중복된 숫자를 제거 후 오름차순으로 정렬 ⇒ reduce함수는 배열 항목의

지금까지 프로젝트를 한다고 하면 클론코딩을 하거나(위코드에서의 1,2차 프로젝트), 아니면 짜여진 기획에 숟가락을 얹는다거나(메디스트림에서의 기업협업) 하는 방식이었는데, 이번에 따로 시작하게 된 프로젝트는, 정말 기획부터 배포까지, A to Z를 하려고 하니 이게

나는 비전공자이다 언어학을 전공하던 나는 프로그래밍은 커녕 컴퓨팅 사고와는 전혀 접점도 없었고, 생각해 본 적도 없었다. 그런데 내가 개발 공부를 하게 된 이유라면 정말 사소한 계기였다. 개인 홈페이지나 블로그 등을 돌아다니다가 사용성에 있어서 불편함을 느끼거나 하는 등의 이슈가 있었고, 그렇다면 내가 한번 만들어보면 어떨까? 하는 생각이 시작점이었다...

많이 늦었다. 2차 프로젝트가 5월 9일부터 20일까지였는데, 많이 늦었다. 2차 프로젝트도 무난무난 했다. 처음으로 서버에서 데이터를 받아도 봤고(그게 끝이었지만), 그래도 1차 때 보다는 좀 더 사이트 다운 사이트라는 생각도 들었다. 2차 프로젝트에서 클론한 홈페이지는 펫플래닛(https://petplanet.co/)이라는 사이트인데, 잠시 여행을 ...

여태껏 줄곧 css와 sass를 써 왔던 입장에서 Styled-components는 앵간히 귀찮은 존재로 다가왔다. 간편하게 클래스 이름만 지정해서 바로 import시키면 될 것을 굳이 이렇게 번거롭게 해야 하나 싶었는데, 그래도 꾸역꾸역 적용 시키면서 하다보니 코드를 몇 줄 줄이는데 그치는 것이 아니라, component라는 이름에 맞게 상태 변수 또한...

2차 프로젝트 클론코딩에는 비교적 자유로웠다. 이번에 하게 된 홈페이지는 펫 플래닛이라는 강아지를 맡길 수 있는 사람을 매칭시켜주는 프로그램이다. 그 안에 펫시터의 위치를 표시하는 지도가 있다. 카카오 디벨로퍼를 들어가 보았는데, 생각보다 잘 되어 있어서 놀랐다.

적어도 나는 체크박스 없는 장바구니는 본 적이 없는 것 같다. 적어도 앱이 아닌 웹 페이지에서는. 그만큼 체크박스는 장바구니에서 필수적인 요소 중 하나이다. 상품을 장바구니에 담고 처음 장바구니에 들어가 보면 모든 상품의 체크박스에는 체크가 되어 있다. 그래야 별도의 클릭 없이 바로 결제창으로 넘어갈 수 있기 때문이다. 따라서 초기값은 true로 설정하고...

2주간의 첫번째 프로젝트가 막을 내렸다. 처음으로 프로젝트 팀이 발표나고 자리를 옮기고, 팀별로 점심을 먹고 역할 분담을 한 것이 바로 어제(같다고 하면 거짓말이지만) 같지는 않고 그래도 오래 지나지 않은 것 같은데 벌써 2주라는 시간이 훌쩍 지나가 버렸다. 1주차에 목요일까지는 회원가입 페이지와 장바구니 페이지 레이아웃은 모두 구현을 완료 하였고, ...

로직을 짜기 전에 먼저 구글링을 해봤을 때는 딱히 나오는 것이 없었고, 혼자 생각해본 로직으로는 이메일 중복확인 버튼 onClick 속성에 카운트를 걸어서 useState로 카운트를 업데이트 시킨 다음 그 카운트가 1 이상일 경우 회원가입 버튼이 가능하도록 하면 어떨까 생각했었는데, 그거 하나 하자고 state함수를 늘리기에는 효율적이지 않은 것 같아 주변...

프론트에선 쓸 일 없을 줄 알았던 것 중 하나가 정규표현식이었는데, 아니었다. 나는 이번 프로젝트에서 회원가입할 때 정규표현식을 사용하여 사용자가 형식에 맞지 않는 input값을 입력하면 빨간 글씨를 노출시켜 제대로 입력할 수 있도록 하였다. 간단한 정규표현식을 쓸 때도 한 반나절 정도 걸렸는데, 이유는 include함수를 사용해서였다. includes...

내가 맡은 장바구니에는 총 4개의 컴포넌트가 있다. 최 상위 컴포넌트 Cart / 상품들 list를 담을 CartList / 상품 개별 컴포넌트 CartProduct 그리고 CartList와 같은 선상에 있는 계산서 컴포넌트, CartPayment 컴포넌트가 있다. 체크박스는 최 하위 컴포넌트인 CartProduct 컴포넌트에 하나씩 있고, 그 상위 ...

걱정 반 설렘 반이었던 프로젝트가 시작되었다. 내가 맡은 페이지는 회원가입과 장바구니 페이지이다. 회원가입 페이지는 비교적 빠르게 완료되었다. UI적으로 간단해서 빠르게 뻐대를 세우고 CSS작업을 마쳤다. 회원가입 구현 중에서 그나마 시간이 걸렸다고 한다면 유효성