본문 바로가기

분류 전체보기

 (72)
코드스테이츠 시작한지 6개월 째 몇 가지 느낀 점이 있어서 잠시 기록해본다. 1. 내가 모르는 건 남도 모르구나. 처음에는 전공자도 아니고, 심지어 문과생에다 다른 사람들처럼 여러 강의를 접해본 적도 없어서 조금 주눅이 들었었다. 그래서 초반에는 모르는 게 생기고 문제에 부딪힐 때마다 어디 질문하기도 조심스러웠다. 다들 알텐데 싶어서. 그런데 꼭 그런 건 아니었다. 남들은 아는 걸 나만 모르는 게 아니라, 질문을 통해서 최소한 나는 확실히 알게 된다는 것이었다. Github 코드스테이츠 헬프데스크에 '이런 것까지 자꾸 물어봐도 되나' 싶다가도 여기 아님 어디다 이런 걸 물어보겠나 싶어서 지금은 애용 중이다. 2. 일기 썼는데 알림은 안 와도 되지 않나? 맘스다이어리를 통해 매일 매일 육아 일기를 쓰고 있는데 오후 3시면 맘스 다이어리 ..
React.js - JSX, Component, 예제 Hello World! Component 를 사용하면 직관적, 재사용성이 높아진다. React 는 기본적으로 es6를 사용한다. 따라서 아래 내용은 반드시 알고 시작해야 한다. destructuring spread operator rest parameters default parameters template literals arrow function for-of loop React Component는 JSX를 리턴한다. 리액트 컴포넌트에서는 반드시 JSX를 리턴해주어야 하는데 JSX는 javascript의 확장 문법이다. ReactDOM.render( // 3.렌더링한다. Hello, world , // 2.해당 JSX 코드를 document.getElementById('root'); // 1.root 라는 id를 가진 ele..
React 개발 환경 구축하기 처음으로 React를 사용해 보게 되었다. 공식문서도 잘 되어 있고 다양한 플랫폼에서 활용할 수 있는 프론트앤드 라이브러리라고 하니 설레었다. 스프린트 repo를 받은 후 해당 디렉토리로 이동 후 다음 명령어를 실행하면 되었다. npx create-react-app twittler-react * create-react-app 이란 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 이후 twittler-react 디렉토리에 React 프로젝트가 생성이 된 것을 확인할 수 있다. 그리고 twittler-react 디렉토리로 이동 후 npm start를 하면 http://localhost:3000에서 실행 결과를 확인할 수 있다. cd twittler-react npm start 공식..
LPS : Longest Prefix which is also Suffix 문제 : 문자열을 입력 받아 다음의 조건을 만족하는 LPS를 찾아 그 길이를 리턴한다. 조건: non-overlapping. 즉, 접두어와 접미어는 서로 겹치는 부분이 없어야 한다. 참고: prefix(접두어)는 문자열의 첫 인덱스부터 시작하는 모든 부분 문자열을 의미한다. suffix(접미어)는 문자열의 마지막 인덱스부터 시작하는 모든 부분 문자열을 의미한다. pseudocode 1. prefix이자 suffix인 것 중 가장 긴 부분 문자열을 구하면서 서로 겹치지 않으려면 - prefix는 최대 문자열 길이의 1/2지점까지이며 - suffix는 문자열 길이의 1/2 지점부터 끝까지가 되어야 한다. (str의 길이가 홀수인 경우 prefix가 더 길다.) abaab를 예로 들면 prefix === { ..
Balanced Brackets 관련 : stack 자료 구조 문제 문자열을 입력 받아 문자열 내의 모든 괄호의 짝이 맞는지 여부를 리턴해야 한다. Pseudocode str[i]가 opener이면 stack 에 넣고 str[i]가 closer이면 1. stack에서 마지막 요소를 제거하고 이를 top이라고 한다. 2. top과 str[i]가 짝이 맞으면 true를 반환한다. 즉, stack에 쌓이는 것은 opener이고, str[i]가 closer일 때에는 이 closer가 stack에 가장 마지막에 넣은 요소와 짝이 맞는지 확인한다. 결과적으로 stack에 아무것도 남지 않게 되면 결과는 true이다. 코드 구현 const balancedBrackets = function(str) { let stack = []; let opener..
Chatterbox server - Refactoring w/ Express const express = require('express') const app = express() const bodyParser = require('body-parser') // body parser 미들웨어 함수를 사용한다. const jsonParser = bodyParser.json() // 이 부분은 아래에서 app.use(bodyParser.json())으로 해도 될 것 같다. const cors = require('cors') // 모든 응답/요청에 CORS 헤더를 붙이기 위해 cors 미들웨어 함수를 사용한다. const port = 3000; app.use(cors()); app.use(bodyParser.urlencoded({ extended: false })); let data = ..
Express - 라우팅, 미들웨어의 작성 및 사용 공부하는 이유 chatterbox server를 express를 이용해서 refactoring하는 것이 이번 과제이다. 미들웨어가 무엇인지 알고 그 중 body parser, cors 라는 미들웨어를 적용해 보는 것이 그 내용이다. 여기서는 과제를 다루기 전 기본적으로 routing에 대해서 이해하고, 미들웨어를 어떻게 작성하는지, 사용하는지 공부한 것을 기록한다. 모든 내용은 express 공식문서의 내용을 바탕으로 한다. 라우팅 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 end point에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 각 라우트는 하나 이상의 handler 함수를 가질 수 있는데, 이러한 함수는 라우터가 ..
Chat Application - client 구현하기 server는 이미 AWS에 구축/배포되어있는 코드스테이츠의 chatterbox-server를 활용한다. fetch API를 활용하여 서버에 메세지를 요청하고(GET) 메세지를 보낸다(POST). browser에 나타나는 모습은 아래와 같아야 할 것이다. index.html chatterbox 코드스테이츠 youtube post -form 안에 select 박스를 만들고 '코드스테이츠'와 'youtube'를 옵션으로 넣어주었다. // select #roomname text 박스에서 username을 입력받도록 하고 //text #username textarea에서 text를 입력받게 했다. //textarea #text 버튼을 눌렀을 때 form이 제출되도록 하기 위해 버튼을 만들었다. //button ..

티스토리툴바