티스토리

Young St_____

검색하기

블로그 홈

Young St_____

youngst.tistory.com/m

좋은 프론트엔드 개발자가 되고 싶습니다

구독자: 0

방명록 방문하기

주요 글 목록

VSCode에서 Unity 유니티 자동완성 안 됨 문제 간단 해결! 매일 웹, 앱 개발로 지친 심신을 안정 시키기 위해 유니티로 게임 개발 공부를 시작했다! 하지만 시작부터 난관에 봉착.. 능숙하게 extension 쓱쓱 깔며 내 방보다 많이보는 VSCode로 코딩을 하려고 봤더니...! 자동완성이 안 되는 문제가 발생했다.. 내가 사용하는 테마(OneDarkPro)에서 빨간색은 대체로 '이게 뭔지 모르겠어!' 라는 뜻이다. 문제해결을 위해 찾아봤을 때 주로 나온 것은 .NET이나 extension을 확인해보라는 것이었고 extension은 이미 여러번 재설치해본 상황이었다. 하지만 역시 정답은 공식문서에 있었다.. PackageManager에서 'VisualStudioEditor'를 2.0.20 이상의 버전으로 설치해줘야하는 것... PackageMavager는 Uni.. 공감수 1 댓글수 0 2023. 8. 30.
Nextjs 공식문서로 공부하기 - 동적 라우팅 Dynamic Routes Next.js는 외부 데이터에 따라 동적으로 라우팅 주소를 사용할 수 있는 '동적 라우팅(Dynamic Routing)'을 지원한다. 가장 흔한 예로는 블로그 포스트의 번호에 따라 /post/1, /post/2 이런식으로 나누는 것이다. 구현 방법은 간단하게 [과 ]로 파일명을 감싸면 된다. ./posts/[id].js 이런 식이다. 컴포넌트 이름은 그대로 사용하면 된다. 다음과 같은 형태로 사용할 수 있다. import Layout from '../../components/layout'; export default function Post() { return ...; } export async function getStaticPaths() { //.. 공감수 0 댓글수 0 2023. 3. 5.
Next.js 공식문서로 공부하기 - SSG와 SSR SSG SSG(Static Site Generation)과 SSR(Server Side Rendering)은 Next.js의 상징이라고도 할 수 있다. 'Next.js를 써본 것 = SSR을 해본 것'이라고 생각한다는 분이 계신다는 얘기도 들었다(!). 하지만 Next.js에서 기본으로 제공하는 것은 SSG이다. SSG란? SSG는 간단하게 이야기하면 build 타임 때 미리 React 컴포넌트를 HTML 파일로 렌더링 해놓는 것이다. 이렇게만 들으면 그게 HTML 파일을 만들어 놓는 것과 크게 다른건지 의문이 생길 수 있다. Next.js의 강력한 기능은 바로 정적 페이지 생성 시 외부 데이터 fetching이 가능하다는 점이다! 이는 `getStaticProps`라는 간단한 함수를 이용하여 구현할 수.. 공감수 0 댓글수 0 2023. 3. 1.
NextJS 공식문서로 공부하기 - 블로그 만들기 Next.js는 프레임워크이다. 프레임워크란 일반적으로 '특정 응용프로그램을 만들기위한 클래스와 라이브러리로 이루어진 뼈대'라고 설명된다. 그냥 도구만 주어지는 라이브러리와는 조금 다르게, 프레임워크의 뼈대(요구사항)에 맞춰 코드를 구성하면 프레임워크가 직접 코드를 호출하여 애플리케이션을 구동하는 것이라고 나는 이해했다. 어쨌든 이러한 프레임워크를 잘 사용하기 위해서는 이 '뼈대'를 잘 이해하는 것이 중요하다. 그리고 이 뼈대를 가장 잘 설명해주는 것은 당연히 공식문서일 것이다. 저번에 Next.js의 원리와 목적을 아주 간단하게 훑어봤으니 이번에는 공식문서의 튜토리얼을 따라 블로그 프로젝트를 진행해보려고 한다. Next.js 시작하기 리액트에 CRA나 Vite가 있는 것처럼 Next.js도 초기 구성 .. 공감수 0 댓글수 1 2023. 2. 19.
nvm(Node version manager) 사용해서 다른 버전의 node.js 사용하기 - Apple Silicon mac node v14 NVM(Node Version Manager) 기업과제를 진행하다가 요구 사항에 node v14가 명시되어 있는 것을 발견했다. 그동안은 항상 최신 버전에 맞춰 프로젝트를 진행했다보니 다른 버전을 사용할 일이 없었지만 아무래도 서비스를 운영중인 회사에 들어가면 자주 마주치게 될 일일 것 같아 기록해놓는다. 공식 문서 링크 https://github.com/nvm-sh/nvm 사실 위의 공식문서에 트러블슈팅까지 자세히 되있지만 인터넷 세상에 한글로된 문서가 더 많아져야한다고 생각한다!! 이 글은 Apple Silicon M1 Mac OS를 기준으로 작성되었습니다. 설치 방법 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh |.. 공감수 0 댓글수 0 2023. 2. 17.
NextJS 공식문서로 공부하기 - Next.js 동작 원리 나의 NEXT.JS 입문기 사실 NextJS는 예전에 수강한 리액트 강의에서 블로그 만들기 수준으로 대강 다뤄본 경험은 있었지만 아직 제대로 공부해본 적은 없었다. 마침 진행하던 프로젝트도 끝난 상황이라 잘됐다 생각하여 시작해보기로 마음 먹었다. 따로 강의를 사서 볼까도 했지만, 워낙 NextJS팀의 공식문서가 잘 되어있다는 말을 많이 들었다. 이미 직접 프로젝트로 만들어보며 '우와!' 하는 것은 많이 해봤기 때문에 이번엔 동작 원리부터 제대로 공부해보려고 한다. 최근에 버전 13으로 올라가며 변한 부분도 많다고 들었는데 반영이 안 된 강의가 대부분인 것 같기도 했다. 아마 나만 볼 기록이 될 가능성이 크지만... 누군가 보신다면 부족한 공식문서 번역 + 제가 다시 이해하여 부족한 번역에 첨언한 내용이라.. 공감수 0 댓글수 0 2023. 2. 14.
JSDoc 페이지를 GitHub Page로 배포하기 JSDoc JSDoc's purpose is to document the API of your JavaScript application or library. - Use JSDoc JSDoc은 Javascript의 API Document를 간단하게 만들어주는 라이브러리이다. JSDoc 설치 및 사용 방법 JSDoc은 전역으로(globally) 설치해야한다. (경우에 따라서는 sudo가 필요할 수도 있다) npm i -g jsdoc 사용방법은 간단하다. 적용하기 원하는 변수나 함수 등 위에 /** */스타일의 주석을 작성하면 된다. /** This is a description of the foo function. */ function foo() { } 공식 문서에 자세한 사용법이 작성되어 있다. https.. 공감수 0 댓글수 1 2023. 2. 3.
제로베이스 프론트엔드 스쿨 4기 종강 후기(내돈내산!) 이 글은 소정의 대가 없이 작성되었습니다 제로베이스 부트캠프 종강! 사실 부트캠프는 11월에 종강이었지만 그때부터 한참 협업 프로젝트로 바쁘던 상황이라 후기를 미루고 미루다 이제야 작성하게 되었다. 언젠가 누군가 제로베이스 혹은 다른 부트캠프를 수강하게 될 때 이 글을 본다면 조금이나마 도움이 되기를 바라며 글을 작성해본다. 부트캠프 알차게 활용하는 방법 다른 부트캠프가 다 그런지는 모르겠지만 제로베이스의 경우에는 물가에 내놓는... 방식의 부트캠프였다. 수많은 양의 강의를 모두 수강할 수 있지만, 최소한의 가이드라인만을 제공해주었다(요즘은 조금 달라졌다고 들었다). 매주 진행되었던 코딩 테스트와 1차, 2차 과제라는 최소한의 목표와 슬랙을 활용한 스터디 그룹핑 정도를 제공해주었고 나머지는 모두 수강생들.. 공감수 2 댓글수 1 2023. 1. 31.
[옥소폴리틱스 인턴십] Laws Cloud 프로젝트 회고 (1) 완성 배포 페이지 http://lawscolud.top 새로운 인턴십 9월 말부터 감사하게도 옥소폴리틱스 사의 인턴십 프로그램에 다시 참여하게 되었다. 4주과정이 끝나고 마지막 발표만을 앞둔 상태라 그동안의 프로젝트를 회고해보려 한다. 팀 컨벤션 정하기 우선 프로젝트에 앞서 팀 컨벤션과 소소한 규칙들을 정하였다. 별거 아닌듯 하지만 컨벤션과 규칙은 미리 구체화 시켜놓는 것이 나중에 훨씬 편하다는 것을 이전 프로젝트에서 경험했기 때문에 주제 선정 이전에 팀 컨벤션을 미리 정하였다. 더보기 미팅 룰 시간 엄수 사정 있을 시 (불참, 지각 등) 1시간 전에는 알리기 디스코드 미팅 매일 오전 10시 미팅 디스코드 항상 온라인 상태 유지 떠오르는 생각은 바로 디스코드에 정리 의견 교환 부정적 피드백 기분 나빠하지.. 공감수 0 댓글수 0 2022. 10. 20.
[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스 타입스크립트 심화 JSDoc https://jsdoc.app 타입스크립트를 쓰지 않고도 타입을 선언할 수 있다! 타입스크립트에 없는 기능들도 구현 가능 문서화 및 배포도 가능! 유틸리티 타입 전역적으로 사용이 가능한 타입 변환 도구 이해하고 사용한다면 생산성을 증가시킬 수 있다 직접 만들고 직접 사용하면 이해도를 높일 수 있다! 모듈 타입스크립트도 자바스크립트 ES2015+처럼 모듈을 선언하여 사용이 가능하다.(ex. import & export) 모듈 선언이 없는 경우 전역 범위에서 사용 가능하도록 처리됨 3.8 버전부터는 타입 전용 선언 가능(import type & export type) 설정 혹은 CLI 지원 -> tsconfig / module -> tsc -module commonjs Some.. 공감수 0 댓글수 0 2022. 9. 22.
[TypeScript] 타입스크립트 입문(5) - 타입 시스템 타입 시스템 동적 타입과 정적 타입 타입 체커가 컴파일 타임에 수행되는지, 런타임에 수행되는지에 따라 동적 타입과 정적 타입으로 나뉜다. 정적 타입 - 컴파일 타임에 수행 개발자가 타입을 명시적으로 타이핑해야하는 언어 -> Java, C#, C++ 등 타입 체커와 타입 추론을 통해 일부 타이핑을 생략할 수 있는 언어 -> TypeScript, Scala, Haskell 등 컴파일 타임에 타입 검사를 수행하기 때문에 보다 빠르게 오류를 잡아낼 수 있다 -> 런타임 에러 방지 가능! !!자동 완성!!을 통해 데이터 타입 혹은 속성에 대한 확신을 가질 수 있다!!! 동적 타입 - 런타임에 수행 동적 타입 시스템은 런타임 상황에도 타입이 동등한지 확인한다. -> JavaScript, Python, Ruby, P.. 공감수 0 댓글수 0 2022. 9. 17.
[React] 리액트 심화 - SPA, React Router, 비동기 프로그래밍 SPA와 React-Router SPA란? 전통적인 웹 어플리케이션의 경우 각 페이지마다 고유한 HTML 페이지를 만들어 페이지를 이동할 때마다 HTML을 로드해야 했다. 때문에 페이지를 이동할 때마다 깜빡임(새로고침)이 발생했고 이는 사용자 경험을 헤친다고 판단되었다. SPA는 Single-page application의 약자로 하나의 HTML 페이지에 앱 실행에 필요한 자바스크립트와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. App에서 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않기 때문에, 페이지를 이동하더라도 새로고침이 되지 않는다! -> Client Side Rendering Routing URL에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능. JavaSc.. 공감수 0 댓글수 0 2022. 9. 16.
[TypeScript] 타입스크립트 입문 (4) - 제네릭, 고급 타입 다루기 타입스크립트 심화 기능 제네릭 유니온 타입 등을 남발하다보면 결국 any와 다름없어지는 상황이 발생한다. C# 및 Java와 같은 언어에서 널리 사용되는 문법 대규모 소프트웨어를 구축할 수 있는 가장 유연한 기능을 제공 와 같은 꺽쇠 괄호를 사용한다. 다형성을 구현 가능하게 한다! /** * 제네릭 */ //이럴 바엔 any가 낫겠어... //function getInfo(msg: string | number | number[] | string[] ) { function getInfo(msg: any ) { return msg } console.log(getInfo('Word')) console.log(getInfo(123)) console.log(getInfo([1, 2])) console.log(ge.. 공감수 0 댓글수 0 2022. 9. 14.
부트캠프 Part1 과제 회고 - HTML/CSS 내가 수강중인 부트캠프의 첫번째 과제의 결과가 모두 PASS로 나왔다! 강사님께서 자세한 피드백을 해주셔서 정리해보려고 한다. 학원 규칙 상 과제 보안 관련한 문제가 있어 자세한 언급은 피하였다. Part1의 HTML/CSS 과제는 미션 페이지를 Figma 파일로 받으면 해당 페이지를 HTML과 CSS만을 이용하여 클론 코딩 하는 것이다. 페이지 이미지는 일부만 이용하였다. 코드 블럭의 코드는 대부분 내가 작성한 코드이다. 과제 1 - 쿠팡 오늘의 발견 피드백 h1 태그의 경우 이미지를 설명하는 alt 역할 보단 h1 자체의 역할이 더 강조되어야 하기 때문에 '쿠팡' 또는 'Coupang'이 들어가는 것이 적절하다. 텍스트가 필요없는 경우에는 viewhidden 등을 적용해주어야한다. /* CSS */ .. 공감수 0 댓글수 0 2022. 9. 12.
[TypeScript] 타입스크립트 입문(3) - 인터페이스, 타입 가드, 열거형, 유니온 타입 타입스크립트의 고유 기능들 인터페이스 JavaScript에서는 존재하지 않는다. 객체의 타입을 정의하고 생김새를 가지도록 할 수 있다. TypeScript에서의 클래스 기능은 C#에서 유래된 것이 많다. 일부 기능은 TS에서만 존재하는 고유 문법으로 컴파일 후에 사라진다. extends가 아닌 implements 키워드로 구현한다. /** * 인터페이스 * * interface * - 정의 * - 설계 * * implements * - 구현 */ interface Person { name: string age: number } const jang: Person = { name: 'Jang', age: 99 } implements interface의 설계를 구현한다 /** * interface implem.. 공감수 1 댓글수 0 2022. 9. 12.
[TypeScript] 타입스크립트 입문 (2) - 기본 타입, 클래스 타입 기본 기본 타입 훑어보기 원시 타입 불변하는 타입 객체가 아닌 값들 원시 타입은 타입스크립트가 자동으로 타입 추론을 하기 때문에 생략해도 무방하다! const str: string = 'STRING' const num: number = 123 const bool: boolean = true 객체 타입 객체 전체의 타입을 지정 가능 객체 자체의 타입을 지정하면 any와 다를게 없다 /** * Object Type */ // object는 any와 다른게 없는 상황 const obj: object = { str: "str", num: 123, child: { str: "str", num: 123, }, }; // obj.num - object literal const obj2: { str: string.. 공감수 0 댓글수 0 2022. 9. 9.
[TypeScript] 타입스크립트 입문(1) 타입스크립트란? TypeScript는 Microsoft사에서 개발한 자바스크립트 기반 언어이다. 과거에는 JavaScript의 Superset(상위 개념)으로 여겨졌으나 최근에는 타입 구문이 있는 JavaScript로 정착하고 있다. 실제로 Microsoft는 ECMA에 자바스크립트에 타입스크립트의 병합을 정식으로 건의하였다. Why TypeScript? JavaScript는 너무 많은 것을 허용해준다(무분별한 undefined, 너무 관대한 타입 추론 등) -> 안전성 보장이 어려움 JavaScript에 추가 구문이 붙는 것이기 때문에 JavaScript를 이해하고 있다면 배우기가 쉽다. MS에서 개발한 Visual Studio Code와 완벽하게 통합되기 때문에 오류 통제가 용이하다. 컴파일러를 통해.. 공감수 2 댓글수 2 2022. 9. 4.
제로베이스 프론트엔드 스쿨 8월 후기 제로베이스 프론트엔드 스쿨 나는 현재 제로베이스 프론트엔드 스쿨에 참여하고 있다. 5월 말 개강이었으니 벌써 3달이나 수강한 상태다. 국비 지원 부트캠프인 코드S사와 제로베이스 사이에서 고민하였으나 돈이 조금 들더라도 강사진이 확실하고 백엔드 수강생들과 함께하는 프로젝트가 있다는 점이 마음에 들어 제로베이스를 선택해 수강하게 되었다. 얼마 전 제로베이스에서 우수 수강생을 대상으로 진행하는 오프라인 과정(구 네카라쿠베 현 커넥TO)에 대한 면접 제의가 들어왔으나 사정상 6개월동안 10 to 10 과정을 수행하기는 어려워 아쉬운 마음을 뒤로하고 면접을 포기했었다. 오프라인 과정은 가지 못했지만 혼자 공부하는 것도 오프라인 과정만큼 열심히 공부해나갈 생각이고 지금도 그렇게 하고 있다🔥 HTML/CSS 강의 제.. 공감수 2 댓글수 0 2022. 8. 27.
[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (2) Search Bar 구현하기 대부분 검색엔진은 외부 라이브러리 등을 사용하는 것으로 알고 있다. 하지만 이번 프로젝트에서의 검색 기능은 다른 자료를 참고하지 않고 직접 구현해보고 싶었다. 검색 기능은 Category 영역의 정보를 받고 Answer 영역에도 영향을 주어야했기 때문에 Search Bar에서는 검색어를 state로 받고 초기화 기능만 구현하였다. const SearchBar = ({ search, setSearch }) => { const handleChange = (e) => { setSearch(e.target.value); }; const handleClear = (e) => { e.preventDefault(); console.log('clear'); setSearch(''); }; .. 공감수 0 댓글수 0 2022. 8. 20.
[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (1) FAQ페이지 구현하기 이전의 옥소폴리틱스 메인페이지 클론코딩을 성공적으로 마치고 다음 과제에 대해 회의하는 시간이 있었다. 옥소 사 멘토분들과 팀원들과의 회의에서 나온 의견으로는 다른 페이지 클론 코딩, 현재 구현한 메인페이지에 Firebase 적용하기, 아예 새로운 제품 개발해보기, notion으로 구현된 페이지 React로 구현하기 등이 있었다. 새로운 제품을 개발해보기에는 시간이 빠듯했기에 현재 옥소폴리틱스에서 notion으로 구현되있는 페이지 중 하나를 React를 이용해 웹페이지로 구현해보기로 하였다. 현재 옥소폴리틱스의 FAQ 페이지는 다음과 같이 노션으로 구현되어 있다. 노션 페이지 자체의 디자인은 나쁘지 않지만 기존 옥소폴리틱스의 다른 페이지들과는 이질감이 많이 느껴졌다. Figma를 이용.. 공감수 1 댓글수 0 2022. 8. 19.
[Cloning] (Nomad Code) Twitter clone code with Firebase & React (2) - Firestore, Firebase storage, FileReader API 데이터 베이스 - Firestore Firestore는 파이어베이스에서 제공하는 NoSQL 데이터베이스 서비스이다. NoSQL NoSQL은 말 그대로 SQL이 아닌 방식의 데이터베이스다. SQL형 데이터베이스는 '관계형 데이터베이스'라고도 부르며, 이름처럼 모든 데이터들이 관계로 연결되어있다. 가장 간단하게는 행-열 형태의 데이터를 갖는 엑셀도 SQL과 비슷한 데이터베이스라고 볼 수 있다(실제로 연동하여 사용하기도 한다). 반면 NoSQL 방식은 데이터 간의 관계를 통해 데이터를 구조화하는 것이 아니라, key를 통해 데이터를 접근한다. Javascript 객체의 key, value 모델이 대표적인 NoSQL 형식의 데이터 저장 방식이다. SQL 방식은 인덱스와 데이터 관계를 통해 데이터에 접근해야 하기.. 공감수 1 댓글수 0 2022. 8. 14.
[Cloning] (Nomad Code) Twitter clone code with Firebase & React (1) - Firebase, React Router, Vice 최신 버전으로 사용하기 리액트 복습과 파이어 베이스 연습이 필요하여 노마드 코더(Nomad Coder)에 있는 트위터 클론 코딩 코스를 수강하였다. 이런 코스를 무료로 제공하고 있다는 점이 놀랍다. 이 강좌에서는 Firebase와 React Router의 이전 버전을 사용하고 있었고, 해당 버전의 설치 후 수강이 권장되었다. 하지만 나는 호기롭게 공식문서와 함께 최신 버전을 사용해보기로 하였고 이것은 큰 고난의 서막이었다.... React Router 리엑트 라우터가 최근 업데이트에서 크게 바뀌었다. 나는 입문자이기 때문에 애초에 이전 버전을 접해본적이 없어 잘 모르지만 강의와 비교하여 달라진 점을 찾아내느라 애를 먹었다. Upgrading from v5 - React Router 대신 Switch로 Route들을 감싸던 방식.. 공감수 3 댓글수 2 2022. 8. 11.
[옥소폴리틱스 인턴십] 옥소폴리틱스 메인 페이지 클론 코딩 (2) 베스트 댓글 영역 구현 그룹 영역은 사실 구현해야 할 부분이 많이 없었기 때문에 커뮤니티 영역을 맡은 팀원분을 도와 '베스트 댓글' 항목의 구현을 내가 맡기로 하였다. 옥소폴리틱스의 베스트 댓글은 조금 특이하게 조회수 순으로만 베스트 댓글을 선정하는 것이 아니라 각 '부족'별로 베스트 댓글을 하나씩 보여주는 방식을 사용하고 있다. 이를 통해 각 부족 간의 의견을 모두 보여줄 수 있다. 옥소폴리틱스로부터 구현을 위해 제공된 데이터는 해당 게시글의 전체 댓글 데이터와 전체 게시글의 베스트 댓글 ID가 들어있는 데이터를 각각 JSON 파일로 받았다. 내가 해야 할 일은 각 게시글의 베스트 댓글 ID들을 입력하여 comments.json에서 해당 댓글들을 찾아 출력하면 되는 일이었다. json 파일을 받는 것은.. 공감수 1 댓글수 0 2022. 8. 8.
[옥소폴리틱스 인턴십] 옥소폴리틱스 메인 페이지 클론 코딩 (1) 2주 전부터 옥소폴리틱스 사의 인턴십에 합격하여 2명의 팀원과 함께 인턴십을 진행하고 있다. 나는 이제 막 HTML/CSS/JS 기초를 뗀 쌩 입문자였기 때문에 1주일동안 리액트를 마스터 해야하는 미션이 주어졌었다. 일주일만에 리액트 정복하기(1) [React] 일주일만에 리액트 정복하기! (1) 나에게는 아주 안 좋은 습관이 있다. 덧셈 뺄셈을 배우던 초등학생 시절부터 거의 병적으로 손으로 필기하기를 싫어했다. 필기가 필수인 대학 수업 때도 PPT 제공 없는 교수님의 수업까지도 필사 youngst.tistory.com 어찌저찌(?) 리액트를 한 주만에 익히고 그 다음 미션이 옥소폴리틱스 사의 메인페이지를 클론 코딩 해보기였다. 옥소 사의 문화 자체가 위에서 해야할 일을 지시하는 위계 조직이 아닌 팀에서.. 공감수 3 댓글수 2 2022. 8. 6.
TIL#2 - 많은 사진을 import / 스타일드 컴포넌트 / 이벤트 버블링 특정 규칙이 있는 많은 사진을 불러 오기 인턴십 클론 코딩 활동 중, 댓글의 프로필 이미지를 랜더링 해야할 일이 생겼다. 일반적인 프로필이라면 그냥 JSON의 프로필 이미지 url을 땡겨오면 그만이겠지만 옥소폴리틱스는 특이하게도 유저의 성향과 응답에 따라 댓글의 프로필이미지가 달라졌다. 성향은 총 5개, 응답은 4개였으므로 총 20개의 이미지 파일 중에 골라 프로필 사진으로 띄워야 했다. 전부 import? 처음 떠올린 것은 20장 이미지를 전부 import한 뒤 원하는 키워드로 등록해서 img를 리턴하는 함수를 만드는 것이었다. 코드가 길어지는 것도 문제지만 수정사항이 생겼을 때 골치가 아파질 것이 너무 자명했다. import ans1-tribe1 from '../img/ans1-tribe1.png';.. 공감수 1 댓글수 0 2022. 8. 4.
TIL#1 - Today I Learned TIL(Today I Learned) 말 그대로 오늘 무엇을 공부했는지 또는 배웠는지를 적는 것으로 많은 개발자들이 하고 있다고 한다. 역시 개발자에게는 포트폴리오가 필수다. 유명 개발자 블로그를 보면 1000회가 훌쩍 넘는 TIL을 본 적도 있다. 짧게라도 꾸준한 습관을 들여 멋진 시니어 개발자가 되고 싶다. 아래 적는 내용은 그냥 빠르게 주저리주저리 쓰고 내용이 모이면 주제별로 모아 글로 작성해볼 계획이다. 옥소폴리틱스 인턴십 현재 옥소폴리틱스 인턴십 2주 차를 진행하고 있다. 지금 진행 중인 프로젝트는 옥소폴리틱스 홈페이지의 메인 페이지를 React를 이용하여 클론코딩해 보는 것이다. 3명의 팀원들과 협업하며 React와 더불어 Git, Git-hub까지 실전으로 부딪혀가며 공부해가고 있다. PR(.. 공감수 1 댓글수 0 2022. 8. 4.
[React] 일주일만에 리액트 정복하기! (2) React 폼 HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태(state)를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다. -React Document 예를 들어 폼은 특정한 정보를 입력받은 뒤 폼을 제출하면 새로운 페이지로 이동한다. 그러나 대부분의 경우 JavaScript 함수로 제출을 처리하고 폼에 입력된 데이터에 접근하는 것이 편리하다. 이를 위한 표준 방식은 "제어 컴포넌트(Controlled components)"라고 불리는 기술을 이용하는 것이다. 제어 컴포넌트(Controlled Component) , , 와 같은 HTML 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 state와 setState(.. 공감수 1 댓글수 0 2022. 8. 3.
[React] 일주일만에 리액트 정복하기! (1) 나에게는 아주 안 좋은 습관이 있다. 덧셈 뺄셈을 배우던 초등학생 시절부터 거의 병적으로 손으로 필기하기를 싫어했다. 필기가 필수인 대학 수업 때도 PPT 제공 없는 교수님의 수업까지도 필사적으로 필기 없이 공부하기 위해 노력했다. 정말 피치 못해 필기를 해야 할 때에도 단어 위주로, 심지어 단축말... 까지 만들어가며 적어야 하는 양을 최소한으로 줄였다. 십여 년간 쌓아온 나름의 공부 노하우와 이해 방법이 있었기에 공부의 목적이 시험뿐이었던 지금까지는 이 방법이 잘 먹혔으나, 취업 시장에 들어서고 난 후로는 내가 공부한 내용을 남에게 !!!보여줄!!! 방법이 필요함을 절실히 깨닫게 되었다. 특히나 개발 공부를 시작하고 난 뒤로 여기저기서 개발자에게는 블로그와 깃허브가 전부라는 말을 많이 들었기 때문에 .. 공감수 3 댓글수 1 2022. 8. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.