4주차 세션  4주차 세션은 리액트에 대한 실습이 이루어졌다. 리액트는 컴포넌트 단위로 조합과 분해가 쉽다는 장점이 있으며,상태관리와 변화를 제어하기가 쉽다.  기본 구조는 함수형으로, css는 scss를 활용해 세션을 진행했다.  먼저 Header, Main, Footer를 구분하는 컴포넌트를 생성해 구조를 분해하는 연습을 할 수 있었고,Main 컴포넌트에서 useState의 상태관리를 이용해 버튼을 누르면 이름이 변경되는 간단한 동작을 넣어보았다. 이름은 state로 상태관리를 했으며 삼하연산자로 이름을 바꾸는 함수를 정의해 기능을 완성할 수 있었다. const [myName, setName] = useState("Jhon");    function ChangeName(){        setName..

10주차 회고  이번 회고에서는 cross-env 설정, 세션-데이터베이스 로그인, 동적 폼 생성, 그리고 multer 모듈을 통한 파일 업로드를 중심으로 학습한 내용을 정리하고자 한다.     1. Cross-env 세션-데이터베이스 로그인 cross-env는 Node.js 환경에서 플랫폼 간 환경 변수를 설정할 수 있게 해주는 패키지로, 환경별 설정을 다르게 지정할 수 있었다.이와 함께 세션을 활용해 로그인 정보를 데이터베이스에 저장하고 유지하는 방식도 학습했다.  세션과 데이터베이스를 연결해 로그인 정보를 효율적으로 관리할 수 있도록 하기 위해서는 세션 정보를 데이터베이스에 저장하고, 세션 ID를 이용해 사용자를 추적할 수 있다.이를 구현하기 위해 express-session과 데이터베이스를 연동하..

9주차 회고 이전 글에 이어서 9주차에 클라우드 사용법, JWT, 암호화에 대해서 배웠고, 실습도 진행해볼 수 있었다.네이버 클라우드와 Putty를 사용해서 파일을 실행시키는 실습을 진행했고, 로컬 스토리지를 이용해서 카트 페이지도 만드는 연습을 했다.    1. 클라우드 : 클라우드는 언제, 어디서든 인터넷을 통해 사이트에 접속할 수 있는 환경을 만들어준다.: 서버, 네트워크 등의 인프라를 임대해주는 서비스라고 할 수 있으며, 가상화 기술을 사용해 서버를 마음대로 구축하고 운영할 수 있다. 가상화 : 물리적인 장치를 소프트웨어로 대체하는 것을 의미. ex. 물리적 컴퓨터 1대 - 서버 여러개 운영 가능 클라우드 서버 : 실제 물리적인 컴퓨터 1대로 서버를 운영하는 게 아니라 VM으로 서버를 운영한다.장..

9주차 회고  9주차에는 쿠키와 세션을 이용해 로그인 정보를 저장하고 로그인을 할 수 있는 환경을 만들었으며, 서버를 구축하는 방법에 대해 배울 수 있었다.http와 express 2가지 방법으로 서버를 구축해봤다.     1. Cookie : 웹브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일: 이름, 값, 만료일, 경로정보로 구성 쿠키 동작 방식  : cookie 모듈을 사용하는지 안하는지에 따라 쿠키가 출력되는 모양이 달라진다.     'DontReadHttp=myhttp; HttpOnly', ⇒ 콘솔에서는 출력해서 보여주지 않겠다. HttpOnly'tasty_food=kimchi; Max-Age=6000', ⇒ 만료시간 기록 Max-Age`tasty_food=kimchi; Ma..

8주차 회고 dlwjs 글에 이어서 sequelize를 연습했으며, sequelize-join과 데이터 베이스 관계에 대해 배웠다. 이를 이용해서 운동선수의 정보를 확인하는 페이지를 구현하는 실습을 해볼 수 있었다. 1. Sequelize-join 관계 변수명.hasOne = 내가 부모, 내가 주인 변수명이 키를 갖고 있다. 나의 키를 주인으로 누군가의 외래키 설정. ⇒ 관계를 맺는 대상(자식)에게 자신의 외래 키를 추가. (Users => UserInfo) UserInfo 외래 키가 추가된다. 변수명.belongsTo = 누군가에게 속함. 누군가의 키를 기준으로 외래키를 만듦 ⇒ 관계를 맺는 대상(부모)에게 외래 키를 받아 추가. (UserInfo => Users) UserInfo 외래 키가 추가된다...

8주차 회고 8주차에는 지난주에 이어서 MVC모델과 MySQL에 대해서 배웠으며 서로 연결하는 방법을 연습해볼 수 있었다. 또한 DB작업을 쉽게할 수 있도록 도와주는 Sequelize 라이브러리도 사용해봤다. 1. MVC - MySQL 지난 주에 이어서 MVC와 MySQL을 연습하고 MySQL의 데이터 베이스와 연결하는 연습을 해볼 수 있었다. MVC 구조로 폴더와 파일을 생성하고 MySQL과 연결해 방명록을 만드는 실습을 진행했다. 먼저 MVC 구조를 만들어주었다. controller, model, routes, static, views 폴더를 생성하고 app.js로 실행파일을 생성했다. views 폴더에는 실제 화면에 보여야할 구조를 구현했다. 방명록을 남긴 사람, 방명록 내용이 보이도록 했으며, 새..

3주차 세션  3주차도 역시 레이아웃 테스트와 자바스크립트 테스트로 세션이 시작됐다.  먼저 레이아웃 테스트는 크게 어려운 내용은 아니었으나, 10분이라는 시간 내에 반응형 레이아웃까지 모두 완성하기란 쉬운 일이 아니었다.... 기본 레이아웃과 첫번째 미디어 쿼리까지는 완성했으나, 시간 안에 두번째 미디어 쿼리를 완성시키지 못해서 테스트가 끝난 후 완성시켜 깃허브에 올려두었다. 레이아웃의 결과물은 다음과 같다.  max-width가 680px와 450px를 기준으로 레이아웃이 변경되도록 미디어 쿼리를 구현했다.    다음으로 자바스크립트 테스트는 손코딩으로 진행됐다.빈칸을 채우는 간단한 손코딩이었지만, 헷갈리는 부분이 꽤 있었고... 더 열심히 해야겠다는 생각이 들었다.  const, let, var, ..

react-native를 설치해준 후 vscode에서 생성한 폴더를 열어주었다. 다음으로 인스타 앱을 만드는 데 필요한 이미지와 비디오 파일들을 assets폴더에 넣어주었다. src폴더 안에 components와 screens 폴더도 생성해준 후 실질적으로 앱을 구성하는 데 사용하는 소스코드를 작성해줄 영역을 만들어줬다. 다음으로 screens폴더 안에 인스타 앱 스크린을 위한 파일들을 생성해준다. 생성한 각 파일안에 기본 구조를 다음과 같이 작성해주고 만약 에러 줄이 뜬다면 .eslintrc 파일에 prettier 조건을 작성해주면 된다. 'prettier/prettier': 0, 이로써 인스타 앱을 만들기 위한 전체 구조를 생성해줬다. 다음으로 react navigation을 이용해서 라우팅을 구현해..

7주차 회고 7주차 두번째 회고로 작성할 내용은 MVC와 MySQL을 연결하는 과정이다. MVC 구조를 이해하는 과정은 어렵지 않았지만 데이터베이스와 연결하면서 복잡한 부분이 생겨 섬세하게 기록해두고 계속해서 복습하려고 한다. MVC 구조를 생성해보고 MySQL과 연결하는 방법을 연습해볼 수 있었다. 1. MVC : Model View Controller => Model = 데이터를 처리하는 부분 / View = UI관련 처리(사용자에게 보여짐) / Controller = View와 Model 연결 장점 : 패턴을 구분해 개발, 유지보수 용이, 유연성, 확장성 높음, 협업에 용이 단점 : 완벽한 의존성 분리 어려움, 설계단계 복잡 및 시간 오래 걸림, 클래스가 많아짐 대략적으로 폴더의 기능에 대해 설명하..

2주차 세션 2주차 세션에서는 html, css 심화 개념과 자바스크립트에 대한 세션이 진행됐다. 먼저 지난 주에 배웠던 html, css를 점검하기 위해 레이아웃을 만드는 시험이 간단하게 진행됐다. 어려운 레이아웃은 아니었지만, 10분정도의 시간이 주어졌고, 과제에서 사용하지 않았던 새로운 방법으로 레이아웃을 만들어보려고 했는데 div를 묶어주는 section 하나에 height 비율을 빠뜨려서 시간 안에 완벽히 완성해내지는 못했다. 그렇지만 바로 문제를 찾아서 height을 부여했고, 레이아웃은 완성해냈다. => 레이아웃을 구성할 때는 큰 요소부터 구성해나가는 것이 좋다고 피드백을 들어서 먼저 구조를 만들었다. 다음으로 큰 요소부터 하나씩 css를 적용하기 시작했다. 큰 요소에는 고정 크기로 px단위..