Dev_Ryomi

- 학습 내용 React component Web font transition / transform React boot strap Link favicon img - 회 고 : 포트폴리오용으로 페이지 하나를 배포했다. 지금껏 HTML, CSS, JavaScript, React를 학습하며 배웠던 내용을 바탕으로 열심히 만들었다. 순서는 정확히 기억은 안 나지만, 만들면서 부딪혔던 문제들이 많았다. 먼저, 부트스트랩을 사용해 nav-bar를 넣을 때였다. React를 학습하며 부트스트랩을 쓴 경험이 없어 HTML에서 사용했던 것 처럼 부트스트랩에 가서 긁어 왔는데, React 용이 따로 있었다. 관련 확장 프로그램을 설치하고 사용할 코드를 긁어와 VS code에 넣어줬더니, 이..

- 학습 내용 React useState useEffect Link 삼항 연산자 className - 회 고 : 노마드 코더에서 '실전형 React Hooks'와 'React JS로 영화 웹서비스 만들기' 2개의 강의를 들으며 React를 공부했다. useState와 useEffect에 먼저 익숙해져야 한다고 해서 코드를 따라 치며 익숙해지려 노력했다(덕분에 계산기 기능 구현을 할 수 있었다). Hooks 강의 수장 후 메인 페이지에서 useState와 useEffect를 사용하여 데이터 정보를 받아오고 이를 사용하는 방법을 익혔다. 이후 스타일링과 디테일 페이지는 강의 없이 각자 알아서 만들라고 했다. 그리고 여러 문제에 부딪혔다. 먼저, 포스터에 마우스를 두면 영화의 간략한 설명(왼쪽에서 두 번째 그..

- 학습 내용 React useState - 회 고 : 예전에 만들다 실패했던 계산기를 만들었다(기능 구현을 하지 못했다). 아이폰 계산기를 모델 삼아 만들어 제 기능을 하는 계산기를 만들었다. mock up에서 각 버튼을 li 요소로 썼지만, 만드는 과정에서 button 요소로 바꾸었다. 계산기를 만들면서 최근에 배운 React의 useState에 익숙해질 수 있었다(Movie App을 만들며 React를 공부했다). React로 js와 html를 한 번에 작성할 수 있어 나중에 익숙해지면 엄청 편하고 재밌을 것 같다. 이전에 계산기를 만들 때는 html과 css 작업만으로도 벅찼는데, 생각보다 일찍 끝났다. 문제는 역시 기능 구현이었다. setNum으로 숫자를 설정할 때, 입력값은 숫자지만 문자로 바..

- 학습 내용 타사코드 사용 방법 - 회 고 : 타사코드를 처음 알게됬다. 오... 이런게 있네. 그리고 왠지 모를 현타가 왔다. 나는 무슨 부귀영화를 누리겠다고 html, css, js를 그리 열심히 공부했나 하고. 사용방법을 잘 익혀서 자주 그리고 유용하게 써야겠다.

- 학습 내용 modal 창 구현 backdrop defer data-col/row article DOM eventListener - 회 고 : 'Tic, Tac, Toe'를 만드는 과정은 내게 개안이 되는 순간이었다. 생각해보면 현재 수강하는 강의를 듣기 전, html, js, css를 각각 배웠기 때문에, eventListener도 DOM도 쉽게 와닿지가 않았다. 뭔가 장벽이 있는 느낌이랄까. 하지만 이번에 Tic, Tac, Toe를 만들면서 (이런 게임이 있다는 것도 처음 알았지만) 말 그대로 개안이 된 것 같다. '이렇게 쓰는구나', '이렇게 개발하는구나'를 체감하는 순간이었다. 게임을 만들면서 여러가지를 많이 배웠다. 생소한 것도 있었고 익숙하지 않은 것도 있었다. 첫 난관은 modal창을 통해..

- 학습 내용 반복문 연습 calculator : 0부터 입력한 숫자까지의 합 반환 Highlight Links : 해당 버튼을 누르면 특정 글자에 highlighting Your informartion : 해당 버튼을 누르면 개인 정보가 나타남 Statistics : 해당 숫자가 나올때까지 주사위를 던진 횟수와 나온 숫자의 리스트 반환 - 회 고 : 오랜만에 반복문과 Math 를 사용해서 재밌었다. 듣고있는 강의의 미션이었는데 이전에 공부했던 내용이 있어서 더 즐겁문제를 풀었다. 강사가 사진을 주고 구현해 오라고 하는 미션이었는데, 주어진 사진을 보고 HTML/CSS/JS 를 이용해 하나씩 직접 만들어 가는건 언제나 즐거운 것 같다. 변수명을 지을때 강사처럼 보다 직관적으로 짓고 싶은데 그게 잘 안 된..

- 학습 내용 java script를 이용해 글자 수에 따른 입력창의 글자 수와 입력창 색 바꾸기

- 학습 내용 form요소의 method 속성 input 요소의 속성 select와 option button의 type - 회 고 : 이론으로만 접했던 내용들을 직접 사용해보면서 요소의 속성들을 적절하게 사용하는 것에 익숙해져야 함을 깨달았다. 처음 공부를 시작할 때, 먼저 강의를 통해 개발 용어와 공부할 내용들에 익숙해지고자 했다. 하지만 최근 강의를 들으며 하나씩 만들어 볼 때 마다, 이전에 가볍게 넘어갔던 내용들도 직접 해보니 생각이 나지 않을 때도 있었고 각 속성에 어떤 값을 적절하게 사용하는지 모르는 경우도 있었다. 역시, 개발은 눈으로 하는게 아니라 손으로 하는거라는 말이 틀리진 않았나보다. 아, 아직 백엔드를 배우지 않아서 POST를 사용해본적이 없다. 백엔드를 배우면 해봐야지.

- 학습 내용 반응형 웹 구현시 unit의 대한 이해 데스크탑/모바일 우선 접근방식의 이해 미디어쿼리의 이해와 사용 모바일 nav 만들기(햄버거 아이콘) 페이지 내 이동 (ex) ) - 회 고 : 처음 해보는 것들이 많아 신기하고 재밌었다. 미디어쿼리를 이해하고 모바일 nav를 햄버거 아이콘으로 만드는 연습을 했다. 해당 강의에서 이미지를 보고 구현해보라고 했을 때, 어떻게 해야할지 막막해서 혼자 한참을 고민하다가 결국 강의의 도움을 받으며 완성할 수 있었다. 지난 몇 개월간 html, css, java script 등을 천천히 보기는 했지만 역시 해보는건 정말 다르다는 점을 다시 한번 느끼는 순간이었다. 특히, unit에 있어서, px에 익숙했는데 다른 unit에도 익숙해지고 적절한 사용법을 익히는 것..

- 학습 내용 Sementic Elements display: flex; justify-content: space-between; align-items: center; position: absolute; box-sizing: border-box; text-transform text-shadow 그라데이션 그리드 nth-of-type(num) main요소의 배경 위에 header 놓기 object-fit - 회 고 : 위 페이지를 만들면서 새로운 것들을 많이 익혔다. 시멘틱 요소는 이론으로는 학습했지만 사용한 경험이 거의 없어 이번 강의가 특히 유익했다. 이번 경험을 통해 적절한 곳에 시멘틱 요소를 사용하는 연습을 해야겠다는 생각이 들었다. 사진을 보고 홈 페이지에 배경화면을 넣어야 할 때, 어떻게 해야 ..