수끼옹

안녕하세요? 저는 지금 NHN 페이지의 '보도자료' 페이지를 만드는 중입니다. 만들기 전에는 뭐 onClick이벤트로 navigate를 써서 페이지 이동시켜주면 되겠지 라고 생각했는데 막상 만들다보니 그럼 각각의 기사에 맞는 세부 페이지로 어떻게 이동시켜야 되는 거지? 라는 의문이 들기 시작했습니다. 그래서 쉬운 것은 없구나라는 깊은 깨우침을 얻었습니다.. 먼저 결과물입니다 기사를 클릭하면 그 기사에 맞는 세부페이지로 이동합니다. 그렇담 만든 과정을 설명해보겠습니다? 👉 원리 route값을 설정한다(route path는파라미터 id값을 이용한다) -> 기사마다 onClick 이벤트로 url 파라미터에 만들어 놓은 객체의 id 값을 넘겨준다. 👉 코드 [사용한 컴포넌트] App.js(route naviga..

안녕하세요? 지금은 NHN 웹사이트를 열심히 다시 만드는 중이랍니다? 정보 사이트라 수월하게 만들어질 것 같았지만... 생각보다 막히는 기능들이 생기네요 이번에는 회사의 기본윤리를 소개하는 페이지에서, 다음과 같은 기능을 만드는 데에 조금 애를 먹었습니다.. 원에 mouseover가 되었을 때 원의 컨텐츠가 다른 컨텐츠로 바뀌는 기능입니다. 여러가지 방법을 생각해봤습니다 겁도 났습니다 내가 과연 이 기능을 만들 수 있을까?? 아직 많이 부족한가봅니다... 이렇게 해보면 안 될까? 하고 생각이 뿅 하고 나는데, 그럼 그걸 어떻게 구현해야 되지? 뭐부터 만들어봐야 하지? 라는 생각부터 드네요 ~! 그치만 해야 됩니다 차근차근히 해보겠어요 난 찐따 개발자니까... 👉원리 [원 제작] 원 안에 들어갈 내용들을 ..

나는 지금 NHN 홈페이지를 리디자인 후 그걸 바탕으로 사이트를 다시 만들어보는 중이다. '소개' 페이지를 만들던 중 기존의 기본hover 기능만으로는 부족한 hover효과를 만들어야 했다. 0:11 동영상 default 값으로 버튼 하나에 hover 효과가 넣어져 있고, 다른 버튼에 mouseon이 되면 그에 맞게 hover 효과가 적용되는 기능이다. 바로 여기서 눈치를 챘어야 했다. state함수를 쓰면 되는 것이다. 👉 원리 버튼을 클릭했을 때 onMouseOver 이벤트로 state 값을 변경시키고, state값과 버튼의 id값이 같으면 스타일 컴포넌트의 id값을 준다. 👉 순서 state 함수를 만든다 -> onMouseOver 이벤트로 state를 변경시킨다 -> state값과 버튼의 id값을..

안녕하세요? 오늘은 localStorage에 대해서 간단하게 정리해본 뒤, 내가 본 상품의 데이터를 받아서 localStorage에 띄우는 기능을 만들어 볼 겁니다! 1. localStorage 간단 정리 먼저 localStorage는 state와 다르게 페이지를 새로고침해도 데이터가 리셋되지 않는 거 아시죠? 물론 데이터를 서버로 보내서 DB에 저장하면 되지만, 서버나 DB의 지식이 없다면 localStorage를 이용하면 됩니다. - localStorage 공간 확인하기 localStorage는 개발자 도구(F12) > Application 탭 > 왼쪽 Local Stoage > 페이지 주소 클릭 을 하면 확인할 수 있습니다. - localStorage에 데이터값 저장, 불러오기, 삭제하기 1. 데이..

안녕하세요? 거의 한달만에 싸지르는 글이네요 ㅎㅎ 제가 최근에 공부한 기능들 중 저에게 시련을 줬었던 장바구니 기능에 대해 정리해 보려고 합니다. 어떻게 생각해보면 쉬운 거 같은데.. 많이 생각해 볼수록 절대 풀리지 않더라구요 ㅠㅠ 구글링과 저의 멘토의 도움을 통해 결국은 풀어냈습니다. ● 장바구니 삭제 기능 만들기 항목 삭제하기 버튼을 누르면 항목 리스트가 삭제되는 기능을 만들면 된다. 나는 redux의 reducer로 state 변경함수를 이용하여 만들었다. 1. reducer에 state 변경함수를 생성한다. state 변경함수는 삭제 버튼의 onClick 이벤트로 호출된다. 삭제버튼을 클릭 하면 리스트의 id값을 넘겨줘서, id가 똑같은 리스트는 제외하고 나머지 리스트들을 return 해주는 원리..

안녕하세요? 오늘은 tab 버튼을 클릭하면 그에 맞는 컨텐츠들이 뜨도록 만들어 보겠습니다? 먼저 결과물 입니다. default 값은 버튼0이 선택되고 내용0이 띄워져 있는 것이고, 버튼 1을 클릭하면 내용1로, 버튼2를 클릭하면 내용2로 바뀌게 동작합니다. 동작원리 state와 조건문을 이용해 onClick 이벤트로 버튼을 클릭할 때마다 그에 맞는 컨텐츠의 state값을 변경해주면 된다. code 1. 탭을 생성한다. (저는 부트스트랩에서 Nav를 검색한 뒤 가져왔습니다.) import Nav from 'react-bootstrap/Nav'; 버튼0 버튼1 버튼2 2. 탭에 따른 컨텐츠를 띄우기 위해 state를 생성한다. let [tab, setTab] = useState(0); state가 0이면 내..

안녕하세요? 오늘은 페이지로 들어갔을 때 3초 뒤 사라지는 상자를 만들어 볼 겁니당 먼저 setTimeout() 함수란? 일정 시간이 지난 후에 원하는 함수를 실행할 수 있도록 해주는 함수이다. react 에서는 setTimeout( () => { 실행할 코드 } ); 형식으로 쓰면 됩니다! 즉 페이지가 로딩될 때 실행되어야 하므로 useEffect를 써야하고, useEffect 안에 setTimeout 함수를 써주면 된다, 1. 상자를 생성한다. 저는 3초 뒤 사라져요! 2. 나타났다가 없어지는 동적인 동작을 위해 상자의 상태를 state로 저장한다. let [showBox, SetShowBox] = useState(true); 3. useEffect 안에 페이지가 로딩된 후 실행될 코드를 작성한다. ..

오늘은 css를 대신해 styled-componets를 사용해서 스타일을 넣어보겠습니다. styled-components를 사용하면 css 파일에서 스타일을 지정하지 않고도 js 파일 내에서 해결이 가능하다는 점이 장점이죠! 사용법 1. terminal 창에 styled-components를 설치한다. npm install styled-components 2. 라이브러리를 import 한다. import styled from 'styled-components' 3. 원하는 스타일을 작성한다. 예를 들어 버튼에 스타일 컴포넌트로 스타일을 넣는다고 해보자! let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` 먼저 ..