본문 바로가기
728x90
반응형

분류 전체보기231

2022.12.11, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 캣보우 프로젝트 이번주 목표 : 배포 후 애드 센스 신청하기 달성 : 😂 ✔️ http, https 이슈 공부 느낀점 1. 배포된 서버와 함께 통신을 했는데 http, https 에러가 터졌다 🥲 https 에서 http API로 통신을 요청하니 생긴 일이었다 보안상의 이유로 브라우저에서 Block 한 것 😂 백엔드 팀원분이 에러를 고치실 동안 이를 프론트에서도 해결해보려고 여러가지 시도를 해봤는데 1) json 파일에 들어가 proxy : "baseAPI" 설정 -> 실패 2) 헤더에 Referrer-Policy: unsafe-url 설정 -> 실패 참고 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Head.. 2022. 12. 11.
2022.12.04, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 캣보우 프로젝트 이번주 목표 : 통신 완료 달성 : 🙆‍♀️ ✔️ response 로 URL 받아서 자동저장하는 로직 구현 ✔️ 추가로 로딩 스피너, 업로드 / 삭제시 모달 구현 느낀점 1. 모달을 최대한 재사용성있게 만들어보려고 했는데 결국 재사용은 2개가 한계라 느꼈다. UI만 따로 빼서 쓸 수 있게끔 만들고 싶었는데 버튼과 모달 모두 재활용해서 쓰려다보니 로직이 강하게 얽혔다. 이번엔 내가 하고 싶은 대로 만들었지만, 모달 재사용에 대해서는 공부가 필요하다 느꼈는데 2차 프로젝트시 팀원이 쓴 코드가 뒤늦게 생각나 이를 다시 공부해 볼 예정이다. 2. 간단한 페이지인데 괜히 확장성 생각한다고 폴더구조를 복잡하게 가져간 거 같다. 이 때문에 props를 .. 2022. 12. 4.
원티드 프리온보딩 사전과제 todos.js 리팩토링 👆 구현한 auth 페이지 움짤 구현한 기능 TodoList 불러오기 Todo 추가 / 삭제 / 수정 / 수정 취소 기능 👇 src 폴더 구조 todo 폴더 안에 Todos.js - TodoList.js - Todo.js 로 나누었던 컴포넌트 중에서 리팩토링하며 TodoList.js 를 지웠다. 늘 List를 이용해 컴포넌트를 한번 더 나누었었는데 단순 props만 넘겨주는 역할은 굳이 필요없다는 동기의 피드백이 있었기 때문! 그리고 가독성을 위해 todos.js의 axios만 따로 분리해 API 폴더를 만들어 안에 TodoAxios.js 를 넣어주었다 👇 리팩토링한 코드 상위 컴포넌트 const Todos = () => { // todo 추가할 때 쓰이는 Input value state const [t.. 2022. 10. 24.
원티드 프리온보딩 사전과제 auth.js 리팩토링 👆 구현한 auth 페이지 움짤 const [info, setInfo] = useState({ userId: '', userPassword: '', }); const onChangeinfo = e => { const { name, value } = e.target; setInfo({ ...info, [name]: value }); }; const passed = info.userId.includes('@') && info.userPassword.length >= 8; const toAuth = async e => { const sign = isSelectSignUp ? API.SignUp : API.SignIn; const config = { email: info.userId, password: info.. 2022. 10. 24.
js 숫자를 배열에 담아 합계 구하기 n 을 배열에 하나씩 배열에 담아서 reduce로 합계를 구했다! 👇 나의 답 function solution(n) { var str = String(n) var mapfn = (arg) => Number(arg); var newArr = Array.from(str, mapfn); var answer = newArr.reduce( (a, b) => a + b, 0) return answer; } n을 스트링으로 바꾸고 num으로 바꾸어주는 mapfn를 만들었다 newArr에 Array.from 을 써서 str를 각각 배열에 담고 num 으로 바꾸었고 배열의 합계를 구하기 위해 reduce를 화살표식으로 썼음! 그리고 다른 사람의 풀이를 보다 아주 간단한 식을 찾았다 👇 function solution(n.. 2022. 10. 24.
math.Floor, ~~ 차이 프로그래머스 입문 단계 중 아이스 아메리카노 문제를 푸는 도중 신기한 걸 알아냈다 바라만 봐도 넘나 간편하고 흐뭇한 문제 👍 👇 나는 요렇게 풀었는데 function solution(money) { var purse = Math.floor(money/5500) var count = money%5500 var answer = [purse, count]; return answer; } 다른 사람들 풀이를 보면서 신기한 걸 찾았다 function solution(money) { return [~~(money/5500),money%5500]; } ~~ Math.floor 를 쓰지 않고도 ~~ 요렇게 간단하게 표현할 수 있었음! 둘의 차이가 뭔지 스택오버플로우에서 검색해본 결과 ~~-6.8 == -6 // doe.. 2022. 10. 24.
KODA 통계 페이지 구현 👆 통계 페이지 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 통계 페이지(FE)를 기록합니다 통계 페이지 (FE) 편 구현한 기능 recharts 라이브러리 사용, 통계 시각화 통계 페이지는 외부 라이브러리를 접해보고자 처음부터 꼭 구현하고 싶었던 페이지였는데 팀 계획에서 shouldHave 리스트에 있어 조금 늦게 작업에 들어갔다. 다행히 기획-계획 했던 프로젝트 첫주에 라이브러리를 살펴 놓고 노션에 정리했기 때문에 기능 구현은 빠르게 할 수 있었다 👇 정리한 해당 노션 : https://www.notion.so/wecode/6b7e7099535a4438ae2d60aab21488c9 가장 많이 쓰이는 nivo와 recharts 중 고민이.. 2022. 10. 21.
KODA 링크 페이지 구현 👆 링크 페이지 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 링크 페이지(FE)를 기록합니다 링크 페이지 (FE) 편 구현한 기능 메인 페이지에서 받았던 url 보여주기, 복사 기능 👆 구현한 코드 (mainPage, linkPage) 링크 페이지는 따로 fetch를 쓰지 않고 메인 페이지에서 받은 id 값과 해당 url 데이터 값을 그대로 가져와 썼다. 이는 최대한 fetch를 줄이자는 백엔드 팀원의 의견이었는데 한 페이지당 무조건 데이터 받아오는 fetch가 있어야한다는 생각이 박혀있었던 터라 매우 흥미롭게 들렸고 회의 후 이런 코드가 나왔다. Link to 로 state 에 담아 객체로 Link 와 해당 타이틀(name)을 그대로 넘.. 2022. 10. 21.
KODA 메인 페이지 구현 👆 메인 페이지 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 메인 페이지(FE)를 기록합니다 메인 페이지 (FE) 편 구현한 기능 서베이 불러오기 (해당하는 서베이 없을 시 안내 문구), 페이지 네이션 서베이 서치 기능, 필터 서베이 삭제(데이터 베이스에서 삭제), 강제 종료 기능 맡았던 페이지 중에 가장 공들였던 메인 페이지! 페이지네이션을 처음으로 구현했는데 관련된 다양한 라이브러리가 있다는 점도 알게 되어 여러모로 뿌듯한 작업이었다. 모든 페이지와 연결되는 메인 페이지인만큼 기획 단계부터 유저 플로우를 최대한 신경써서 기획 - 작업했는데 이렇듯 기획자님과 계속 소통하며 팀원과 1차 2차 초안을 만들어 작업했다. 기획 후엔 와이어 프레.. 2022. 10. 21.
728x90
반응형

티스토리툴바