개발자들이 모여 지식과 경험을 공유하는 공간입니다
IIFE js에서 자주사용되는 코딩패턴 중 하나이다. JS에서의 함수 function foo() { alert("Hello World"); } foo(); IIFE를 적용하지 않은 코드 foo 라는 함수를 1-3째 줄에 선언하고 5번째 줄에서 foo();를 통해 호출해내는 일반 개발자들이라면 자연스럽게 떠올릴 만한함수의 선언과 호출 과정이다. var msg = "Hello World"; var foo = function () { alert(msg); …
달력 알고리즘 심플한 달력 프로그램을 만드려고 고민하는 도중, 최소한 달력을 자동으로 출력해서 토요일과 일요일은 다른색으로 표시하는 기능을 만들어 보려고했다. 하지만 딱히 달력이라는 개념에 대해서 생각하며 살아온 건 아니었기 때문에 기능을 구현하다가 막히게 되었다. 처음에는 시스템의 요일과 해당 일(3월 2일 금)을 가져와서 1일의 요일을 찾아가는 방식을 사용하려고 했지만 이미 만들어진 기능으로 …
![[알고리즘] 하노이의 탑 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은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, …
필자는 Neople에서 개발하고 Nexon에서 서비스를 하는 게임인 Dungeon & Fighter을 즐겨한다. 이 게임 내에서 상위 던젼이나 레이드를 가기 위해서는 최소 +11 의 무기가 필요하다. 그런데 길드원을 보면 +12를 가는데 3000만골드가 들었다는 사람이 있고 또 다른사람은 10억골드 이상을 사용한 사람도 있다. import random as rand import numpy as np print("강화기!!!!!") """ …
![[3분꿀팁]Python 다차원 리스트](/resources/media/images/title/2019/10/25/DeCrazy/12_18_42.png)
파이썬으로 1차원 이상의 리스트를 만들다가 신기한 문제점에 봉착한 적이 있다. 필자는 그냥 생각 없이 이런 코드를 이용하여 5 X 2짜리 리스트를 만들려 했다. >>> Lists = [[0] * 2] * 5 >>> Lists 출력은 본인 생각대로 [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]] 이 나왔다. 그 후 …
안녕하세요! 오늘은 저번에 만들었던 Azure계정으로 서버를 임대해봅시다! 일단 먼저 Azure에 로그인하여 Azure 포털에 접속하고 옆에 대시보드에서 가상 머신을 클릭해줍시다. 들어오면 사진처럼 처음 생성한 계정이라 사진과 같은 화면이 뜰 겁니다. 가상 머신 만들기를 클릭해주세요. 이제 서버 생성을 위해 정보를 기입해줍니다. 리소스 그룹을 새로 만들어주세요. 리소스 그룹은 나중에 저장소를 추가한다거나 스위치를 추가한다거나 …
![[팀 프로젝트] 개요](/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) 코드 실행 서버 …
![[힐링]귀여운 동물 사진](/resources/media/images/title/2019/10/24/dog/12_45_51.jpg)
Microsoft Azure을 2년동안 무료로 사용해보자!!(학생 전용) 안녕하세요!! 꿀팁전도사입니다!!!!!! Microsoft Azure 서비스를 아시나요? Azure는 Microsoft사에서 제공하는 클라우드 서버 시스템으로 아마존의 AWS와 거의 비슷한 서비스를 제공합니다. 하지만 AWS도 그렇고 Azure 도 그렇고 학생이 사용하기에는 생각 외로 부담스러운 가격을 가지고 있습니다. 개인 과제나 포트폴리오용으로 사용하는 저렴한 서버인 B1s를 대여하면 한달에 약 10,800에 + …
각 프로그래밍 언어의 특징 및 패러다임에 대해서 분석하고 컴파일러와 인터프리터의 작동 원리 및 차이점을 아직 제대로 모르는 것 같아서 다시 복습하고자 한다. 내용들은 대부분 프로그래밍 언어 개념(원유헌), 클린 아키텍처(로버트 C. 마틴)에서 참고하였다. 프로그래밍 언어먼저 프로그래밍이란 무엇이고 프로그래밍 언어란 무엇일까? 필자가 생각하기에 프로그래밍이란 특수한 목적을 달성하기 위한 동작이 모여진 프로그램을 만드는 …
안녕하세요 맛집탐방가 거북이입니다!! 오늘은 종로구 관철동 젊음의 거리 주변 점심 맛집 리뷰를 시작하겠습니다!!! 1. 굿모닝 저렴하게 한끼를 떼우기 좋은 고시뷔페식당입니다. 매일매일 메뉴가 바뀌며, 신선한 샐러드도 먹을 수 있는 가성비가 아주 좋은 식당이라고 생각합니다! 맛도 식수인원이 많은 것 치고는 간도 잘 맞고 신선한 것이 아주 큰 장점이라고 생각합니다. 하지만 한 그릇만 …
컴파일러의 과정은 렉시컬 분석, 구문 분석, 의미 해석, 중간 코드 생성 및 코드 최적화로 이루어진다. 이를 통해 코드를 분석하고 중간 표현 구조로 변환하여 최적화된 코드를 생성할 수 있다.
모듈 패턴 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 …
실행 컨텍스트 자바스크립트가 왜 그렇게 동작하는지를 알려줌 처음 코드를 생성하는 순간 전역컨텍스트가 생김 함수 컨텍스트는 함수를 호출할 때마다 하나씩 생긴다. 컨택스트 생성 시 컨텍스트 안에 변수객체 scope chain, this 가 생성된다. 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 …
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는 …
![[팀 프로젝트] 아이디어를 찾는다.](/resources/media/images/title/2019/10/18/yoyounn18/9_49_0.jpg)
팀 프로젝트 개요 웹 환경 기반의 4인으로 이루어진 팀 프로젝트를 시작한다. 3가지 정도의 아이디어를 가지고있는데 이 아이디어들을 좀 더 세밀하게 분석하고 구체화 해보려 한다. 모든 부분을 다 챙기면서 완벽한 프로젝트를 하면 물론 좋다. 하지만 그러기엔 현실적으로 쉽지 않다. 필자는 본 포스팅에서 3가지 아이디어를 3가지 요소들의 비중에 의거하여 소개해보려 한다. 지난 …
게시판 DBMS 입니다... DROP TABLE board CASCADE CONSTRAINTS PURGE; CREATE TABLE board ( num NUMBER(6) NOT NULL, -- 글 일련 번호 name VARCHAR(10) NOT NULL, -- 글쓴이 성명 subject VARCHAR(100) NOT NULL, -- 제목 content VARCHAR(4000) NOT NULL, -- 내용 ref NUMBER(5) NOT NULL, -- 부모글 번호(그룹번호) indent NUMBER(2) DEFAULT …
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()라는 메서드를 이용하여 데이터를 입력받아 화면에 표시할 …
프론트엔드 개발자가 알아야 할 개념들을 정리한 글입니다. 브라우저의 렌더링 과정, OOP, 함수형 프로그래밍, Promise, AJAX 등에 대한 개념과 차이점, 그리고 타입스크립트와 실행 컨텍스트 등에 대해서도 다루고 있습니다. 이러한 개념들을 알고 있다면 프론트엔드 개발에 필요한 기본적인 개념들을 이해할 수 있을 것입니다.
![[JavaScript] ProtoType에 대한 이해](/resources/media/images/title/2019/10/7/yoyounn18/12_53_30.png)
객체지향 클래스는 객체지향 프로그래밍이 기반인 언어에서 필수적인 역할을 한다. 클래스는 코드의 재사용성을 높여주고, 가독성을 올려준다. 필자는 저번주 내내 BlackJack 구현에 메달렸었다. 제일 자신있는 언어인 Java로 객체지향을 상기시키면서 React의 Component, Javascript에서의 ProtoType을 통한 객체지향에 대비했다. 객체지향을 이용한 BlackJack 하나, 객체지향을 이용하지 않고 통으로 코딩한 BlackJack 하나를 구현했는데 처음에는 통으로 코딩하는것이 쉬웠지만 …
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++의 전처리기(preprocessor)에 대한 설명과 #include, #define, #if, #ifdef, #ifndef, #else, #elif, #endif 등 다양한 전처리기의 사용 방법에 대해 다루고 있습니다. 또한 #define과 const의 차이점에 대해서도 설명하고 있습니다.
지난번에 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] << …