profile
뭐든 하자
post-thumbnail

Next js_getInitialProps

Next js에서 데이터를 가져오기 위해서는 'getInitialProps'라 불리는 비동기 함수를 이용한다. async 함수로 'pages' 폴더 아래 어떤 페이지에서든 'static method'처럼 이용할 수 있다.fetch를 통해 받아온 데이터를 'props'로

2020년 2월 16일
·
0개의 댓글

쿠키와 세션, cookie & session

웹에서는 클라이언트(브라우저)와 서버 간에 데이터를 주고 받기 위한 방식으로 요청/응답 프로토콜을 사용하고 있다. 프로토콜이란 컴퓨터나 원거리 통신 장비 사이에서 메시지, 데이터를 주고 받는 양식과 규칙의 체계이다. 쿠키와 세션이 필요한 이유는 HTTP 프로토콜의 특

2020년 2월 16일
·
0개의 댓글

비동기처리

동기처리와 비동기처리, synchronous and asynchronous 1. 동기처리, synchronous 아래의 코드를 살펴보자. 위의 코드가 실행되는 순서를 살펴보면, button tag를 클릭한다. 클릭 이벤트가 발생하면서 alert가 "you clicked me!"라는 메시지로 뜬다. alert가 사라지면 p tag가 만들어지고, "This...

2020년 2월 9일
·
0개의 댓글

[repl.it] 원시타입과 참조타입

Assignment addProperty 함수 구현 info라는 인자를 받는다. info는 객체이며 profile 객체에 추가할 프로퍼티 정보가 들어있다. 예를 들어 { age: 20 } 라는 객체를 넘기게 된다. profile 객체를 복사하여 새로운 객체에 프로퍼티를 추가하여 리턴한다. 하지만 원래의 profile 객체는 그대로 보존되어야 한다....

2020년 2월 2일
·
0개의 댓글

JavaScript_ Scope

scope: 프로그램의 다른 부분들에 접근가능하거나 가능하지 않은 어떤 변수들에 대한 범위, 설정 blocks: {}, curly brace로 감싸인 statements global scope: 프로그램의 모든 부분에 접근 가능한 변수 영역 global variables: global scope안에 있는 변수들 block scope: 한 block안에 정의...

2020년 2월 2일
·
0개의 댓글

[WeCode] 2차 프로젝트 후기

프로젝트 소개 'JustSeller'라는 유통 관련 서비스의 웹사이트를 약 12일간 클론하는 작업을 진행했습니다. 전반적으로 HTML과 CSS 코드가 어느정도 제공된 상태에서 JavaScript, React, Styled Components를 이용해 거의 모든 페이지를 다 구현해 보았습니다. 저희 팀원은 프론트 3명과 백엔드 1명으로 총 4명의 팀원으로 이...

2020년 1월 26일
·
0개의 댓글

Data Structure, 자료구조

데이터를 담는 '무언가', 공간 === 자료구조 데이터를 어떻게, 언제, 무엇에 이용할 것인지에 맞춰 자료구조를 선택 (ex. 사과를 언제, 어떻게, 무엇으로 이용할 것인지에 맞춰 적당한 용기나 저장 공간이 필요) 자료구조가 많은 이유: 데이터를 가지고 활용을 하는 range가 다양하므로 가장 자주 사용하는 자료구조: array 1. array elem...

2020년 1월 11일
·
0개의 댓글

Unit Text, 유닛 테스트

Unit Test? : 테스트할 수 있는 가장 작은 단위를 테스트하는 코드를 작성해서 'test'하는 것 함수 메소드 테스트 유형 End-to-End & UI testing: : 브라우저가 제대로 렌더링 되는지 확인하는 것. 모든 시스템을 다 갖추고 사람이 직접 실행하는 것이기 때문에 비용이 많이 들어감. 시간도 제일 많이 들어가고 실수도 많을 수...

2020년 1월 11일
·
0개의 댓글

리덕스(Redux)

'Redux'는 애플리케이션(application)의 'state'를 관리하는 자바스크립트의 오픈소스 라이브러리로, 유저 인터페이스(user interfaces)를 만들기 위해 보통 'React', 'Angular'와 함께 쓰인다. Q. 'context API'를 쓰는 것과 무슨 차이가 있을까? '미들웨어'를 이용할 수 있다 특정 조건에 따라 액션이 무...

2020년 1월 5일
·
0개의 댓글

[WeCode] 1차 프로젝트 후기

프로젝트 소개 약 12일간 작업할 홈페이지를 선정해 클론하는 프로젝트가 진행되었고, 제가 속한 팀은 'wiso'라는 청소예약 사이트였습니다. 저희 팀은 여러가지를 고려해 '가사도우미'와 '이사', '고객센터' 페이지를 작업하기로 하였고 추가적으로 로그인과 회원가입 페이지를 만들어 마이페이지까지 작업하는 것으로 결정하였습니다. 사용된 기술 기본적으로 H...

2020년 1월 4일
·
0개의 댓글

리액트로 간단한 기능 구현 해보기

'state'를 설정해 'props'로 받아 간단한 함수 기능 구현을 해보자. 먼저 리액트 환경설정을 한다. 구현하고자 하는 기능 1) '+', '-' 버튼을 만들어 기본값에 더하고 빼보기 2) 각각 버튼 클릭 시 폰트 컬러 바꾸기

2019년 12월 29일
·
0개의 댓글

Group Project Kickoff Session

1. the Objective of the Group Project : 실제 팀을 꾸려 웹 시스템 개발을 해보는 경험을 가져보는 것. 혼자 개발을 하는 시스템은 실무에서 없고 팀 개발을 하는 역량을 기르는 게 가장 중요하다. 객관적인 개인의 코딩 실력보다 소통과 팀워크의 중요성을 깨닫는 것. 개인의 개발 실력이 좋아도 협업이 되지 않으면 문제가 되고 한 명...

2019년 12월 25일
·
0개의 댓글

인증(Authentication)과 인가(Authorization)

인증과 인가 인증이란? 유저가 누구인지 확인하는 절차, 회원가입하고 로그인 하는 것. 인가란? 유저에 대한 권한을 허락하는 것. 누가, 언제, 어떻게 쓰고 있는가를 파악하기 위해 어떤 사이트에서든 인증, 인가가 있음. 인증과 인가는 API에서 가장 자주 구현되는 기능중 하나. Private한 API는 물론이고 Public한 API도 기본적인 인증과 인가...

2019년 12월 22일
·
0개의 댓글

React session

JSX 란? 자바스크립트에서 html 부분만을 JSX 라고 한다. 자바스크립트에서 제공하는 문법표현은 아니기 때문에 react import 해야한다. component.js파일에 JSX element를 입력해 html 역할을 대신한다. component class component를 만들 때 render()가 필수 method. componenet ...

2019년 12월 16일
·
0개의 댓글

Git 과 GitHub

Git을 쓰는 이유는? 버전 관리(형상 관리)를 함으로써 코드의 보수, 유지를 원활하게 하고자 코드를 수정하고 저장한 파일들을 폴더에 정리하고 그 폴더를 카테고리 별로 만들어 관리해도 파일들 하나 하나를 봤을 때 따로 변경사항들만 정리하지 않는 이상 변경사항을 파악하기 힘들다는 문제가 발생. 그런데 그 폴더와 파일 관리를 나 혼자 하는 게 아니라 공동관리를...

2019년 12월 15일
·
0개의 댓글

HTTP에 대해 알아보자

HTTP란? : Hyper Text Transfer Protocol: HTML(문서, 텍스트)을 교환하기 위해 만들어진 통신규약. '데이터가 전송된다'라는 것: 텍스트를 보내는 것, 이해할 수 있는 통신 규약을 통해서 HTML에 맞춰 만들어진 통신규약(프로토콜) HTTP의 핵심 요소 요청과 응답 Request & Response 클라이언트가 HTTP...

2019년 12월 10일
·
0개의 댓글

JavaScript_event_댓글 달고 지우기

Assignment HTML, JS를 이용해 댓글을 올리고 삭제하는 기능 구현하기 the concept of this code ======= Node ======== 텍스트 파일로 만들어진 웹 문서를 브라우저에 렌더링(html로 입력받은 텍스트를 해석해 표준 출력장치, 모니터, 에 띄우는 것)하기 위해 웹 문서를 브라우저가 이해할 수 있는 구조로 메...

2019년 12월 7일
·
0개의 댓글

JavaScript_ object_객체의 키를 변수로 가져오기

* Assignment 'getExamResult' 함수 구현하기. 인자 'requiredClasses' 배열의 요소로는 있지만, 인자 'scores'의 키로는 존재하지 않는 요소가 있다면, 해당 요소는 'scores'의 객체의 새로운 키가 되고 값은 0이 됩니다. ** the concept of the code === 객체의 키를 변수로 할당하기 =...

2019년 12월 7일
·
2개의 댓글

12.04. 'Gatsby'로 블로그 만들기

정적 블로그 만들기 => Gatsby : 정적프레임워크 npm : node package manager git clone: 처음 다운로드 받고 파일에 주소를 복사하는 것 vim 메모장을 여는 명령어 npm install( = npm i) shift + ; + wq : 메모장에서 나가는 단축키 npm install: json에 있는 라이브러리 내용을 받아...

2019년 12월 5일
·
0개의 댓글

JavaScript_[es6] arrow function

'arrow function'은 ES6에 새롭게 추가된 기능으로 문법 코드가 간결하고 직관적이어서 이미 많은 개발자들이 이용하고 있으며, 높은 비율로 function을 대체하고 있다. 간단한 syntax 표현 ES에서는 function 키워드가 빠지고 ES6에서는 '=>' (arrow) 가 추가되었다. '=>' 모양새 때문에 'arrow functio...

2019년 12월 1일
·
2개의 댓글