728x90 반응형 분류 전체보기81 [React] React Router 아주 쉽게 연습하기! 요즘 코드스테이츠 immersive course에서 열심히 리액트를 배웠다. 그와 함께 배운 react-router-dom을 연습하고자 연습 페이지를 만들었다. 공식 문서를 참고하면서 연습하였으며, 아래 각 컴포넌트에 대한 설명들은 모두 공식 문서를 기반으로 작성한 것이다. (공식 문서: 링크) 시작! 아주 새로운 빈 폴더로부터 시작할 것이기 때문에 새로운 디렉토리를 만들고 create-react-app으로 리액트 프로젝트를 시작한다. npx create-react-app . react-rounter-dom도 받아준다. package json에도 추가해준다. npm install react-router-dom --save 사용할 아이들을 import 해주어야 한다. import { BrowserRoute.. 2021. 5. 16. [JS] React에서 배열인 state에 아이템을 추가하고 싶다면!? (concat()과 Spread Syntax) 코드스테이츠의 커리큘럼에서 드디어 프론트엔드의 꽃이라는 리액트에 돌입했다! 이전에 Pre course에서 만들었던 Twittler 앱을 리액트로 바꾸어 만들어보는 작업을 어제 진행했다. 2021.03.29 - [Learn to Code] - 코드스테이츠 Pre Course 회고 및 4개의 웹앱 과제 결과물 UI 요소가 굉장히 적은 단순한 앱이지만 그래도 나름 단일 책임 원칙(Single responsibility principle)을 머리속에 떠올리며 컴포넌트 단위로 코드를 짜나갔다. 그러던 중, 공식문서를 탐독했지만 찾을 수 없던 방법이 하나 있었는데, 배열인 state에 업데이트를 하려면 어떻게 해야 가장 잘 했다는 소문이 날까??!에 관한 것이었다. 그래서 열심히 구글링을 했고, 역시나 많은 선구자.. 2021. 5. 7. [TIL] node.js 미니 서버 만들기 2009년에 캘리포니아 출신 개발자 Ryan Dahl에 의해 개발된 node.js는 V8 엔진으로 빌드된 자바스크립트 런타임이다. node.js로 인해 자바스크립트는 웹 브라우저를 벗어난 환경에서도 사용이 가능하게 되었다. 이벤트 기반의 node.js는 non-blocking 특성으로 인해 속도가 빠르다는 장점이 있고, I/O 모델이라는 특성이 있다. node.js를 다운로드하면 기본적으로 함께 받아지는 모듈들이 있는데, 이중 http 모듈을 사용하여 간단한 미니 서버를 만들 수 있다. 이번에 새로운 과제로 만들어본 것은 웹앱에서 POST 요청을 받은 뒤 응답을 리턴해주는 간단한 미니 서버였다. 지금 원하는 것은 프론트엔드 개발자가 되는 것이지만, 서버 사이드도 굉장히 흥미롭다는 것을 처음 알게 되었다... 2021. 4. 30. [TIL] 코드스테이츠 chatterbox (client) 과제 (ongoing) 코드스테이츠를 시작하고 이제 두 달이 지났다. 처음 한달은 Pre-course였고, 두 번째 달 부터는 Immersive course에 참여하고 있다. Immersive Course에서의 첫 한달은 Pre에서는 다루지 않았던 더욱 다양한 내용들을 다루고 있는데, 이번에 처음으로 서버와 통신을 하는 과제를 만들게 되었다. 아직 Client 쪽에서의 요청을 연습하고 있는 중이어서, 서버는 직접 구축한 것이 아닌 AWS에 미리 구축되어 있는 코드스테이츠의 서버를 사용하였다. 이번 채팅앱에서 구현한 기능들은 아래와 같다: - 메시지 작성 및 POST 요청 - GET 요청 후 화면 렌더링 - 채팅방 입장 및 입장한 채팅방에 맞는 채팅 렌더링 - 새로운 채팅방 만들기 - 채팅창 지우기 (Clear Messages .. 2021. 4. 29. [JS] 자바스크립트로 구현하는 그래프(Graph), 인접행렬(Adjacency Matrix), 인접리스트(Adjacency List) 컴퓨터 공학에서 말하는 그래프(graph)란 이산수학의 그래프 이론의 단방향 그래프(directed graph) 및 무향 그래프(undirected graph)의 개념을 적용하기 위해 가져온 추상적인 데이터 타입이다(출처). 이산수학(discrete mathematics)는 '이산적인' 수학 구조에 대해 연구하는 학문인데, '이산적'과 'discrete'의 사전적 의미는 다음과 같다 (출처). 이산적: 관·명 정보·통신 서로 단절되는. 또는 그런 것. 연속되는 것과 반대되는 것으로 0, 1, 2, 3 따위와 같이 서로 단절되는 값들을 이르는 말이다. discrete: (같은 종류의 다른 것들과) 별개의 (=seperate) 이산수학은 서로 단절되어 있는, 또는 서로 구분되는 값을 가지는 대상들을 연구하는.. 2021. 4. 23. [JS] num++과 ++num의 차이 코드들을 들여다보다가, 우연히 이와 같은 것을 발견했다: let num = 0 return ++num 내가 배운 increment, decrement는 항상 변수 뒤에 붙었던 것이어서, 앞에 쓰면 뭐가 다른지 찾아보았다. 우선 결론부터 말하자면, num++와 ++num은 동일한 효과를 가진다. 둘다 변수에 1을 더하는 일을 한다. let num = 0 num++ console.log(num) // 1 let num = 0 ++num console.log(num) // 1 하지만 다른 점은, 그들의 리턴값에 있다. num++ 같은 경우, increment를 한 이후의 결과값을 리턴한다. 반면 ++num은 increment 하기 이전 값을 리턴한다. let num1 = 0 console.log(num1++).. 2021. 4. 10. [JS] 클로저(Closure)란? 클로저(Closure)란? 자바스크립트를 공부하는 분들께, 자바스크립트를 공부하며 맞닥드렸던 여러 개념들 중 이해하는데 애를 먹었던 것이 무엇이었냐고 묻는다면 가장 자주 등장하는 개념 리스트에 클로저(closure)가 필수로 들어가 있을 것이다. 그만큼 이해하기가 어려웠던 개념인데, 오랜 시간을 들여 들여다본 결과 이전보다 1 정도 이해 정도가 늘어난 것 같아 블로그에 포스팅하려고 한다. 우선, 나에게 있어 클로저에 대한 이해가 어려웠던 것엔 MDN의 클로저에 대한 정의부터가 굉장히 난해했다는 사실도 한몫했다. "A closure is the combination of a function and the lexical environment whitin which that function was declar.. 2021. 4. 10. [JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing) 클래스(Class)와 인스턴스(Instance) 객체 지향 프로그래밍 패러다임을 따른다는 것은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그리고 그 청사진을 바탕으로한 객체(object)를 만든다는 것을 의미한다. 하나의 모델이 되는 청사진, 바로 이것이 클래스(class)가 되는 것이고, 그 청사진을 따라 만들어진 것이 객체이면서 그 클래스의 인스턴스(instance)가 된다. 2021.04.07 - [Learn to Code] - [JS] 객체 지향 프로그래밍(Object-Oriented Programming) 클래스(class)는 말하자면 '틀'이라고 생각할 수 있다. 무언가를 만들 때, 그 만들 물건의 겉 모양을 미리 만들어놓고 그대로 찍어낼 수 있게 하는 '틀' 말이다. 학창시절 .. 2021. 4. 9. [CSS] 개발자를 위한 가시성(visibility) 올리는 디자인 꿀팁! (두가지 컬러 조합 추천 사이트 + 크롬 개발자도구 Contrast 참고 방법) 디자인 백그라운드가 없는 개발자들에겐 디자이너의 서포트 없는 개인 작업은 굉장히 어렵게 느끼질 수 있다. 특히, 개인 프로젝트를 만들어야 할 때 아무리 아이디어가 좋아도 디자인이 영 이상하다면 그 누구도 좋게 보지 않을 것이 뻔하기 때문에 디자인에 대한 부담은 배로 다가올 수밖에 없다. 그러다보면 각종 특이한 것들을 마구잡이로 가져다가 쓰게 될 수가 있는데, 강약조절에 실패한 디자인은 정말 보는 이의 마음을 아프게 한다. 예를 들면... 2가지 컬러 조합 추천 사이트 이런 무시무시한 경우를 최대한 피하기 위해서 여러 조언들을 찾아보셨을탠데, 그 조언들 중 자주 들었던 것 중에 너무 여러 색깔을 한번에 사용하지 말라는 것도 분명히 있었을 것이다. 그래서 이번에 아주 좋은 색깔 조합 사이트 하나를 추천하려고.. 2021. 4. 8. [JS] 객체 지향 프로그래밍(Object-Oriented Programming) 프로그램(program)이란 무엇일까? ...라는 질문에 답하는 방식은 여러가지가 있을 수 있다. 그 이유는 프로그램을 바라보는 관점(perspective) 또는 패러다임(paradigm)이 여러가지이기 때문이다. 그중에서도 가장 전통적인 패러다임에 따르면 프로그램이란 '명령어 또는 함수의 목록'이 된다. 이 전통적인 관점은 명령형 프로그래밍(imperative programming)이라고 부르며, 이러한 패러다임을 따르는 언어들은 절차적 언어라고 불린다. (참고: 링크) 대표적으론 C언어가 있다. 객체 지향 프로그래밍(Object-Oriented Programming) 하지만 시간이 지나고 기술이 발전하면서, 프로그램을 바라보는 새로운 시각들이 생겨나기 시작했다. 객체 지향 프로그래밍도 그러한 패러다임.. 2021. 4. 7. [JS] 화살표 함수 (Arrow Function) 화살표 함수는 ES6에서 추가된 간단한 형태로 함수를 정의하는 방식이다. 기존에 함수를 정의하려면 function 키워드를 사용했어야 했지만, 화살표 함수를 사용하면 function 키워드 없이 간략하게 함수를 정의할 수 있다. 또한, 화살표 함수는 콜백 함수 안에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대용으로 사용할 수도 있다. 화살표 함수 정의하기 화살표 함수를 정의할 땐 함수 표현식을 써주어야 한다. 함수 선언으로는 불가능하다. const addNums = (x, y) => x + y; 1. 매개변수 매개변수가 1개일 경우엔 소괄호 ( ) 를 생략할 수 있으나, 2개 이상인 경우엔 소괄호 ( )를 꼭 써주어야 한다. 매개변수가 없는 경우에도 소괄호 ( )를 꼭 써주어야 한다. //.. 2021. 3. 31. [회고] 코드스테이츠 Pre Course 회고 및 4개의 웹앱 과제 결과물 어느덧 코드스테이츠의 Software Engineer 과정을 시작한지 한 달이라는 시간이 지났다. 총 20주 동안의 공부 기간은 크게 Pre Course와 Immersive Course로 나뉘는데, 첫 한 달에 해당하는 부분이 Pre Course이다. 한달 내내 풀타임으로 아침 9시부터 오후 6시까지 (때로는 그 시간을 조금 넘어서까지) 각종 세션들이 있었고, 이제 내일이면 Pre Course를 수료하고 Immersive Course로 넘어갈 수 있는지 확인하는 Hiring Assessment이 진행된다. Pre Course의 주요 목표는 HTML, CSS, 그리고 자바스크립트의 기반을 다지는 것에 있다. 그래서 여러 레슨들과, 그 레슨들에서 배운 내용들을 문제 풀이에 적용하여 푸는 것이 주요한 공부 방.. 2021. 3. 29. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
