본문 바로가기
728x90
반응형

분류 전체보기235

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.
KODA 로그인 페이지 구현 👆 로그인 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 로그인 페이지(FE)를 기록합니다 로그인 (FE) 편 구현한 기능 로그인창에서 아이디 Input 3글자 && 비밀번호 input 3글자 이상 입력시 버튼 활성화 활성화 된 로그인 버튼 누를 시 서버와 통신 후 로컬 스토리지에 토큰 발급, 메인페이지로 넘어감 👆 구현한 코드 * 서베이툴은 한 명의 관리자만 원하셨으므로 굳이 회원가입 기능은 만들지 않았음! * id, password 값을 state 하나로 객체에 담아서 관리했고 이 값들을 body에 담아보냈다 후에 response 값에서 adminToken이 있을 경우 token을 로컬스토리지에 저장했다. 버튼을 form 태그 안에 넣었.. 2022. 10. 21.
KODA Project 회고록 및 위코드 수료 회고록 KODA Project 란? 프론트엔드 깃허브 [https://github.com/kolonDT/202209_wecode_fr] GitHub - kolonDT/202209_wecode_fr Contribute to kolonDT/202209_wecode_fr development by creating an account on GitHub. github.com 백엔드 깃허브 [https://github.com/kolonDT/202209_wecode_en] GitHub - kolonDT/202209_wecode_en Contribute to kolonDT/202209_wecode_en development by creating an account on GitHub. github.com 👆 깃허브 링크 개발기.. 2022. 10. 20.
Promise, async-await 비동기 -> 특정 코드의 실행이 완료되기 전까지 기다리지 않고 다음 코드를 먼저 수행하는 특성 동기 -> 작업이 끝나야 비로소 다음 예정된 작업을 할 수 있음 Promise 자바스크립트의 비동기 처리를 위해 사용되는 객체 콜백 함수의 error, success 의 처리를 보다 간단하게 하기 위해 생김 promise의 3가지 상태 Pending(비동기 처리 로직이 아직 완료 되지 않은 상태) Fulfilled(처리가 완료되어 프로미스가 결과값을 반환한 상태) Rejected(처리가 실패하거나 오류가 발생한 상태) 실패시 처리 결과값을 catch()로 받을 수 있음 async / await async function f() { return Promise.resolve(1); } f().then(alert);.. 2022. 9. 15.
TIL customHook 모달창 https://0119eunji.tistory.com/43 관심사의 분리 / Custom Hook 개발을 하면서 마주하는 고민들 코드를 작성했는데 기획, 디자인이 변경되고 요청 사항들이 추가된다. 코드를 수정해야하는데 기존의 코드가 복잡해서 이해하고 수정하기 어렵다 지금까지 만 0119eunji.tistory.com 👆 customHook 관련 포스팅 customHook : 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있는 사용자 hook 👆 라고 리액트 공식문서엔 쓰여있다 여러번 보아도 이해가 되지 않던 custom Hook! 모달창을 만들어보며 소 뒷걸음치다 생쥐 잡은 격으로 나도 모르게 쓰고 있었다 ☺️ 바로 모달창 바깥을 눌렀을 때 모달창이 닫히는 기능을 구현하면서 써보았는데 useOnclickO.. 2022. 9. 14.
실무에서 바로 쓰는 clean code 실무에서의 클린 코드란? => 유지 보수 시간의 단축 => 짧은 코드 x , 원하는 로직을 빨리 찾을 수 있는 코드 흐름 파악이 어렵고, 도메인 맥락이 표현이 안 되어, 동료에게 물어봐야 알 수 있는 코드는 개발할 때 병목이 되고 유지 보수할 때 시간이 오래 걸리며 시간이 지나면 기능을 추가하기 어렵다. 유저입장에서도 쾌적하지 못하다 시간 = 자원 = 돈 남이 짠 코드에 기능을 붙이는 일을 개발자의 90%가 함 하나의 목적인 코드가 흩뿌려져 있으면 나중에 기능을 추가할 때 스크롤을 위아래로 움직이면서 찾아야 함 하나의 함수가 여러가지 일을 하는 것도 좋지 않음 (코드를 세부적으로 읽어야하고 코드 추가 및 삭제 시간도 걸림) -> 하나의 기능, 하나의 함수! (이때 변수명을 바꾸어 더욱 직관적으로 알기 쉽.. 2022. 9. 12.
728x90
반응형

티스토리툴바