본문 바로가기

분류 전체보기

 (35)
CSS 노트 정리 1. flex box container 속성에서 주로 쓰는 것 설명 display : flex -> 설정을 통해 flex로 사용가능하게 됨 flex-direction : row (기본값) -> 정렬 기준(좌에서 우) , column 으로 설정 시 (위에서 아래) flex-direction : row-reverse -> 기존 정렬에서 반대로 정렬함 flex-wrap : nowrap (기본값) -> item이 많아졌을 때 현재는 한줄에서 좁아지지만, wrap 으로 설정 시 item이 아래로 내려감. flex-flow : column nowrap -> 이와 같이 사용하는데 flex-direction & flex-wrap 가 합쳐진 것이라고 보면 됨. justify-content : flex-start (기본값..
10월 20일 (화)_Final Project - 03 (state 비동기 처리) 오늘의 프로젝트 진행 상황 1. state 비동기 처리 2. 해결 - 서버의 데이터 흐름 변경 1. state 비동기 처리 Test 등록 버튼을 눌렀을 때 선택된 단어가 바로 등록이되고 화면이 재렌더링 되면서 해당 단어가 보이지 않게 되어야했습니다. 그런데 예상과는 달리 화면상에 그대로 나타나있는 상태로 렌더링이 되었습니다. 이 상태에서 다시 한번 Test 등록 버튼을 누르면 선택된 단어가 그제서야 안보이게 되었습니다. 저희는 이 문제를 state의 비동기처리에 의한 문제로 파악하였고 관련 자료들을 검색하는 도중에 해결 방안을 찾아 내었습니다. 2. 해결 - 서버의 데이터 흐름 변경 조사 결과 클라이언트 측에서도 문제가 있었지만 그 문제는 asnyc/await 를 활용하여 해결을 하였고 정작 더 중요했던..
10월 13일 (화)_Final Project - 02 (React Native) 오늘의 프로젝트 진행 상황 1. React Native 란? 2. React Navigation 란? 3. Stack 과 BottomTab 구성하는법 1. React Native 란? React Native는 리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다. 간단히 말하면 React를 사용하여 모바일 어플리케이션 개발을 할 수 있다고 생각하면 됩니다. 일반적으로 앱을 개발하기 위해서는 안드로이드의 경우는 Java, 아이폰은 Swift를 사용해야 하지만 React Native를 사용하여 하나의 코드로 두 경우 모두 사용할 수 있는 하이브리드 앱을 개발할 수 있게 되었습니다. 물론 이에 대한 장점과 단점이 있지만 저희는 JS 언어를 통해 모바일 앱을 개발 할 수 있으므로 Reac..
10월 7일 (수)_Final Project - 01 (끝과 시작) 오늘의 프로젝트 진행 상황 1. 10월 5일 (월) First Project 발표 2. 10월 7일 (수) Final Project 시작 3. SR(Software Requirements) 구성 1. 10월 5일 (월) First Project 발표 10월 5일 월요일은 그동안 해왔던 First Project 를 마무리하고 발표를 하는 날이였습니다. 추석연휴와 주말동안 시간을 투자하여 프로젝트를 끝내고 PPT까지 완성하는 매우 빠듯한 일정이였죠....! 주말에 PPT 제작을 맡아서 완성하고보니 팀원들이 제가 발표를 하는 것이 어떻겠냐고? 추천을 하셨습니다. 저도 PPT발표를 하고 싶었기 때문에 제가 하겠다고 말하고 월요일에 발표를 하였습니다. 그렇게 발표까지 마치고나니 홀가분하더라고요. 물론 이제 본격적..
9월 29일 (화)_First Project - 07 (passport) 오늘의 프로젝트 진행 상황 1. Passport 모듈화 및 session 인증 구현 2. 스프린트 회고 ( F5 ) 1. Passport 모듈화 및 session 인증 구현 오늘은 어저께 Passport 기능을 구현하였던 것을 우리 작업 패턴에 맞게 모듈화하여 적용시키는 과정을 하였습니다. 이 과정을 진행하며 모듈화에 대한 개념들을 더 깊게 알게 되는 계기가 되었고 또 passport의 가동 순서에 대해서 좀 더 알게 되었습니다. 모듈화를 진행하며 제일 막혔던 부분의 코드를 보여드리겠습니다. 1) module.exports하여 전체를 내보내는 방식 const passport = require('passport'); const GoogleStrategy = require('passport-google-oa..
9월 28일 (월)_First Project - 06 (passport) 오늘의 프로젝트 진행 상황 1. passport 학습 및 활용하여 Google 로그인 구현 2. passport 사용하며 느낀 점 1. passport 학습 및 활용하여 Google 로그인 구현 1) express 설정 const express = require('express') const app = express(); const port = 4000; const cors = require("cors"); const session = require("express-session"); const morgan = require("morgan"); const db = require("./models"); var passport = require('passport'); var GoogleStrategy = r..
9월 25일 (금)_First Project - 05 (OAuth, 회고) 오늘의 프로젝트 진행 상황 1. 테이블 관계 구성 (users & comment) 2. 소셜 로그인 개념 학습 (OAuth) 3. 이번 주 회고 및 피드백 1. 테이블 관계 구성 (users & comment) 테이블끼리 JOIN을 하여 필요한 데이터들을 가져오기 위해서는 테이블끼리 관계가 구축되어있어야합니다. 그래서 저희가 사용하는 라이브러리인 Sequelize에서 관계(1:1, 1:N, N:M) 을 구성하기위한 방법이 무엇인지 공식문서를 찾아보았습니다. 그런데 공식문서에는 이전 버전에서 사용했던 방식 위주로 되어있어 구글에서 다시 검색을 시도하였고 오랜시간 끝에 방법을 찾아내어 적용하였습니다. 그런데 테이블 연결이 안되더군요? 그래서 왜 안될까? 고민하다 동기분중 한분에게 도움을 요청하였고 마이그레이..
9월 24일 (목)_First Project - 04 (SR) 오늘의 프로젝트 진행 상황 1. AWS를 활용하여 클라이언트(S3 사용)와 서버(EC2 사용) 2. 서버 기본 frame 구성 1. AWS를 활용하여 클라이언트(S3 사용)와 서버(EC2 사용) 오전에는 Github의 Client와 Server 레포를 Hello world 까지만 구현한 후 AWS를 사용하여 배포하는 것을 마쳤습니다. Client는 React를 사용하였고, Server는 Express를 사용하였습니다. 우선 팀장님의 아이디를 사용하여 배포하였지만 테스트를 위해 아마 제 Aws에도 배포를 할 것으로 예상됩니다. 스프린트를 통해서도 배포를 경험해보았었지만, 내가 만들고 싶은 서비스를 시작하기 위한 첫 배포는 좀 의미가 남달랐던 것 같습니다. 배포를 하면서 가슴이 두근두근했네요. 앞으로 이곳을..

티스토리툴바