본문 바로가기

전체 글25

첫 미니 프로젝트 ! 저번주에 첫 미니 프로젝트를 진행했다. 미니프로젝트 " 라떼 월드 " FrontEnd : 구자덕 , 최서현 BackEnd : 김재현, 양승훈, 이영균, 장현석 라떼는 말이야, 설 곳 없는 꼰들을 위한 SNS! 라떼 월드는 추억을 공유하고 누가 더 꼰 ☆★POWER★☆가 강력한 지 겨뤄볼 수 있는 무대입니다. 추억을 공유할 게시글 작성 마음에 드는 추억을 좋아요 추억을 연도별로 분류 🍰 라떼월드 서비스 바로가기 🎬 서비스 시연 및 발표 영상 https://www.youtube.com/watch?v=bS6OVC3JLwY ✨ 기능설명 전체적으로 응답 바디에 HTTP Status Code와 메세지를 출력하도록 구현 1. 회원가입 회원 가입 유효성 검사를 통해 ID중복, Nickname중복 등 기본적인 기능 구현.. 2022. 6. 19.
항해톡 DOM 발표 하지만 돔이 정확하게 뭐다! 라고 설명할 정도로 알고있지는 못했는데요 그래서 제가 최대한 이해하고 알아먹기 쉽게 돔 그리고 현재 프론트에서 주로 사용 하고 있는 리액트의 버츄얼돔에대해 간단하게 설명해보려합니다. DOM의 사전적 정의는 브라우저에서 자바스크립트로 HTML을 제어할 수 있게 해주는 API라고 합니다. 여기서 API는 뒤에서도 한번더 등장하기 때문에 간단하게 설명하자면 티비 리모콘이라고 생각하시면 될것 같습니다. 우리가 티비한테 말로 볼륨높여줘! 라고하면 티비는 못알아듣죠. 리모컨으로 높임 버튼을 눌러 티비에 신호를 전달해 줘야지만 티비는 볼륨을 높여줄 것입니다. 유저가 전달하고자 하는 정보를 티비가 알아먹을수 있는 신호로 바꾸어 전달해주는 느낌인거죠. 일단 사전적 정의는 이렇게 넘어가보고 >.. 2022. 6. 7.
Reducer 코드 뜯어보기 let user = createSlice({ name : 'user', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ], reducers : { plusNum(state, action){ let num = state.findIndex((a)=>{return a.id=== action.payload}) state[num].count++ }, minusNum(state, action){ state[action.payload].count-- } }, }) 얘는 sparta coding클럽에서 배우던거의 전...? 이전 느낌의 버전인것같다. 스팔타에서 배우던거는 act.. 2022. 6. 6.
state, props, map을 이용한 blog만들기 import './App.css'; import {useState} from 'react'; function App() { const [title,changeTitle] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']) // title.sort(); // console.log(title) const[nice,countNice] = useState([0,0,0]) const[modal,setModal] = useState(0) const[num , setNum]= useState(0) return ( ReactBlog {title.map(function(a,i){ return( { modal===1?setModal(0):setModal(1) setNum(i) }}>{a} { .. 2022. 5. 31.
DOM, API , REDUX, 서버리스 (+WIL) 1. DOM (Document Object Model) DOM의 탄생배경을 설명해 보자면 태초에 HTML이 존재하더라~ 우리가 보기엔 HTML은 까끔하게 정리된 하나의 페이지이지만 컴퓨터가 보기엔 '이게뭔..문자열의 향연인데 이걸 어떻게 니말대로 표현하라는거야?' 라고 해서 이 HTML을 컴퓨터에게 알아듣기 쉽게 설명해주는 API를 DOM이라고 부르더라~! API는 아래 설명에서 설명해야지. 아무튼 그래서 DOM은 기본적으로 트리형 구조이다. 그리고 이 트리구조의 요소 하나하나를 node라고 부른다. DOM의 역할은 첫번째로 html에 간단하게 접근이 가능하게 도와준다. 두번째로는 이 트리형의 구조 노드 하나하나를 제어하고 통제할 수 있게 한다. 더 자세한 내용은 항해톡 발표자료 만들고 따로 올리도록 하.. 2022. 5. 29.
useEffect hook mount, update, unmount 할 때 사용하는 react hook 그래서 얘는 왜쓴다고? 원래대로라면 빙글빙글돌아가는 멧돌~~~~~~커다란돌멩이는 짱돌~~~~~~~~ 수도 없이 다시 리로드 되는데 이렇게되면 리로드 되지 않길 바라는 함수도 리로드 될 수 있기 때문에 그걸 막아주기 위해서 유즈이펙트로 막아준다. 채팅 서버에 연결한다던가 등 컴포넌트가 마운트되면서 처음 1회만 수행되어야 하는 동작이 필요할 때 useEffect를 사용할 수 있으며 컴포넌트가 마운트될 때 뿐만 아니라 원하는 값이 변경될 때도 이펙트를 호출할 수도 있다. useEffect를 통해서 특정 코드들이 component가 처음 생성될때만 실행되게 바꿀 수 있는 것을 볼 수 있다. useEffect 콜백함수 사용 useEffe.. 2022. 5. 28.