본문 바로가기
반응형

분류 전체보기202

React로 Slider 구현 & React에서 Canvas로 곡선 그래프 그리기 (+globalCompositeOperation ) Jenny와 airbnb사이트 프로젝트를 진행하며 요금부분의 그래프를 구현한 내용입니다. 무엇보다도 canvas와 slider구현을 위한 엄청난 수학적 계산을 해주신 Jenny에게 이글을 바칩니다.. 🌹 폴더 구조는 이렇게 되어있는데 아래 Slider 과 ChartCanvas로 나눠서 구성했다. 📈 Slider Slider에는 총 2개의 상태가 있다. const { priceData, priceDispatch } = useContext(SearchContext); const [avg, setAvg] = useState((min + max) / 2); const [min, max] = [0, 1000000]; priceData : slider 가 가리키는 min,max 값 / useContext로 관리 a.. 2021. 6. 2.
[백준] 파이썬 / 그리디 2839_설탕배달 📌2839 설탕 배달 https://www.acmicpc.net/problem/2839 2839번: 설탕 배달 상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그 www.acmicpc.net 처음 딱 든 생각은 3인경우 / 5인경우 / 3과 5 둘 다를 쓰는 경우 를 다 세서 가장 작은 경우의 수를 빼야 한다고 생각했다. 내 풀이 (오답) n=int(input) def three(num): if num%3 ==0: return num//3 else: return -1 def five(num): if num%5 ==0: return num//5 else: return -1 d.. 2021. 6. 1.
웹사이트 최적화 오래되고 기능이 많은 서비스를 대상으로 해야 효과가 있다. Network 자원들이 많이 쓰이는지 서버에 갔다오는 시간이 얼마나 오래 걸렸는지 DOM content element의 로딩 시점을 알아냄 Performance -병목지점 ( 어느 부분에서 시간이 많이 소요되었는지)를 보며 성능을 측정했었다. LightHouse 로딩 속도에 대한 진단 성능 개선의 척도가 된다 FCP : FMP: 웹페이지의 성능을 결정하는 주요 요소 * 첫페이지가 느린 것 FCP, FMP * 반응이 느린 것 * 끊기는 것 (애니메이션) 최적화 작업 진행 방법 진단 -> 개선 -> 테스트 -> 진단 *참고) 프레임워크는 바닐라보다 더 많은 절차로 프로그래밍이 동작된다 . 😮 ?웹최적화에 대해서 아시는거 잇어요 Dom로딩을 빠르게 하.. 2021. 6. 1.
[TypeScript] 타입스크립트란? 기본 공부하기 타입스크립트 자바스크립트를 기반으로 하면서 변수 값의 데이터 타입을 지정하여 예측 가능한 코딩이 가능하게 만든다. JavaScript : dynamic typing 동적 타이핑 언어 TypeScript : 정적타이핑이 목적 => 코드의 타입을 명시적으로 선언하여 컴파일 중 에러가 나지 않고 개발 중에 에러를 발생시키는 장점이 있다. - 객체 지향적인 프로그래밍 - 컴파일 타임의 오류를 잡을 수 있음 - 컴파일 되어야 함 타입스크립트는 자바스크립트 환경에서 실행될 수 없음 브라우저가 타입스크립트를 이해하지 못하기 때문에 자바스크립트로 컴파일 되어야 한다. 타입 추론 타입스크립트에서는 타입표기가 없는 경우 타입을 추론하여 a가 자동으로 숫자가 된다 밑에서 숫자인 a에 문자를 할당하려하니 오류메세지가 뜬다. .. 2021. 5. 30.
[SidePJ] airdnd 1부 - 프로젝트 시작 ! 이번주 프로젝트는 3주간 😎Jenny 🧐Dong 과 함께하게 되었다 첫날은 역시 BE,FE 와 컨벤션과 git repository관리 등을 정하고 Jenny와는 Component구조를 짰다. ⬇️ Component구조 설계도 https://app.diagrams.net/#G13ElfK5XcWA_TtAZ3Bh6-GEVlhodBu7gh Flowchart Maker & Online Diagram Software Flowchart Maker and Online Diagram Software diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram softwar.. 2021. 5. 28.
객체지향의 의미 - 객체지향의 사실과 오해 강의 객체지향의 사실과 오해 저자이신 조영호 님의 기술 세션에 참석하여 배운것들을 정리하려고 합니다. 객체지향을 어떻게 바라봐야 할까? 시스템은 객체는 책임을 수행하기 위한 방법을 선택하여 객체에 할당한다. 메세지 : 시스템을 처리하는 방법중 하나, 객체가 전달받는다 메서드 : 수신된 메세지를 받아서 객체가 처리하는 방법 객체지향을 짜기 위해선 어떤 사고방향으로 가져가야 할까? class의 이름을 먼저 결정하고 있는지, 책임(어떤일을 해야하고있는지)을 먼저 결정하고 있는지 책임 * 객체지향은 runtime에 어떤 작업을 수행할지 * 이 책임에 따른 정보를 누가 가장 많이 가지고 있는지에 따라서 결정 * 메서드를 먼저 결정 -> 필요한 상태를 가져와서 반영하도록 📌 코드레벨에서의 객체지향 객체 행동 + 상태 책.. 2021. 5. 26.
[React 오류] validateDOMNesting(...): <tr> cannot appear as a child of <div> -React 에서 Table 사용 시 오류 validateDOMNesting(...): cannot appear as a child of 오류는 calendar를 만들때 생겼는데 의 자식으로 이 올 수 없다 는 경고였다. 📌 상황 const DayViewTR = () => { return ( 일 월 화 수 목 금 토 ); }; const DayViewTRDiv = styled.tr` `; const DayViewTD = styled.td` `; 보면 table 선언 없이 과 태그를 사용했다. 찾아보니 React의 jsx 문법에서는 table, tbody, thead 를 반드시 써서 table을 사용해야 한다고 한다. td, tr : tbody로 감쌈 th : thead 로 감쌈 실제 React에서 올바르게 table을 사용하려면 위처럼 thead.. 2021. 5. 25.
[React 경고 메세지] Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export React프로젝트 진행 중 svg를 jsx 파일로 만들어 사용했는데, svg 파일을 exprot 할 때 잘못내보내었다는 경고 메세지가 나왔다. 콘솔 창에 "모듈 기본 import/no-anonymous-default-export로 내보내기 전에 변수에 개체를 할당합니다" 라는 오류가 있다. 변경 전 export default () => ( ); 변경 후 const SearchButtonSvg = () => ( ); export default SearchButtonSvg; 변수에 먼저 할당하고 export해준다. 참고링크 https://dev.to/tmenyhart/comment/195kp 2021. 5. 21.
[side PJ ] ⚾️야구게임 - 문제상황과 해결과정 리액트에서의 상태관리는 중요하다는 것을 느끼게 하는 프로젝트였는데, 이번에는 상태관리의 문제로 착각한 경우로 짝궁인 오톰과 함께 3시간을 삽질했다.&0& 📌문제발생 1 팀을 선택했을 때 선택한 팀의 정보를 setState하여 하위 다른 component에서 사용하려 했으나 데이터가 렌더링 되지 않음 StartScreen안의 handleClickTeam const handleClickTeam = async () => { let teamId; if (type === 'home') { teamId = game.homeTeamId; } else { teamId = game.awayTeamId; } try { const { data } = await axios.get( `http://13.209.109.186/b.. 2021. 5. 20.
반응형

티스토리툴바