![[팀 프로젝트] 개요](/resources/media/images/title/2019/10/18/yoyounn18/9_49_0.jpg.minify.jpg)
개요 주제 : 알고리즘 기반 교육 웹서비스 ~~주요 컨텐츠 실시간 통신을 이용한 1:1 알고리즘 대전 mmr, 랭크 시스템 구현 웹 코드 실행기 제공 수준별 맞춤 튜토리얼 제공~~ 기술스택 React Flask Socket.io Spring REST API MySQL Docker 역할분담 김영조 UX/UI(React) 김다현 RESTfulAPI(Spring) 데이터 모델링(MySQL) 배진오 실시간 통신 구현(Socket.io) 코드 실행 서버 …
각 프로그래밍 언어의 특징 및 패러다임에 대해서 분석하고 컴파일러와 인터프리터의 작동 원리 및 차이점을 아직 제대로 모르는 것 같아서 다시 복습하고자 한다. 내용들은 대부분 프로그래밍 언어 개념(원유헌), 클린 아키텍처(로버트 C. 마틴)에서 참고하였다. 프로그래밍 언어먼저 프로그래밍이란 무엇이고 프로그래밍 언어란 무엇일까? 필자가 생각하기에 프로그래밍이란 특수한 목적을 달성하기 위한 동작이 모여진 프로그램을 만드는 …
모듈 패턴 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는 …
팀 프로젝트 개요 웹 환경 기반의 4인으로 이루어진 팀 프로젝트를 시작한다. 3가지 정도의 아이디어를 가지고있는데 이 아이디어들을 좀 더 세밀하게 분석하고 구체화 해보려 한다. 모든 부분을 다 챙기면서 완벽한 프로젝트를 하면 물론 좋다. 하지만 그러기엔 현실적으로 쉽지 않다. 필자는 본 포스팅에서 3가지 아이디어를 3가지 요소들의 비중에 의거하여 소개해보려 한다. 지난 …
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.minify.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] << …
프로그래밍은 목적을 달성하기 위한 프로그램을 만드는 것으로, 컴퓨터에서 프로그래밍을 하기 위해 프로그래밍 언어를 학습하여 일련의 동작을 수행하도록 합니다. 이번 튜토리얼에서는 리눅스Debian을 이용하여 소스코드를 작성하고 컴파일 및 구동하는 방법을 알아보았습니다. 이를 통해 Hello, World! 문구를 출력하고, 사용자로부터 입력을 받아 출력하는 예제도 작성해 보았습니다. 프로그래밍을 시작하는데 있어서 쉬운 언어부터 시작하는 것도 좋지만, 어려운 것을 재미있게 시작하면 쉬운 것도 더욱 쉽게 익힐 수 있다는 점을 기억해두세요.
신입 개발자가 포트폴리오를 제작할 때 어느 정도의 프로젝트를 해야하는지 고민하는 상황에서, 심플한 프로젝트를 만들어도 충분하다는 내용을 전달하며, 블로그를 프로젝트로 선택하여 개발하였다는 이야기를 담고 있다. 프로젝트를 개발하는 과정에서 REST API와 비동기 통신 등 최신 기술을 활용하여 프로젝트를 개선하였으며, 협업의 중요성을 깨달았다는 내용을 담고 있다.
블로그를 시작한 이유는 글쓰기에 대한 관심보다는 창작 활동을 좋아하는 필자에게 훌륭한 매체였기 때문이었다. 네이버 블로그, 티스토리, Jekyll을 거쳐 마침내 직접 만든 BLEX로 블로그를 운영하고 있는데, 이를 통해 프론트엔드 지식을 쌓고 파이썬으로 내 맘대로 기능도 만들면서 블로그를 운영하는 것이 재미있었다.
트리는 계층형 구조를 가진 문제를 해결하기 위한 자료구조로, 리스트나 스택, 큐와는 달리 연결 자료구조로 구성된다. 이진트리, 스레드 이진트리, 이진 탐색 트리, AVL 트리, 히프 등 다양한 종류가 있으며, 각각의 순회 방법인 전위, 중위, 후위 순회를 구현할 수 있다. 스레드 이진트리에서는 후행자를 프로그램이 스스로 알 수 있도록 구현하는 것이 가능하다.
큐(Queue) 은행에서는 먼저 기다린 손님을 우선으로 일을 처리해 줍니다. 이처럼 삽입 순서와 삭제 순서가 일치하도록 하는 자료구조를 큐라고 합니다. 앞서 익혔던 스택의 경우에는 늦게 들어온게 가장 먼저 나가는 방식인 LIFO 였으나 큐의 경우에는 스택과 다르게 선입선출, FIFO(First In First Out) 방식을 사용한다. 우리의 법치국가 사회에서 가장 많이 볼 수 있는 …
스택은 후입선출 방식으로 데이터를 처리하는 자료 구조로, 삽입과 삭제를 push와 pop으로 표현한다. 이를 파이썬에서 구현할 때는 단순 연결 리스트를 활용할 수 있다. 스택은 괄호 검사 등 다양한 문제를 해결하는 데 유용하게 활용될 수 있다. 리스트를 스택처럼 활용할 수도 있다.
파이썬으로 구현한 단순 연결 리스트입니다. 헤더 노드를 포함하여 노드 삽입, 삭제, 탐색 등의 기본적인 기능을 구현하였습니다. 연결 리스트를 구현하며 파이썬의 장점인 간단한 구문과 메모리 관리의 편의성을 느꼈습니다.
우선 필자가 사용해본 블로그 서비스는 네이버 블로그(3년), 티스토리(1년 6개월), 깃허브 블로그(1년), 워드프레스(4일)를 사용한 경험이 있으며(자세히) 차후에 새로운 블로그를 운영할 계획을 가지고 있다. 필자가 각 블로그 서비스를 사용하며 느낀 장단점은 아래와 같다. 네이버 블로그 내 글은 한국의 많은 유저가 최대한 많이 봐야한다! 장점 쉽다. 검색이 잘된다. 네이버 블로그의 최대 장점은 쉽다는 …
December 2019. 12. 31. 사용자 배터리 시스템 도입 2019. 12. 27. 포스트 액션 네비게이션 상단으로 변경 타이틀 이미지가 전체 사이즈에서 절반으로 줄어듬 2019. 12. 26. 글쓰기 이미지 업로드 오류 수정 2019. 12. 25. 포스트 포스트의 메인 이미지의 디자인 오류 수정 2019. 12. 24. 댓글 URL의 경우 자동으로 링크 적용 댓글 …
개발 노트는 소프트웨어나 프로젝트의 진행과정, 변경 사항, 이슈, 해결책 등을 기록한 문서입니다. 주로 버전 관리 시스템에서 관리되며, 팀원 간 의사소통과 업무 추적에 활용됩니다. 개발자들은 코드 변경 사항과 함께 새로운 기능, 버그 수정, 향상된 알고리즘 등을 개발 노트에 기록하여 프로젝트의 투명성을 유지하고 효율적인 협업을 도모합니다. 또한, 미래 업무 계획이나 기술적 도전 과제에 대한 아이디어도 기재하여 지속적인 발전을 위한 방향성을 제시
다행히 원하던대로 1회차에 필기와 실기를 모두 합격할 수 있었다. 이번에 공부를 해보니 다른 자격증도 뭔가 쉽게 딸 수 있을 것 같은(?) 생각이 들었다. 이 글에서는 필자가 얼마나 공부했고 어떤식으로 공부했고 어떤 점이 후회됐는지 기록해 두고자 한다. 이 자격증에 도전하는 사람들에게 조금이나마 도움이 되었으면 좋겠다. 필기 이 글을 보고 있는 당신의 …
그냥 문제가 이런 유형으로 나왔다는 것을 보여드리기 위해서 작성하는 것이며 실제 문제와 완벽히 일치하는 것이 아니며 순서와 내용이 다소 다릅니다. 틀린 부분 지적은 언제나 감사합니다. 내용은 지속적으로 추가할 예정입니다 :) 알고리즘 1. 다음은 1000이하의 숫자에서 약수의 합이 자신이 되는 숫자의 수를 구하는 순서도이다. 가령 6의 약수는 1, 2, 3이고 이들의 …