BLEX
로그인 회원가입
최신순 인기순 댓글순
[SPA Project] 개발노트

[SPA Project] 개발노트

2020. 01. 30.
0분

React.js의 정수 SPA를 다루기 위해 시작한 프로젝트 1.30 사용할 page 구성 완료 이미지 파일 수집 Intro page 디자인 1.31 about 페이지 디자인 사용할 컴포넌트 Title, Typography 제작 각 페이지 Link to 연결 2.1 각 페이지 연결 완료 album 페이지 완료 2.2 intro 페이지 제외 올 리셋 about 페이지 완료 2.4 …

kimyoungjo
kimyoungjo
0
한 달 안에 취업하기 #6

한 달 안에 취업하기 #6

2020. 01. 30.
2분

오늘 할 일 알고리즘 1문제 SPA 프로젝트 프로그래밍 관련 유튜브 리뷰해보기 알고리즘 1문제 오늘의 문제 : 구명보트 Github SPA 프로젝트 [SPA Project] 개발노트 프로그래밍 관련 유튜브 리뷰해보기 오늘의 영상 : VELOPERT 최초 공개?! React계의 문익점이 말하는 프론트엔드 개발 React의 아버지 Velopert님의 인터뷰 영상이 있길래 가져와봤다. 전체적으로 React의 장점을 나열해 놓은 …

kimyoungjo
kimyoungjo
0
한 달 안에 취업하기 #5

한 달 안에 취업하기 #5

2020. 01. 28.
1분

오늘 할 일 알고리즘 1문제 velopert님의 React Router 강의 수강 SPA 프로젝트 최대한 진행해보기 알고리즘 1문제 오늘의 문제 : 가장 큰 수 Programmers GitHub 필자는 매일 알고리즘을 1문제씩 풀고있는 스터디에 참여중이다. 그리고 얼마전부터 level 1에서 level 2로 올렸는데 하루하루 문제푸는게 쉽지가 않다. 오늘은 스터디를 시작한 후 첫 실패작이다. 테스트 케이스에만 …

kimyoungjo
kimyoungjo
0
Javascript Map 정복하기

Javascript Map 정복하기

2020. 01. 28.
2분

Map 볼 때 마다 이해가 안되는 녀석이다. 이론적으로는 이해가 되는데 응용이 조금이라도 첨가되면 바로 뇌정지가 와버린다. 이번 기회에 응용까지 싹다 끝내버리려고 한다. map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다. 기본적인 사용법 const arr = [0, 1, 2, 3]; let squaredElement …

kimyoungjo
kimyoungjo
0
한 달 안에 취업하기 #4

한 달 안에 취업하기 #4

2020. 01. 27.
6분

오늘 할 일 알고리즘 1문제 Javascript Array 메소드 공부 SPA 프로젝트 주제 선정 프로젝트 최대한 진행해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub Math.floor(x) : x보다 작은 정수중 최대값을 return Javascript Array 메소드 공부 Javascript Array Method 정리 SPA 프로젝트 주제 선정 고민을 많이 했는데 …

kimyoungjo
kimyoungjo
0
Javscript Array Method 정리

Javscript Array Method 정리

2020. 01. 27.
2분

arr.pop() : 배열 맨 뒷부분의 값을 삭제 arr.push() : 배열 뒷부분에 값을 삽입 arr.shift() : 배열 앞부분의 값 삭제 arr.unshift() : 배열 앞부분에 값 삽입 arr.splice(index, 제거할 요소 개수, 변경된 영역에 추가할 요소) : 배열의 특정 위치에 요소를 주가하거나 삭제 arr.slice(start index, end index) : start index 부터 end index …

kimyoungjo
kimyoungjo
0
한 달 안에 취업하기 #3

한 달 안에 취업하기 #3

2020. 01. 26.
6분

오늘 할 일 알고리즘 1문제 (programmers level 2로) Node.js 공부 최대한 해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub array.some 개념을 사용하여 풀었다. Node.js 공부 최대한 해보기 이건 진짜 변명이 아니라 지금은 Node.js 할 떄가 아닌것 같습니다.. 그 어제 TodoList 프론트를 짜는데 생각대로 척척 짜지지가 …

kimyoungjo
kimyoungjo
0
한 달 안에 취업하기 #2

한 달 안에 취업하기 #2

2020. 01. 24.
6분

오늘 할 일 알고리즘 1문제 위솝 이력서 작성해보기 토이프로젝트 프론트 완성 Node.js 공부 시작. Mongo DB, Oracle, MySQL등의 차이점 알아보기 코딩관련 유튜브 영상 리뷰해보기 알고리즘 1문제 이거 외않되?; 정확한 답을 원했나보다 return `김서방은 ${answer}에 있다`로 마지막줄을 수정해줬더니 성공했다. 내일부터는 난이도를 좀 올려볼까 고민중이다. Github 이력서 작성해보기 이력서를 작성해보려 다시 홈페이지를 …

kimyoungjo
kimyoungjo
0
한 달 안에 취업하기 #1

한 달 안에 취업하기 #1

2020. 01. 24.
3분

오늘 할 일 알고리즘 2문제 1문제 졸업 작품 GitHub 정리 about me 포트폴리오 완성하기. 새 토이 프로젝트 구상(구체적으로) 기업 1개 자료조사 알고리즘 수박수박수 문제 숨도 안쉬고 15초만에 풀고 만족스러워하며 실행을 눌렀음 answer.join('') 을 이용하여 배열을 합쳐 해결. Github 졸업작품 GitHub 정리 Github about me 포트폴리오 완성하기. https://yoyounn18.github.io/react-profile-final/ 새 토이 프로젝트 …

kimyoungjo
kimyoungjo
0
React로 Hello World 출력

React로 Hello World 출력

2020. 01. 05.
2분

Hello, React React로 Hello World를 출력해보자. 기본적인 설치 방법과 사용 방법을 기록하기 위해서 작성한다. How to install npm install -g create-react-app How to make application create-react-app hello-world 위 명령어를 이용하여 애플리케이션을 생성할 수 있다. 생성된 디렉터리 아래 src 내부의 모든 파일을 지운 뒤 index.js와 index.css를 생성하고 index.js에 아래와 같은 내용을 …

baealex
baealex
0
Docker 명령어 정리

Docker 명령어 정리

2020. 01. 03.
7분

Docker 아직 도커를 잘 모르는 상태로 작성하였음을 감안해주시길 바라며 내용은 주기적으로 바뀌거나 추가됩니다. 또한 Ubuntu 20.04 LTS 기준으로 작성되었음을 안내드립니다. *설치를 제외한 모든 명령어를 동일하게 사용할 수 있습니다. 설치 sudo apt-get install docker docker-compose Docker 설치 후 아무런 작업이 안해줬다면 권한의 문제로 sudo를 지속적으로 붙여 사용해야 하는데 이 경우 아래 …

baealex
baealex
0
BLEX 2020 개발노트

BLEX 2020 개발노트

2020. 01. 01.
17분

December 2020. 12. 24. 다크모드가 시스템 옵션을 따라가도록 변경 2020. 12. 20. 몇가지 디자인 수정 (링크, 다크모드 색조 조절) 2020. 12. 16. 포스트 설정에 포스트 수정 버튼 추가 포스트 내부에 포스트 삭제 버튼 추가 내부 링크(같은 도메인)의 로딩 속도 향상 2020. 12. 14. 댓글 사용자 드래그 앤 드롭시 사용자 태그 …

baealex
baealex
0
신입 개발자 자기소개서 준비하기

신입 개발자 자기소개서 준비하기

2019. 12. 10.
2분

이 글은 자소서와 자기소개서 작성에 대한 개인적인 경험과 공부를 바탕으로 작성된 글입니다. 자소서 작성 시 첨삭을 받아가며 자소서가 소설에 불과하다는 생각을 하게 된 저자는 자기소개서 작성에 대해 책에서 배운 내용을 공유하면서 의지, 능력, 꾸준함 등의 요소를 강조하며 이를 토대로 자기소개서 작성을 조언합니다.

baealex
baealex
0
Pythonic이란 무엇인가?

Pythonic이란 무엇인가?

2019. 12. 10.
4분

Pythonic은 파이썬스러운 코드를 의미하며, 가독성을 높이기 위한 가이드라인인 PEP 8을 따르는 것이 중요하다. 코드 구문을 한 줄에 하나씩 작성하고, private 속성은 _(언더스코어)를 사용하여 표현하며, early return 방식을 사용하는 등의 규칙이 있다. 또한 lambda와 filter, map 활용, with open을 사용하는 등의 방식도 추천된다. PEP 8을 준수하는지 확인하기 위해 pep8을 사용할 수 있다.

baealex
baealex
0
Rust-Lang의 특징 Hello, Rust!

Rust-Lang의 특징 Hello, Rust!

2019. 12. 10.
7분

Rust가 추구하는 것은 C, C++보다 빠르거나 동등한 속도를 내면서도 Python 혹은 JavaScript 처럼 안정적인 것이었고 현재 러스트는 빠르고 안정적인 언어로 높이 평가 받고있다. 러스트는 어떻게 이러한 목표를 달성할 수 있었을까? 메모리 관리언매니지드 언어컴파일 언어에 속하는 C 혹은 C++는 프로그래머가 메모리를 제어한다. 프로그래머의 역량에 따라 속도 및 안정성에 많은 영향을 받는다. …

baealex
baealex
0

[React.js] Hover 버튼 만들기

2019. 11. 22.
2분

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) { …

kimyoungjo
kimyoungjo
0

[11.6] React 공부

2019. 11. 06.
7분

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> ); } 위 코드는 …

kimyoungjo
kimyoungjo
0

[11.5] React 공부

2019. 11. 05.
7분

기초 폼 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는 위 코드와 같이 변수에도 …

kimyoungjo
kimyoungjo
0

[11.1]Javascript 공부

2019. 11. 01.
8분

IIFE js에서 자주사용되는 코딩패턴 중 하나이다. JS에서의 함수 function foo() { alert("Hello World"); } foo(); IIFE를 적용하지 않은 코드 foo 라는 함수를 1-3째 줄에 선언하고 5번째 줄에서 foo();를 통해 호출해내는 일반 개발자들이라면 자연스럽게 떠올릴 만한함수의 선언과 호출 과정이다. var msg = "Hello World"; var foo = function () { alert(msg); …

kimyoungjo
kimyoungjo
0
[알고리즘] 하노이의 탑 Javascript로 풀어보기

[알고리즘] 하노이의 탑 Javascript로 풀어보기

2019. 10. 31.
1분

하노이의 탑 풀어보았다. 소스코드 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'); } } …

kimyoungjo
kimyoungjo
0

JavaScript ES201n 공부

2019. 10. 29.
5분

글에 앞서 본 글은 ZeroCho님의 ECMAScript 텍스트 강좌를 인용했습니다. ES6 JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다. const, let var을 대체하는 이 두 가지는 함수의 스코프를 따르는것이 아닌 블록 스코프를 따른다. var은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, …

kimyoungjo
kimyoungjo
0
프로그래밍 언어란?

프로그래밍 언어란?

2019. 10. 23.
8분

각 프로그래밍 언어의 특징 및 패러다임에 대해서 분석하고 컴파일러와 인터프리터의 작동 원리 및 차이점을 아직 제대로 모르는 것 같아서 다시 복습하고자 한다. 내용들은 대부분 프로그래밍 언어 개념(원유헌), 클린 아키텍처(로버트 C. 마틴)에서 참고하였다. 프로그래밍 언어먼저 프로그래밍이란 무엇이고 프로그래밍 언어란 무엇일까? 필자가 생각하기에 프로그래밍이란 특수한 목적을 달성하기 위한 동작이 모여진 프로그램을 만드는 …

baealex
baealex
0

[10.18]JavaScript Design pattern(모듈, 싱글톤, 생성자)

2019. 10. 18.
2분

모듈 패턴 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 …

kimyoungjo
kimyoungjo
0

[10.18]JavaScript 정리

2019. 10. 18.
5분

실행 컨텍스트 자바스크립트가 왜 그렇게 동작하는지를 알려줌 처음 코드를 생성하는 순간 전역컨텍스트가 생김 함수 컨텍스트는 함수를 호출할 때마다 하나씩 생긴다. 컨택스트 생성 시 컨텍스트 안에 변수객체 scope chain, this 가 생성된다. 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 …

kimyoungjo
kimyoungjo
0
32
33
34
35
36
BLEX

© 2026 BLEX. All rights reserved.