WonnyDocs

[데보션영] SKT본사방문 & 티움(T.um)투어 후기

2023.08.06

안녕하세요. 데보션영 2기 서다원입니다! 오늘은 SKT T타워에서 진행된 티움 투어 체험과 SKT 본사를 방문해본 후기를 포스팅해볼까합니다.저는 데보션영 활동의 일환으로 티움투어를 진행하게 되었는데요.직접 사이트에서 예약하고 방문할 수도 있어요. 예약할 수 있는 사이트는 아래 링크를 참고해주세요!https://tum.sktelecom.com/reservation/registReservation.do 미래기술 체험관 T.um(티움)SK텔레콤 미래기술 체험관, 시설 안내, 방문예약, 전시관 정보, 체험 서비스 등 제공.tum.sktelecom.com투어 유형에는 유튜브 라이브 투어와 현장 투어가 있는데 현장 투어를 선택해주시면 될 것 같아요. 먼저 을지로에 있는 SKT T타워에 도착을 했어요.데보션영담당자님..

Develop/TypeScript

[Typescript] union type, any, unknown

2023.07.23

union type 변수에 들어올 값이 string 또는 number 이라면 아래와 같이 작성이 가능하다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 괄호를 작성하게 되면 A | B | C 처럼 여러개를 작성할 수도 있다. 저렇게 할당하는 순간 타입은 string 또는 number 중 하나로 변한다. array 나 object 를 만들 때 union type 을 쓰는 법에 대해서 알아보자. var 어레이: (number | string)[] = [1,'2',3] var 오브젝트: {data : (number | string) } = { data : '123' } 하지만 다른 점이 있다면 변수에 정의된 union 타입은 할당을 하면..

Develop/TypeScript

[Typescript] 타입스크립트 기본 타입 정리(primitive types)

2023.07.23

기본 타입 기본 타입을 정리해보자 string, number, boolean 등이 있다. 저렇게 변수 옆에 : 를 붙이고 오른쪽에 타입을 작성해주면 된다. (null, undefined 도 있다) let 이름 :string = 'kim'; let 나이 :number = 20; let 결혼여부 :boolean = false; array 와 object 여러 자료를 한번에 저장하고 싶을 때 array 나 object 를 쓴다. 예를 들어 string 이 들어가는 array 를 작성하고 싶으면 다음과 같이 작성한다. let 회원들 :string[] = ['kim', 'park'] 만약에 string 만이 아닌 string 또는 number 가 들어가는 array 를 작성하고 싶다면 다음과 같이 작성하는데 이건..

Develop/TypeScript

[Typescript] 타입스크립트 세팅하기

2023.07.22

tsconfig 파일 생성하기 프로젝트 폴더에 tsconfig.json 이라는 파일을 생성한다. 여기에는 ts 파일을 js 파일로 변환할 때에 어떻게 변환할지 세부설정을 작성할 수 있다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target : ts 파일을 어떤 버전의 js 로 바꿔줄지 정하는 부분 module : js 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 부분 (예를 들어 commonjs 는 require 를 쓰고, es2015 는 import 를 쓴다) 그 밖에 추가로 넣을 수 있는 것들이 몇가지 있는데 다음과 같다. { "compilerOptions": { "target": "es5", "modul..

Develop/Node.js

[Node.js] 실시간 데이터 보내고 받기(feat. Socket.io)

2023.07.18

실시간 소통을 하고 싶으면 서버와 유저간 Web Socket 을 뚫으면 된다. socket.io 라이브러리를 설치해서 한번 사용해보자. 사용 방법 npm install socket.io npm 을 이용해서 설치를 완료한 후에 server.js 에 3줄의 코드를 추가한다. (const app = express() 보다 아래에 위치해야한다.) 그리고 app.listen 코드를 http.listen 으로 바꿔준다. 이전에는 express 를 이용해서 서버를 띄웠던 걸 http 라는 node.js 라이브러리 + socket.io 를 이용해서 띄우는 것이다. socket.ejs 라는 파일을 하나 새로 만든다. https://cdnjs.com/libraries/socket.io socket.io - Librarie..

Develop/Node.js

[Node.js] 유저간 채팅기능 만들기

2023.07.15

채팅기능을 만들어보자 채팅메세지도 결국 게시물 발행기능과 똑같다. 새로운 점이 있다면 채팅메세지는 채팅방 게시물에 종속이 되어야한다. 댓글 만드는 법 댓글은 댓글 collection 을 하나 새로 만들어서 모든 댓글을 저장하면 된다. 하지만 그러면 그 댓글들 하나하나가 어떤 글에 달린 댓글인지 확인할 수 없게될 것이다. 때문에 모든 댓글은 부모 게시물이 무엇인지 를 명시해야한다. 따라서 게시물 collection 과 댓글 collection 을 만들고 댓글 1의 부모게시물은 게시물 2고, 댓글 2의 부모 게시물은 게시물 4이다... 이런식으로 collection 끼리 관계를 맺어야한다. 채팅방 만드는 POST api 만들기 채팅 버튼을 누르면 chatroom 이라는 collection 에 document..

Develop

CSR과 SSR의 이해

2023.07.08

원티드 프리온보딩 챌린지 7월 과제로 CSR과 SSR의 이해란 주제로 포스팅을 하게되었다! 1. CSR이란? 이것의 장단점은 무엇인가요?CSR이란 Client-side Rendering 의 줄임말이다.말 그대로 '클라이언트 쪽에서 렌더링을 한다' 라는 말인데,여기서 클라이언트는 브라우저이기 때문에 브라우저가 렌더링을 처리하는 방식이다. 서버에서 HTML을 받아와서 JS주소를 서버로 요청해 동적으로 사용자에게 최종적인 어플리케이션을 보여준다.위 그림은 CSR 의 순서이다.유저는 웹사이트에 요청을 보낸다.Edge Caching 은 HTML 파일과 JS에 접근할 수 있는 링크를 빠르게 보낸다브라우저는 HTML, JS를 다운로드 받는다.브라우저는 JS를 다운로드 받는다.모두 다운로드가 되면 JS가 실행되고, 데..

Review

2023 SW중심대학 공동해커톤 후기 (feat. 최우수상)

2023.07.02

카페에서 이것저것 할일을 하다가 갑자기 받게된 전화 한통 'ai 교육원입니다. SW중심대학 공동해커톤 참가자로 선정되셔서 연락드렸어요.' 얼떨떨하고 기쁜 순간이었다! 사실 해커톤에 참여하기 전에 내적으로 힘이 많이 부족한 상태였다. 졸업을 반년 앞두고 할 건 너무 많아보이고, 마음은 급하고. 무언가 힘을 내서 할 에너지가 스스로 많이 떨어졌다고 느꼈다. 그래서 더더욱 걱정이 됐다. 이 해커톤은 내가 처음 나가보는 해커톤이고, 무려 무박 3일인데 잘 버티고 민폐를 안 끼칠 수 있을 지 말이다. 하지만 어쩌면 내가 이 대회에서 조금이라도 긍정적인 결과를 받는다면 내가 다시 힘을 낼 수 있는 원동력이 될 수도 있겠단 생각을 했다. 그러다 해커톤 당일이 가까워지고, 결국 잠을 별로 못 잔 상태로 캐리어를 끌고 ..

Ambassador/DEVOCEAN YOUNG

[데보션영] 드디어 졸업? '캡스톤설계및실습' 수강 후기

2023.07.02

안녕하세요! DEVOCEAN YOUNG 2기 서다원입니다. 저는 이번 학기가 4학년 1학기였는데요. 저희 학교에서는 졸업 조건으로 4-1에 캡스톤 졸업 프로젝트를 수행해야해요. (1,2 학년 때에는 멀게만 느껴지던 졸업 프로젝트를 직접하게 되었다니, 그리고 벌써 마무리하고 후기를 쓰고 있다니 시간이 정말 빠른 것 같아요.) 이 과목은 기업과제랑 팀을 매칭해주고, 한 학기동안 과제를 수행하는 방식이었는데요. 저희는 한 기업의 AI CS 담당 챗봇 서비스를 구현하는 것이 과제였어요. 저는 팀에서 FE 개발자를 맡았고, FE 파트를 맡은 사람은 저 혼자였기에 이 부분이 정말 부담스러웠던 것 같아요. 한 파트에 사람이 두명 이상이면 같이 문제를 해결해나갈 수 있는데 만약에 제가 문제를 해결하지 못하면 팀원 모두..

Ambassador/DEVOCEAN YOUNG

[데보션영] ‘웹 프론트엔드 성능 최적화 방법 및 적용 사례’ 테크세미나 후기

2023.06.27

안녕하세요! 데보션 영 2기 '데보션시스터즈'팀의 서다원입니다. 이번 포스팅에서는 6월 테크세미나 [웹 프론트엔드 성능 최적화 방법 및 적용 사례] 후기를 공유해보려합니다. 저는 프론트엔드 개발자를 진로로 희망하고 있는데요. 그만큼 이번 테크 세미나에 관심이 가득했어요! 확실히 채용 공고를 보면 우대 사항에 ‘성능 최적화’ 개념이 나오곤 했거든요. 저 또한 사이트의 성능이 좋아야 좋은 사용자 경험을 제공할 수 있다- 라는 것은 머리로 알고 있지만 정확히 어떻게 하는지, 어떤 사례가 있는지는 잘 모르고 있었던 것 같아요. 한국의 사용자들은 로딩 타임이 2초동안 뜨지 않으면 사이트를 나가버린다고 합니다. 정말 충격이었어요. 아무리 사이트 백엔드 상의 로직을 잘 짜놓았다고 하더라도, 프론트엔드의 성능을 최적화..

Finds & Notes

Postman 환경변수 설정하기

2023.06.03

개발을 하다보면 매번 주소를 바꿔야해서 귀찮은 경우가 많다. 그래서 환경변수를 만들어보기로 했다. 사용법 오른쪽 위에 눈모양 버튼을 클릭한다. variable 에는 환경변수의 이름, Initial value 와 Current value 에는 환경변수의 값을 써주면된다. 나는 dev 라는 이름의 변수를 만들어 local 에서 개발하기 편하도록 만들고 bookmark 라는 변수에는 실제 서비스 url 을 넣어줬다. 실제로 사용할 때에는 {{변수명}} 처럼 작성하여 사용할 수 있다. ref: https://velog.io/@kkl4846/postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8-%EA%BF%80%ED%8C%81team-workspace-%ED%99%98%EA%B2%BD%..

Develop/React.js

[React] 카카오 로그인 구현해보기(REST API 방식)

2023.05.31

https://stack94.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4Kakao-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 위의 글을 참고하면서 따라해보았다. https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao..

Develop/React.js

[React] react-chartjs-2 로 쉽게 차트그리기

2023.05.20

통계 페이지를 개발하려하는데 차트를 그릴일이 필요했다. 내가 사용한 건 react-chartjs-2 ! 구글링을 해보다가 유명하다고 해서 한번 써봤다. 사용방법을 정리해봐야겠다 사용방법 npm install --save chart.js react-chartjs-2 https://react-chartjs-2.js.org/examples Examples | react-chartjs-2 List of react-chartjs-2 usage examples. react-chartjs-2.js.org 난 이 페이지에서 내게 필요한 차트 모양을 찾아서 들어갔다. 예를들어 나는 Line Chart 를 찾아 들어가서 예시 코드를 살펴봤다. App.tsx에 있는 코드들을 가져와준다. tsx 코드라서 js 파일에서 쓰기엔..

Develop/React.js

[React] Recoil 로 React 스럽게 상태관리하는법

2023.05.20

상태관리 라이브러리 없이 프로젝트를 하다가 아, 이건 안되겠다. 전역으로 상태관리해야겠다! 싶은 부분이 있었다. 근데 오늘 아침 다른 개발자분 티스토리 피드를 보다가 Recoil 을 추천하시는 글을 읽고 이 참에 Recoil을 써보자 생각했다. 설치 먼저 설치한다 npm install recoil Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 컴포넌트를 사용해야한다. index.js 의 파일을 다음과 같이 수정해준다. index.js // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM..

Develop/React.js

[React] 업데이트 시 스크롤 맨 밑으로 내리기

2023.05.18

채팅을 하다보면 내가 직접 스크롤을 내리지 않아도 새로 추가된 메세지에 대해서 아래로 자동 스크롤이 된다. 이 기능을 구현해보려고 한다. 방법 useRef, useEffect 훅을 사용하여 구현했다. const scrollRef = useRef(); useRef 훅을 사용하여 스크롤할 요소에 대한 scrollRef 라는 것을 만든다. 이 scrollRef는 스크롤할 컨포넌트를 가리키는데 사용된다. useEffect(() => { scrollToBottom(); }, [isTyping]); const scrollToBottom = () => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } };..

Finds & Notes

Github README에 이미지/gif 올리기

2023.05.18

README에 이미지/gif(움짤)을 올려보자 만약 영상 -> gif 변환을 원하는 사람은 아래 사이트에서 gif 변환을 하고 오면된다. https://cloudconvert.com/mov-to-gif MOV to GIF | CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert MOV Converter MOV MOV is a video format that is commonly associated with QuickTime. This video extension is developed by Apple. It uses an algorithm to compress video and audio. Although cl..

Develop/React.js

[React][오류] 클릭 이벤트 전파 막기

2023.05.17

문제 채팅 리스트들을 보여주고, 채팅을 삭제할 수 있는 기능을 구현 중이었다. 채팅 리스트를 클릭하면 채팅을 확인하러 상세페이지로 이동하고, 삭제 버튼을 누르면 채팅 기록이 삭제가 되어야한다. {chats.map((chat) => ( handleChatItemClick(chat.chatId)} className="border-2 border-t-gray-300 p-5 flex justify-between text-sm" > {/* 채팅 생성 시간 */} {formatDate(chat.created_date)} handleDeleteOneChat(chat.chatId)} className="px-4 py-2 overflow-hidden" > 삭제 ))} 근데 삭제 버튼을 눌렀을 때 삭제가 되긴하지만 동시에..

Develop/React.js

[React] fetch 로 통신하기

2023.05.15

React에서 fetch는 JavaScript의 내장 API인 fetch() 함수를 사용하여 서버와 데이터 통신을 수행하는 방법이다. fetch 함수는 ES6부터 기본적으로 제공되는 함수이며, React 애플리케이션에서 AJAX 요청을 보낼 때 많이 사용된다. AJAX 란? AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있습니다. 기존에는 웹 페이지에서 사용자의 요청에 따라 새로운 페이지를 서버로부터 전체적으로 다시 받아오는 방식인 전통적인 동기적인 요청 방식이 일반적이었습니다. 하지만 ..

Develop/React.js

[React] tooltip 구현하기

2023.05.12

이렇게 마우스를 올려다 댔을 때 이게 어떤 버튼인지 미리 알 수 있는 문구가 나오게 하려면 tooltip 이라는 기능을 구현하면 된다. React에서 tooltip 을 구현하려면 여러 라이브러리를 활용해서 구현할 수 있는데 나는 그중에서도 react-tooltip 이라는 라이브러리를 사용해보려고 한다. https://react-tooltip.com/docs/getting-started Getting Started | React Tooltip This docs is related to V5, if you are using V4 please check here. react-tooltip.com 자세한 설명은 위에 나와있다. 본인도 공식문서를 보고 적용했기 때문에 빠르고 적용법만 보고싶은 분은 아래를 참고하시..

Develop/HTML, CSS

[HTML, CSS] 스크롤 기능 구현하기

2023.05.12

캡스톤 프로젝트 중에 특정 구역 내에서 스크롤을 기능할 일이 생겨서 작성해보는 포스팅! 채팅창을 만드는데 채팅창에 있는 채팅 메세지 내용들만 스크롤이 가능하도록 할 것이다. 방법 tailwindcss 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } overflow-y-scroll 을 이용해서 스크롤이 필요한 컨텐츠를 감싸준다. 기본 css 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } 마찬가지로 overflow-y : 'scroll' 속성을 추가해준다. 스크롤이 넘치지 않도록 하고..

Develop/React.js

[React] useDebugValue

2023.05.10

useDebugValue 란 React Hooks 중 하나로 개발자 도구 Dev Tools 에서 컴포넌트의 상태를 디버깅할 때 사용하는 함수이다. 사용법 useDebugValue 는 두개의 인자를 받음 첫번째 인자는 디버깅에 사용할 값(value) 두번째 인자는 옵션 객체이다. 예시 import { useDebugValue, useState } from 'react'; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); useDebugValue(count, count => `Count: ${count}`); function handleIncrement() { setCount(count + 1); } fu..

Develop/React.js

[React] useRef

2023.05.10

useRef 란 useRef는 React에서 제공하는 Hook 함수 중 하나로, 일반적으로 DOM 요소를 선택하거나 컴포넌트에서 변경 가능한 값을 저장하는 데 사용된다. 예시 예를 들어, useRef를 사용하여 DOM 요소를 선택하는 경우 다음과 같이 코드를 작성할 수 있다. import React, { useRef, useEffect } from 'react'; function Example() { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return ; } 위의 코드에서 useRef를 사용하여 input 요소를 선택하고, useEffect를 사용하여 컴포넌트가 마운트될 때 input 요소에 자동..

Develop/React.js

[React] useCallback

2023.05.10

useCallback 이란 React의 useCallback 훅은 성능 최적화를 위해 사용되는 훅 중 하나이다. 이 훅은 함수를 캐시(cache)하여 불필요한 함수 재생성을 방지하고, 성능을 최적화하는 데에 도움을 준다. 사용법 useCallback은 두 개의 인자를 받는다. 첫 번째 인자는 캐시할 함수이며, 두 번째 인자는 의존성 배열(dependency array)이다. 의존성 배열에는 캐시할 함수에서 참조하는 값들이 포함되며, 이 값들이 변경될 때마다 함수를 다시 생성한다. 예시 예를 들어, 다음과 같은 코드가 있다고 가정하자. import { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0)..

Develop/React.js

[React] Link와 useNavigate의 차이점 알아보기

2023.04.27

React에서 페이지 이동을 구현할 때, Link 와 useNavigate 이라는 개념을 사용한다. 하지만 둘의 분명한 차이점이 있는데, 사용하다보니 궁금해져서 정리해보고자한다. Link Link는 클릭할 때 바로 이동하는 로직을 구현할 때 사용된다. 원래 페이지가 새로고침되면 현재 렌더링되어있는 컴포넌트가 다 사라지고 새로 컴포넌트가 렌더링 되는데, 이때 state 들이 모두 날아간다. 하지만 Link 를 사용한 경우에는 렌더링된 컴포넌트의 state 가 유지되어서 SPA로 동작할 수 있다. 실제 해당 링크로 이동하는 것이 아니라, 에 지정된 컴포넌트를 렌더링한다. * v6 부터는 Link 로 props 를 전달하지 못한다. (이것때문에 한참 붙잡고 있었다...) 예시 예를 들어서 상품 리스트를 클릭했..

Develop/JavaScript

[JavaScript] 비구조화 할당

2023.04.26

React 를 공부하다가 '비구조화 할당' 이라는 개념에 대해서 확실히 정리하고 넘어가고 싶어져서 쓰는 포스팅! 비구조화 할당이란 비구조화 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 의 표현식이다. 쓰는 이유 이는 배열이나 객체의 속성을 쉽게 꺼내서 변수에 할당할 수 있으므로 더 간결하고 가독성이 높은 코드를 작성할 수 있다 예시 예를 들어 다음과 같은 객체가 있을 때, const person = { name: 'John', age: 30, gender: 'male' }; 이 객체의 속성을 꺼내서 개별 변수에 할당하려면 다음과 같이 할 수 있다. const name = person.name; const..

Develop/React.js

[React] Fragment 문법을 왜 쓸까

2023.04.26

왜 쓰는 거야? React 에서 JSX 를 사용할 때 return 문에는 무조건 최상위 태그가 존재해야한다. React 는 하나의 컴포넌트만을 return 할 수 있기 때문이다. 이때, Fragment 라는 걸 사용할 수 있는데 이는 불필요한 div, span 등의 HTML 요소 없이 여러 개의 자식 요소를 렌더링 할 수 있도록 하는 기능이다. Fragment 를 사용하면 컴포넌트의 여러 요소를 그룹화할 수 있다. 예시 예를 들어 App() 에 Table() 이라는 컴포넌트를 넣어서 사용하고 싶은 경우를 생각해보자. Table 컴포넌트는 다음과 같다. function Table() { return ( Hello World ); } 여기서 Table 컴포넌트 내의 태그들을 묶기 위해 최상위 태그로 div ..

Review

World IT Show 2023 방문!

2023.04.21

2023 월드 IT 쇼를 다녀왔습니다! 온라인 사전등록을 하면 무료이고, 현장 등록을 하면 1만원을 결제해야하더라구요. 저는 온라인 사전등록을 했기에 결제할 필요없이 바로 등록을 하고, 이름표를 받아 입장할 수 있었습니다. 사람이 정말정말 많았어요. 사전등록을 했더라도 등록/이름표를 받으려면 이 긴 줄을 서야했답니다. 근데 회전율이 빨라서 5분도 안 기다린 것 같아요. 들어가기 전에 볼 수 있었던 부스 안내도입니다. 2층에는 주로 스타트업, 3층에는 대기업 부스가 있었어요. 들어가자마자 처음으로 구경했던 부스는 읽기 능력을 검사할 수 있는 서비스가 있었는데요. 글을 읽을 때 눈이 바라보는 걸 인식해서 읽기 능력을 측정할 수 있는 서비스였어요. 거의 대부분의 서비스들이 AI에 관련되었다고해도 과언이 아닐 ..

Finds & Notes

(MacOS) homebrew 로 OpenSesame 설치하기

2023.04.15

이번에 언어학과 심리실험이라는 교양을 듣게 되었는데요. 수업에서 쓰는 프로그램인 OpenSesame 를 설치해야 실습을 진행할 수 있더라구요! MacOS에서 OpenSesame 앱을 설치하고, 여는 법에 대해서 포스팅해보려합니다. OpenSesame 란? "OpenSesame"는 실험실 연구자를 위한 무료 오픈 소스 실험 설계 및 데이터 수집 소프트웨어입니다. 이 소프트웨어는 행동 실험, 뇌 영상 실험 및 통제 실험 등 다양한 실험 유형을 지원하며, 실험 설계, 시각적 자극 제시, 반응 및 데이터 수집을위한 사용자 정의 스크립트를 만들 수 있습니다. OpenSesame는 Python 기반으로 작성되었으며, 그래픽 사용자 인터페이스를 통해 쉽게 사용할 수 있습니다. 설치 저는 homebrew 를 이용해서 ..

Finds & Notes

hELLO, highlight.js 적용 및 커스텀(feat. 글쓰기/구독 버튼, 코드블럭 다크모드 등)

2023.04.14

안녕하세요!오늘은 티스토리 스킨을 새로 바꿔보고, 바꾸면서 헤맸던 부분을 공유해드리려고해요. hELLO 스킨일단 저는 hELLO 라고 하는 스킨을 적용했습니다.개발자들에게 아주 인기 있는 스킨이라고 하더라구요!정상우 개발자 님이 제작하셨으며, 아래 포스팅에서 다운로드 받을 수 있습니다.https://pronist.tistory.com/5?category=844785 hELLO 티스토리 스킨을 소개합니다.hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기pronist.dev 스킨 적용하기관리자 페이지에 들어가서 스킨 변경 > 스킨 등록 을 눌러줍니다.추가..

Develop/React.js

[React] 긴 문자열 자르고 '...' 붙이기

2023.04.13

요소들을 리스트로 보여주는데, 제목이 너무 길어서 넘어가는 문제가 생겼다. 줄을 넘어가면 grid 가 흐트러지기도하고, 보기에도 통일성이 없어보여서 너무 길면 적당히 자르고 끝에 ... 을 붙이도록 해봤다. 현재는 위와 같은 상태이다. 맨 오른쪽 요소를 보면 제목이 너무 길어서 아래줄까지 침범했다. 저 제목 데이터는 name 이라는 변수에 들어있었는데, processedName 이라는 이름의 변수로 새로 만들어줬다. const processedName = name.length > 15 ? `${name.slice(0, 15)}...` : name; 나는 15자가 넘어갈 경우 문자열을 자르고, 끝에 ... 이 붙도록 코드를 작성해봤다. processedName 변수를 적용해서 다시 화면을 구성해보겠다. 원..

전체 글

[데보션영] SKT본사방문 & 티움(T.um)투어 후기

[Typescript] union type, any, unknown

[Typescript] 타입스크립트 기본 타입 정리(primitive types)

[Typescript] 타입스크립트 세팅하기

[Node.js] 실시간 데이터 보내고 받기(feat. Socket.io)

[Node.js] 유저간 채팅기능 만들기

CSR과 SSR의 이해

2023 SW중심대학 공동해커톤 후기 (feat. 최우수상)

[데보션영] 드디어 졸업? '캡스톤설계및실습' 수강 후기

[데보션영] ‘웹 프론트엔드 성능 최적화 방법 및 적용 사례’ 테크세미나 후기

Postman 환경변수 설정하기

[React] 카카오 로그인 구현해보기(REST API 방식)

[React] react-chartjs-2 로 쉽게 차트그리기

[React] Recoil 로 React 스럽게 상태관리하는법

[React] 업데이트 시 스크롤 맨 밑으로 내리기

Github README에 이미지/gif 올리기

[React][오류] 클릭 이벤트 전파 막기

[React] fetch 로 통신하기

[React] tooltip 구현하기

[HTML, CSS] 스크롤 기능 구현하기

[React] useDebugValue

[React] useRef

[React] useCallback

[React] Link와 useNavigate의 차이점 알아보기

[JavaScript] 비구조화 할당

[React] Fragment 문법을 왜 쓸까

World IT Show 2023 방문!

(MacOS) homebrew 로 OpenSesame 설치하기

hELLO, highlight.js 적용 및 커스텀(feat. 글쓰기/구독 버튼, 코드블럭 다크모드 등)

[React] 긴 문자열 자르고 '...' 붙이기

티스토리툴바

티스토리툴바