강태풍의 개발블로그

개요 RISC - V 의 ARM 프로세서의 어셈블리 언어를 보고 싶다면 시뮬레이터를 이용하면 됩니다. 사용하기 전에 기초지식과 RARS, VENUS 시뮬레이터에 대해 간단하게 훑고, 시뮬레이션 방법을 설명해드리겠습니다. 또한 간단하게 예제코드를 통해 C언어가 어셈블리 언어(RISC-V ARM)으로 변경되는 결과를 보여드리겠습니다. GUI-based RISC-V 시뮬레이터는 RARS, VENUS가 있다. 본 글에서는 RARS를 사용합니다. RARS : https://github.com/TheThirdOne/rars VENUS : https://venus.cs61c.org RARS의 장점 RV64I Instructions 을 지원하여 내가 짠 코드에서 사용한 ld, sd 등을 인식이 가능하다. 수도 명령어를..

목표 C언어를 CrossCompile하여 RISC-V 언어로 변경할 것 compile 시 binary file 생성, 이후 objdump로 disassemble하여 어셈블리 언어로 변환 앞서 변환한 RISC-V 어셈블리 언어 분석 코드의 실행 순서 C코드와의 다른점과 이유에 대한 서술 예상한 RISC-V ISA와의 차이점 분석 C언어 3. 배경지식 Compile : Translate a code in a highlevel language into machine code High-level language : C, C++ … Machine code : 0101.. (binary) Cross- compile : 호스트(내 PC)와 다른 환경인 타겟 Processor를 위해 호스트환경에서 컴파일 진행 arm6..

최종 완성 애니메이션 1. 만들게 된 계기 Ethreum NFT 프로젝트 진행 중 Sns 링크를 홈페이지 어디에서든 볼 수 있게 유저친화적인 디자인을 구상중 트위터 디자인에서 아이디어를 얻어 위와 같은 Sns 아이콘 링크들의 리스트 꼴의 형태 디자인을 생각 해 내었다. 하지만 아이콘 세개가 화면에 계속 떠있을 경우 화면을 상당히 가리는 문제가 발생하였고, 사용자 측면에서의 편함을 위하여 + , x 모양의 아이콘을 react-icons 라이브러리에서 불러와 +버튼 클릭시 애니메이션과 함께 sns 아이콘들이 나타나고, x버튼 클릭시 sns 아이콘들이 사라지게 되는 형태의 sns bar를 구현하게 되었다. 2. 구현 설계 및 과정 일단 처음엔 컴포넌트의 리턴 부분은 다음과 같이 구현하였다. [opensea.s..

1. fill과 map의 활용 fill 은 다음과 같은 방법으로 사용이 가능하다. 배열에 채우고 싶은 값과, 시작과 끝 인덱스를 넣으면 된다. Array.fill(value, startIndex, endIndex) ary = [1,2,3,4,5,6,7] ary.fill(0,2,4) // ary = [1,2,0,0,5,6,7] 과 같이 0 으로 바뀌게 된다. map은 각 요소들에 대해 연산이나 값의 변화를 일으키기 위해 코드를 간단히 하기 위해 사용하는 내장함수이다. Array.map(function(element, index, array){ }, this); 와 같이 사용할 수 있다. 콜백함수는 각 배열 요소에 대해 호출된다. map 메소드는 현재의 element와 index, 배열 전체array를 저절..

console.log("abc") console.log() 사용시 출력말단에 개행문자가 자동으로 포함되게 된다. process.stdout.write('abc') 이때 대신에 process.stdout.write() 사용시 자동으로 개행문자가 포함되지 않는다. console.log와 process.stdout.write 의 차이는 다음과 같다. Node docs의 console.log에 관한 함수이며 단순히 console.log는 process.stdout.write에 개행문자만 추가한 함수인 것을 확인할 수 있다. 출처: https://jinhyukoo.github.io/js/2020/07/27/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EA%B3..

리스트, 튜플과 같은 자료구조에서는 lst[3] = 'abc' 와 같이 자료형의 인덱스로 직접 수정이 가능하지만, 문자열에서는 string[3] = 'a' 와 같은 방법이 불가능하다. 파이썬에서는 immutable(수정이 불가능함)한 객체와 mutable(수정이 가능함) 한 객체로 나뉜다. immutable한 자료형에는 int, str, float, tuple 등이 있고, mutable한 객체에는 list, dictionary, set 등이 있다. 실제 우리가 int a = 3 다음과 같이 선언이 된다면, a라는 변수는 데이터 3과 연결이 된다. 이는 int b = 3을 선언한 후 print(id(a)), print(id(b))를 컴파일 해보면 a 와 b의 레퍼런스가 같은 것을 알 수 있다. 이런 변경불..

본인은 리액트 타입스크립트를 이용한 프로젝트를 진행하면서 MySQL을 이용한 DB 사용을 위해 React TS와 Express를 이용한 서버, AWS로 구축된 MySQL 로 작성된 DB에 접근하는 생전 처음 겪는 일을 맡게 되었다. 해본거라곤 HTML CSS JS TS React Python C 뿐이었지만 구글링과 구글링, 그리고 구글링을 통해서 서버의 개념과 DB 쿼리문 등에 대해 고민해보고 이것저것 알게 되었다. 참고로 처음 리액트 프로젝트를 사용하는 사람들은 eslint나 prettier 다운받아 설정하여 일관성 있는 코드 작성을 추천하나 본인은 현재 프로젝트에서 사용하는 속성이 있으므로 따로 설치하는 과정은 생략한다. 일단 먼저 리액트 프로젝트를 생성한 후 서버 폴더에 서버 파일을 작성하여 클라이..

1️⃣ 개요 환경은 React와 typescript, styled-components 를 사용했습니다. Styled-Components 는 Props 를 받아서 CSS 속성을 동적으로 변경해줄 수 있습니다. npm install -D styled-components Progress Bar가 위 그림에서 회색 전체 진행바 부분이고, 파란색 부분은 Progress 입니다. 파란색 Progress의 width를 조정하여 왼쪽부터 채우는 원리다. 위 사진에 border-radius를 씌우면 귀염귀염한 진행 바를 확인할 수 있다. import {useEffect, useState, useRef} from "react"; import styled from "styled-components"; interface IT..

하던 프로젝트 중 넣을 애니메이션을 찾는데 원하는 애니메이션이 없어서 직접 만들었다. 본 프로젝트는 React로 제작하였으나, HTML, CSS로 구현가능해서 HTML, CSS 로 제작하였다. 그림 사이즈는 300X300이고 마우스 호버시 원래 이미지는 대각선 아래로, 호버 이미지는 대각선 위에서 등장한다. 사진 2개를 같은 위치로 잡기 위해 parentDiv 안에 position absolute인 div, position relative인 img 태그가 위치해 있다. 보통 이 parentDiv를 복붙하면 position absolute인 div가 마음대로 움직일 경우 있는데 적절하게 위치 수정을 하면 된다. .parentDiv{ width: 300px; height: 300px; position:rel..

본 글은 Youtube 코딩애플님의 강좌를 재구성하였으며, 강의 내용을 정리한 글입니다. https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy 본 내용은 Node 의 설치, VSCode 설치를 가정한다. React JS프로젝트 시작 - Visual Studio Code에서 폴더를 만들어 연다 - 터미널은 Powershell npx create-react-app [프로젝트명] 하고, 필요할 때 y 타이핑하면 리액트 프로젝트에 필요한 파일들을 자동으로 다운받아 준다. 자동으로 다운받아진 파일은 리액트 라이브러리인 node_modules, img파일 등 static 파일을 모아 놓은 폴더인 public 폴더, 우리..

[상황] 리액트 프로젝트 중 package.json 파일에 있는 dependencies을 토대로 yarn install 후 yarn start 시 발생 [에러 로그] yarn install v1.22.19 warning ..\..\..\package.json: No license field [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning "react-hot-toast > goober@2.1.8" has unmet peer dependency "csstype@^3.0.10". warning " > babel-loader@8.1.0" has unmet peer dependency "webpa..

깃허브의 사용에 앞서 Git 을 설치와 깃허브 로그인 되어 있음을 가정한다. 먼저 깃허브에서 사용되는 단어부터 알아보면 커밋 : 파일을 추가하거나 변경내용을 저장소에 저장 푸쉬 : 파일을 추가하거나 변경내용을 원격 저장소에 업로드 여기서 저장소에도 2가지로 나뉜다. 로컬 저장소 : 보통 자신의 컴퓨터 내 저장소 원격 저장소 : 서버 등 네트워크에 올려진 저장소, 여기선 Github내 저장소를 의미 보통 로컬 저장소에서 작업을 수행 후 원격 저장소로 업로드하면서 작업을 마친다. 즉 커밋을 한 후 푸쉬를 한다 브랜치 : 수행하는 프로젝트의 여러 버전을 병렬적인 유지 보수를 위하여 사용 인덱스 : 저장소에 커밋 할 준비를 하기 위해 변경내용을 임시로 저장할 위치 각 파일들을 커밋을 하면 인덱스에 임시 위치하게..