728x90

전체 글 71

[POSCO x Codingon] node.js - callback, promise, form, dynamic form | 웹개발자 풀스택 과정 12기 6주차 회고 2

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

[POSCO x Codingon] node.js, 모듈 - http, express, class | 웹개발자 풀스택 과정 12기 6주차 회고 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..

[스틸스] 메인 브랜드, 배너 컴포넌트 구현

메인 브랜드 컴포넌트는 처음 사이트에 들어갔을 때 브랜드를 어필할 수 있는 컴포넌트를 개발하는 것이라 브랜딩 사이트라는 목적을 이루기 위해 많은 신경을 쓴 부분 중 하나이다. 디자인을 할 때부터 브랜드 명과 설명의 위치, 구도를 잡고 반응형에 따른 레이아웃도 다르게 주었다. 또한, 브랜드 명이 잘보일 수 있도록 background 사진을 어둡게 만들어 글자가 부각되도록 기획했다. 1. 반응형 웹 오류 media 쿼리를 이용해 브랜드 명과 설명의 레이아웃을 달리하면서, 글자 크기나 간격이 일정하지 않고, 모바일 화면에서는 이미지와 글자가 잘리는 오류가 발생했다. 처음에는 이미지를 html코드에 직접적으로 주고, 저체 컴포넌트 height를 vh로 설정했으나, 위와 같은 오류로 인해 다른 방법을 고려했다. ..

[스틸스] header 컴포넌트 구현

먼저 이 프로젝트는 프론트엔드 프로젝트임을 밝히며 글을 시작하겠다.  헤더 컴포넌트는 팀원이 반응형 웹을 구현하는 과정에서 어려움을 느껴 팀원을 대신해 구현을 하게 되었다.   1. 헤더 컴포넌트 구현 먼저, 웹 화면에서 nav bar를 구현한 상태였기에 collapsible과 toggle을 활용해 모바일 메뉴 토글을 구현하려고 했다.그러나 collapsible을 적용하는 과정에서 메뉴 아이콘에 toggle script가 적용되지 않거나, nav bar 형태 그대로 toggle되는 등 오류가 발생했다.  따라서 다른 구현 방법을 고민하게 됐다. div로 새로운 모바일 메뉴 요소를 구현해주고, media 쿼리를 이용해 display:none 속성을 적용하면되지 않을까라는 생각을 하게 됐다.media 쿼리로..

728x90