프론트엔드 개발 기획과 디자인을 토대로 컴포넌트 별로 개발을 시작했다. 개발 기간은 3/13 ~ 3/21까지 총 9일동안 진행했고, 노션과 슬랙을 통해 진행상황을 매일 공유하며 프로젝트를 진행했다. 이번 프로젝트에서 팀장을 맡게되어 일정 관리와 팀원들의 역할 분배에 가장 많은 신경을 썼고, 공동으로 작업하는 노션으로 공지를 올리고 스케줄을 관리할 수 있도록 유도했다. 본격적으로 컴포넌트 개발을 하면서 메인 브랜드, 버튼, 이벤트 배너, 구매페이지, 헤더 컴포넌트 등을 개발했고, 애니메이션과 css 적용을 담당하여 프로젝트를 진행했다. 컴포넌트를 개발하는 과정에서도 팀원들이 어려움을 느끼거나 문제가 생기면 같이 고민하며 문제를 해결했고, 진행하지 못하는 부분은 대신 넘겨 받아서 수행하는 등 서로 도우면서 ..

기획 부트캠프 교육을 시작하고 첫 프로젝트를 진행하게 되었다. 프론트엔드 프로젝트인 만큼 시각적인 부분에서 어떤 것을 어필할 수 있을지 고민이 많이 됐다. 소재도 특별한 걸 하고 싶었지만 배운 것을 잘 활용해보자는 의도에서 소재는 간단히 쇼핑몰을 만들어보자고 팀원들과 의견을 나눴다. 소재는 흔하게 볼 수 있는 내용이지만 기능을 추가해서 조금이나마 프로젝트의 특별함을 어필해보기로 했다. 최근 디지털 약자를 대상으로 디지털 격차가 증가하고 있는 추세라는 점을 고려해 1. 큰 글자로 확인할 수 있는 기능 2. 설명서를 이용하는 것과 유사하게 단계별로 주문을 완료할 수 있도록 페이지 간소화 및 단계화 라는 2가지 기능에 point를 잡고 쇼핑몰 페이지를 만들어보자고 제안했다. 그러나, 팀원들이 열흘이라는 프로젝..

3주차 회고 부트스트랩을 이용하여 웹사이트를 만드는 방법에 대해 배우고, 본격적으로 1차 프로젝트를 시작하기에 앞서 컴포넌트 제작, 반응형 웹 사이트 제작과 관련해 연습해볼 수 있었다. 프로젝트 회고는 진행상황에 따라 다음 글에서 작성하려 한다. 1. 부트스트랩 (bootstrap) : 웹사이트를 쉽게 만들 수 있도록 도와주는 공개 html, css, js 프레임워크 => 부트스트랩을 이용하여 css를 설정하려 한다면 클래스 명을 복사, 붙여넣기 해주면 된다! ex. 파란색 블록, 검은색 블록을 만들려고 할때, 클래스명을 부트스트랩에서 text-bg-primary, text-bg-dark 로 설정하면 화면과 같이 블록이 생긴다. 이외에도 bg-primary, bg-accent 등 클래스 명을 통해 부트스..

3주차 회고 저번주에 이어서 자바스크립트에 대해 배우고 있다. DOM의 속성, classlist, event, jQuery, media쿼리 등을 배웠으며, 간단한 실습 과제도 수행했다. 1. jQuery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 라이브러리 => jQuery는 빠르고 작으며 기능이 풍부한 자바스크립트 라이브러리라고 한다. 이를 통해 문서 조작, 이벤트 처리 등을 훨씬 간단하게 만들어줄 수 있다. 1. jQuery 메서드 $(선택자).val() : 값을 가져올 수 있다. $(선택자).val("설정할 값") : '선택자' 요소에 "설정할 값"을 value 값으로 줄 수 있다. $(선택자).css("속성", "속성값") : '선택자' 요소에 css를 적용할 ..

2주차 회고 저번 시간에 HTML, CSS 수업이 마무리 되고 자바스크립트에 대해 배우기 시작했다. 화면의 기능을 구성하는 언어로서 클론코딩을 통해 동작에 대해 이해하고 실습해보는 방식으로 수업이 진행됐다. 2주차에는 변수, 함수, 조건문, 반복문, 연산자, 배열, 객체, DOM 등에 대해 배웠고, 꽤 많은 내용은 배운만큼 중요한 내용은 섬세하게 정리한 후 넘어가려 한다. 1. JavaScript : 주로 브라우저에서 사용하는 언어 UTF-8 : 모든 언어를 다 표현할 수 있는 (인코딩할 수 있는) 코드표 자리수 하나를 bit(비트)라하고 8개의 비트가 모이면 8bits=1byte라고 한다. 글자하나를 표현할 수 있는 단위 CPU=사무실(명령어 만들어냄), RAM=작업장(실제 작업 실행) => ex. k..

1주차에 이어서 css를 배우는 중인데 엄청난 디자인적인 부분은 아니지만, 동적으로 화면을 변경하며 구현해보는 것이 매우 재미있다..! 실습도 가끔 생각지 못했던 방법도 있었지만, 대부분 배운 내용을 활용해서 구현할 수 있는 정도라 어렵지 않게 진행할 수 있었다.╰(*°▽°*)╯ 2주차 회고를 시작해보려 한다. 이전과 마찬가지로 새롭게 알게된 내용과 중요한 내용 위주로 정리해보겠다. 2주차 회고 CSS에서 position, display, transform, transition, animation 등의 개념을 배웠으며, 이를 활용해 동적인 화면을 구현하는 실습 과제도 수행해볼 수 있었다. 1. position : position은 필요한 순간에만 적절히 사용하는 것이 좋다고 한다..! static : 정..

1주차 회고 첫 수업에서 간단한 OT와 git 수업을 마친 후 본격적으로 프론트엔드 수업이 시작되었다. HTML과 CSS에 대해 배웠으며, 개념을 학습하고 주어진 과제를 통해 스스로 코드를 활용해 연습해볼 수 있었다. 배웠던 내용을 가볍게 복습 차원에서 새롭게 알게된 내용 위주로 정리해보려 한다. 1. HTML HTML은 웹페이지를 구성하는 가장 기초적인 단어이다. hypertext markup language의 약자로 '마크업'이란 구조화를 의미한다. 마크업을 좀 더 이해하기 위해 예를 들어보겠다. if. 마크업을 하지 않았을 때 => [ 포스코x코딩온 KDT 웹 개발자 과정 12기 월~토 09:00~14:00 ] : 이는 정보없이 봤을 때 어디까지가 하나의 의미를 가지는 지 파악하기 어렵다. if. ..

[POSCO x Codingon] 웹개발자 풀스택 과정 12기 참여 웹 풀스택 개발을 학습하기 위해 [POSCO x Codingon] 웹개발자 풀스택 과정 12기에 참여하게 되었다. 개발자를 목표로 공부를 해나가는 과정에서 프론트엔드는 꾸준하게 스스로 공부를 해왔지만, 프론트엔드만으로는 추가적인 기능들을(ex. 로그인, 데이터 추가 및 활용 등) 더 만들어 나갈 수 없음에 아쉬움을 느껴 백엔드에 대한 공부 욕심이 커졌다. 그러나 백엔드를 혼자서 공부하기엔 지식이 많이 부족했고, 실습 또한 어려웠기에 프론트엔드뿐만 아니라 백엔드까지 풀스택으로 학습할 수 있는 부트캠프를 알아보았다. 수많은 부트캠프 중 [POSCO x Codingon] 웹개발자 풀스택 과정을 선택하게 된 이유는 1. 100% 오프라인이라는 ..