신입 개발자 자기소개서 준비하기2019. 12. 10.2분이 글은 자소서와 자기소개서 작성에 대한 개인적인 경험과 공부를 바탕으로 작성된 글입니다. 자소서 작성 시 첨삭을 받아가며 자소서가 소설에 불과하다는 생각을 하게 된 저자는 자기소개서 작성에 대해 책에서 배운 내용을 공유하면서 의지, 능력, 꾸준함 등의 요소를 강조하며 이를 토대로 자기소개서 작성을 조언합니다.
Pythonic이란 무엇인가?2019. 12. 10.4분Pythonic은 파이썬스러운 코드를 의미하며, 가독성을 높이기 위한 가이드라인인 PEP 8을 따르는 것이 중요하다. 코드 구문을 한 줄에 하나씩 작성하고, private 속성은 _(언더스코어)를 사용하여 표현하며, early return 방식을 사용하는 등의 규칙이 있다. 또한 lambda와 filter, map 활용, with open을 사용하는 등의 방식도 추천된다. PEP 8을 준수하는지 확인하기 위해 pep8을 사용할 수 있다.
Rust-Lang의 특징 Hello, Rust!2019. 12. 10.7분Rust가 추구하는 것은 C, C++보다 빠르거나 동등한 속도를 내면서도 Python 혹은 JavaScript 처럼 안정적인 것이었고 현재 러스트는 빠르고 안정적인 언어로 높이 평가 받고있다. 러스트는 어떻게 이러한 목표를 달성할 수 있었을까? 메모리 관리언매니지드 언어컴파일 언어에 속하는 C 혹은 C++는 프로그래머가 메모리를 제어한다. 프로그래머의 역량에 따라 속도 및 안정성에 많은 영향을 받는다. …
[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) { …
[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> ); } 위 코드는 …
[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는 위 코드와 같이 변수에도 …
[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); …
달력을 출력하는 알고리즘2019. 10. 31.5분달력 알고리즘 심플한 달력 프로그램을 만드려고 고민하는 도중, 최소한 달력을 자동으로 출력해서 토요일과 일요일은 다른색으로 표시하는 기능을 만들어 보려고했다. 하지만 딱히 달력이라는 개념에 대해서 생각하며 살아온 건 아니었기 때문에 기능을 구현하다가 막히게 되었다. 처음에는 시스템의 요일과 해당 일(3월 2일 금)을 가져와서 1일의 요일을 찾아가는 방식을 사용하려고 했지만 이미 만들어진 기능으로 …
[알고리즘] 하노이의 탑 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'); } } …
JavaScript ES201n 공부2019. 10. 29.5분글에 앞서 본 글은 ZeroCho님의 ECMAScript 텍스트 강좌를 인용했습니다. ES6 JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다. const, let var을 대체하는 이 두 가지는 함수의 스코프를 따르는것이 아닌 블록 스코프를 따른다. var은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, …
[팀 프로젝트] 개요2019. 10. 24.1분개요 주제 : 알고리즘 기반 교육 웹서비스 ~~주요 컨텐츠 실시간 통신을 이용한 1:1 알고리즘 대전 mmr, 랭크 시스템 구현 웹 코드 실행기 제공 수준별 맞춤 튜토리얼 제공~~ 기술스택 React Flask Socket.io Spring REST API MySQL Docker 역할분담 김영조 UX/UI(React) 김다현 RESTfulAPI(Spring) 데이터 모델링(MySQL) 배진오 실시간 통신 구현(Socket.io) 코드 실행 서버 …
프로그래밍 언어란?2019. 10. 23.8분각 프로그래밍 언어의 특징 및 패러다임에 대해서 분석하고 컴파일러와 인터프리터의 작동 원리 및 차이점을 아직 제대로 모르는 것 같아서 다시 복습하고자 한다. 내용들은 대부분 프로그래밍 언어 개념(원유헌), 클린 아키텍처(로버트 C. 마틴)에서 참고하였다. 프로그래밍 언어먼저 프로그래밍이란 무엇이고 프로그래밍 언어란 무엇일까? 필자가 생각하기에 프로그래밍이란 특수한 목적을 달성하기 위한 동작이 모여진 프로그램을 만드는 …
[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 …
[10.18]JavaScript 정리2019. 10. 18.5분실행 컨텍스트 자바스크립트가 왜 그렇게 동작하는지를 알려줌 처음 코드를 생성하는 순간 전역컨텍스트가 생김 함수 컨텍스트는 함수를 호출할 때마다 하나씩 생긴다. 컨택스트 생성 시 컨텍스트 안에 변수객체 scope chain, this 가 생성된다. 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 …
[10.15] javascript 정리2019. 10. 17.7분window 객체 : window 객체는 Document의 상위객체이다. 주요 객체 : screen, location, history, document 주요 메소드 : parseInt, isNaN 전역객체이기에 생략이 가능하다 예) window.parseInt() => parseInt() window.close() : 창을 닫는다 window.open() : 창을 연다 window.encodeURI(), window.decodeURI() : 주소에 한글이 들어가면 %ECE%EE%EAEGAEAGASE%같은 한글이 이상한 글자로 바뀌는데 encode는 한글 -> 외계어 decode는 …
[팀 프로젝트] 아이디어를 찾는다.2019. 10. 17.7분팀 프로젝트 개요 웹 환경 기반의 4인으로 이루어진 팀 프로젝트를 시작한다. 3가지 정도의 아이디어를 가지고있는데 이 아이디어들을 좀 더 세밀하게 분석하고 구체화 해보려 한다. 모든 부분을 다 챙기면서 완벽한 프로젝트를 하면 물론 좋다. 하지만 그러기엔 현실적으로 쉽지 않다. 필자는 본 포스팅에서 3가지 아이디어를 3가지 요소들의 비중에 의거하여 소개해보려 한다. 지난 …
React 소개 및 작동 원리 (React는 왜 빠르며 각광받는 기술인가)2019. 10. 11.2분React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발 페이스북, 인스타그램 등 넓게 사용되는 중 class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') ); React 컴포넌트는 render()라는 메서드를 이용하여 데이터를 입력받아 화면에 표시할 …
프론트엔드 직군 웹개발자 면접질문 모음 답변 달아보기2019. 10. 11.13분프론트엔드 개발자가 알아야 할 개념들을 정리한 글입니다. 브라우저의 렌더링 과정, OOP, 함수형 프로그래밍, Promise, AJAX 등에 대한 개념과 차이점, 그리고 타입스크립트와 실행 컨텍스트 등에 대해서도 다루고 있습니다. 이러한 개념들을 알고 있다면 프론트엔드 개발에 필요한 기본적인 개념들을 이해할 수 있을 것입니다.
[JavaScript] ProtoType에 대한 이해2019. 10. 07.3분객체지향 클래스는 객체지향 프로그래밍이 기반인 언어에서 필수적인 역할을 한다. 클래스는 코드의 재사용성을 높여주고, 가독성을 올려준다. 필자는 저번주 내내 BlackJack 구현에 메달렸었다. 제일 자신있는 언어인 Java로 객체지향을 상기시키면서 React의 Component, Javascript에서의 ProtoType을 통한 객체지향에 대비했다. 객체지향을 이용한 BlackJack 하나, 객체지향을 이용하지 않고 통으로 코딩한 BlackJack 하나를 구현했는데 처음에는 통으로 코딩하는것이 쉬웠지만 …
웹 서버 공부2019. 10. 04.3분1. Web server의 종류 1-1 static web server static(정적) web server의 특징은 서버가 호스팅 된 파일을 "있는 그대로" 브라우저로 보내므로 이를 정적 이라고함. 1-2 dynamic web server dynamic web server은 static web server와 extra software로 구성되어있습니다. ex) 응용프로그램 서버, 데이터베이스 우리가 이것을 동적이라고 표현하는 이유는 응용프로그램 서버가 호스팅된 파일을 받을때마다 …
C++ 튜토리얼 3. 전처리기, Define과 Const의 차이2019. 10. 03.6분C++의 전처리기(preprocessor)에 대한 설명과 #include, #define, #if, #ifdef, #ifndef, #else, #elif, #endif 등 다양한 전처리기의 사용 방법에 대해 다루고 있습니다. 또한 #define과 const의 차이점에 대해서도 설명하고 있습니다.
C++ 튜토리얼 2. 함수와 배열 그리고 네임스페이스2019. 10. 03.8분지난번에 C++의 기초적인 문법이나 조건문 반복문에 다해서 다뤘습니다. 이번에는 해당 문법을 좀 더 활용할 수 있는 주제들을 다룹니다. 배열 #include <iostream> using namespace std; int main(void) { int Array1[3] = {0,1,2}; int Array2[3]; Array2[0] = 0; Array2[1] = 1; Array2[2] = 2; cout << "Array1 : " << Array1[0] << …
C++ 튜토리얼 1. 기초 :: 프로그래밍 언어 어떤거부터 배우지?2019. 10. 03.18분프로그래밍은 목적을 달성하기 위한 프로그램을 만드는 것으로, 컴퓨터에서 프로그래밍을 하기 위해 프로그래밍 언어를 학습하여 일련의 동작을 수행하도록 합니다. 이번 튜토리얼에서는 리눅스Debian을 이용하여 소스코드를 작성하고 컴파일 및 구동하는 방법을 알아보았습니다. 이를 통해 Hello, World! 문구를 출력하고, 사용자로부터 입력을 받아 출력하는 예제도 작성해 보았습니다. 프로그래밍을 시작하는데 있어서 쉬운 언어부터 시작하는 것도 좋지만, 어려운 것을 재미있게 시작하면 쉬운 것도 더욱 쉽게 익힐 수 있다는 점을 기억해두세요.