오늘 할 일 알고리즘 1문제 새 토이 프로젝트 React Hooks 공부 알고리즘 1문제 오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/12948 Github 새 토이 프로젝트 구상 일전에 구상했던 1일 1알고리즘의 인증 사이트를 제작해보려한다. 투두리스트의 발전된 버전이라고 생각하면 될 것 같은데, 사진까지 하려고하면 DB가 필요할것같아서 일단 사진은 재껴두고 기능적인 구현만 해보려고한다. 상태관리가 핵심이 될 것 …
오늘 할 일 알고리즘 1문제 About me 프로젝트 시작 프로그래밍 관련 유튜브 영상 리뷰(이번엔 꼭 한다) 알고리즘 1문제 오늘의 문제 : https://github.com/yoyounn18/1Day1Algorithm/blob/master/%EC%B2%B4%EC%9C%A1%EB%B3%B5 Github About me 프로젝트 시작 / 끝 사이트 주소 : https://yoyounn18.github.io/kimyoungjo/ 후술할 사정에 의해서 어제 글을 못쓰고 오늘 하루에 About me 프로젝트를 끝냈다. SPA로 잘 구성해서 완성하고 만족스러운 …
알고리즘 1문제 오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/12918 GitHub SPA 프로젝트 끝내기 https://yoyounn18.github.io/SPA-Toy-Project/ 끝냈다. 우여곡절 끝에 어쨌든 끝냈다. 끝내고 나서 든 생각은 빨리 다음 프로젝트를 시작하고 싶다는 생각이 들었다. 어떤 프로젝트를 할 지 많은 아이디어가 떠올라서 그것들을 정리하는 시간을 가져보려한다. (추가) 방금 완성된 프로젝트를 24인치 모니터가 달린 pc에서 확인을 했는데 배경 no …
오늘 할 일 알고리즘 1문제 SPA 프로젝트 최대한 진행해보기 알고리즘 1문제 오늘의 문제 : https://app.codesignal.com/arcade/intro/level-2/xzKiBHjhoinnpdh6m Github map() 을 활용할 기회일것 같아서 최대한 활용해보려 했는데 map안에서 index를 늘릴 방법을 모르겠어서 포기하고 for문을 돌려버렸다. SPA 프로젝트 최대한 진행해보기 개발노트 마음에 100퍼센트 든다고는 못하겠지만 현재의 내가 낼 수 있는 최고의 산출물인것은 확실할듯 하다. …
오늘 할 일 알고리즘 1문제 SPA 프로젝트 진행 프로그래밍 관련 영상 리뷰해보기 알고리즘 1문제 오늘의 문제: https://app.codesignal.com/arcade/intro 친구의 추천으로 위의 사이트에 들어가 intro 1,2,3번 문제를 풀었다. 앞으로 이곳의 문제를 좀 풀어보려고 한다. 문제도 영어로 되어있어서 녹슬어있는 영어실력에 기름칠도 할 겸. 원어라 문제수도 많고 종류도 다양해보여서 기존의 Programmers는 잠시 중단할 예정이다. …
오늘 할 일 알고리즘 1문제 SPA 프로젝트 진행 프로그래밍 관련 영상 리뷰해보기 알고리즘 1문제 오늘의 문제 : 문자열 내 p와 y의 개수 솔루션 : GitHub SPA 프로젝트 진행 SPA Project 개발 노트 프로그래밍 관련 영상 리뷰해보기 오늘의 영상 : 테크보이 워니 - 개발자의 포트폴리오 - 취업을 위한 포트폴리오 완벽 가이드 …
![[SPA Project] 개발노트](/resources/media/images/title/yoyounn18/2020/1/30/21E0Ak.jpg)
React.js의 정수 SPA를 다루기 위해 시작한 프로젝트 1.30 사용할 page 구성 완료 이미지 파일 수집 Intro page 디자인 1.31 about 페이지 디자인 사용할 컴포넌트 Title, Typography 제작 각 페이지 Link to 연결 2.1 각 페이지 연결 완료 album 페이지 완료 2.2 intro 페이지 제외 올 리셋 about 페이지 완료 2.4 …
오늘 할 일 알고리즘 1문제 SPA 프로젝트 프로그래밍 관련 유튜브 리뷰해보기 알고리즘 1문제 오늘의 문제 : 구명보트 Github SPA 프로젝트 [SPA Project] 개발노트 프로그래밍 관련 유튜브 리뷰해보기 오늘의 영상 : VELOPERT 최초 공개?! React계의 문익점이 말하는 프론트엔드 개발 React의 아버지 Velopert님의 인터뷰 영상이 있길래 가져와봤다. 전체적으로 React의 장점을 나열해 놓은 …
오늘 할 일 알고리즘 1문제 velopert님의 React Router 강의 수강 SPA 프로젝트 최대한 진행해보기 알고리즘 1문제 오늘의 문제 : 가장 큰 수 Programmers GitHub 필자는 매일 알고리즘을 1문제씩 풀고있는 스터디에 참여중이다. 그리고 얼마전부터 level 1에서 level 2로 올렸는데 하루하루 문제푸는게 쉽지가 않다. 오늘은 스터디를 시작한 후 첫 실패작이다. 테스트 케이스에만 …
Map 볼 때 마다 이해가 안되는 녀석이다. 이론적으로는 이해가 되는데 응용이 조금이라도 첨가되면 바로 뇌정지가 와버린다. 이번 기회에 응용까지 싹다 끝내버리려고 한다. map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다. 기본적인 사용법 const arr = [0, 1, 2, 3]; let squaredElement …
오늘 할 일 알고리즘 1문제 Javascript Array 메소드 공부 SPA 프로젝트 주제 선정 프로젝트 최대한 진행해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub Math.floor(x) : x보다 작은 정수중 최대값을 return Javascript Array 메소드 공부 Javascript Array Method 정리 SPA 프로젝트 주제 선정 고민을 많이 했는데 …
arr.pop() : 배열 맨 뒷부분의 값을 삭제 arr.push() : 배열 뒷부분에 값을 삽입 arr.shift() : 배열 앞부분의 값 삭제 arr.unshift() : 배열 앞부분에 값 삽입 arr.splice(index, 제거할 요소 개수, 변경된 영역에 추가할 요소) : 배열의 특정 위치에 요소를 주가하거나 삭제 arr.slice(start index, end index) : start index 부터 end index …
오늘 할 일 알고리즘 1문제 (programmers level 2로) Node.js 공부 최대한 해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub array.some 개념을 사용하여 풀었다. Node.js 공부 최대한 해보기 이건 진짜 변명이 아니라 지금은 Node.js 할 떄가 아닌것 같습니다.. 그 어제 TodoList 프론트를 짜는데 생각대로 척척 짜지지가 …
오늘 할 일 알고리즘 1문제 위솝 이력서 작성해보기 토이프로젝트 프론트 완성 Node.js 공부 시작. Mongo DB, Oracle, MySQL등의 차이점 알아보기 코딩관련 유튜브 영상 리뷰해보기 알고리즘 1문제 이거 외않되?; 정확한 답을 원했나보다 return `김서방은 ${answer}에 있다`로 마지막줄을 수정해줬더니 성공했다. 내일부터는 난이도를 좀 올려볼까 고민중이다. Github 이력서 작성해보기 이력서를 작성해보려 다시 홈페이지를 …
오늘 할 일 알고리즘 2문제 1문제 졸업 작품 GitHub 정리 about me 포트폴리오 완성하기. 새 토이 프로젝트 구상(구체적으로) 기업 1개 자료조사 알고리즘 수박수박수 문제 숨도 안쉬고 15초만에 풀고 만족스러워하며 실행을 눌렀음 answer.join('') 을 이용하여 배열을 합쳐 해결. Github 졸업작품 GitHub 정리 Github about me 포트폴리오 완성하기. https://yoyounn18.github.io/react-profile-final/ 새 토이 프로젝트 …
미친놈 필자는 현재 병에 걸려있다. 일정이 없어진 1.14 부터 현재까지 아무것도 안하고 시간만 보냈다. 무슨 병인지는 몰라도 심각한 병인것은 틀림없다. "그게 뭐 어때서" 라고 생각하는 사람들도 있지만, 필자는 현재 20대에서 가장 중요한 시기 (필자는 2020.02 졸업 예정자)라는 것을 고한다. 미친게 분명하다. 무엇이든 바꿔야만 한다. 무엇을 해야할까를 고민을 해본 결과 뻔하게도 …
React.js를 이용하여 About Me 페이지를 만들던 중 state의 개념과 onMouseOver을 이용하여 Hover(마우스 오버시 반응하는 것) 버튼을 만들어보았다. import React, { Component } from 'react'; import './HoverBtn.css' class HoverBtn extends Component { constructor(props) { super(props); this.handleMouseHover = this.handleMouseHover.bind(this); this.state = { isHovering: false, }; } handleMouseHover() { this.setState(this.toggleHoverState); } toggleHoverState(state) { …
Component 추출하기 function Comment(props) { return ( <div className = "Comment"> <div className = "UserInfo"> <img className = "Avatar" src = {props.author.avatarUrl} alt = {props.author.name} /> <div className = "UserInfo-name"> {props.author.name} </div> </div> <div className = "Comment-text"> {props.text} </div> <div className = "Comment-date"> {formatDate(props.date)} </div> </div> ); } 위 코드는 …
기초 폼 React.DOM.render { <h1>Hello, World!</h1> document.getElementById('root') } render는 react의 정수이다. 위에 코드를 살펴보면 H1태그를 작성하였고 root이라는 ID를 가진 element를 불러왔다. react는 h1태그와 같은 html을 rootID를 가진 element에 render해준다. 따라서 화면엔 Hello World가 출력된다. 그리고 이러한 문법을 JSX라고 한다. JSX const element = <h1>Hello World!</h1> JSX는 위 코드와 같이 변수에도 …
IIFE js에서 자주사용되는 코딩패턴 중 하나이다. JS에서의 함수 function foo() { alert("Hello World"); } foo(); IIFE를 적용하지 않은 코드 foo 라는 함수를 1-3째 줄에 선언하고 5번째 줄에서 foo();를 통해 호출해내는 일반 개발자들이라면 자연스럽게 떠올릴 만한함수의 선언과 호출 과정이다. var msg = "Hello World"; var foo = function () { alert(msg); …
![[알고리즘] 하노이의 탑 Javascript로 풀어보기](/resources/media/images/title/2019/10/31/yoyounn18/12_12_59.jpg)
하노이의 탑 풀어보았다. 소스코드 function Hanoi(plate, departure, dropBy, destination) { if (plate === 1) { document.getElementById('responseDiv').innerHTML = `${plate}을 ${departure}에서 ${destination}로 이동` } else if (plate > 1) { Hanoi(plate - 1, 'A', 'B', 'C'); document.getElementById('responseDiv').innerHTML = `${plate - 1}을 ${departure}에서 ${destination}로 이동` Hanoi(plate - 1, 'C', 'A', 'B'); } } …
글에 앞서 본 글은 ZeroCho님의 ECMAScript 텍스트 강좌를 인용했습니다. ES6 JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다. const, let var을 대체하는 이 두 가지는 함수의 스코프를 따르는것이 아닌 블록 스코프를 따른다. var은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, …
![[팀 프로젝트] 개요](/resources/media/images/title/2019/10/24/yoyounn18/15_13_11.jpg)
개요 주제 : 알고리즘 기반 교육 웹서비스 ~~주요 컨텐츠 실시간 통신을 이용한 1:1 알고리즘 대전 mmr, 랭크 시스템 구현 웹 코드 실행기 제공 수준별 맞춤 튜토리얼 제공~~ 기술스택 React Flask Socket.io Spring REST API MySQL Docker 역할분담 김영조 UX/UI(React) 김다현 RESTfulAPI(Spring) 데이터 모델링(MySQL) 배진오 실시간 통신 구현(Socket.io) 코드 실행 서버 …
모듈 패턴 var newScope = (function () { 구문 }) (); 함수를 선언하자마자 실행시키는 패턴. IIFE라고도 함. 싱글턴 패턴 var singleton = (function() { var instance; var a = 'hello'; function initiate() { return { a: a, b: function() { alert(a); } }; } return { getInstance: function() { if …
