본문 바로가기

분류 전체보기

 (81)
2025 회고 INTRO: 2025 핵심 키워드건강 & 도전체력 관리와 새로운 것에 대한 시도를 많이 한 한해였다. 작년, 업무에 있어서도, 나의 삶에 있어서도 체력과 근력이 얼마나 중요한지 실감하게 되었다. 내가 바라는 '여유로운 사람'이 되기 위해서는 체력적으로도 여유가 있어야 한다는 것. 그래서 올해는 근육량 증가 및 체력 관리를 위해 운동을 열심히 했다. 이로 인해 체력이 좀 늘었다. 이렇게 체력이 늘어나면서 이전에는 도전하지 못했던 것들을 좀 더 시도할 수 있는 용기와 여유가 생겼다. INSIGHT: 올해 내가 배운 것들1. 몸의 시야 확장스스로를 '몸치'라고 규정짓고 살았으나, 헬스를 통해 내 몸의 움직임과 감각에 집중하며 몸에 대한 자신감을 얻었다. 움직임에 대한 확신이 생기자 클라이밍, 서핑 등 새로운..
[Vue.js 프로젝트] 중고거래 플랫폼 만들기 #1. 프로젝트 소개 - 중고거래 플랫폼 사과마켓 - vue.js 공부 후, 해당 기술을 적용해보고자 만들었습니다. #2. 구현기능 1. 로그인 2. 게시글 CRUD 구현 3. 좋아요 기능 구현 - 좋아요 클릭시 게시글에 카운팅되기 - 마이페이지 > 위시리스트에 좋아요한 게시글 저장하기 4. 게시물 검색 및 최근 검색어 기능 구현 5. 마이페이지 > 유저 닉네임 및 프로필 사진 변경 및 저장 6. vuex 사용하여 전역으로 함수 관리하기 7. localStroage를 사용하여 유저 및 게시글 정보 저장하기 - localStorage에 저장하기 어려운 사진첨부의 경우,createObjectURL을 사용하여 구현 1. 로그인 로그인 시 setItem을 사용하여, 'userInfo'를 localStroage에..
[React 토이프로젝트] React 사용해 메모앱 만들기 #1.목표 - React.js를 학습한 후, 잘 할수 있는지 확인해보고자 제작 - 배운것들을 최대한 적용시켜보자. - Styled-component를 사용한 스타일링 - useState, useEffect 훅을 적절하게 사용해보기 - Router를 이용하여 SPA를 구현하자 - Redux를 사용하여 전역 데이터를 관리해보자 #2. 작업기간 - 23.07 ~ 23.08 (6일) #3. 사용기술 React(Router, Redux, Styed-Components) uuid4, moment #4. 폴더 구조 Componets - 화면 구성요소하는 모듈들을 담아놓은 폴더. images - 제작에 필요한 이미지를 담아놓은 폴더 pages - Router를 통해 생성된 page들을 담아놓은 폴더 styles - G..
[React] props : 부모 state 자식에서 사용하기 (사실은 부모의 모든것) #0. props 왜씀? 부모 컴포넌트에 있는 변수, state, 함수 등은 자식 컴포넌트에서 그대로 사용할수 없다. 부모의 컴포넌트 안에 저장된 값이므로 자식으로 따로 상속이된다거나.. 그런게 없다. 그래서, 이경우 자식으로 전달하고 싶은 데이터를 직접 보내줘야하는데, 이때 사용하는 것이 props다. import React from 'react'; import {useState} from 'react'; // 부모컴포넌트 export function App(props) { // 전달하고자하는 값들 const name = '김시선'; const [age, setAge] = useState(20); const addAge = function () { setAge(age+1); }; return ( Hel..
[React] JSX에서 반복문 어떻게 씀? : map 쓰셈 React에서 반복문을 사용하고 싶을때는, map을 사용하는게 가장 간단하다. #1. 간단한 사용설명 다음과 같은 형식으로 쓰는데, function의 첫번째 파라미터는 어레의 각각 요소들이 들어간다. 그래서.. 반복하고싶은어레이.map(function(어레이요소){ return( {어레이요소} ) }) - 다음과 같이 각각의 어레이 요소들이 출력된다. [1,2,3,4,5].map(function(어레이요소){ return( {어레이요소} ) }) // 1 // 2 // 3 // 4 // 5 - 두번쨰 파라미터도 추가할수있는데, 두번째는 0부터 시작하여 1씩 증가하는 정수가 들어간다. - 반복문을 사용하는경우, 각 요소에 고유한 key값을 넣어주지 않으면 에러가 나는데, 두번째 파라미터를 사용하면 키도 쉽..
[React] Component : 코드가 너무 길어질때 사용하면 깔끔해진다. 리액트에서는 코드가 너무 복잡하거나 길어질때, 하나의 컴포넌트를 담아 깔끔하게 코드를 짤 수 있다. - 만약 다음과 같은 코드에 안의 글이 너무 많아서, 간단하게 줄이고 싶을때 쓰면된다. import React from 'react'; export function App(props) { return ( Hello React. 안녕하세요 저는 아주 긴 콘텐츠예요. 너무 길어서 컴포넌트를 분리했답니다. ); } #1. 컴포넌트 생성하는 방법 1. 컴포넌트 생성 - App이란 함수 바깥에 (지금 메인 함수 바깥에) 새롭게 만들고 싶은 함수를 쓴다. - 형태는 App 과 같이 아래와 같은 형태로 쓰면 된다. - 컴포넌트 생성시 주의할 점은, retrun() 안에는 하나의 태그로만 감싸져야 한다는점! 두개의 태그..
[React] JSX에서 if문 어떻게 씀? 삼항연산자 JSX(리액트 html같은애)에서 조건에 따라 다른 화면을 보여주고싶은데.. if문은 왜 오류가나지..? 리액트 JSX에서는 if문이 아닌 삼항연산자를 써야한다. 삼항 연산자는 ? 앞에 조건식을, 이것이 참이면 : 의 왼쪽이 출력, 거짓이면 오른쪽이 출력되는 형태의 if문이다. 식 ? 참 : 거짓 JSX에서 해당 식을 사용하면 {}안에 넣어서 다음과같은 형태로 사용한다. 첫번째 조건식, 1 === 1 은 참이니까, 참이 출력된다. 두번째 조건식, 1 === 2 는 거짓이니까, 거짓이 출력된다. 조건식이나, 참이나 거짓일때의 코드가 너무 많아진다면 ()로 묶어주면 된다. import React from 'react'; export function App(props) { return ( { 1 === 1 ?..
[React] useState3. array/object로 저장된 state, 변경했는데 왜 적용 안됨? # 결론만 말하면.. - let array카피본 = [...원본어레이] 형태로 대입해준 뒤 수정해야한다. // 1. 어레이카피본에는 주소값만 저장되는 꼴. 재랜더링 되지 않는다. let 어레이카피본 = 원본어레이; // 2. ...은 원본어레이의 값을 그냥 꺼내주는 키워드인데, // 원본어레이 값을 펼쳐서 재정의 해준거라 생각하면 됨 let 어레이카피본 = [...원본어레이] ... 이 뭔지 궁금하다면 아래 글 참조 더보기 https://isfpp.tistory.com/129 # array, object - 일단 재랜더링 되지 않을땐 js의 문제 - js 에서 array랑 object는 변수를 저장할때, 우항에 있는 값이 바로 저장하는게 아니라, 우항의 있는 값이 저장된 메모리 주소가 저장되고, 그 값은..

티스토리툴바