fullfish의 개발자 도전기

동기 생명과학쪽 공부하는 친구가 척추세포의 데이터를 보내주면 정렬해줄 수 있냐고 부탁받음 친구가 원하는것 척추 이미지 1처럼 척추를 찍은 사진이 있는데 빛나는 세포들의 좌표를 마우스로 찍어서 데이터를 저장함 그런데 항상 같은 위치, 같은 크기로 찍은게 아니라서 사진의 크기와 회전각도가 제각각이므로 맞춰주면 좋겠다. 해야할 것 1. csv확장자의 파일을 읽어서 해당 데이터를 배열화 함 2. V를 원점으로 삼기위해 모든 점을 평행이동 함 3. V-D의 거리를 구하고 이것을 이용해서 회전한 각도인 Θ를 구함 4. Θ를 이용해서 모든 데이터를 회전 시킴 5. 크기가 다른 여러 사진의 데이터를 중첩시키기위해서 L과 D의 위치를 고정시키고 그 비율에 맞춰서 데이터 이동 6. csv형식으로 내보내기 완성 예시 (처음..

오늘의 키포인트 재귀함수 나의 이해 재귀함수 : 재귀적인 함수. 함수가 본인을 호출 문법 및 중요 base case : 문제를 더 이상 못 쪼개는 재귀의 기초 head : 배열의 첫 요소 tail : head제외 반목분이 많이 중첩됐을때 효과적 ex) num까지 숫자의 합 function sum(num){ if(num === 0) return 0 return num + sum(num-1) }

오늘의 키포인트 Class 나의 이해 Class : js를 객체지향적으로 쓰기 위한 방법 문법 및 중요 절차 지향 프로그래밍 : 일반적으로 생각하는거 ex)편의점 문을 연다. 들어 간다. 물건을 집는다. 점원한테 준다. 돈을 지불한다..... 객체 지향 프로그래밍 : 점원한테는 계산과 같은 속성 및 메소드 존재, 소비자한테는 구매 같은 속성 및 메소드 존재 인간이 세상을 보는것과 유사. OOP(Object-oriented programming) 객체 지향 프로그래밍 : 데이터와 기능을 한 곳에 묶어 처리 속성, 메소드가 하나의 객체에 포함, 이는 js의 내장 타입인 object와 다르게 class로 부름 객체 지향은 메모리를 많이 먹으나 보기 편하고 재사용성이 좋음 메소드 호출때는 화살표 함수 안쓴다 l..

목~금 이틀에 걸쳐서 그동안 배운걸 종합한 웹페이지 관련 과제와 js문제 풀이 시험을 봤다 html, 리액트 이런 부분보다는 상대적으로 js에 자신이 있었는데 js는 시간이 남았지만 리액트는 다 통과하지 못했다 시험자체는 통과했지만 리액트쪽을 더 봐야겠다

오늘의 키포인트 리액트- Props, State 나의 이해 Props : 외부로부터 전달받은 값 // 바꾸기 힘든 값 State : 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 // 내부에서 변화하는 값 변경되면 리렌더링됨 상위 컴포넌트도 문법 및 중요 ex) Props : 이름, 성별 // 바꾸기 힘든거 State : 나이, 주소, 취업 여부, 결혼 여부 Props 특징 컴포넌트의 속성(property) 의미 상위 컴포넌트로부터 전달받은 값 // 컴포넌트가 최초 렌더링 될때 화면에 초기값으로 사용가능 객체 형태 // 어떤 타입 값도 받기 위해서 읽기 전용 // 변경 막기 위해 React에서 속성 및 값 할당 // text라는 속성 선언 1번 방법 텍스트 할당해보기 // 이건 변수나 문자열 둘..

오늘의 키포인트 리액트 - SPA 나의 이해 SPA(Single Page Application) : 서버로부터 페이지의 모든 부분을 받아오지 않고 중복되는 부분을 제외한 필요한 부분만 받아 페이지 업데이트 문법 및 중요 spa 장점 : 사용자와의 interaction에 빠르게 , 서버 과부하 줄어듦, 전체 페이지 렌더링 안해도되서 더 나은 유저 경험 단점 : js파일이 큼 = 첫 로딩이 긺 (html파일은 거의 비었고 대부분 코드가 js에 들어있음), 검색 엔진 최적화(SEO)가 좋지 않음 (html에 정보가 별로 없어서 검색 로봇이 동작못함) wireframe : 디자인 전에 선을 이용해 윤곽선 잡는것 라우팅(Routing) : 주소에 따라 다른 화면 보이는거 React SPA에서 라우팅을 위해 Rea..

오늘의 키포인트 리액트 나의 이해 리액트 : html에 쓸 내용들을 js에 씀, 전체 새로고침을 안해서 페이지 넘어갈때 빠름 문법 및 중요 리액트 : 프론트 앤드 개발을 위한 js 라이브러리 / 선언형, 컴포넌트 기반, 범용성 JSX( Js XMl ) : React에서 ui를 구성할떄 사용하는 문법//js를 확장한 문법 Babel : JSX를 브라우저가 바로 실행 못시켜서 브라우저가 이해하게끔 js로 컴파일해주는거 컴포넌트 : 하나의 기능구현을 위해 여러 종류의 코드를 묶어놓은것 컴포넌트 기반으로 작성시 서로간의 의존성이 없어서 독립적, 재사용 가능 JSX문법 여러 엘리먼트를 작성하고자하면 하나의 태그로 감싸줘야함 // return하려면 하나의 태그로 감싸줘야함 , 배열도 리턴 됨 CSS class 속성..

오늘의 키포인트 고차함수 나의 이해 고차 함수 : 함수를 인자로 받는 함수 문법 및 중요 js에서 함수는 특별 취급 = 일급 객체 변수에 할당 가능 다른 함수의 인자로 전달 다른 함수의 결과로서 리턴 고차 함수 : 함수를 인자로 받는 함수 // 커리 함수도 포함함 커리 함수 : 함수를 리턴하는 함수 콜백 함수 : 다른 함수의 인자로 전달되는 함수 map // 하나의 데이터를 다른곳으로 맵핑할때 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)됨// 새로운 배열로 let result = arr.map(function(num){ return num * 2 }); function getDoubledElements(arr) { // TODO: 여기에 코드를 작성합니다. let result =..

오늘의 키포인트 DOM 나의 이해 DOM : Ddcument Object Moder // js에서 html의 내용을 조작하기 위한것 문법 및 중요 // js파일 적용 js파일은 등장과 함께 실행 태그를 넣는 두가지 방법 1. 안쪽에 삽입 이건 뒤에 나오는건 무시됨 2. 태그가 끝나기 전에 삽입 이게 나음 // js를 읽는 동안 html의 해석이 정지되므로 다 html이 끝나고 js 읽는게 좋음 (태그를 body끝나기 직전에 넣으면 parsing(html)파일을 다 읽고 해서 버벅이는게 없는데 head에 넣으면 html읽다가 script에 들어가서 렌더링이 멈춰서 버벅임 (멈출 때 fetching과 execution을 하면서 멈춤 body끝에 넣는게 좋음)) console.dir : DOM 구조를 조회할땐..

오늘의 키포인트 구조분해(Spread, Rest) 나의 이해 Spread : 배열을 배열아닌 요소로 펼침 Rest : 매개변수로 쓰을 떄, 배열아닌걸 배열형태로 받음 문법 및 중요 Spread function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 ----------------------- const name= { name: '만선' }; const attribute{ name: '만선', attribute: '좋음' }; const color= { name: '살색', attribute: '좋음', color: '살색' }; console.log(name); console.log(attribut..