[포스코x코딩온] 아카이브 🖊️

포스코x코딩온 8기에서 활동한 내용들을 정리합니다.

🐣 HTML, CSS, JavaScript

2023.07.04 ~ 2023.07.15

💅 Team Project Beauty LAB - 화장품 추천 사이트

2023.07.17 ~ 2023.07.23

• 배포 도메인

목표

• 모바일부터 시작해서 데스크탑까지 어색함 없는 반응형 웹 사이트를 구현한다.
• 스크롤에 따른 인터렉션 애니메이션을 적용한다.
• CSS 의 효율적인 관리를 Sass 를 통해 실행한다.
• 팀원들과 GROUND-RULE 로 클래스 명명규칙에 BEM 방법론을 적용한다.

프로젝트 기록

레포지토리	블로그 정리글
beauty-lab	1탄 git 관리와 논의사항 2탄 프로젝트 회고

멤버

dawncoding	JSHWJ	suhyunes22	Stendhalsynd

🐥 Backend

2023.07.26 ~ 08.30

학습내용

• Node.js
• express
• Database
• MVC
• Orm, Sequelize
• Naver Cloud Platform & AWS 배포
• EC2, RDS, S3
• Apache, Nginx
• WebSocket, Socket.io

스터디 - React 스터디

매주 리액트에 대한 자유 주제로 2개 이상 블로그 작성을 하는 스터디 모임

2023.08.05 ~ 08.30, 09.15 ~ 09.30

https://github.com/Stendhalsynd/react-study

💅 Team Project Do IT - 개발자를 위한 스터디 모집 플랫폼

2023.08.31 ~ 2023.09.14

• 배포 도메인

목표

• 좀더 협업다운 협업을 해보자.
  • 스크럼과 스프린트 회고
  • 요구사항 명세서 노션 정리
  • git 과 rebase
  • code review
  • MVP (Minimum Viable Product) 최소 실행 가능 제품
• 검증된 인원들로 스터디를 모집하거나 개설할 수 있다.
• 프롬프트 엔지니어링을 통해 CS 면접 연습을 ChatGPT 를 면접관으로 배정하여 진행할 수 있다.
• 스터디 개설 알림을 Slack 의 SocketMode 를 통해 slack 으로 notification 을 받을 수 있으며 WebHook 기능을 통해 slack 에 전송된 메세지에 담긴 수락 / 거절 버튼을 눌러 서버에 커스텀 콜백을 실행시킬 수 있다.
• 마우스 움직임을 트래킹하여 인터렉티브한 애니메이션을 줄 수 있다.
• sequelize 를 통해 orm 을 구현한다.
• sass 를 깊게 활용할 수 있다.
  • mixin - include
    • figma typograhpy 를 mixin 으로 저장해두고 각 css 에서 불러와 사용하는 방식

프로젝트 기록

레포지토리	블로그 정리글
Do IT	1탄 slackbot 도입을 위한 조사 2탄 프로젝트 회고 3탄 slackbot 도입기 정리

프로젝트 피그마 디자인

피그마 디자인 바로보기

발표 관련 자료

• 구글 슬라이드
• miro db 설계 및 work flow

멤버

dawncoding	Stendhalsynd	best0611	syxxne
메인 페이지 로그인, 회원가입, 로그아웃 기능 구현 스크롤 인터렉션 서버 배포	피그마 디자인 웹 로그인, 회원가입 애니메이션 스터디 개설 - slackbot 스터디 상세페이지	스터디 리스트 페이지 스터디 개설 페이지 마이페이지	면접 연습 페이지 - OpenAI API 모바일 로그인, 회원가입 css 버튼 클릭 애니메이션

스터디 - 쏙쏙 들어오는 함수형 코딩 북스터디

책을 읽으며 우아한 스터디를 비롯한 여러 북스터디의 방식을 활용해 책을 읽고 인상적이었던 부분, 그에 대한 생각 및 코드 적용해봤을때 느낀 점 등을 기록하는 스터디

2023.08.30 ~

https://github.com/Stendhalsynd/book-study-functional-coding

🐤�프론트엔드

2023.09.15 ~ 10.10

학습내용

• React.js
• React-Router-dom
• React-Hook-Form
• Redux, Redux-Toolkit
• Typescript

🤗 Personal Project - 나만의 포트폴리오

2023.10.11 ~ 2023.10.19

• 배포 도메인

목표

• vite 기반 react 프로젝트와 typescript 로 컴포넌트를 다룰 수 있다.
• atomic desgin 패턴으로 컴포넌트 구조를 다룬다.
• 전역 상태관리는 recoil 을 활용한다.
• 스타일은 styled-component 를 활용한다.

프로젝트 기록

레포지토리	블로그 정리글
portfolio	나만의 포트폴리오 제작 회고

프로젝트 피그마 디자인

피그마 디자인 바로보기

✏️ 블로깅 기록

순번	포스트	태그	종류
1	1주차 회고1 - git	git, ssh
2	1주차 회고2 - HTML	HTML
3	1주차 회고3 - CSS	CSS
4	2주차 회고1 - Javascript	JavaScript, ProtoType
5	2주차 회고2 - Javascript	JavaScript, Method
6	2주차 회고3 - DOM, jQuery	DOM, jQuery
7	3주차 회고1 - Team Project [코위] (화장품 추천 사이트)	Team Project
8	3~4주차 회고2 - Team Project[코위] (화장품 추천 사이트)	Team Project
9	4주차 회고2 개인프로젝트1-1 - 나만의 포트폴리오	Personal Project
10	4주차 회고3 - Node.js & 동기, 비동기	Node.js , 동기, 비동기
11	5주차 회고1 - JS , express 미들웨어, REST	JavaScript, express, REST
12	5주차 회고2 - form, 동적 form, 파일 업로드	form, 동적 form
13	5주차 회고3 - database	database
14	React 설치와 기본 개념	Babel, WebPack, JSX
15	컴포넌트, state & props	Component, props, state
16	6주차 회고1 - 디자인패턴	design pattern, singleton, decorator, observer, strategy, SOLID
17	6주차 회고2 - ORM	ORM, sequelize
18	6주차 회고3 - Server	apache, Naver Cloud Platform
19	React 18의 변경점	React 18, CSR, SSR
20	CSS & 재렌더링 최적화	CSS, memoization
21	Class Component & Function Component	class, class component, function component
22	7주차 회고1 - 회고란 무엇인가	생각
23	7주차 회고2 - Cookie & Session & JWT	cookie, session, jwt
24	7주차 회고3 - AWS EC2 & RDS	AWS
25	7주차 회고4 토이프로젝트 <슬랙봇을 활용한 스터디 리마인더>	AWS , EC2, pm2, slack api, slack bot
26	7주차 회고5 - nginx	웹서버, nginx
27	useEffect 원리 파헤치기 1	useEffect
28	useEffect 원리 파헤치기 2	closer
29	8주차 회고1 - JSON 웹 토큰(JWT) 이해하기	JWT
30	8주차 회고2 - Restful API Naming Convention	REST, API Naming Convention
31	8주차 회고3 - Test Code with Jest or Vitest	Test Code, Jest , Vitest	,
32	Vitest 입문	Vitest
33	useEffect 원리 파헤치기 3	useEffect
34	useContext 이해하기	useContext
35	9주차 회고1 - TCP/IP Deep Dive	TCP/IP
36	9주차 회고2 - WebSocket	WebSocket
37	useReducer 이해하기	useReducer
38	9주차 회고3 Socket.IO	Socket.IO
39	10 ~ 11주차 팀프로젝트 Do-IT 회고1	slackbot, webhook
40	10 ~ 11주차 팀프로젝트 Do-IT 총 회고	project, webhook, scss, OpenAI, slack, bolt.js
41	10 ~ 11주차 팀프로젝트 Do-IT 슬랙봇 생성기	slackbot
42	useRef 이해하기	useRef
43	redux 입문	redux
44	12주차 회고1 atomic design	atomic design
45	12주차 회고2 this	this
46	redux 용어 이해하기	redux
47	state, action, reducer 생성하기	redux
48	redux 로 todo 앱 만들기	redux
49	redux 로 modal 만들기	redux
50	13주차 회고1 React Router 입문	react router
51	13주차 회고2 React Hook Form with async redux	react hook form, redux createAsyncThunk
52	recoil 로 todo 앱 만들기	recoil
53	14주차 회고1 redux toolkit	redux-toolkit
54	15주차 개인 프로젝트 - 나만의 포트폴리오	vite-react, recoil, typescript, atomic design
55	16주차 회고1 Java Arrays & ArrayList method 성능비교	Arrays, ArrayList
56	17주차 회고1 캐스팅 & 인터페이스	upcasting, downcasting, interface
57	18주차 회고1 spring boot	spring boot
58	18주차 회고2 JDBC	JDBC
59	19주차 회고1 GraphQL	GraphQL
59	19주차 회고2 next.js 입문1	Next.js
59	20주차 회고1 next.js 입문2	Next.js
60	20주차 회고2 Next.js 14 + Styled component	Next.js 14, styled component
61	20주차 회고3 Next.js 14 + app router, styled component error	Next.js 14, styled component, error
62	21주차 회고1 storybook 자동배포 with chromatic, github actions	storybook, github action, chromatic
63	21주차 회고2 openvidu 오류모음	openvidu, WebRTC
64	22주차 회고1 최종 팀 프로젝트 [커리업] - WebRTC 기반 1:1 화상 컨설팅 플랫폼 회고	팀 프로젝트, WebRTC
65	22주차 회고2 코딩온을 마치며 대기업 취업까지 2023 취준 회고	취준회고