7주차 단일 파일 업로드, 다중 파일 업로드, 동적 form에서 Multer 미들웨어를 이용한 파일 업로드에 대해 배웠으며, 실습 과제로 회원가입 form을 만들고, 파일 업로드된 이미지와 결과를 화면에 보여주는 실습을 해볼 수 있었다. MySQL을 사용해 sql 쿼리를 작성해보고 연습했으며,조건에 맞는 sql쿼리를 스스로 작성해보는 실습을 진행했다. 1. Multer 미들웨어 : 이미지, 동영상을 비롯한 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어이다. 멀티파트 ? 클라이언트와 서버 간 전송되는 http 요청 또는 응답에서 여러 종류의 데이터를 동시에 전송하기 위해 사용되는 방식 => enctype이 multipart/form-data인 폼을 통해 업로드 하는 데이터 형식 enctype="..

리액트 네이티브란? 리액트와 앱 플랫폼의 기본 기능을 사용해 안드로이드 및 ios 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크이다. 장점 1️⃣ Web view를 사용하는 다른 크롯 플랫폼과는 달리 실제 호스트 플랫폼의 표준 렌더링 API를 사용해 렌더링한다. => Web view를 사용하면 모방이 기본이기에 한계가 있다. => 그러나, 리액트 네이티브는 마크업 요소를 실제 네이티브 요소로 변환해서 사용한다. 2️⃣ 리액트와 대부분 비슷하기에 쉽다. (state, props가 변경되면 view를 렌더링하는 등) => 차이점 : 네이티브는 호스트 플랫폼의 UI 라이브러리를 활용해 이를 수행한다. 3️⃣ 대부분 비슷한 소스 코드로 ios, 안드로이드 모두를 위한 앱 개발이 가능하다. => 시간 절약 가..

1주차 세션 아기사자가 된 후, 본격적으로 1주차 세션이 진행됐다. HTML, CSS에 대해 배웠고, vscode와 github를 연결해 코드를 작성했다. HTML과 CSS를 연습하기 위해 간단한 자기소개 페이지를 만드는 실습도 진행했다. 나는 display:flex, justify-content:space-between, list, align-items 등을 이용해 자기 소개 페이지를 구성했다. 결과물 사진을 첨부하겠다. 코드는 생각보다 길어서 깃허브를 참고하는 것이 더 좋을 것 같다. 다음으로 자바스크립트에 대해서도 짧게 배울 수 있었다. 변수를 설정하고, 배열을 설정하고, 값을 콘솔창에 출력해보는 연습을 할 수 있었다. 마지막으로 조건문 if, switch문까지 배웠다. 세션이 끝난 후 1주차 과제..

멋쟁이 사자처럼 동아리 지원 복수전공 학점을 채워야해서 추가학기가 확정되고난 후, 이렇게 된 김에 1년 열심히 살아보자 하고 생각했다. 그래서 할 수 있는 활동을 알아보던 중 해커톤에 참여하려고 했으나, 혼자서는 팀빌딩이나 목표가 같은 동료를 찾기가 쉽지 않았다. 따라서 동아리에 들어가 함께 성장할 수 있는 환경을 만들어보자는 생각으로 개발 동아리를 알아보게 됐다. 수많은 동아리 중에서 멋쟁이 사자처럼을 선택한 이유는 비전공자를 위한 동아리로 기초 부터 스터디, 아이디어톤, 해커톤 등 다양한 활동에 참여할 수 있어서였다. 정말 참여하고 싶은 간절한 마음으로 지원서를 작성하기 시작했다. 지원서 내용은 4가지였다. 1. 자기소개 2. 지원동기 및 해당 파트 선택 이유 3. 프로젝트 경험 및 역할 4. 만들고..

6주차 회고 이어서 node.js의 모듈인 express, ejs 등과 form을 활용해 데이터를 전송하는 연습을 해볼 수 있었다. 또한, 비동기 처리, 콜백 함수, promise, async - await 문법도 배우고 실습해볼 수 있었다. 1. callback 함수 : 비동기 코드를 처리하기 위한 방법 1 : 다른 함수가 실행을 끝낸 뒤 실행되는 함수이다. => 매개변수로 함수를 받아서 사용할 수 있다. => 콜백함수를 사용하는 이유는 응답을 받은 후 처리돼야하는 작업이 있을 수 있으므로, 함수가 다른 함수의 실행을 끝낸 뒤 실행되는 것을 보장하기 위해서라고 한다..!! 아래의 코드는 가장 기본적인 형태의 콜백함수이다. => 함수를 먼저 선언한 후 맨 마지막에 함수를 하나 더 선언하는 방식으로 정의한..

6주차 회고 프로젝트를 마치고 다시 이론을 공부하려고 하니 힘든 부분도 있었지만, 힘내서 6주차 회고를 다시 작성해보려 한다. node.js에 대해 더 자세한 기능들과 사용할 수 있는 모듈에 대해 배웠으며, 모듈을 불러와 출력하는 연습을 해볼 수 있었다. 1. node.js : 크로스 플랫폼 오픈 소스 자바스크립트 런타임 환경 => 브라우저 외부에서 자바스크립트가 실행될 수 있는 환경을 만들어 준다. : 실행시간이 매우 빠르고, 다양한 플랫폼에서 실행된다. REPL : node.js의 대화형 모드 : node 명령어로 node.js를 실행해주고, a, b를 선언한 후 콘솔창에 출력되도록 명령을 넣어주었다. 실행을 마치려면 .exit를 적어주면 된다. : node의 REPL은 윈도우의 cmd, 맥의 ter..

[프로젝트 개요] [프로젝트 주제] : 디지털 약자를 위한 큰 글자 브랜딩 사이트 [진행 기간] : 2024.03.08 ~ 2024.03.23 [개발 인원] : 3인 (본인 포함) [팀명] : 스틸스 [주제 선정 배경] 과학기술정보통신부의 '2022 디지털정보격차 실태조사'를 살펴보면, 65살 이상 고령층의 디지털 정보화 역량 수준은 평균과 비교했을 때 절반 수준인 54.5%에 그침 디지털 기술이 가속화되면서 일상은 편리해졌으나, 고령층 등 신문물에 약한 디지털 약자가 새로운 난제로 떠오르고 있음을 확인했다. 디지털 격차 해소는 반드시 필요한 중요한 문제이며, 기존의 쇼핑몰을 이용할 때 작은 글씨와 복잡한 절차에 불편함을 느껴 디지털 약자를 타겟층으로 쇼핑몰 구성을 간소화하고, 브랜드 마켓팅을 목표로 큰..

코드 작성을 완료하고 사이트를 배포하기 위해 node.js와 netlify를 사용해 배포 환경을 만들었다. 배포까지 완료한 후 링크를 통해 페이지에 들어갔을 때, 생각지도 못했던 오류가 발생하고 있는 것을 확인했다. 분명 Local Live 환경과 Local build 환경에서는 작동이 잘 되던 기능이 배포 환경에서 작동하지 않는다는 것이었다. 처음에는 오류가 발생하는 원인을 알 수 없어 막막하고 비상🚨이 걸렸지만, 리더님께 피드백을 받고 오류의 원인부터 하나씩 찾아가기 시작했다. 1. 이미지 경로 오류 상품 페이지에서 상품 정보를 확인하는 이미지가 사이트에 제대로 안 불러와지고, 화면에 안나타나는 오류가 발생했다. 상품 이미지 경로를 script 코드에 명확히 속성을 주었으나, 배포 사이트에서 이미지 ..

페이지를 연결하고 css를 적용하는 과정에서 작은 오류들을 해결한 과정에 대해 적어보려 한다. 맡아서 제작했던 컴포넌트가 아니었기에 따로 글을 구분해서 작성하지는 않고, 한번에 적어보겠다. 내가 작성한 코드가 아니어서 오류의 원인을 발견하고 수정하는 데 시간이 꽤 걸렸지만, 오히려 코드를 분석하고 오류를 찾아내는 경험을 기르기에 좋은 기회였다고 생각한다. 1. swiper 이미지 overflow 충돌 해결 hover css를 적용하는 과정에서 swiper의 이미지가 확대될 때, swiper의 크기에 막혀 확대 부분이 안보이게 잘려지는 것을 발견했다. swiper에 overflow:hidden이 적용되어 있었기 때문인데, 처음에는 hidden을 visible로 바꾸어 이미지가 swiper 밖으로 확대되도록..

구매 페이지는 반응형 웹이라는 목표에 초점을 맞춰 사용자가 최대한 정보를 보기 쉽도록 레이아웃을 구성하는 데 많은 힘을 썼다. 기획에서부터 모바일과 웹 화면으로 나누어 구조를 만들었고, 포함될 주문 단계 역시 간소화했다. 1. 모바일 화면 모바일은 화면의 크기가 작기 때문에 주문 상품 정보를 나란히 배치해 한눈네 확인할 수 있도록 했다. 이에 display:flex 속성을 사용했고, 나란히 배열하니 상품 정보가 서로 공백 없이 달라붙게 되어 보기에 불편하다는 것을 확인했다. 따라서 상품 정보를 포함한 div에 margin을 주고싶어졌다. 모든 div에 margin을 주기엔 레이아웃이 의도와 달리 변형될 것 같아 not(:nth-child), not(:last-child) 속성을 활용해 원하는 위치의 di..