Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
[프론트엔드/html css js react] 여기 올리려고 기존의 웹사이트 완전히 갈아 엎었어요! ㅎㅎ
#portfolio
3 years ago
10,128
12

[프론트엔드 --> 풀스택 지향 중]

(포폴 웹사이트 자체: html css js /

포폴 내부 프로젝트들은 주로 React Express NodeJS MongoDB)

=========

먼저, 사이트 링크와 스크린샷입니다.

https://sohye.dev 

(이건 원래 제가 만들었던 포폴사이트에요 : http://sohyelee.com )

1. toggler 를 만들고 어두운 모드 / 밝은 모드 전환 가능하도록 했습니다.

undefined

undefined

2. 프로젝트 몇 개를 올려서 이미지는 좌우 스크롤로 볼 수 있도록 했습니다.

undefined

3. 제 소개 간단하게 넣으면서 d3.js로 버블 챠트 만들었는데 이거 너무 재미있었어요.

undefined

4. 제 컨택 넣은 부분입니다. 이 rainbow effect가 이 문구랑 너무 잘 어울리는 것 같아서 이렇게 만들어보았어요.

undefined

5. 1024px 이하로는 위에 버거 누르면 이렇게 X자로 바뀌고 드랍다운으로 헤더 내려오도록 했어요.

undefined

#자기소개 : 저는 약 1년 넘게 혼자 거의 독학으로 웹 개발 배우고 있어요. 현재 미국에 있구요, 주로 프론트 엔드 리액트 위주로 배웠는데 최근에 풀스택으로 넘어왔습니다.

#서비스 소개: 이 부분이 정확하게 뭘 써야하는지는 모르겠는데, 저는 리액트 위주로 최근 반년간 계속 공부해와서 대부분 프로젝트가 이쪽이에요. 현재 진행중인 블로그 사이트는 완전히 혼자서 하고 있는데 많은 어려움이 있습니다 ;

#개발과정: 이 포폴은 비교적 단순한 편이라 개발이 어렵지는 않았지만, d3의 차트에 관심이 많아서 그걸 이용해서 시각적으로 제 스킬을 보여주고 싶었어요. 이게 하루 종일 걸린 것 같아요. 기존에 있던 코드를 거의 그대로 베꼈는데 계속 너무 오류가 나서, 아주 바닥부터 documentation 읽어가며 했는데, 오래 걸렸지만 만들고 나니 너무 뿌듯했습니다.

이외에 지금 진행 중인 블로그 사이트의 경우는, 백엔드 부분이 쉽지가 않네요. 특히 컨텐츠를 put, post 하는 과정에서 데이터를 어떤 식으로 주고 받는지를 아직 완벽하게 이해를 못한 느낌입니다. 아직 이 부분은 해결하려 노력 중입니다.

#저는 올해 중반부터 회사들 지원을 시작해보려고 준비중인데요, 일단 요즘 TypeScript와 GraphQL이 핫한 것 같아서, 여기서 열심히 이 부분 배우려고 하구요. 프로젝트는 데이터를 다루는 웹서비스를 만들어보고 싶어요.

12 comments